"use client";

/**
 * FormView — the database's FORM-view surface (the ViewRouter's `case "form"`).
 *
 * A FORM view links to a single form via `view.config.formId`. This panel:
 *   - with no form yet → an empty state: "Create form" (POST
 *     /databases/:id/forms) + "choose an existing form" when the database has
 *     any. Creating/choosing links it by PATCHing the view's `config.formId`.
 *   - with a form → a Builder | Responses tab bar + a public-link chip
 *     (/f/<slug>, copy). Builder = <FormBuilderView/>; Responses =
 *     <FormResponsesView/> (TASK-0109).
 *
 * The in-app FORM view IS the workspace experience for forms (the public
 * /f/<slug> page is the separate, auth-less submission surface, TASK-0107).
 */
import { useState } from "react";
import { ClipboardCopy, ClipboardList, Inbox, Plus } from "lucide-react";
import { toast } from "@/stores/ui-store";
import { DatabaseProperty, DatabaseView, RecordDto, useUpdateView } from "@/hooks/use-database";
import { cn } from "@/lib/utils";
import {
  useCreateForm,
  useForm,
  useListForms
} from "@/hooks/use-forms";
import { FormBuilderView } from "@/components/database/form-builder-view";
import { FormResponsesView } from "@/components/form/form-responses-view";

type FormTab = "builder" | "responses";

export interface FormViewProps {
  databaseId: string;
  workspaceId?: string;
  view: DatabaseView;
  properties: DatabaseProperty[];
  readOnly?: boolean;
  onOpenRecord?: (record: RecordDto) => void;
  onOpenRecordPage?: (record: RecordDto) => void;
}

export function FormView({
  databaseId,
  workspaceId,
  view,
  properties,
  readOnly,
  onOpenRecord,
  onOpenRecordPage
}: FormViewProps) {
  const formId = (view.config.formId as string | undefined) ?? undefined;
  const { data: form, isLoading: formLoading } = useForm(formId);

  const [tab, setTab] = useState<FormTab>("builder");
  const [newName, setNewName] = useState("");

  const createForm = useCreateForm(databaseId);
  const updateView = useUpdateView(databaseId);
  const { data: existingForms } = useListForms(databaseId);

  const linkForm = (id: string) =>
    updateView.mutate(
      { viewId: view.id, config: { ...(view.config ?? {}), formId: id } },
      {
        onError: (e) => toast("error", "Could not link the form", (e as Error).message)
      }
    );

  const createAndLink = () => {
    const name = newName.trim();
    if (!name) return;
    createForm.mutate(
      { name },
      {
        onSuccess: (created) => {
          setNewName("");
          linkForm(created.id);
          toast("success", "Form created", `Now editing "${created.name}" — add questions and save to publish.`);
        },
        onError: (e) => toast("error", "Create failed", (e as Error).message)
      }
    );
  };

  const copyLink = async () => {
    if (!form) return;
    const url = `${window.location.origin}/f/${form.slug}`;
    try {
      await navigator.clipboard.writeText(url);
      toast("success", "Public link copied", url);
    } catch {
      toast("error", "Could not copy the link", url);
    }
  };

  // ---- no form yet ----------------------------------------------------------
  if (!formId) {
    return (
      <div className="flex h-full flex-col items-center justify-center gap-3 p-6 text-center">
        <Inbox className="size-8 text-muted-foreground" aria-hidden />
        <p className="text-sm text-muted-foreground">This form view has no linked form yet.</p>
        {!readOnly && (
          <div className="flex flex-col items-center gap-3">
            <div className="flex items-center gap-2">
              <input
                value={newName}
                onChange={(e) => setNewName(e.target.value)}
                onKeyDown={(e) => e.key === "Enter" && createAndLink()}
                placeholder="Form name, e.g. Feedback"
                aria-label="New form name"
                className="w-56 rounded-md border border-input bg-background px-2.5 py-1.5 text-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
              />
              <button
                type="button"
                data-testid="form-view-create"
                className="inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground hover:bg-primary/90 disabled:opacity-40"
                disabled={createForm.isPending || !newName.trim()}
                onClick={createAndLink}
              >
                <Plus className="size-4" aria-hidden /> Create form
              </button>
            </div>
            {existingForms && existingForms.length > 0 && (
              <div className="flex items-center gap-2 text-xs text-muted-foreground">
                <span>or link an existing form:</span>
                <select
                  className="rounded-md border border-input bg-background px-2 py-1 text-xs"
                  value=""
                  aria-label="Choose an existing form"
                  onChange={(e) => e.target.value && linkForm(e.target.value)}
                >
                  <option value="">Choose…</option>
                  {existingForms.map((f) => (
                    <option key={f.id} value={f.id}>
                      {f.name} ({f.status})
                    </option>
                  ))}
                </select>
              </div>
            )}
          </div>
        )}
      </div>
    );
  }

  // ---- form linked: tabs + link chip ---------------------------------------
  return (
    <div className="flex h-full min-h-0 flex-col">
      <div className="flex flex-wrap items-center gap-1 border-b border-border px-2 py-1">
        <TabButton active={tab === "builder"} onClick={() => setTab("builder")} label="Builder" testid="form-view-tab-builder" />
        <TabButton active={tab === "responses"} onClick={() => setTab("responses")} label="Responses" testid="form-view-tab-responses" />
        {form && (
          <div className="ml-auto flex items-center gap-1.5 py-1">
            <span className="inline-flex items-center gap-1 rounded-md bg-muted px-2 py-1 font-mono text-[11px] text-muted-foreground">
              <ClipboardList className="size-3" aria-hidden />
              /f/{form.slug}
            </span>
            <button
              type="button"
              data-testid="form-view-copy-link"
              className="rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
              onClick={copyLink}
              title="Copy public link"
              aria-label="Copy public link"
            >
              <ClipboardCopy className="size-3.5" aria-hidden />
            </button>
          </div>
        )}
      </div>
      <div className={cn("min-h-0 flex-1", tab === "builder" && "overflow-y-auto")}>
        {formLoading || !form ? (
          <div className="flex h-full items-center justify-center p-6 text-sm text-muted-foreground">Loading form…</div>
        ) : tab === "builder" ? (
          <FormBuilderView form={form} properties={properties} databaseId={databaseId} workspaceId={workspaceId} />
        ) : (
          <FormResponsesView
            formId={form.id}
            slug={form.slug}
            databaseId={databaseId}
            onOpenRecord={onOpenRecord}
            onOpenRecordPage={onOpenRecordPage}
          />
        )}
      </div>
    </div>
  );
}

function TabButton({
  active,
  onClick,
  label,
  testid
}: {
  active: boolean;
  onClick: () => void;
  label: string;
  testid: string;
}) {
  return (
    <button
      type="button"
      data-testid={testid}
      className={cn(
        "rounded-md px-3 py-1.5 text-sm transition-colors",
        active ? "bg-muted font-medium text-foreground" : "text-muted-foreground hover:bg-muted/50"
      )}
      aria-pressed={active}
      onClick={onClick}
    >
      {label}
    </button>
  );
}