"use client";

/**
 * ButtonsPanel — database action buttons (PRODUCT-SPEC: "buttons" property
 * type / DatabaseButtonDef).
 *
 *  - <DatabaseButtons/>: renders the view's `config.buttons` row and executes
 *    each action on the current record / selection:
 *      update   → PATCH the target property (selected records, else the
 *                 current record);
 *      create   → POST a new record from the template;
 *      navigate → open a page/url;
 *      formula  → run a formula (deferred to the formula engine, shown as a
 *                 placeholder action in this phase).
 *  - <ButtonsEditor/>: dialog to add/remove/rename/reorder buttons and pick
 *    their action + target property/value.
 *
 * Buttons live on the *view* config, so saving patches the view.
 */
import { useState } from "react";
import { useRouter } from "next/navigation";
import { ArrowDown, ArrowUp, Loader2, Play, Plus, Save, Trash2, X, Zap } from "lucide-react";
import { cn } from "@/lib/utils";
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 {
  DatabaseButtonDef,
  DatabaseProperty,
  DatabaseView,
  RecordDto,
  RecordValue,
  useCreateRecord,
  useUpdateRecord,
  useUpdateView
} from "@/hooks/use-database";

// ---------------------------------------------------------------------------
// ButtonsBar (display + run)
// ---------------------------------------------------------------------------

export interface DatabaseButtonsProps {
  databaseId: string;
  view: DatabaseView;
  properties: DatabaseProperty[];
  /** The record currently focused (record panel open), if any. */
  record?: RecordDto | null;
  /** Records selected in the active view. */
  selected?: RecordDto[];
  onOpenEditor: () => void;
}

export function DatabaseButtons({
  databaseId,
  view,
  properties,
  record,
  selected = [],
  onOpenEditor
}: DatabaseButtonsProps) {
  const router = useRouter();
  const updateRecord = useUpdateRecord(databaseId);
  const createRecord = useCreateRecord(databaseId);

  const buttons: DatabaseButtonDef[] = (view.config.buttons ?? []) as DatabaseButtonDef[];

  const execute = (button: DatabaseButtonDef) => {
    if (button.prompt) {
      const ok = window.confirm(button.prompt);
      if (!ok) return;
    }
    switch (button.action.type) {
      case "navigate":
        if (button.action.pageId) router.push(`/p/${button.action.pageId}`);
        else if (button.action.url) window.open(button.action.url, "_blank", "noopener,noreferrer");
        return;
      case "create": {
        createRecord.mutate(
          { properties: { ...(button.action.template ?? {}) } },
          {
            onSuccess: () => notify({ title: "Record created" }),
            onError: (e) => notify({ title: "Create failed", description: (e as Error).message, variant: "destructive" })
          }
        );
        return;
      }
      case "update": {
        const propId = button.action.propertyId;
        const value: RecordValue = button.action.value;
        const targets = selected.length ? selected : record ? [record] : [];
        if (targets.length === 0) {
          notify({ title: "No record selected", description: "Select a row or open a record first.", variant: "destructive" });
          return;
        }
        targets.forEach((r) =>
          updateRecord.mutate({ recordId: r.id, version: r.version, properties: { [propId]: value } })
        );
        notify({ title: `Updated ${targets.length} record(s)` });
        return;
      }
      case "formula":
        notify({ title: "Formula buttons arrive in a later phase" });
        return;
    }
  };

  if (buttons.length === 0) return null;

  return (
    <div className="flex flex-wrap items-center gap-1.5">
      {buttons.map((b, i) => (
        <button
          key={b.id ?? `${b.name}-${i}`}
          type="button"
          className="inline-flex items-center gap-1 rounded-md border border-primary/30 bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary hover:bg-primary/20 disabled:opacity-50"
          onClick={() => execute(b)}
          disabled={updateRecord.isPending}
          title={b.prompt ? `${b.name} (asks before running)` : b.name}
        >
          {b.icon ?? <Zap className="size-3.5" aria-hidden />}
          {b.name}
        </button>
      ))}
      <button type="button" className="rounded p-1 text-muted-foreground hover:bg-muted" onClick={onOpenEditor} title="Edit buttons" aria-label="Edit buttons">
        <Play className="size-3.5" />
      </button>
    </div>
  );
}

// ---------------------------------------------------------------------------
// ButtonsEditor
// ---------------------------------------------------------------------------

export interface ButtonsEditorProps {
  databaseId: string;
  view: DatabaseView;
  properties: DatabaseProperty[];
  onClose: () => void;
}

interface DraftButton {
  name: string;
  icon?: string;
  prompt?: string;
  actionType: DatabaseButtonDef["action"]["type"];
  propertyId?: string;
  valueText?: string;
}

export function ButtonsEditor({ databaseId, view, properties, onClose }: ButtonsEditorProps) {
  const updateView = useUpdateView(databaseId);
  const [drafts, setDrafts] = useState<DraftButton[]>(() =>
    ((view.config.buttons ?? []) as DatabaseButtonDef[]).map((b) => ({
      name: b.name,
      icon: b.icon,
      prompt: b.prompt,
      actionType: b.action.type,
      propertyId: b.action.type === "update" ? b.action.propertyId : undefined
    }))
  );
  const [error, setError] = useState<string | null>(null);

  const setDraft = (i: number, patch: Partial<DraftButton>) =>
    setDrafts((d) => d.map((x, idx) => (idx === i ? { ...x, ...patch } : x)));
  const remove = (i: number) => setDrafts((d) => d.filter((_, idx) => idx !== i));
  const move = (i: number, dir: -1 | 1) =>
    setDrafts((d) => {
      const j = i + dir;
      if (j < 0 || j >= d.length) return d;
      const copy = [...d];
      [copy[i], copy[j]] = [copy[j], copy[i]];
      return copy;
    });

  const settable = properties.filter((p) => p.type !== "button" && p.type !== "created_time" && p.type !== "created_by" && p.type !== "last_edited_time" && p.type !== "last_edited_by" && p.type !== "unique_id");

  const save = () => {
    const buttons: DatabaseButtonDef[] = drafts.map((d, i) => {
      const base: DatabaseButtonDef = { name: d.name || `Button ${i + 1}`, icon: d.icon, prompt: d.prompt || undefined, action: { type: "formula" } };
      switch (d.actionType) {
        case "update":
          base.action = { type: "update", propertyId: d.propertyId ?? settable[0]?.id ?? "", value: parseValue(settable.find((p) => p.id === d.propertyId), d.valueText ?? "") };
          break;
        case "create":
          base.action = { type: "create", template: {} };
          break;
        case "navigate":
          base.action = { type: "navigate" };
          break;
        case "formula":
        default:
          base.action = { type: "formula" };
          break;
      }
      return base;
    });
    updateView.mutate(
      { viewId: view.id, config: { ...view.config, buttons } },
      {
        onSuccess: () => {
          notify({ title: "Buttons saved" });
          onClose();
        },
        onError: (e) => setError((e as Error).message)
      }
    );
  };

  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="Button editor">
      <div className="flex max-h-[85vh] w-full max-w-lg 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">Buttons</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-2 overflow-y-auto p-4">
          {drafts.length === 0 && (
            <p className="text-xs text-muted-foreground">No buttons yet. Add one below.</p>
          )}
          {drafts.map((d, i) => (
            <div key={i} className="space-y-1.5 rounded-md border border-border p-2.5">
              <div className="flex items-center gap-1.5">
                <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"
                  placeholder="Button label"
                  value={d.name}
                  onChange={(e) => setDraft(i, { name: e.target.value })}
                />
                <button type="button" className="rounded p-1 text-muted-foreground hover:bg-muted disabled:opacity-30" disabled={i === 0} onClick={() => move(i, -1)} aria-label="Move up">
                  <ArrowUp className="size-3.5" />
                </button>
                <button type="button" className="rounded p-1 text-muted-foreground hover:bg-muted disabled:opacity-30" disabled={i === drafts.length - 1} onClick={() => move(i, 1)} aria-label="Move down">
                  <ArrowDown className="size-3.5" />
                </button>
                <button type="button" className="rounded p-1 text-destructive hover:bg-destructive/10" onClick={() => remove(i)} aria-label="Remove button">
                  <Trash2 className="size-3.5" />
                </button>
              </div>
              <div className="flex flex-wrap items-center gap-1.5">
                <select
                  className="rounded border border-input bg-background px-1.5 py-1 text-xs outline-none"
                  value={d.actionType}
                  onChange={(e) => setDraft(i, { actionType: e.target.value as DraftButton["actionType"] })}
                >
                  <option value="update">Update property</option>
                  <option value="create">Create record</option>
                  <option value="navigate">Navigate</option>
                  <option value="formula">Formula</option>
                </select>
                {d.actionType === "update" && (
                  <>
                    <select
                      className="max-w-32 rounded border border-input bg-background px-1.5 py-1 text-xs outline-none"
                      value={d.propertyId ?? ""}
                      onChange={(e) => setDraft(i, { propertyId: e.target.value })}
                    >
                      <option value="">Property…</option>
                      {settable.map((p) => (
                        <option key={p.id} value={p.id}>
                          {p.name}
                        </option>
                      ))}
                    </select>
                    <input
                      className="min-w-0 flex-1 rounded border border-input bg-background px-2 py-1 text-xs outline-none"
                      placeholder="Value to set"
                      value={d.valueText ?? ""}
                      onChange={(e) => setDraft(i, { valueText: e.target.value })}
                    />
                  </>
                )}
              </div>
              <input
                className="w-full rounded border border-input bg-background px-2 py-1 text-xs outline-none focus-visible:ring-1 focus-visible:ring-ring"
                placeholder="Optional confirmation prompt (shown before running)"
                value={d.prompt ?? ""}
                onChange={(e) => setDraft(i, { prompt: e.target.value })}
              />
            </div>
          ))}
          <button
            type="button"
            className="inline-flex items-center gap-1 rounded-md border border-dashed px-3 py-1.5 text-xs text-muted-foreground hover:bg-muted"
            onClick={() => setDrafts((d) => [...d, { name: "", actionType: "update" }])}
          >
            <Plus className="size-3.5" /> Add button
          </button>
          {error && <p className="text-xs text-destructive">{error}</p>}
        </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"
            onClick={save}
            disabled={updateView.isPending}
          >
            {updateView.isPending && <Loader2 className="size-3.5 animate-spin" />}
            <Save className="size-3.5" /> Save
          </button>
        </div>
      </div>
    </div>
  );
}

// ---- helpers ----------------------------------------------------------------

function parseValue(prop: DatabaseProperty | undefined, text: string): RecordValue {
  if (!prop) return { text };
  switch (prop.type) {
    case "checkbox":
      return { value: text.toLowerCase() === "true" || text === "1" || text === "yes" || text === "on" };
    case "number":
      return { value: Number(text) || 0 };
    case "select":
    case "status":
      return { optionId: text || undefined };
    case "multi_select":
      return { optionIds: text ? [text] : [] };
    case "date":
      return { start: text ? new Date(text).toISOString() : null, end: null };
    default:
      return { text };
  }
}