"use client";

/**
 * FormBuilderView — in-app editor for a form that belongs to a database.
 *
 * The API has NO per-question routes: a form's questions are managed as one
 * ordered array. So this builder keeps a local **draft** (settings + questions,
 * including order) and persists with a single PATCH /forms/:formId — the
 * server rebuilds the questions in the given order (regenerating fractional
 * positions). Add/edit/remove/reorder are all local; "Save form" flushes.
 *
 * Each question maps (optionally) onto a database property so its answer lands
 * on the created record. Question types are UPPERCASE (FormQuestionType).
 * Select options + number/rating bounds live in the question's `validation`.
 */
import { useState } from "react";
import { ArrowDown, ArrowUp, GripVertical, Link2, Plus, Save, Trash2, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { toast } from "@/stores/ui-store";
import { DatabaseProperty } from "@/hooks/use-database";
import {
  FormConfig,
  FormDto,
  FormOption,
  FormQuestionInput,
  FormQuestionType,
  FormStatus,
  FormValidation,
  FORM_QUESTION_TYPES,
  FORM_STATUSES,
  questionOptions,
  useUpdateForm
} from "@/hooks/use-forms";
import { FormField } from "@/components/form/form-field";

/** Toast adapter: call sites use variant:"destructive"; core store uses kind. */
const notify = (t: { title: string; description?: string; variant?: string }) =>
  toast(t.variant === "destructive" ? "error" : "success", t.title, t.description);

const QUESTION_TYPES: { type: FormQuestionType; label: string }[] = FORM_QUESTION_TYPES.map((t) => ({
  type: t,
  label: t.replace(/_/g, " ").toLowerCase().replace(/\b\w/g, (c) => c.toUpperCase())
}));

const inputCls =
  "w-full 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";

export interface FormBuilderViewProps {
  form: FormDto;
  properties: DatabaseProperty[];
  databaseId: string;
  /** Workspace id (PATCH /workspaces/:wid/forms/:id). */
  workspaceId?: string;
}

/** Draft question = input + a client-side key (for React list keys during draft). */
type DraftQuestion = FormQuestionInput & { key: string };

function keyFor(q: { id?: string }) {
  return q.id ?? `dq_${Math.random().toString(36).slice(2, 10)}`;
}

function toInput(q: DraftQuestion): FormQuestionInput {
  return {
    type: q.type,
    label: q.label,
    description: q.description,
    required: q.required,
    propertyId: q.propertyId ?? null,
    validation: q.validation ?? null,
    placeholder: q.placeholder
  };
}

/** Property type (lowercase wire) → compatible question type. */
function defaultTypeFor(propertyType?: string): FormQuestionType {
  switch (propertyType) {
    case "title":
    case "text":
    case "rich_text":
      return "SHORT_TEXT";
    case "number":
      return "NUMBER";
    case "email":
      return "EMAIL";
    case "date":
    case "date_range":
      return "DATE";
    case "checkbox":
      return "CHECKBOX";
    case "select":
    case "status":
      return "SINGLE_SELECT";
    case "multi_select":
      return "MULTI_SELECT";
    case "files":
      return "FILE";
    default:
      return "SHORT_TEXT";
  }
}

function optionsForProperty(prop?: DatabaseProperty): FormOption[] {
  const opts = prop?.config?.options;
  if (!opts || !Array.isArray(opts)) return [];
  return opts.map((o) => ({ id: o.id, name: o.name, color: o.color }));
}

function setSelectOptions(input: FormQuestionInput, options: FormOption[]): FormQuestionInput {
  const validation: FormValidation = { ...(input.validation ?? {}) };
  // The wire contract is a STRING array (the server's validation.options is
  // `string[]` — see use-forms.ts FormValidation). Emit names, not objects.
  const names = options.map((o) => o.name.trim()).filter((n) => n.length > 0);
  if (names.length) validation.options = names;
  else delete validation.options;
  return { ...input, validation: Object.keys(validation).length ? validation : null };
}

export function FormBuilderView({ form, properties, databaseId, workspaceId }: FormBuilderViewProps) {
  // PATCH /forms/:formId is database-scoped (the workspaceId prop is kept for
  // the component's props contract but no longer drives the mutation hook).
  void workspaceId;
  const updateForm = useUpdateForm(databaseId);

  // Local draft (server state lives in TanStack Query; this is the edit buffer).
  const [slug, setSlug] = useState(form.slug);
  const [status, setStatus] = useState<FormStatus>(form.status);
  const [config, setConfig] = useState<FormConfig>({ ...(form.config ?? {}) });
  const [draft, setDraft] = useState<DraftQuestion[]>(
    (form.questions ?? []).map((q) => ({
      key: keyFor(q),
      type: q.type,
      label: q.label,
      description: q.description,
      required: q.required,
      propertyId: q.propertyId ?? null,
      validation: q.validation ?? null,
      placeholder: q.placeholder
    }))
  );
  const [editKey, setEditKey] = useState<string | null>(null);
  const [previewAnswers, setPreviewAnswers] = useState<Record<string, unknown>>({});

  const editing = draft.find((q) => q.key === editKey) ?? null;
  const busy = updateForm.isPending;

  const unmappedProps = properties.filter(
    (p) => !draft.some((q) => q.propertyId === p.id) && p.type !== "button"
  );

  const addQuestion = (propertyId?: string) => {
    const prop = properties.find((p) => p.id === propertyId);
    let input: FormQuestionInput = {
      type: defaultTypeFor(prop?.type),
      label: prop?.name ?? "New question",
      required: false,
      propertyId: propertyId ?? null,
      placeholder: "",
      validation: null
    };
    if (input.type === "SINGLE_SELECT" || input.type === "MULTI_SELECT") {
      input = setSelectOptions(input, optionsForProperty(prop));
    }
    const q: DraftQuestion = { ...input, key: `dq_${Math.random().toString(36).slice(2, 10)}` };
    setDraft((d) => [...d, q]);
    setEditKey(q.key);
  };

  const removeQuestion = (key: string) => {
    setDraft((d) => d.filter((q) => q.key !== key));
    if (editKey === key) setEditKey(null);
  };

  const move = (key: string, dir: -1 | 1) => {
    setDraft((d) => {
      const idx = d.findIndex((q) => q.key === key);
      const j = idx + dir;
      if (idx < 0 || j < 0 || j >= d.length) return d;
      const next = [...d];
      [next[idx], next[j]] = [next[j], next[idx]];
      return next;
    });
  };

  const saveEdit = (input: FormQuestionInput) => {
    setDraft((d) => d.map((q) => (q.key === editKey ? { ...q, ...input } : q)));
    setEditKey(null);
  };

  const saveForm = () => {
    const cfg: FormConfig = {
      ...config,
      intro: config.intro || undefined,
      successMessage: config.successMessage || undefined,
      closedMessage: config.closedMessage || undefined
    };
    updateForm.mutate(
      {
        formId: form.id,
        slug,
        status,
        config: cfg,
        questions: draft.map(toInput)
      },
      {
        onSuccess: () => notify({ title: "Form saved" }),
        onError: (e) => notify({ title: "Save failed", description: (e as Error).message, variant: "destructive" })
      }
    );
  };

  return (
    <div className="grid gap-4 p-4 lg:grid-cols-2">
      {/* left: settings + questions */}
      <div className="space-y-4">
        {/* settings */}
        <section className="rounded-lg border border-border p-3">
          <h3 className="mb-2 text-sm font-medium">Form settings</h3>
          <div className="space-y-2.5">
            <div>
              <label className="mb-1 block text-xs text-muted-foreground">Slug (public URL /f/:slug)</label>
              <div className="flex items-center gap-1">
                <span className="text-xs text-muted-foreground">/f/</span>
                <input className={inputCls} value={slug} onChange={(e) => setSlug(e.target.value)} />
              </div>
            </div>
            <div>
              <label className="mb-1 block text-xs text-muted-foreground">Status</label>
              <select className={inputCls} value={status} onChange={(e) => setStatus(e.target.value as FormStatus)}>
                {FORM_STATUSES.map((s) => (
                  <option key={s} value={s}>
                    {s.replace(/_/g, " ").toLowerCase().replace(/\b\w/g, (c) => c.toUpperCase())}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <label className="mb-1 block text-xs text-muted-foreground">Intro (shown above questions)</label>
              <textarea className={cn(inputCls, "min-h-14 resize-y")} value={config.intro ?? ""} onChange={(e) => setConfig((c) => ({ ...c, intro: e.target.value }))} />
            </div>
            <div>
              <label className="mb-1 block text-xs text-muted-foreground">Success message</label>
              <input className={inputCls} value={config.successMessage ?? ""} onChange={(e) => setConfig((c) => ({ ...c, successMessage: e.target.value }))} />
            </div>
            <div>
              <label className="mb-1 block text-xs text-muted-foreground">Closed message</label>
              <input className={inputCls} value={config.closedMessage ?? ""} onChange={(e) => setConfig((c) => ({ ...c, closedMessage: e.target.value }))} />
            </div>
            <button
              type="button"
              className="inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
              onClick={saveForm}
              disabled={busy || draft.length === 0}
            >
              <Save className="size-3.5" aria-hidden /> Save form
            </button>
          </div>
        </section>

        {/* questions */}
        <section className="rounded-lg border border-border p-3">
          <h3 className="mb-2 text-sm font-medium">Questions</h3>
          <ul className="space-y-1.5">
            {draft.map((q, i) => (
              <li key={q.key} className="flex items-center gap-1.5 rounded-md border border-border px-2 py-1.5 text-sm">
                <GripVertical className="size-4 shrink-0 text-muted-foreground" aria-hidden />
                <button type="button" className="min-w-0 flex-1 truncate text-left hover:underline" onClick={() => setEditKey(q.key)}>
                  {q.label}
                  {q.required && <span className="ml-0.5 text-destructive">*</span>}
                </button>
                <span className="shrink-0 text-[10px] uppercase text-muted-foreground">{q.type}</span>
                {q.propertyId && <Link2 className="size-3.5 shrink-0 text-primary" aria-label="Mapped to a property" />}
                <button type="button" className="rounded p-0.5 text-muted-foreground hover:bg-muted disabled:opacity-30" disabled={i === 0} onClick={() => move(q.key, -1)} aria-label="Move up">
                  <ArrowUp className="size-3.5" />
                </button>
                <button type="button" className="rounded p-0.5 text-muted-foreground hover:bg-muted disabled:opacity-30" disabled={i === draft.length - 1} onClick={() => move(q.key, 1)} aria-label="Move down">
                  <ArrowDown className="size-3.5" />
                </button>
                <button type="button" className="rounded p-0.5 text-destructive hover:bg-destructive/10" onClick={() => removeQuestion(q.key)} aria-label="Delete question">
                  <Trash2 className="size-3.5" />
                </button>
              </li>
            ))}
            {draft.length === 0 && <li className="text-xs text-muted-foreground">No questions yet. Add at least one to save.</li>}
          </ul>

          <div className="mt-2 flex items-center gap-1.5">
            <select
              className="max-w-40 rounded border border-input bg-background px-1.5 py-1 text-xs outline-none"
              value=""
              onChange={(e) => {
                if (e.target.value) addQuestion(e.target.value);
              }}
              aria-label="Map new question to a property"
            >
              <option value="">From a property…</option>
              {unmappedProps.map((p) => (
                <option key={p.id} value={p.id}>
                  {p.name} ({p.type})
                </option>
              ))}
            </select>
            <button
              type="button"
              className="inline-flex items-center gap-1 rounded-md border border-dashed px-2.5 py-1 text-xs text-muted-foreground hover:bg-muted"
              onClick={() => addQuestion()}
            >
              <Plus className="size-3.5" aria-hidden /> Blank question
            </button>
          </div>
        </section>
      </div>

      {/* right: live preview */}
      <div>
        <section className="rounded-lg border border-border">
          <h3 className="border-b border-border px-3 py-2 text-sm font-medium">Live preview</h3>
          <div className="max-h-[70vh] overflow-y-auto p-4">
            {config.intro && <p className="mb-4 text-sm text-muted-foreground">{config.intro}</p>}
            <div className="space-y-4">
              {draft.map((q) => (
                <FormField
                  key={q.key}
                  question={{ ...q, id: q.key, position: "" }}
                  value={previewAnswers[q.key]}
                  onChange={(v) => setPreviewAnswers((a) => ({ ...a, [q.key]: v }))}
                />
              ))}
              {draft.length === 0 && <p className="text-sm text-muted-foreground">Add questions to see the form.</p>}
            </div>
          </div>
        </section>
      </div>

      {/* edit drawer */}
      {editing && (
        <QuestionEditor
          question={editing}
          properties={properties}
          onClose={() => setEditKey(null)}
          onSave={saveEdit}
          busy={busy}
        />
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Question edit drawer (edits the local draft; Save applies to the draft)
// ---------------------------------------------------------------------------

function QuestionEditor({
  question: q,
  properties,
  onClose,
  onSave,
  busy
}: {
  question: DraftQuestion;
  properties: DatabaseProperty[];
  onClose: () => void;
  onSave: (input: FormQuestionInput) => void;
  busy: boolean;
}) {
  const [label, setLabel] = useState(q.label);
  const [type, setType] = useState<FormQuestionType>(q.type);
  const [required, setRequired] = useState(q.required);
  const [placeholder, setPlaceholder] = useState(q.placeholder ?? "");
  const [propertyId, setPropertyId] = useState(q.propertyId ?? "");
  const [options, setOptions] = useState<FormOption[]>(questionOptions({ validation: q.validation }));

  const isSelect = type === "SINGLE_SELECT" || type === "MULTI_SELECT";

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" role="dialog" aria-modal="true" aria-label="Edit question">
      <div className="flex max-h-[85vh] w-full max-w-md flex-col overflow-hidden rounded-lg border bg-background shadow-xl">
        <div className="flex items-center gap-2 border-b border-border px-4 py-2.5">
          <span className="text-sm font-medium">Edit question</span>
          <button type="button" className="ml-auto rounded p-1 text-muted-foreground hover:bg-muted" onClick={onClose} aria-label="Close">
            <X className="size-4" />
          </button>
        </div>

        <div className="min-h-0 flex-1 space-y-3 overflow-y-auto p-4">
          <div>
            <label className="mb-1 block text-xs text-muted-foreground">Label</label>
            <input className={inputCls} value={label} onChange={(e) => setLabel(e.target.value)} />
          </div>
          <div>
            <label className="mb-1 block text-xs text-muted-foreground">Type</label>
            <select className={inputCls} value={type} onChange={(e) => setType(e.target.value as FormQuestionType)}>
              {QUESTION_TYPES.map((t) => (
                <option key={t.type} value={t.type}>
                  {t.label}
                </option>
              ))}
            </select>
          </div>
          <div>
            <label className="mb-1 block text-xs text-muted-foreground">Map to property (optional)</label>
            <select className={inputCls} value={propertyId} onChange={(e) => setPropertyId(e.target.value)}>
              <option value="">Not mapped (stored on the form only)</option>
              {properties.map((p) => (
                <option key={p.id} value={p.id}>
                  {p.name} ({p.type})
                </option>
              ))}
            </select>
          </div>
          <div>
            <label className="mb-1 block text-xs text-muted-foreground">Placeholder</label>
            <input className={inputCls} value={placeholder} onChange={(e) => setPlaceholder(e.target.value)} />
          </div>
          {isSelect && (
            <div>
              <label className="mb-1 block text-xs text-muted-foreground">Options</label>
              <div className="space-y-1">
                {options.map((o, i) => (
                  <div key={o.id ?? i} className="flex items-center gap-1.5">
                    <input
                      className={cn(inputCls, "flex-1")}
                      value={o.name}
                      onChange={(e) => setOptions((list) => list.map((x, j) => (j === i ? { ...x, name: e.target.value } : x)))}
                    />
                    <button
                      type="button"
                      className="rounded p-1 text-muted-foreground hover:bg-muted"
                      onClick={() => setOptions((list) => list.filter((_, j) => j !== i))}
                      aria-label="Remove option"
                    >
                      <X className="size-3.5" />
                    </button>
                  </div>
                ))}
                <button
                  type="button"
                  className="inline-flex items-center gap-1 text-xs text-primary hover:underline"
                  onClick={() => setOptions((o) => [...o, { name: "" }])}
                >
                  <Plus className="size-3" /> Add option
                </button>
              </div>
            </div>
          )}
          <label className="flex items-center gap-2 text-sm">
            <input type="checkbox" className="size-3.5 accent-[oklch(var(--primary))]" checked={required} onChange={(e) => setRequired(e.target.checked)} />
            Required
          </label>
        </div>

        <div className="flex items-center justify-end gap-2 border-t border-border px-4 py-2.5">
          <button type="button" className="rounded-md border px-3 py-1.5 text-sm hover:bg-muted" onClick={onClose}>
            Cancel
          </button>
          <button
            type="button"
            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={busy || !label.trim()}
            onClick={() => {
              let input: FormQuestionInput = {
                type,
                label: label.trim(),
                required,
                placeholder: placeholder || undefined,
                propertyId: propertyId || null,
                validation: q.validation ?? null
              };
              if (isSelect) input = setSelectOptions(input, options);
              else if (q.validation) input = { ...input, validation: { ...q.validation, options: undefined } };
              onSave(input);
            }}
          >
            <Save className="size-3.5" aria-hidden /> Save
          </button>
        </div>
      </div>
    </div>
  );
}