"use client";

/**
 * PropertyEditor — dialog for creating / editing / deleting a database
 * property (docs/api/databases.md §3.4).
 *
 *  - "add": pick a type + name, set the type-specific config, create.
 *  - "edit": rename, tweak config (options, number format, date time,
 *    relation target, rollup aggregate, formula expression, files limit…),
 *    toggle visibility/required, delete.
 *
 * Config is per-type (PropertyConfig). Relation/rollup targets need the
 * workspace's other databases — pass `workspaceId` (from the DatabaseDto)
 * to enable that picker; it degrades gracefully without it.
 */
import { useMemo, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { Loader2, Plus, Save, Trash2, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { apiFetch } from "@/lib/api";
import { toast } from "@/stores/ui-store";

/** 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);
import {
  DatabaseDto,
  DatabaseProperty,
  PropertyConfig,
  useCreateProperty,
  useDeleteProperty,
  useUpdateProperty
} from "@/hooks/use-database";
import { FormulaEditor } from "@/components/database/formula-editor";

const TYPE_META: { type: string; label: string; icon: string; desc: string }[] = [
  { type: "title", label: "Title", icon: "T", desc: "Main label (one per database)" },
  { type: "text", label: "Text", icon: "A", desc: "Plain text" },
  { type: "rich_text", label: "Rich text", icon: "¶", desc: "Formatted text with links" },
  { type: "number", label: "Number", icon: "#", desc: "Numeric values" },
  { type: "select", label: "Select", icon: "◉", desc: "Single choice from options" },
  { type: "multi_select", label: "Multi-select", icon: "◌", desc: "Multiple choices" },
  { type: "status", label: "Status", icon: "●", desc: "Progress status with colors" },
  { type: "date", label: "Date", icon: "📅", desc: "Single date" },
  { type: "date_range", label: "Date range", icon: "🗓", desc: "Start and end date" },
  { type: "person", label: "Person", icon: "👤", desc: "Workspace member" },
  { type: "email", label: "Email", icon: "@", desc: "E-mail address" },
  { type: "phone", label: "Phone", icon: "✆", desc: "Phone number" },
  { type: "url", label: "URL", icon: "🔗", desc: "Web link" },
  { type: "checkbox", label: "Checkbox", icon: "☑", desc: "Yes / no" },
  { type: "files", label: "Files", icon: "📎", desc: "Attached files" },
  { type: "created_time", label: "Created time", icon: "🕐", desc: "Auto, set on creation" },
  { type: "created_by", label: "Created by", icon: "👤", desc: "Auto, creator" },
  { type: "last_edited_time", label: "Last edited", icon: "🕓", desc: "Auto, last edit" },
  { type: "last_edited_by", label: "Edited by", icon: "👤", desc: "Auto, last editor" },
  { type: "relation", label: "Relation", icon: "↔", desc: "Link to other records" },
  { type: "rollup", label: "Rollup", icon: "Σ", desc: "Aggregate from relation" },
  { type: "formula", label: "Formula", icon: "ƒ", desc: "Computed expression" },
  { type: "button", label: "Button", icon: "⚡", desc: "Action button" },
  { type: "unique_id", label: "Unique ID", icon: "ID", desc: "Auto, unique identifier" }
];

export const OPTION_COLORS = [
  "gray",
  "brown",
  "orange",
  "yellow",
  "green",
  "blue",
  "purple",
  "pink",
  "red",
  "default"
] as const;

const colorDot: Record<string, string> = {
  gray: "#80848f",
  brown: "#9f6b53",
  orange: "#d9730d",
  yellow: "#cb912f",
  green: "#448361",
  blue: "#337ea9",
  purple: "#9065b0",
  pink: "#c14c8a",
  red: "#d44c47",
  default: "#80848f"
};

export interface PropertyEditorProps {
  databaseId: string;
  properties: DatabaseProperty[];
  /** When set (edit mode) — the property being edited. */
  property?: DatabaseProperty;
  mode: "add" | "edit";
  /** Enables the relation-target picker (from DatabaseDto.workspaceId). */
  workspaceId?: string;
  onClose: () => void;
}

interface OptionDraft {
  id: string;
  name: string;
  color: string;
}

export function PropertyEditor({ databaseId, properties, property, mode, workspaceId, onClose }: PropertyEditorProps) {
  const createProperty = useCreateProperty(databaseId);
  const updateProperty = useUpdateProperty(databaseId);
  const deleteProperty = useDeleteProperty(databaseId);

  // Must be declared BEFORE the useState initializers below — a `const` read
  // in its temporal dead zone throws `ReferenceError: Cannot access 'cfg'
  // before initialization` on the FIRST render, which (with no error
  // boundary) unmounts the whole app tree when the dialog opens (verified in
  // the Phase-15 E2E: clicking "Add property" blanked the page).
  const cfg = property?.config;

  const [type, setType] = useState(property?.type ?? (mode === "add" ? "text" : "text"));
  const [name, setName] = useState(property?.name ?? "");
  const [options, setOptions] = useState<OptionDraft[]>(() => {
    const existing = (property?.config.options ?? []) as OptionDraft[];
    if (existing.length) return existing;
    if (mode === "add" && (type === "select" || type === "multi_select" || type === "status")) {
      return [{ id: `opt_${Math.random().toString(36).slice(2, 10)}`, name: "Option 1", color: "default" }];
    }
    return [];
  });
  const [confirmDelete, setConfirmDelete] = useState(false);
  const [formulaOpen, setFormulaOpen] = useState(false);
  // Number-format config held locally (applied on save; avoids PATCHing a
  // property that does not exist yet in add mode).
  const [numFormat, setNumFormat] = useState<PropertyConfig["format"]>(cfg?.format ?? "number");
  const [numCurrency, setNumCurrency] = useState<string>(typeof cfg?.currency === "string" ? cfg.currency : "USD");
  const [numPrecision, setNumPrecision] = useState<number>(cfg?.precision ?? 2);
  const [includeTime, setIncludeTime] = useState<boolean>(cfg?.includeTime ?? false);
  const [targetDatabaseId, setTargetDatabaseId] = useState<string>(cfg?.targetDatabaseId ?? "");
  const [cardinality, setCardinality] = useState<PropertyConfig["cardinality"]>(cfg?.cardinality ?? "many_to_many");
  const [bidirectional, setBidirectional] = useState<boolean>(cfg?.bidirectional ?? true);
  const [rollupProp, setRollupProp] = useState<string>(cfg?.targetPropertyId ?? "");
  const [rollupAggregate, setRollupAggregate] = useState<PropertyConfig["aggregate"]>(cfg?.aggregate ?? "COUNT");
  const [maxFiles, setMaxFiles] = useState<number>(cfg?.maxFiles ?? 5);
  const [checkboxDefault, setCheckboxDefault] = useState<boolean>(cfg?.default === true);

  const isSelectLike = type === "select" || type === "multi_select" || type === "status";
  const isNumber = type === "number";
  const isDate = type === "date" || type === "date_range";
  const isRelation = type === "relation";
  const isRollup = type === "rollup";
  const isFormula = type === "formula";
  const isFiles = type === "files";

  // Other databases in the workspace (relation targets).
  const otherDatabases = useQuery({
    queryKey: ["databases-by-workspace", workspaceId],
    enabled: !!workspaceId && (isRelation || isRollup),
    queryFn: async () => {
      const res = await apiFetch(`/databases?workspaceId=${workspaceId}`);
      const d = res as { data?: DatabaseDto[] } | DatabaseDto[];
      return Array.isArray(d) ? d : (d.data ?? []);
    }
  });

  const relationProps = properties.filter((p) => p.type === "relation" && p.id !== property?.id);

  const busy = createProperty.isPending || updateProperty.isPending || deleteProperty.isPending;

  const buildConfig = (): PropertyConfig => {
    const c: PropertyConfig = { ...(cfg ?? {}) };
    // Carry only the keys relevant to the (possibly changed) type.
    const keep: Record<string, unknown> = {};
    if (isSelectLike) keep.options = options;
    if (isNumber) {
      keep.format = numFormat;
      if (numFormat === "currency") keep.currency = numCurrency;
      keep.precision = numPrecision;
    }
    if (isDate) keep.includeTime = includeTime;
    if (isRelation) {
      keep.targetDatabaseId = targetDatabaseId || undefined;
      keep.cardinality = cardinality;
      keep.bidirectional = bidirectional;
      keep.reverseName = cfg?.reverseName;
    }
    if (isRollup) {
      keep.targetPropertyId = rollupProp || undefined;
      keep.aggregate = rollupAggregate;
    }
    if (isFormula) keep.expression = cfg?.expression ?? "";
    if (isFiles) keep.maxFiles = maxFiles;
    if (type === "text") keep.maxLines = cfg?.maxLines ?? null;
    if (type === "checkbox") keep.default = checkboxDefault;
    return keep;
  };

  const save = () => {
    if (!name.trim()) {
      notify({ title: "Name is required", variant: "destructive" });
      return;
    }
    const payload = { name: name.trim(), config: buildConfig() };
    if (mode === "edit" && property) {
      updateProperty.mutate(
        { propertyId: property.id, ...payload },
        {
          onSuccess: () => onClose(),
          onError: (e) => notify({ title: "Save failed", description: (e as Error).message, variant: "destructive" })
        }
      );
    } else {
      createProperty.mutate(
        { ...payload, type, isVisible: true, required: false, default: null },
        {
          onSuccess: () => onClose(),
          onError: (e) => notify({ title: "Create failed", description: (e as Error).message, variant: "destructive" })
        }
      );
    }
  };

  // ---- option helpers ---------------------------------------------------------
  const addOption = () => {
    setOptions((o) => [...o, { id: `opt_${Math.random().toString(36).slice(2, 10)}`, name: "", color: "default" }]);
  };
  const setOption = (id: string, patch: Partial<OptionDraft>) =>
    setOptions((o) => o.map((x) => (x.id === id ? { ...x, ...patch } : x)));

  const typeDisabled = mode === "edit";

  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="Property editor">
      <div className="flex max-h-[85vh] w-full max-w-lg flex-col overflow-hidden rounded-lg border bg-background shadow-xl">
        {/* header */}
        <div className="flex items-center gap-2 border-b border-border px-4 py-2.5">
          <span className="text-sm font-medium">{mode === "add" ? "Add a property" : "Edit property"}</span>
          {mode === "edit" && (
            <button
              type="button"
              className="ml-auto inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-destructive hover:bg-destructive/10"
              onClick={() => setConfirmDelete(true)}
            >
              <Trash2 className="size-3.5" /> Delete
            </button>
          )}
          <button type="button" className={cn("rounded p-1 text-muted-foreground hover:bg-muted", mode !== "edit" && "ml-auto")} 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">
          {/* type picker */}
          <div>
            <label className="mb-1 block text-xs text-muted-foreground">Type</label>
            {typeDisabled ? (
              <p className="rounded-md border border-border bg-muted/40 px-2.5 py-1.5 text-sm">
                {TYPE_META.find((t) => t.type === type)?.icon} {TYPE_META.find((t) => t.type === type)?.label}
              </p>
            ) : (
              <div className="grid grid-cols-4 gap-1">
                {TYPE_META.map((t) => {
                  const taken = t.type === "title" && properties.some((p) => p.type === "title");
                  return (
                    <button
                      key={t.type}
                      type="button"
                      disabled={taken}
                      title={taken ? "Database already has a title" : t.desc}
                      className={cn(
                        "flex items-center gap-1.5 rounded-md border px-2 py-1.5 text-left text-xs hover:bg-muted",
                        type === t.type && "border-primary bg-primary/10 text-primary",
                        taken && "cursor-not-allowed opacity-40"
                      )}
                      onClick={() => setType(t.type)}
                    >
                      <span className="w-4 text-center" aria-hidden>
                        {t.icon}
                      </span>
                      <span className="truncate">{t.label}</span>
                    </button>
                  );
                })}
              </div>
            )}
          </div>

          {/* name */}
          <div>
            <label className="mb-1 block text-xs text-muted-foreground">Name</label>
            <input
              className="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"
              placeholder="e.g. Priority"
              value={name}
              onChange={(e) => setName(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && save()}
            />
          </div>

          {/* select-like options */}
          {isSelectLike && (
            <div>
              <div className="mb-1 flex items-center justify-between">
                <span className="text-xs text-muted-foreground">Options</span>
                <button type="button" className="inline-flex items-center gap-0.5 text-xs text-primary hover:underline" onClick={addOption}>
                  <Plus className="size-3" /> Add option
                </button>
              </div>
              <ul className="space-y-1">
                {options.map((o) => (
                  <li key={o.id} className="flex items-center gap-1.5">
                    <span
                      className="size-3 shrink-0 cursor-pointer rounded-full border border-border"
                      style={{ backgroundColor: colorDot[o.color] }}
                      title={`Color: ${o.color}`}
                      onClick={() => setOption(o.id, { color: OPTION_COLORS[(OPTION_COLORS.indexOf(o.color as (typeof OPTION_COLORS)[number]) + 1) % OPTION_COLORS.length] })}
                      role="button"
                      aria-label={`Option color: ${o.color}`}
                    />
                    <input
                      className="min-w-0 flex-1 rounded border border-input bg-background px-2 py-1 text-xs outline-none focus-visible:ring-1 focus-visible:ring-ring"
                      value={o.name}
                      placeholder="Option name"
                      onChange={(e) => setOption(o.id, { name: e.target.value })}
                    />
                    <button
                      type="button"
                      className="rounded p-0.5 text-muted-foreground hover:bg-muted"
                      onClick={() => setOptions((list) => list.filter((x) => x.id !== o.id))}
                      aria-label="Remove option"
                    >
                      <X className="size-3.5" />
                    </button>
                  </li>
                ))}
                {options.length === 0 && <li className="text-xs text-muted-foreground">No options yet.</li>}
              </ul>
            </div>
          )}

          {/* number config */}
          {isNumber && (
            <div className="flex items-center gap-2">
              <div>
                <label className="mb-1 block text-xs text-muted-foreground">Format</label>
                <select
                  className="rounded-md border border-input bg-background px-2 py-1 text-sm outline-none"
                  value={numFormat}
                  onChange={(e) => setNumFormat(e.target.value as PropertyConfig["format"])}
                >
                  {["number", "decimal", "currency", "percent", "scientific"].map((f) => (
                    <option key={f} value={f}>
                      {f}
                    </option>
                  ))}
                </select>
              </div>
              {numFormat === "currency" && (
                <div>
                  <label className="mb-1 block text-xs text-muted-foreground">Currency</label>
                  <input
                    className="w-20 rounded-md border border-input bg-background px-2 py-1 text-sm outline-none"
                    value={numCurrency}
                    onChange={(e) => setNumCurrency(e.target.value)}
                  />
                </div>
              )}
              <div>
                <label className="mb-1 block text-xs text-muted-foreground">Precision</label>
                <input
                  type="number"
                  min={0}
                  max={8}
                  className="w-20 rounded-md border border-input bg-background px-2 py-1 text-sm outline-none"
                  value={numPrecision}
                  onChange={(e) => setNumPrecision(Math.max(0, Math.min(8, Number(e.target.value) || 0)))}
                />
              </div>
            </div>
          )}

          {/* date config */}
          {isDate && (
            <label className="flex items-center gap-2 text-sm">
              <input
                type="checkbox"
                className="size-3.5 accent-[oklch(var(--primary))]"
                checked={includeTime}
                onChange={(e) => setIncludeTime(e.target.checked)}
              />
              Include time
            </label>
          )}

          {/* relation config */}
          {isRelation && (
            <div className="space-y-2">
              <div>
                <label className="mb-1 block text-xs text-muted-foreground">Link to database</label>
                <select
                  className="w-full rounded-md border border-input bg-background px-2 py-1.5 text-sm outline-none"
                  value={targetDatabaseId}
                  onChange={(e) => setTargetDatabaseId(e.target.value)}
                >
                  <option value="">
                    {otherDatabases.isLoading ? "Loading…" : otherDatabases.error ? "Databases unavailable" : "Select a database…"}
                  </option>
                  {(otherDatabases.data ?? [])
                    .filter((d) => d.id !== databaseId)
                    .map((d) => (
                      <option key={d.id} value={d.id}>
                        {d.icon ? `${d.icon} ` : ""}
                        {d.title}
                      </option>
                    ))}
                </select>
              </div>
              <div className="flex items-center gap-4">
                <div>
                  <label className="mb-1 block text-xs text-muted-foreground">Cardinality</label>
                  <select
                    className="rounded-md border border-input bg-background px-2 py-1 text-sm outline-none"
                    value={cardinality}
                    onChange={(e) => setCardinality(e.target.value as PropertyConfig["cardinality"])}
                  >
                    {["one_to_one", "one_to_many", "many_to_many"].map((c) => (
                      <option key={c} value={c}>
                        {c}
                      </option>
                    ))}
                  </select>
                </div>
                <label className="mt-4 flex items-center gap-2 text-sm">
                  <input
                    type="checkbox"
                    className="size-3.5 accent-[oklch(var(--primary))]"
                    checked={bidirectional}
                    onChange={(e) => setBidirectional(e.target.checked)}
                  />
                  Reverse relation
                </label>
              </div>
            </div>
          )}

          {/* rollup config */}
          {isRollup && (
            <div className="space-y-2">
              <div>
                <label className="mb-1 block text-xs text-muted-foreground">Relation</label>
                <select
                  className="w-full rounded-md border border-input bg-background px-2 py-1.5 text-sm outline-none"
                  value={rollupProp}
                  onChange={(e) => setRollupProp(e.target.value)}
                >
                  <option value="">Select a relation…</option>
                  {relationProps.map((r) => (
                    <option key={r.id} value={r.id}>
                      {r.name}
                    </option>
                  ))}
                </select>
              </div>
              <div>
                <label className="mb-1 block text-xs text-muted-foreground">Aggregate</label>
                <select
                  className="w-full rounded-md border border-input bg-background px-2 py-1.5 text-sm outline-none"
                  value={rollupAggregate}
                  onChange={(e) => setRollupAggregate(e.target.value as PropertyConfig["aggregate"])}
                >
                  {["COUNT", "SUM", "AVERAGE", "MIN", "MAX", "PERCENT", "UNIQUE"].map((a) => (
                    <option key={a} value={a}>
                      {a}
                    </option>
                  ))}
                </select>
              </div>
            </div>
          )}

          {/* formula config */}
          {isFormula && (
            <div className="space-y-1.5">
              <label className="block text-xs text-muted-foreground">Expression</label>
              <div className="flex items-center gap-2">
                <code className="min-w-0 flex-1 truncate rounded-md border border-input bg-muted/40 px-2 py-1.5 text-xs">
                  {cfg?.expression || "—"}
                </code>
                <button
                  type="button"
                  className="rounded-md border px-2.5 py-1 text-xs hover:bg-muted"
                  onClick={() => setFormulaOpen(true)}
                >
                  Edit
                </button>
              </div>
            </div>
          )}

          {/* files config */}
          {isFiles && (
            <div>
              <label className="mb-1 block text-xs text-muted-foreground">Max files</label>
              <input
                type="number"
                min={1}
                className="w-24 rounded-md border border-input bg-background px-2 py-1 text-sm outline-none"
                value={maxFiles}
                onChange={(e) => setMaxFiles(Math.max(1, Number(e.target.value) || 1))}
              />
            </div>
          )}

          {/* checkbox config */}
          {type === "checkbox" && (
            <label className="flex items-center gap-2 text-sm">
              <input
                type="checkbox"
                className="size-3.5 accent-[oklch(var(--primary))]"
                checked={checkboxDefault}
                onChange={(e) => setCheckboxDefault(e.target.checked)}
              />
              Checked by default
            </label>
          )}

          {/* edit-only toggles */}
          {mode === "edit" && property && (
            <div className="flex items-center gap-4 border-t border-border pt-3">
              <label className="flex items-center gap-2 text-sm">
                <input
                  type="checkbox"
                  className="size-3.5 accent-[oklch(var(--primary))]"
                  checked={property.isVisible}
                  onChange={(e) => updateProperty.mutate({ propertyId: property.id, isVisible: e.target.checked })}
                />
                Visible in views
              </label>
              <label className="flex items-center gap-2 text-sm">
                <input
                  type="checkbox"
                  className="size-3.5 accent-[oklch(var(--primary))]"
                  checked={property.required}
                  onChange={(e) => updateProperty.mutate({ propertyId: property.id, required: e.target.checked })}
                />
                Required
              </label>
            </div>
          )}
        </div>

        {/* footer */}
        <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"
            onClick={save}
            disabled={busy || !name.trim()}
          >
            {busy && <Loader2 className="size-3.5 animate-spin" />}
            <Save className="size-3.5" />
            {mode === "add" ? "Add property" : "Save"}
          </button>
        </div>
      </div>

      {/* delete confirm */}
      {confirmDelete && property && (
        <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 p-4">
          <div className="w-full max-w-sm rounded-lg border bg-background p-4 shadow-lg">
            <h3 className="text-sm font-medium">Delete “{property.name}”?</h3>
            <p className="mt-1 text-xs text-muted-foreground">
              All values in this property are removed from every record. This cannot be undone.
            </p>
            <div className="mt-3 flex justify-end gap-2">
              <button type="button" className="rounded border px-3 py-1 text-sm hover:bg-muted" onClick={() => setConfirmDelete(false)}>
                Cancel
              </button>
              <button
                type="button"
                className="rounded bg-destructive px-3 py-1 text-sm text-destructive-foreground hover:bg-destructive/90 disabled:opacity-40"
                disabled={deleteProperty.isPending}
                onClick={() => {
                  deleteProperty.mutate(property.id, {
                    onSuccess: () => {
                      notify({ title: "Property deleted" });
                      onClose();
                    },
                    onError: (e) => notify({ title: "Delete failed", description: (e as Error).message, variant: "destructive" })
                  });
                }}
              >
                {deleteProperty.isPending ? <Loader2 className="size-3.5 animate-spin" /> : "Delete"}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* formula editor (nested) */}
      {formulaOpen && property && (
        <FormulaEditor
          databaseId={databaseId}
          property={property}
          initialExpression={cfg?.expression ?? ""}
          sampleRecordIds={[]}
          onClose={() => setFormulaOpen(false)}
          onSaved={() => {
            setFormulaOpen(false);
            onClose();
          }}
        />
      )}
    </div>
  );
}