"use client";

/**
 * DatabasePageView — the full database home (the `kind: "database"` shape of
 * the page canvas, PRODUCT-SPEC: a database IS a page).
 *
 *  - Header: icon + inline title (PATCH database) + record count + Ask AI
 *    (TASK-0122) + CSV export (client-side, from loaded records).
 *  - View tabs: fractional-position ordered; "+" creates a view (9 types);
 *    per-tab menu = rename / delete. The active view id lives in the URL
 *    (?view=) so a lens is shareable; the store holds the last active view
 *    per database for fast returns.
 *  - DatabaseToolbar: ad-hoc filter/sort/group/in-view search (URL-mirrored).
 *  - ViewRouter: renders the active view (table/list/board/gallery/calendar/
 *    timeline/chart/form/dashboard).
 *  - RecordPanel: right-hand inspector for the selected record.
 *  - ButtonsEditor + DatabaseButtons: view-level action buttons.
 */
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import {
  BarChart3,
  CalendarDays,
  ChevronDown,
  ClipboardList,
  Columns3,
  Download,
  Flag,
  GanttChart,
  LayoutDashboard,
  LayoutGrid,
  ListPlus,
  MoreHorizontal,
  Pencil,
  Plus,
  Rows3,
  Sigma,
  Sparkles,
  Table as TableIcon,
  TextCursorInput,
  Trash2,
  X,
  Zap,
} from "lucide-react";
import { cn, sortByPosition } from "@/lib/utils";
import { toast, useUiStore } from "@/stores/ui-store";
import { useDatabaseStore } from "@/stores/database-store";
import { useAuthStore } from "@/lib/auth-store";
import { useDatabasePresence } from "@/hooks/use-presence";
import { PresenceBar } from "@/components/collaboration/PresenceBar";
import { meApi } from "@/lib/api";
import {
  andFilters,
  DatabaseDto,
  DatabaseView,
  DatabaseProperty,
  FilterTree,
  GroupSpec,
  RecordDto,
  searchFilter,
  SortSpec,
  useDatabase,
  useDatabaseRecord,
  useDatabaseRecords,
  useCreateView,
  useDeleteView,
  useExportCsv,
  useUpdateDatabase,
  useUpdateView,
  useReorderView,
} from "@/hooks/use-database";
import { VIEW_TYPES } from "@/lib/constants";
import { DatabaseToolbar } from "@/components/database/database-toolbar";
import { ViewRouter } from "@/components/database/database-view-renderer";
import { RecordPanel } from "@/components/database/record-panel";
import { PropertyEditor } from "@/components/database/property-editor";
import { DatabaseButtons, ButtonsEditor } from "@/components/database/buttons-panel";
import { AiGenerateDialog } from "@/components/database/AiGenerateDialog";
import { AiExtractDialog } from "@/components/database/AiExtractDialog";
import { AiFormulaDialog } from "@/components/database/AiFormulaDialog";

const VIEW_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
  table: TableIcon,
  list: Rows3,
  board: Columns3,
  gallery: LayoutGrid,
  calendar: CalendarDays,
  timeline: GanttChart,
  chart: BarChart3,
  dashboard: LayoutDashboard,
  form: ClipboardList,
};

const VIEW_LABELS: Record<string, string> = {
  table: "Table",
  list: "List",
  board: "Board",
  gallery: "Gallery",
  calendar: "Calendar",
  timeline: "Timeline",
  chart: "Chart",
  dashboard: "Dashboard",
  form: "Form",
};

export interface DatabasePageViewProps {
  databaseId: string;
  /** Workspace id (API calls, relation target picker). */
  workspaceId?: string;
  /** Workspace slug (URL navigation — /w/:slug/…). */
  workspaceSlug?: string;
  /** Permission level on this database — VIEW/COMMENT render read-only. */
  readOnly?: boolean;
}

export function DatabasePageView({
  databaseId,
  workspaceId,
  workspaceSlug,
  readOnly,
}: DatabasePageViewProps) {
  const { data: database, isLoading, error } = useDatabase(databaseId);
  const updateDatabase = useUpdateDatabase(databaseId);
  const createView = useCreateView(databaseId);
  const updateView = useUpdateView(databaseId);
  const deleteView = useDeleteView(databaseId);
  const reorderView = useReorderView(databaseId);
  const exportCsv = useExportCsv(databaseId, database?.properties ?? []);

  const searchParams = useSearchParams();
  const router = useRouter();

  // ---- active view (URL ?view= wins; store keeps last choice) ----------------
  const storedActive = useDatabaseStore((s) => s.activeViews[databaseId]);
  const setActiveView = useDatabaseStore((s) => s.setActiveView);
  const setOverrides = useDatabaseStore((s) => s.setOverrides);
  const panelOpen = useDatabaseStore((s) => s.panelOpen);
  const setAiPanel = useUiStore((s) => s.setAiPanel);
  const panelRecordId = useDatabaseStore((s) => s.panelRecordId);
  const openPanel = useDatabaseStore((s) => s.openPanel);
  const closePanel = useDatabaseStore((s) => s.closePanel);

  // T-153 — record the open as a recently-VIEWED database (covers BOTH the
  // PageCanvas database branch and the dedicated /databases/:id route, which
  // renders this component directly). Fire-and-forget.
  useEffect(() => {
    if (!databaseId) return;
    void meApi.recordView("database", databaseId).catch(() => undefined);
  }, [databaseId]);

  const views = useMemo(() => sortByPosition(database?.views ?? []), [database?.views]);

  // Presence (TASK-0093 R6): the database's OTHER peers (the avatars-only
  // bar — the database has no per-block cursors; the machinery is identical
  // to the page, over the `database:<id>` channel).
  const dbSelfUserId = useAuthStore((s) => s.user?.id ?? null);
  const { presence: dbPresence } = useDatabasePresence(databaseId || null);
  const dbOthers = useMemo(
    () => (dbSelfUserId ? dbPresence.filter((p) => p.userId !== dbSelfUserId) : dbPresence),
    [dbPresence, dbSelfUserId],
  );

  const urlViewId = searchParams.get("view");
  const activeViewId = useMemo(() => {
    const candidates = [urlViewId, storedActive] as (string | null)[];
    for (const id of candidates) {
      if (id && views.some((v) => v.id === id)) return id;
    }
    return views[0]?.id ?? null;
  }, [urlViewId, storedActive, views]);

  const activeView: DatabaseView | undefined = views.find((v) => v.id === activeViewId) ?? views[0];

  // Ad-hoc overrides for the active view.
  const overrides = useDatabaseStore((s) =>
    activeViewId ? s.overrides[`${databaseId}:${activeViewId}`] : undefined,
  );

  // Sync the URL when the active view changes (shareable lens).
  //
  // CRITICAL: never write the URL while no active view is resolved yet
  // (`activeViewId === null` — the views are still loading, or there are none).
  // In dev (React StrictMode) this effect runs twice on mount; if the second
  // run hits `else params.delete("view")` while `views` is empty, it wipes the
  // `?view=` deep link BEFORE the views fetch resolves. When the views then
  // load, `activeViewId` falls back to `views[0]` (the seeded table) and this
  // same effect rewrites `?view=` to it — so deep links to any non-first view
  // (e.g. a FORM view) silently land on the table. Skipping the write while
  // unresolved lets the deep link survive to the moment the views load.
  const hydrated = useRef(false);
  useEffect(() => {
    if (!hydrated.current) {
      hydrated.current = true;
      if (activeViewId) setActiveView(databaseId, activeViewId);
      return;
    }
    if (!activeViewId) return; // views still loading / none resolved — keep the URL
    const params = new URLSearchParams(searchParams.toString());
    if (params.get("view") !== activeViewId) params.set("view", activeViewId);
    const qs = params.toString();
    router.replace(qs ? `${window.location.pathname}?${qs}` : window.location.pathname, {
      scroll: false,
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [activeViewId, databaseId]);

  const selectView = (viewId: string) => {
    setActiveView(databaseId, viewId);
  };

  // ---- composed effective state (same composition as DatabaseToolbar) --------
  const properties = database?.properties ?? [];
  const effectiveFilter = useMemo<FilterTree | null>(
    () =>
      activeView
        ? andFilters(
            activeView.filter,
            overrides?.filter ?? null,
            searchFilter(properties, overrides?.searchText ?? ""),
          )
        : null,
    [activeView, overrides?.filter, overrides?.searchText, properties],
  );
  const effectiveSort = useMemo<SortSpec[] | null>(
    () => overrides?.sort ?? activeView?.sort ?? null,
    [overrides?.sort, activeView?.sort],
  );
  const effectiveGroup = useMemo<GroupSpec[] | null>(
    () => overrides?.group ?? activeView?.group ?? null,
    [overrides?.group, activeView?.group],
  );
  // T-166: the view's stored rows-per-page is the listing default (the §6
  // query reads `view.pageSize`); the hook default (50) is the fallback when
  // the view never set one.
  const effectivePageSize = activeView?.pageSize ?? 50;

  const records = useDatabaseRecords(databaseId, {
    viewId: activeView?.id ?? null,
    filter: effectiveFilter,
    sort: effectiveSort,
    group: effectiveGroup,
    pageSize: effectivePageSize,
    enabled: !!activeView,
  });

  // ---- record panel (store-driven: survives view switches) --------------------
  const openRecord = useCallback(
    (record: RecordDto) => {
      openPanel(databaseId, record.id);
    },
    [databaseId, openPanel],
  );
  const { data: fetchedRecord } = useDatabaseRecord(
    panelOpen ? databaseId : undefined,
    panelOpen ? panelRecordId : undefined,
  );
  const panelRecord: RecordDto | undefined =
    (panelRecordId ? records.data.records.find((r) => r.id === panelRecordId) : undefined) ??
    (panelOpen ? fetchedRecord : undefined);

  const onOpenRecordPage = useCallback(
    (record: RecordDto) => {
      if (record.pageId && workspaceSlug) {
        // Core app layout owns /w/:workspace/page/:id.
        router.push(`/w/${workspaceSlug}/page/${record.pageId}`);
      }
    },
    [workspaceSlug, router],
  );

  // ---- dialogs ------------------------------------------------------------------
  const [createViewOpen, setCreateViewOpen] = useState(false);
  const [editViewId, setEditViewId] = useState<string | null>(null);
  const [menuViewId, setMenuViewId] = useState<string | null>(null);
  const [addPropertyOpen, setAddPropertyOpen] = useState(false);
  const [buttonsOpen, setButtonsOpen] = useState(false);
  // TASK-0124 — Database AI (the header "AI" dropdown + the three dialogs).
  const [dbAiOpen, setDbAiOpen] = useState(false);
  const [dbAiDialog, setDbAiDialog] = useState<null | "generate" | "extract" | "formula">(null);
  const dbAiRef = useRef<HTMLDivElement>(null);

  // Close the AI dropdown on outside click / Escape.
  useEffect(() => {
    if (!dbAiOpen) return;
    const onDown = (e: MouseEvent) => {
      if (dbAiRef.current && !dbAiRef.current.contains(e.target as Node)) setDbAiOpen(false);
    };
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setDbAiOpen(false);
    };
    document.addEventListener("mousedown", onDown);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onDown);
      document.removeEventListener("keydown", onKey);
    };
  }, [dbAiOpen]);

  // ---- loading / error ------------------------------------------------------------
  if (isLoading) {
    return (
      <div className="flex h-full flex-col gap-3 p-6" aria-busy="true">
        <div className="h-10 w-64 animate-pulse rounded bg-muted" />
        <div className="h-8 w-80 animate-pulse rounded bg-muted" />
        <div className="flex-1 animate-pulse rounded-lg bg-muted/50" />
      </div>
    );
  }

  if (error || !database) {
    return (
      <div className="flex h-full items-center justify-center p-6">
        <div className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
          This database is unavailable.
        </div>
      </div>
    );
  }

  const editingView = views.find((v) => v.id === editViewId);

  return (
    <div className="flex h-full flex-col">
      {/* header */}
      <div className="px-6 pt-5">
        <div className="flex items-start gap-3">
          <button
            type="button"
            className="text-4xl leading-none"
            title="Change icon"
            onClick={() => {
              const icon = window.prompt("Icon (emoji)", database.icon ?? "📊");
              if (icon != null) updateDatabase.mutate({ icon });
            }}
            aria-label="Database icon"
          >
            {database.icon ?? "📊"}
          </button>
          <div className="min-w-0 flex-1">
            <input
              className="w-full rounded-sm bg-transparent px-1 text-3xl font-bold tracking-tight outline-none placeholder:text-muted-foreground"
              value={database.title}
              placeholder="Untitled database"
              disabled={!!readOnly}
              onChange={(e) => updateDatabase.mutate({ title: e.target.value })}
              aria-label="Database title"
            />
            {database.description && (
              <p className="mt-1 px-1 text-sm text-muted-foreground">{database.description}</p>
            )}
            <div className="mt-1 flex items-center gap-2 px-1 text-xs text-muted-foreground">
              <span>{records.data.totalCount ?? records.data.records.length} records</span>
              <span aria-hidden>·</span>
              <span>{database.properties.length} properties</span>
              <span aria-hidden>·</span>
              <span>{views.length} views</span>
            </div>
          </div>
          {/* Presence (TASK-0093 R6): the OTHERS' avatar bar (avatars-only —
              no per-block cursors in a database). Absent at 0 others. */}
          <PresenceBar peers={dbOthers} selfUserId={dbSelfUserId} className="mt-2 shrink-0" />
        </div>
      </div>

      {/* view tabs + toolbar row */}
      <div className="sticky top-0 z-20 mt-3 flex flex-wrap items-center gap-2 border-b border-border bg-background/95 px-4 py-2 backdrop-blur">
        <div className="flex items-center gap-1 overflow-x-auto">
          {views.map((v) => {
            const Icon = VIEW_ICONS[v.type] ?? TableIcon;
            const active = v.id === activeViewId;
            return (
              <div key={v.id} className="relative">
                <button
                  type="button"
                  className={cn(
                    "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-sm",
                    active
                      ? "bg-muted font-medium text-foreground"
                      : "text-muted-foreground hover:bg-muted/50",
                  )}
                  onClick={() => selectView(v.id)}
                  aria-current={active ? "page" : undefined}
                >
                  <Icon className="size-4" aria-hidden />
                  {v.name}
                </button>
                {!readOnly && (
                  <button
                    type="button"
                    className="rounded p-0.5 text-muted-foreground hover:bg-muted"
                    onClick={() => setMenuViewId(menuViewId === v.id ? null : v.id)}
                    aria-label={`View menu for ${v.name}`}
                  >
                    <MoreHorizontal className="size-3.5" />
                  </button>
                )}
                {menuViewId === v.id && (
                  <div className="absolute left-0 top-7 z-30 w-40 rounded-md border bg-popover p-1 shadow-lg">
                    <button
                      type="button"
                      className="flex w-full items-center gap-1.5 rounded px-2 py-1 text-left text-xs hover:bg-muted"
                      onClick={() => {
                        setEditViewId(v.id);
                        setMenuViewId(null);
                      }}
                    >
                      <Pencil className="size-3" /> Rename
                    </button>
                    {/* T-166: the default view is the first in position order
                        (the active-view fallback is `views[0]`) — move it to
                        the front via the reorder endpoint. Hidden for the view
                        that is already first. */}
                    {views[0]?.id !== v.id && (
                      <button
                        type="button"
                        className="flex w-full items-center gap-1.5 rounded px-2 py-1 text-left text-xs hover:bg-muted"
                        disabled={reorderView.isPending}
                        onClick={() => {
                          const id = v.id;
                          setMenuViewId(null);
                          reorderView.mutate(
                            { viewId: id, before: views[0]?.id },
                            {
                              onSuccess: () => toast("success", `${v.name} is now the default view`),
                              onError: (e) => toast("error", "Set default failed", e.message),
                            },
                          );
                        }}
                      >
                        <Flag className="size-3" /> Set as default
                      </button>
                    )}
                    <button
                      type="button"
                      className="flex w-full items-center gap-1.5 rounded px-2 py-1 text-left text-xs text-destructive hover:bg-muted"
                      onClick={() => {
                        setMenuViewId(null);
                        deleteView.mutate(v.id, {
                          onSuccess: () => toast("success", "View deleted"),
                          onError: (e) => toast("error", "Delete failed", e.message),
                        });
                      }}
                    >
                      <Trash2 className="size-3" /> Delete
                    </button>
                  </div>
                )}
              </div>
            );
          })}
          {!readOnly && (
            <button
              type="button"
              className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm text-muted-foreground hover:bg-muted"
              onClick={() => setCreateViewOpen(true)}
              aria-label="Add view"
            >
              <ListPlus className="size-4" />
              Add view
            </button>
          )}
        </div>

        <div className="ml-auto flex items-center gap-2">
          {activeView && (
            <DatabaseToolbar databaseId={databaseId} view={activeView} properties={properties} />
          )}
          {activeView?.config.buttons?.length ? (
            <DatabaseButtons
              databaseId={databaseId}
              view={activeView}
              properties={properties}
              record={panelRecord ?? null}
              onOpenEditor={() => setButtonsOpen(true)}
            />
          ) : (
            !readOnly && (
              <button
                type="button"
                className="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs text-muted-foreground hover:bg-muted"
                onClick={() => setButtonsOpen(true)}
                title="View action buttons"
              >
                <Zap className="size-3.5" /> Buttons
              </button>
            )
          )}
          <div className="relative" ref={dbAiRef}>
            <button
              type="button"
              data-testid="database-ask-ai"
              title="Ask AI about this database"
              className="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs text-muted-foreground hover:bg-muted"
              onClick={() => setDbAiOpen((v) => !v)}
              aria-haspopup="menu"
              aria-expanded={dbAiOpen}
            >
              <Sparkles className="size-3.5" /> AI
              <ChevronDown className="size-3" aria-hidden />
            </button>
            {dbAiOpen ? (
              <div
                className="absolute right-0 top-full z-50 mt-1 w-52 rounded-md border border-border bg-popover p-1 shadow-lg"
                role="menu"
                aria-label="AI actions"
              >
                <button
                  type="button"
                  role="menuitem"
                  data-testid="db-ai-menu-ask"
                  onClick={() => {
                    setDbAiOpen(false);
                    setAiPanel(true, { databaseId, ...(database?.title ? { label: database.title } : {}) });
                  }}
                  className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-accent"
                >
                  <Sparkles className="size-4 shrink-0 text-muted-foreground" aria-hidden /> Ask AI about this database
                </button>
                {!readOnly && (
                  <>
                    <button
                      type="button"
                      role="menuitem"
                      data-testid="db-ai-menu-generate"
                      onClick={() => {
                        setDbAiOpen(false);
                        setDbAiDialog("generate");
                      }}
                      className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-accent"
                    >
                      <Plus className="size-4 shrink-0 text-muted-foreground" aria-hidden /> Generate database
                    </button>
                    <button
                      type="button"
                      role="menuitem"
                      data-testid="db-ai-menu-extract"
                      onClick={() => {
                        setDbAiOpen(false);
                        setDbAiDialog("extract");
                      }}
                      className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-accent"
                    >
                      <TextCursorInput className="size-4 shrink-0 text-muted-foreground" aria-hidden /> Extract from text
                    </button>
                    <button
                      type="button"
                      role="menuitem"
                      data-testid="db-ai-menu-formula"
                      onClick={() => {
                        setDbAiOpen(false);
                        setDbAiDialog("formula");
                      }}
                      className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-accent"
                    >
                      <Sigma className="size-4 shrink-0 text-muted-foreground" aria-hidden /> Generate column with formula
                    </button>
                  </>
                )}
              </div>
            ) : null}
          </div>
          <button
            type="button"
            className="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs text-muted-foreground hover:bg-muted"
            onClick={() => setAddPropertyOpen(true)}
            title="Add or manage properties"
            disabled={!!readOnly}
          >
            <Plus className="size-3.5" /> Property
          </button>
          <button
            type="button"
            className="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs text-muted-foreground hover:bg-muted"
            onClick={() => {
              exportCsv(records.data.records);
              toast(
                "success",
                "Exported CSV",
                `${records.data.records.length} records (currently loaded)`,
              );
            }}
            title="Export the loaded records as CSV"
          >
            <Download className="size-3.5" /> CSV
          </button>
        </div>
      </div>

      {/* active view body */}
      <div className="min-h-0 flex-1">
        {activeView ? (
          <ViewRouter
            database={database}
            view={activeView}
            records={records}
            readOnly={readOnly}
            callbacks={{
              onOpenRecord: openRecord,
              onOpenRecordPage,
              onSortChange: (sort) =>
                setOverrides(databaseId, activeView.id, { sort: sort ?? undefined }),
              onFilterChange: (filter) =>
                setOverrides(databaseId, activeView.id, {
                  filter: (filter as FilterTree) ?? undefined,
                }),
              // T-166: rows-per-page is saved ON THE VIEW (`view.pageSize`,
              // the §6 query's listing default) — not a session override.
              onPageSizeChange: (pageSize) => {
                const id = activeView.id;
                updateView.mutate(
                  { viewId: id, pageSize },
                  { onError: (e) => toast("error", "Update failed", e.message) },
                );
              },
            }}
          />
        ) : (
          <div className="flex h-full flex-col items-center justify-center gap-3 p-6 text-center">
            <TableIcon className="size-8 text-muted-foreground" aria-hidden />
            <p className="text-sm text-muted-foreground">
              No views yet — create one to start working with records.
            </p>
            {!readOnly && (
              <button
                type="button"
                className="inline-flex items-center gap-1 rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground hover:bg-primary/90"
                onClick={() => setCreateViewOpen(true)}
              >
                <Plus className="size-4" /> Create view
              </button>
            )}
          </div>
        )}
      </div>

      {/* record panel */}
      {panelOpen && panelRecord && (
        <RecordPanel
          databaseId={databaseId}
          record={panelRecord}
          properties={database.properties}
          onClose={closePanel}
          readOnly={readOnly}
        />
      )}

      {/* create view dialog */}
      {createViewOpen && (
        <ViewDialog
          title="Create view"
          submitLabel="Create"
          busy={createView.isPending}
          onClose={() => setCreateViewOpen(false)}
          onSubmit={(name, type) => {
            createView.mutate(
              { name, type },
              {
                onSuccess: (v) => {
                  setCreateViewOpen(false);
                  selectView(v.id);
                  toast("success", "View created", name);
                },
                onError: (e) => toast("error", "Create failed", e.message),
              },
            );
          }}
        />
      )}

      {/* rename view dialog */}
      {editingView && (
        <ViewDialog
          title="Rename view"
          initialName={editingView.name}
          submitLabel="Save"
          busy={updateView.isPending}
          onClose={() => setEditViewId(null)}
          onSubmit={(name) => {
            updateView.mutate(
              { viewId: editingView.id, name },
              {
                onSuccess: () => {
                  setEditViewId(null);
                  toast("success", "View renamed");
                },
                onError: (e) => toast("error", "Rename failed", e.message),
              },
            );
          }}
        />
      )}

      {/* add property */}
      {addPropertyOpen && (
        <PropertyEditor
          databaseId={databaseId}
          properties={database.properties}
          mode="add"
          workspaceId={workspaceId}
          onClose={() => setAddPropertyOpen(false)}
        />
      )}

      {/* buttons editor */}
      {buttonsOpen && activeView && (
        <ButtonsEditor
          databaseId={databaseId}
          view={activeView}
          properties={database.properties}
          onClose={() => setButtonsOpen(false)}
        />
      )}

      {/* TASK-0124 — Database AI dialogs (gated by workspaceId; the write
          actions are already hidden for non-EDIT roles in the header menu). */}
      {workspaceId && dbAiDialog === "generate" ? (
        <AiGenerateDialog
          open
          workspaceId={workspaceId}
          workspaceSlug={workspaceSlug}
          onClose={() => setDbAiDialog(null)}
        />
      ) : null}
      {workspaceId && dbAiDialog === "extract" ? (
        <AiExtractDialog
          open
          workspaceId={workspaceId}
          databaseId={databaseId}
          properties={database.properties}
          onClose={() => setDbAiDialog(null)}
        />
      ) : null}
      {workspaceId && dbAiDialog === "formula" ? (
        <AiFormulaDialog
          open
          workspaceId={workspaceId}
          databaseId={databaseId}
          properties={database.properties}
          records={records.data.records}
          onClose={() => setDbAiDialog(null)}
        />
      ) : null}
    </div>
  );
}

// ---------------------------------------------------------------------------
// View create/rename dialog
// ---------------------------------------------------------------------------

function ViewDialog({
  title,
  initialName,
  submitLabel,
  busy,
  onClose,
  onSubmit,
}: {
  title: string;
  initialName?: string;
  submitLabel: string;
  busy: boolean;
  onClose: () => void;
  onSubmit: (name: string, type: string) => void;
}) {
  const [name, setName] = useState(initialName ?? "");
  const [type, setType] = useState("table");
  const fixedType = initialName !== undefined;

  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={title}
    >
      <div className="w-full max-w-sm 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">{title}</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="space-y-3 p-4">
          <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"
              value={name}
              placeholder="e.g. All records"
              autoFocus
              onChange={(e) => setName(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && name.trim() && onSubmit(name.trim(), type)}
            />
          </div>
          {!fixedType && (
            <div>
              <label className="mb-1 block text-xs text-muted-foreground">Type</label>
              <div className="grid grid-cols-3 gap-1">
                {VIEW_TYPES.map((t) => {
                  const Icon = VIEW_ICONS[t] ?? TableIcon;
                  return (
                    <button
                      key={t}
                      type="button"
                      className={cn(
                        "flex items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs hover:bg-muted",
                        type === t && "border-primary bg-primary/10 text-primary",
                      )}
                      onClick={() => setType(t)}
                    >
                      <Icon className="size-3.5" aria-hidden />
                      {VIEW_LABELS[t]}
                    </button>
                  );
                })}
              </div>
            </div>
          )}
        </div>
        <div className="flex 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="rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground hover:bg-primary/90 disabled:opacity-40"
            disabled={busy || !name.trim()}
            onClick={() => onSubmit(name.trim(), type)}
          >
            {submitLabel}
          </button>
        </div>
      </div>
    </div>
  );
}