import { useAdminGridLocale } from "./useAdminGridLocale";
import { adminMessage, type AdminMessage } from "./messages";
import { useI18n } from "../../i18n";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Menu } from "@base-ui/react/menu";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { AgGridReact } from "ag-grid-react";
import type { ColDef, ICellRendererParams } from "ag-grid-community";
import { ArrowLeft, ChevronDown, Columns3, Pencil, RefreshCw, Save, Sparkles, Trash2, X } from "lucide-react";
import { toast } from "sonner";
import { Button } from "../../components/ui/button";
import { ApiError, apiErrorMessage } from "../../api/client";
import {
  consolidateCatalogDescriptions,
  deleteCatalogTableMetadata,
  listCatalogColumns,
  listCatalogTables,
  startCatalogSync,
  startDescriptionGenerationRun,
  updateCatalogTableMetadata,
  type CatalogDatabase,
  type CatalogSyncRun,
  type CatalogTable,
  type CatalogTableMetadataDeleteTarget,
  type DescriptionGenerationRun,
  type SensitivityAnalysisRequest,
} from "../../api/catalog-databases";
import type { DatabaseNavigationState } from "./model";
import { DatabaseColumns } from "./DatabaseColumns";
import { FleetActionSelector, type FleetActionOption } from "./FleetActionSelector";
import { FleetLedgerDrawer } from "./FleetLedgerShell";
import { NO_METADATA_GENERATION_LLM_MODEL_MESSAGE } from "./MetadataGenerationModelSelector";

interface Props {
  database: CatalogDatabase;
  canManage: boolean;
  activeRun?: CatalogSyncRun;
  selectedMetadataModel: string | null;
  descriptionGenerationActive: boolean;
  onBackToDatabases: () => void;
  onOpenOverview: () => void;
  onOpenRelationships: () => void;
  onNavigationStateChange: (state: DatabaseNavigationState) => void;
  onNestedNavigationChange?: (active: boolean, onBack?: () => void) => void;
  onRunStarted: (run: CatalogSyncRun) => void;
  onOpenSync: () => void;
  onClearCatalogTables?: () => Promise<void>;
  onDescriptionGenerationRunStarted: (run: DescriptionGenerationRun) => void;
  onSuggestSensitive: (selection: SensitivityAnalysisRequest, scopeLabel: AdminMessage) => Promise<void>;
  onCatalogMetricsChanged?: () => void | Promise<void>;
  presentation?: "legacy" | "fleet";
}

interface TableGridContext {
  canManage: boolean;
  presentation: "legacy" | "fleet";
  onOpen: (table: CatalogTable, section: "overview" | "columns", origin: HTMLButtonElement) => void;
}

function TableActionsCell({ data, context }: ICellRendererParams<CatalogTable, unknown, TableGridContext>) {
  const { t } = useI18n();
  if (!data || !context) return null;
  return (
    <div className="flex h-full items-center justify-end gap-0.5" onClick={(event) => event.stopPropagation()}>
      <Button
        type="button"
        variant="ghost"
        size="icon-lg"
        className={context.presentation === "fleet" ? "thot-fleet-icon-action" : undefined}
        data-tooltip={context.presentation === "fleet" ? t("Columns") : undefined}
        aria-label={t("View columns for {name}", { name: data.name })}
        title={context.presentation === "legacy" ? t("View columns for {name}", { name: data.name }) : undefined}
        onClick={(event) => context.onOpen(data, "columns", event.currentTarget)}
      >
        <Columns3 aria-hidden="true" />
      </Button>
      <span
        className={context.presentation === "fleet" ? "thot-fleet-icon-action" : undefined}
        data-tooltip={context.presentation === "fleet" ? t("Edit metadata") : undefined}
      >
        <Button type="button" variant="ghost" size="icon-lg" aria-label={t("Edit description for {name}", { name: data.name })} title={context.presentation === "legacy" ? t("Edit metadata for {name}", { name: data.name }) : undefined} disabled={!context.canManage} onClick={(event) => context.onOpen(data, "overview", event.currentTarget)}>
        <Pencil aria-hidden="true" />
        </Button>
      </span>
    </div>
  );
}

export function DatabaseTables({
  database,
  canManage,
  activeRun,
  selectedMetadataModel,
  descriptionGenerationActive,
  onBackToDatabases,
  onOpenOverview,
  onOpenRelationships,
  onNavigationStateChange,
  onNestedNavigationChange,
  onRunStarted,
  onOpenSync,
  onClearCatalogTables,
  onDescriptionGenerationRunStarted,
  onSuggestSensitive,
  onCatalogMetricsChanged,
  presentation = "legacy",
}: Props) {
  const { t } = useI18n();
  const { locale, gridLocaleProps } = useAdminGridLocale();
  const databaseId = database.id!;
  const queryClient = useQueryClient();
  const queryKey = ["catalog-tables", databaseId] as const;
  const { data = [], error, isError, isLoading, isFetching, refetch } = useQuery({ queryKey, queryFn: () => listCatalogTables(databaseId), retry: false });
  const [search, setSearch] = useState("");
  const [displayedCount, setDisplayedCount] = useState(0);
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const [activeTableId, setActiveTableId] = useState<string | null>(null);
  const [tableSection, setTableSection] = useState<"overview" | "columns">("overview");
  const [description, setDescription] = useState("");
  const [generatedDescription, setGeneratedDescription] = useState("");
  const [baseline, setBaseline] = useState("");
  const [editorVersion, setEditorVersion] = useState<number | null>(null);
  const [stale, setStale] = useState(false);
  const [staleBannerOpen, setStaleBannerOpen] = useState(true);
  const [busy, setBusy] = useState<"sync" | "save" | "delete" | "consolidate" | "generate" | "suggest" | null>(null);
  const [pendingDelete, setPendingDelete] = useState<CatalogTableMetadataDeleteTarget | null>(null);
  const [columnNavigation, setColumnNavigation] = useState<DatabaseNavigationState>({ dirty: false, busy: false });
  const gridRef = useRef<AgGridReact<CatalogTable>>(null);
  const originRef = useRef<HTMLButtonElement | null>(null);
  const headingRef = useRef<HTMLHeadingElement>(null);
  const actionsTriggerRef = useRef<HTMLButtonElement>(null);
  const fleetActionSelectRef = useRef<HTMLSelectElement>(null);
  const searchInputRef = useRef<HTMLInputElement>(null);
  const activeTable = activeTableId ? data.find((table) => table.id === activeTableId) : undefined;
  const editorFingerprint = JSON.stringify([description, generatedDescription]);
  const editorDirty = Boolean(activeTableId && editorFingerprint !== baseline);
  const dirty = tableSection === "columns" ? columnNavigation.dirty : editorDirty;
  const navigationBusy = busy !== null || (tableSection === "columns" && columnNavigation.busy);
  const nestedNavigationActive = presentation === "fleet" && Boolean(activeTable) && tableSection === "columns";
  const currentRun = activeRun ?? database.activeSyncRun;
  const clearAllCatalogTables = async () => {
    if (!onClearCatalogTables || !window.confirm(t("Clear all catalog tables, columns, and relationships for this database? The source database will not be changed."))) return;
    await onClearCatalogTables();
  };
  const leaveTable = useCallback(() => {
    if (navigationBusy) return;
    if (dirty && !window.confirm(t("Discard unsaved metadata?"))) return;
    setActiveTableId(null);
    setTableSection("overview");
    window.setTimeout(() => originRef.current?.focus(), 0);
  }, [dirty, navigationBusy, t]);

  useEffect(() => { onNavigationStateChange({ dirty, busy: navigationBusy }); }, [dirty, navigationBusy, onNavigationStateChange]);
  useEffect(() => {
    onNestedNavigationChange?.(nestedNavigationActive, nestedNavigationActive ? leaveTable : undefined);
  }, [leaveTable, nestedNavigationActive, onNestedNavigationChange]);
  useEffect(() => () => { onNestedNavigationChange?.(false); }, [onNestedNavigationChange]);
  useEffect(() => {
    if (!activeTableId || !activeTable || editorVersion === activeTable.version || busy) return;
    setStale(true);
    setStaleBannerOpen(true);
  }, [activeTable, activeTableId, busy, editorVersion]);
  useEffect(() => {
    if (!pendingDelete) return;
    const timer = window.setTimeout(() => document.getElementById("table-cleanup-confirm-button")?.focus(), 0);
    return () => window.clearTimeout(timer);
  }, [pendingDelete]);
  const closeDeleteConfirmation = () => {
    setPendingDelete(null);
    window.setTimeout(() => {
      if (presentation === "fleet") fleetActionSelectRef.current?.focus();
      else actionsTriggerRef.current?.focus();
    }, 0);
  };

  const openTable = (table: CatalogTable, section: "overview" | "columns", origin: HTMLButtonElement) => {
    originRef.current = origin;
    setActiveTableId(table.id);
    setTableSection(section);
    setDescription(table.description ?? "");
    setGeneratedDescription(table.generatedDescription ?? "");
    setBaseline(JSON.stringify([table.description ?? "", table.generatedDescription ?? ""]));
    setEditorVersion(table.version);
    setStale(false);
    setStaleBannerOpen(true);
    setColumnNavigation({ dirty: false, busy: false });
  };
  const navigateDatabase = (target: "databases" | "overview" | "relationships") => {
    if (navigationBusy) return;
    if (dirty && !window.confirm(t("Discard unsaved metadata?"))) return;
    if (target === "databases") onBackToDatabases();
    else if (target === "overview") onOpenOverview();
    else onOpenRelationships();
  };
  const save = async () => {
    if (!activeTable || editorVersion === null) return;
    setBusy("save");
    try {
      const updated = await updateCatalogTableMetadata(
        databaseId, activeTable.id, editorVersion,
        description.trim() || null, generatedDescription.trim() || null,
      );
      queryClient.setQueryData<CatalogTable[]>(queryKey, (current = []) => current.map((table) => table.id === updated.id ? updated : table));
      setDescription(updated.description ?? "");
      setGeneratedDescription(updated.generatedDescription ?? "");
      setBaseline(JSON.stringify([updated.description ?? "", updated.generatedDescription ?? ""]));
      setEditorVersion(updated.version);
      setStale(false);
      void onCatalogMetricsChanged?.();
      toast.success(t("Table metadata saved"));
    } catch (error) {
      if (error instanceof ApiError && error.code === "table_stale") {
        await refetch();
        setStale(true);
        setStaleBannerOpen(true);
      } else toast.error(t(apiErrorMessage(error)));
    } finally { setBusy(null); }
  };
  const reloadTable = async () => {
    if (!activeTableId) return;
    setBusy("sync");
    try {
      const result = await refetch();
      const latest = result.data?.find((table) => table.id === activeTableId);
      if (!latest) { leaveTable(); return; }
      setDescription(latest.description ?? "");
      setGeneratedDescription(latest.generatedDescription ?? "");
      setBaseline(JSON.stringify([latest.description ?? "", latest.generatedDescription ?? ""]));
      setEditorVersion(latest.version);
      setStale(false);
      setStaleBannerOpen(true);
    } catch (error) { toast.error(t(apiErrorMessage(error))); } finally { setBusy(null); }
  };
  const synchronize = async (scope: "tables" | "columns" | "all", tableIds: string[] = []) => {
    setBusy("sync");
    try {
      const run = await startCatalogSync(databaseId, database.version, scope, tableIds);
      onRunStarted(run);
      gridRef.current?.api.deselectAll();
      setSelectedIds([]);
      toast.success(scope === "all" ? t("Full schema synchronization started") : scope === "columns" ? t("Column synchronization started") : t("Table synchronization started"));
    } catch (error) { toast.error(t(apiErrorMessage(error))); } finally { setBusy(null); }
  };
  const deleteMetadata = async (target: CatalogTableMetadataDeleteTarget) => {
    setBusy("delete");
    try {
      const counts = await deleteCatalogTableMetadata(databaseId, selectedIds, target);
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["catalog-columns", databaseId] }),
        queryClient.invalidateQueries({ queryKey: ["catalog-relationships", databaseId] }),
        queryClient.invalidateQueries({ queryKey: ["catalog-databases"] }),
      ]);
      gridRef.current?.api.deselectAll();
      setSelectedIds([]);
      setPendingDelete(null);
      window.setTimeout(() => searchInputRef.current?.focus(), 0);
      void onCatalogMetricsChanged?.();
      toast.success(target === "columns"
        ? t("{value} {columns} catalog columns", { value: presentation === "fleet" ? t("Cleared") : t("Deleted"), columns: counts.columns })
        : t("{value} {relationships} catalog relationships", { value: presentation === "fleet" ? t("Cleared") : t("Deleted"), relationships: counts.relationships }));
    } catch (error) {
      toast.error(t(apiErrorMessage(error)));
    } finally { setBusy(null); }
  };
  const consolidateDescriptions = async () => {
    setBusy("consolidate");
    try {
      const counts = await consolidateCatalogDescriptions(databaseId, "tables", selectedIds);
      await queryClient.invalidateQueries({ queryKey, exact: true });
      gridRef.current?.api.deselectAll();
      setSelectedIds([]);
      void onCatalogMetricsChanged?.();
      toast.success((counts.copied === 1 ? t("Copied {copied} description; skipped {skipped}", { copied: counts.copied, skipped: counts.skipped }) : t("Copied {copied} descriptions; skipped {skipped}", { copied: counts.copied, skipped: counts.skipped })));
    } catch (error) {
      toast.error(t(apiErrorMessage(error)));
    } finally { setBusy(null); }
  };
  const generateDescriptions = async () => {
    if (selectedIds.length === 0 || !selectedMetadataModel) return;
    setBusy("generate");
    try {
      const run = await startDescriptionGenerationRun(
        databaseId,
        selectedMetadataModel,
        "selected_tables",
        selectedIds,
      );
      onDescriptionGenerationRunStarted(run);
      toast.success((selectedIds.length === 1 ? t("Description generation started for {count} table", { count: selectedIds.length }) : t("Description generation started for {count} tables", { count: selectedIds.length })));
    } catch (error) {
      toast.error(t(apiErrorMessage(error)));
    } finally { setBusy(null); }
  };
  const generateColumnDescriptions = async () => {
    if (selectedIds.length === 0 || !selectedMetadataModel) return;
    setBusy("generate");
    try {
      const columns = (await Promise.all(selectedIds.map((tableId) => listCatalogColumns(databaseId, tableId)))).flat();
      const columnIds = columns.map((column) => column.id);
      if (columnIds.length === 0) {
        toast.error(t("The selected tables have no synchronized catalog columns."));
        return;
      }
      const run = await startDescriptionGenerationRun(
        databaseId,
        selectedMetadataModel,
        "selected_columns",
        columnIds,
      );
      onDescriptionGenerationRunStarted(run);
      toast.success((columnIds.length === 1 ? t("Column description generation started for {count} column", { count: columnIds.length }) : t("Column description generation started for {count} columns", { count: columnIds.length })));
    } catch (error) {
      toast.error(t(apiErrorMessage(error)));
    } finally { setBusy(null); }
  };
  const suggestSensitive = async () => {
    if (selectedIds.length === 0) return;
    setBusy("suggest");
    try {
      await onSuggestSensitive(
        { scope: "selected_tables", targetIds: selectedIds },
        (selectedIds.length === 1 ? adminMessage("{count} selected table", { count: selectedIds.length }) : adminMessage("{count} selected tables", { count: selectedIds.length })),
      );
    } catch {
      // The page-level request reports the safe, specific reason and preserves the selection.
    } finally {
      setBusy(null);
    }
  };

  type FleetTableAction =
    | "generate-descriptions"
    | "generate-column-descriptions"
    | "sync-tables"
    | "sync-columns"
    | "consolidate-descriptions"
    | "suggest-sensitive"
    | "clear-columns";

  const fleetActions: readonly FleetActionOption<FleetTableAction>[] = [
    {
      id: "generate-descriptions",
      label: t("Generate table description"),
      group: t("Descriptions"),
      runLabel: t("Generate"),
      disabled: !canManage || selectedIds.length === 0 || !selectedMetadataModel || descriptionGenerationActive || busy !== null || Boolean(currentRun),
      disabledReason: !canManage
        ? t("You do not have permission to generate descriptions.")
        : selectedIds.length === 0
          ? t("Select at least one table.")
          : !selectedMetadataModel
            ? NO_METADATA_GENERATION_LLM_MODEL_MESSAGE
            : descriptionGenerationActive || Boolean(currentRun)
              ? t("Wait for the active catalog operation to finish.")
              : busy !== null
                ? t("Another action is running.")
                : undefined,
    },
    {
      id: "generate-column-descriptions",
      label: t("Generate column descriptions"),
      group: t("Descriptions"),
      runLabel: t("Generate"),
      disabled: !canManage || selectedIds.length === 0 || !selectedMetadataModel || descriptionGenerationActive || busy !== null || Boolean(currentRun),
      disabledReason: !canManage
        ? t("You do not have permission to generate descriptions.")
        : selectedIds.length === 0
          ? t("Select at least one table.")
          : !selectedMetadataModel
            ? NO_METADATA_GENERATION_LLM_MODEL_MESSAGE
            : descriptionGenerationActive || Boolean(currentRun)
              ? t("Wait for the active catalog operation to finish.")
              : busy !== null
                ? t("Another action is running.")
                : undefined,
    },
    {
      id: "consolidate-descriptions",
      label: t("Copy generated descriptions to Description"),
      group: t("Descriptions"),
      runLabel: t("Move"),
      disabled: !canManage || selectedIds.length === 0 || busy !== null || Boolean(currentRun),
      disabledReason: !canManage
        ? t("You do not have permission to update metadata.")
        : selectedIds.length === 0
          ? t("Select at least one table.")
          : busy !== null || Boolean(currentRun)
            ? t("Wait for the active catalog operation to finish.")
            : undefined,
    },
    {
      id: "sync-tables",
      label: t("Synchronize database tables"),
      group: t("Synchronization"),
      scopeLabel: t("Selected database"),
      runLabel: t("Synchronize"),
      disabled: !canManage || selectedIds.length === 0 || busy !== null || Boolean(currentRun),
      disabledReason: !canManage
        ? t("You do not have permission to synchronize the catalog.")
        : selectedIds.length === 0
          ? t("Select at least one table.")
          : busy !== null || Boolean(currentRun)
            ? t("Wait for the active catalog operation to finish.")
            : undefined,
    },
    {
      id: "sync-columns",
      label: t("Synchronize columns for selected tables"),
      group: t("Synchronization"),
      runLabel: t("Synchronize"),
      disabled: !canManage || selectedIds.length === 0 || busy !== null || Boolean(currentRun),
      disabledReason: !canManage
        ? t("You do not have permission to synchronize the catalog.")
        : selectedIds.length === 0
          ? t("Select at least one table.")
          : busy !== null || Boolean(currentRun)
            ? t("Wait for the active catalog operation to finish.")
            : undefined,
    },
    {
      id: "suggest-sensitive",
      label: t("Analyze sensitive fields"),
      group: t("Sensitive data"),
      runLabel: t("Analyze"),
      disabled: !canManage || selectedIds.length === 0 || descriptionGenerationActive || busy !== null || Boolean(currentRun),
      disabledReason: !canManage
        ? t("You do not have permission to review sensitive data.")
        : selectedIds.length === 0
          ? t("Select at least one table.")
        : descriptionGenerationActive || Boolean(currentRun)
              ? t("Wait for the active catalog operation to finish.")
              : busy !== null
                ? t("Another action is running.")
                : undefined,
    },
    {
      id: "clear-columns",
      label: t("Remove synchronized columns"),
      group: t("Catalog cleanup"),
      tone: "destructive",
      runLabel: t("Review cleanup"),
      disabled: !canManage || selectedIds.length === 0 || busy !== null || Boolean(currentRun),
      disabledReason: !canManage
        ? t("You do not have permission to clear catalog metadata.")
        : selectedIds.length === 0
          ? t("Select at least one table.")
          : busy !== null || Boolean(currentRun)
            ? t("Wait for the active catalog operation to finish.")
            : undefined,
    },
  ];

  const runFleetAction = async (action: FleetTableAction) => {
    if (action === "generate-descriptions") await generateDescriptions();
    else if (action === "generate-column-descriptions") await generateColumnDescriptions();
    else if (action === "sync-tables") await synchronize("tables");
    else if (action === "consolidate-descriptions") await consolidateDescriptions();
    else if (action === "sync-columns") await synchronize("columns", selectedIds);
    else if (action === "suggest-sensitive") await suggestSensitive();
    else if (action === "clear-columns") setPendingDelete("columns");
  };

  const clearSelection = () => {
    gridRef.current?.api.deselectAll();
    setSelectedIds([]);
  };

  const columns = useMemo<ColDef<CatalogTable>[]>(() => [
    { field: "name", headerName: t("Name"), minWidth: 250, flex: 1, cellClass: "font-mono text-xs" },
    { field: "sourceComment", headerName: t("Source comment"), minWidth: 260, flex: 1.25, valueFormatter: ({ value }) => value ?? "" },
    { field: "generatedDescription", headerName: t("Generated description"), minWidth: 280, flex: 1.25, valueFormatter: ({ value }) => value ?? "" },
    { field: "description", headerName: t("Description"), minWidth: 280, flex: 1.25, valueFormatter: ({ value }) => value ?? "" },
    { colId: "actions", headerName: t("Actions"), width: 104, minWidth: 104, maxWidth: 104, pinned: "right", lockPinned: true, sortable: false, filter: false, resizable: false, suppressMovable: true, suppressHeaderMenuButton: true, cellRenderer: TableActionsCell },
  ], [t]);
  const context = useMemo<TableGridContext>(() => ({ canManage, presentation, onOpen: openTable }), [canManage, data, presentation, t]);
  const visibleSelected = useMemo(() => {
    const term = search.trim().toLocaleLowerCase();
    if (!term) return selectedIds.length;
    const selected = new Set(selectedIds);
    return data.filter((table) => selected.has(table.id) && [table.name, table.sourceComment, table.generatedDescription, table.description]
      .some((value) => value?.toLocaleLowerCase().includes(term))).length;
  }, [data, search, selectedIds, t]);
  const fleetQueryError = presentation === "fleet" && isError ? (
    <div className="grid min-h-[280px] flex-1 place-items-center p-6" role="alert">
      <div className="max-w-lg rounded-lg border border-destructive/30 bg-destructive/8 p-5 text-sm">
        <p className="font-semibold text-destructive">{t("Catalog tables could not be loaded.")}</p>
        <p className="mt-1 leading-5 text-muted-foreground">{t(apiErrorMessage(error))}</p>
        <Button type="button" variant="outline" className="mt-4" disabled={isFetching} onClick={() => void refetch()}>
          <RefreshCw className={isFetching ? "animate-spin" : ""} aria-hidden="true" /> {t("Retry tables")}</Button>
      </div>
    </div>
  ) : null;

  const databaseHeader = (
    <div className="px-4 pt-5 sm:px-5">
      <Button type="button" variant="ghost" className="-ml-2 mb-4" disabled={navigationBusy} onClick={() => navigateDatabase("databases")}><ArrowLeft />{t("Back to databases")}</Button>
        <div className="flex flex-wrap items-start justify-between gap-4 border-b border-border pb-5">
        <div>
          <p className="thot-label mb-1">{t("Database management")}</p>
          <h2 ref={headingRef} tabIndex={-1} className="font-heading text-2xl font-semibold tracking-tight outline-none">{database.workspaceName}</h2>
          <p className="mt-1 text-sm text-muted-foreground">{database.databaseName} · {database.schema}</p>
        </div>
        <div className="flex gap-2">
          {currentRun ? <Button type="button" variant="outline" onClick={onOpenSync}><RefreshCw className="animate-spin" />{t("View sync")}</Button> : null}
          {onClearCatalogTables ? <Button type="button" variant="outline" className="text-destructive" disabled={!canManage || busy !== null || Boolean(currentRun)} onClick={() => void clearAllCatalogTables()}>{t("Clear catalog tables")}</Button> : null}
          <Button type="button" disabled={!canManage || busy !== null || Boolean(currentRun)} onClick={() => void synchronize("all")}><RefreshCw />{t("Sync all")}</Button>
        </div>
      </div>
      <nav aria-label={t("Database sections")} className="flex gap-1 border-b border-border" role="tablist">
        <button type="button" role="tab" aria-selected="false" className="border-b-2 border-transparent px-3 py-2 text-sm font-semibold text-muted-foreground hover:text-foreground" onClick={() => navigateDatabase("overview")}>{t("Overview")}</button>
        <button type="button" role="tab" aria-selected="true" className="border-b-2 border-primary px-3 py-2 text-sm font-semibold text-foreground">{t("Tables")}</button>
        <button type="button" role="tab" aria-selected="false" className="border-b-2 border-transparent px-3 py-2 text-sm font-semibold text-muted-foreground hover:text-foreground" onClick={() => navigateDatabase("relationships")}>{t("Relationships")}</button>
      </nav>
    </div>
  );

  if (activeTable && presentation === "fleet") {
    if (tableSection === "columns") {
      return (
        <section aria-label={t("Columns for {name}", { name: activeTable.name })} className="flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
          <div className="flex min-h-12 flex-wrap items-center gap-3 border-b border-border bg-muted/25 px-3 py-2">
            <div className="min-w-0">
              <p className="thot-label">{t("Physical table")}</p>
              <h3 className="truncate font-heading text-lg font-semibold">{activeTable.name}</h3>
            </div>
          </div>
          <DatabaseColumns
            databaseId={databaseId}
            table={activeTable}
            databaseVersion={database.version}
            canManage={canManage}
            selectedMetadataModel={selectedMetadataModel}
            descriptionGenerationActive={descriptionGenerationActive}
            onDescriptionGenerationRunStarted={onDescriptionGenerationRunStarted}
            onCatalogSyncRunStarted={onRunStarted}
            onNavigationStateChange={setColumnNavigation}
            onSuggestSensitive={onSuggestSensitive}
            catalogOperationActive={Boolean(currentRun)}
            onCatalogMetricsChanged={onCatalogMetricsChanged}
            presentation="fleet"
          />
        </section>
      );
    }

    return (
      <section aria-label={t("Tables for {workspaceName}", { workspaceName: database.workspaceName })} className="relative flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
        <div className="thot-fleet-grid-toolbar flex min-h-12 flex-wrap items-center gap-3 border-b border-border px-3 py-2">
          <span className="thot-label whitespace-nowrap">{t("Catalog tables")}</span>
          <input
            ref={searchInputRef}
            className="h-8 min-w-40 flex-1 rounded-md border border-input bg-background px-2.5 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15"
            aria-label={t("Search tables")}
            placeholder={t("Search")}
            value={search}
            onChange={(event) => setSearch(event.target.value)}
          />
          <span className="whitespace-nowrap text-xs tabular-nums text-muted-foreground">
            {search.trim() ? t("{count} of {total}", { count: displayedCount, total: data.length }) : displayedCount}
          </span>
          <Button type="button" variant="outline" disabled={isFetching || busy !== null} onClick={() => void refetch()}>
            <RefreshCw className={isFetching ? "animate-spin" : ""} /> {t("Refresh")}</Button>
        </div>
        {fleetQueryError ?? <div className="relative min-h-[280px] flex-1">
          <div className="thot-database-grid thot-fleet-ledger-grid ag-theme-alpine absolute inset-0 h-full w-full">
            <AgGridReact<CatalogTable> key={locale} {...gridLocaleProps}
              ref={gridRef}
              rowData={data}
              columnDefs={columns}
              context={context}
              loading={isLoading}
              quickFilterText={search}
              defaultColDef={{ sortable: true, filter: true, resizable: true }}
              getRowId={({ data: table }) => table.id}
              rowSelection={{ mode: "multiRow", selectAll: "filtered", enableClickSelection: false }}
              onSelectionChanged={({ api }) => setSelectedIds(api.getSelectedRows().map((table) => table.id))}
              onModelUpdated={({ api }) => setDisplayedCount(api.getDisplayedRowCount())}
              rowHeight={44}
              headerHeight={38}
              animateRows={false}
              overlayNoRowsTemplate={t("No catalog tables. Synchronize the schema from the database view.")}
            />
          </div>
        </div>}
        <FleetLedgerDrawer
          open
          eyebrow={t("Catalog metadata")}
          title={t("Review table description")}
          description={t("Physical schema fields are read-only. Review fields can be edited.")}
          onClose={leaveTable}
          closeLabel={t("Close table metadata")}
          busy={busy !== null}
          footer={(
            <>
              <Button type="button" variant="outline" disabled={busy !== null} onClick={leaveTable}>{t("Cancel")}</Button>
              <Button type="button" disabled={!canManage || !editorDirty || busy !== null || stale} onClick={() => void save()}>
                <Save aria-hidden="true" />{busy === "save" ? t("Saving…") : t("Save metadata")}
              </Button>
            </>
          )}
        >
          <p className="thot-label">{t("Physical table")}</p>
          <h3 className="mt-1 break-words font-heading text-xl font-semibold">{activeTable.name}</h3>
          {stale ? (
            staleBannerOpen ? (
              <div className="mt-4 rounded-md border border-amber-500/50 bg-amber-500/8 p-4 text-sm">
                <p className="font-semibold">{t("A newer table description is available.")}</p>
                <p className="mt-1 text-muted-foreground">{t("Your draft is preserved until you reload the current metadata.")}</p>
                <div className="mt-3 flex gap-2"><Button type="button" variant="outline" onClick={() => void reloadTable()}>{t("Reload latest")}</Button><Button type="button" variant="ghost" onClick={() => setStaleBannerOpen(false)}>{t("Keep editing")}</Button></div>
              </div>
            ) : <div className="mt-4 flex items-center justify-between gap-3 rounded-md border border-amber-500/40 bg-amber-500/8 px-4 py-3 text-sm"><span>{t("Reload the latest value before this description can be saved.")}</span><Button type="button" variant="outline" onClick={() => void reloadTable()}>{t("Reload latest")}</Button></div>
          ) : null}
          <div className="mt-5 grid gap-4">
            <label className="grid gap-1.5 text-sm font-semibold">{t("Physical table name")}<input className="h-9 rounded-md border border-input bg-muted/35 px-3 font-mono text-xs" value={activeTable.name} readOnly /></label>
            <label className="grid gap-1.5 text-sm font-semibold">{t("Source comment")}<textarea className="min-h-24 rounded-md border border-input bg-muted/35 px-3 py-2 text-sm" value={activeTable.sourceComment ?? ""} readOnly /></label>
            <label className="grid gap-1.5 text-sm font-semibold">{t("Generated description")}<textarea className="min-h-32 rounded-md border border-input bg-card px-3 py-2 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15" value={generatedDescription} disabled={!canManage || busy !== null} onChange={(event) => setGeneratedDescription(event.target.value)} /></label>
            <label className="grid gap-1.5 text-sm font-semibold">{t("Description")}<textarea className="min-h-36 rounded-md border border-input bg-card px-3 py-2 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15" value={description} disabled={!canManage || busy !== null} onChange={(event) => setDescription(event.target.value)} /><span className="font-normal text-muted-foreground">{t("Leave blank to keep the curated description empty.")}</span></label>
          </div>
        </FleetLedgerDrawer>
      </section>
    );
  }

  if (activeTable) {
    return (
      <section aria-label={t("Table {name}", { name: activeTable.name })} className="flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
        {databaseHeader}
        <div className="mx-3 mb-4 mt-4 flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border border-border bg-card sm:mx-5">
          <div className="border-b border-border px-4 pt-4">
            <Button type="button" variant="ghost" className="-ml-2 mb-2" onClick={leaveTable}><ArrowLeft />{t("Back to tables")}</Button>
            <p className="thot-label">{t("Physical table")}</p>
            <h3 className="mt-1 font-heading text-xl font-semibold">{activeTable.name}</h3>
            <nav aria-label={t("Table sections")} className="mt-3 flex gap-1" role="tablist">
              <button type="button" role="tab" aria-selected={tableSection === "overview"} className={`border-b-2 px-3 py-2 text-sm font-semibold ${tableSection === "overview" ? "border-primary text-foreground" : "border-transparent text-muted-foreground"}`} onClick={() => setTableSection("overview")}>{t("Overview")}</button>
              <button type="button" role="tab" aria-selected={tableSection === "columns"} className={`border-b-2 px-3 py-2 text-sm font-semibold ${tableSection === "columns" ? "border-primary text-foreground" : "border-transparent text-muted-foreground"}`} onClick={() => setTableSection("columns")}>{t("Columns")}</button>
            </nav>
          </div>
          {tableSection === "columns" ? (
            <DatabaseColumns
              databaseId={databaseId}
              table={activeTable}
              databaseVersion={database.version}
              canManage={canManage}
              selectedMetadataModel={selectedMetadataModel}
              descriptionGenerationActive={descriptionGenerationActive}
              onDescriptionGenerationRunStarted={onDescriptionGenerationRunStarted}
              onCatalogSyncRunStarted={onRunStarted}
              onNavigationStateChange={setColumnNavigation}
              onSuggestSensitive={onSuggestSensitive}
              onCatalogMetricsChanged={onCatalogMetricsChanged}
            />
          ) : (
            <div className="min-h-0 overflow-y-auto px-4 py-5">
              <p className="text-sm text-muted-foreground">{t("Only review metadata can be changed.")}</p>
              {stale ? (
                staleBannerOpen ? (
                  <div className="mt-4 rounded-md border border-amber-500/50 bg-amber-500/8 p-4 text-sm">
                    <p className="font-semibold">{t("A newer table description is available.")}</p>
                    <p className="mt-1 text-muted-foreground">{t("Your draft is preserved until you reload the current metadata.")}</p>
                    <div className="mt-3 flex gap-2"><Button type="button" variant="outline" onClick={() => void reloadTable()}>{t("Reload latest")}</Button><Button type="button" variant="ghost" onClick={() => setStaleBannerOpen(false)}>{t("Keep editing")}</Button></div>
                  </div>
                ) : <div className="mt-4 flex items-center justify-between gap-3 rounded-md border border-amber-500/40 bg-amber-500/8 px-4 py-3 text-sm"><span>{t("Reload the latest value before this description can be saved.")}</span><Button type="button" variant="outline" onClick={() => void reloadTable()}>{t("Reload latest")}</Button></div>
              ) : null}
              <div className="mt-5 grid gap-4">
                <label className="grid gap-1.5 text-sm font-semibold">{t("Physical table name")}<input className="h-9 rounded-md border border-input bg-muted/35 px-3 font-mono text-xs" value={activeTable.name} readOnly /></label>
                <label className="grid gap-1.5 text-sm font-semibold">{t("Source comment")}<textarea className="min-h-24 rounded-md border border-input bg-muted/35 px-3 py-2 text-sm" value={activeTable.sourceComment ?? ""} readOnly /></label>
                <label className="grid gap-1.5 text-sm font-semibold">{t("Generated description")}<textarea className="min-h-32 rounded-md border border-input bg-card px-3 py-2 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15" value={generatedDescription} disabled={!canManage || busy !== null} onChange={(event) => setGeneratedDescription(event.target.value)} /></label>
                <label className="grid gap-1.5 text-sm font-semibold">{t("Description")}<textarea className="min-h-36 rounded-md border border-input bg-card px-3 py-2 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15" value={description} disabled={!canManage || busy !== null} onChange={(event) => setDescription(event.target.value)} /><span className="font-normal text-muted-foreground">{t("Leave blank to keep the curated description empty.")}</span></label>
              </div>
              <div className="mt-5 flex justify-end gap-2 border-t border-border pt-4">
                <Button type="button" variant="outline" disabled={busy !== null} onClick={leaveTable}>{t("Cancel")}</Button>
                <Button type="button" disabled={!canManage || !editorDirty || busy !== null || stale} onClick={() => void save()}><Save />{busy === "save" ? t("Saving…") : t("Save metadata")}</Button>
              </div>
            </div>
          )}
        </div>
      </section>
    );
  }

  return (
    <section aria-label={t("Tables for {workspaceName}", { workspaceName: database.workspaceName })} className="flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
      {presentation === "legacy" ? databaseHeader : null}
      <div className={presentation === "fleet" ? "thot-fleet-grid-surface flex min-h-0 flex-1 flex-col overflow-hidden bg-card" : "mx-3 mb-4 mt-4 flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border border-border bg-card sm:mx-5"}>
        <div className={`${presentation === "fleet" ? "thot-fleet-grid-toolbar " : ""}flex min-h-12 flex-wrap items-center gap-3 border-b border-border px-3 py-2`}>
          {selectedIds.length > 0 ? (
            pendingDelete ? (
              <div
                role="group"
                aria-labelledby="table-cleanup-confirmation"
                className="flex min-w-0 flex-1 flex-wrap items-center gap-2"
                onKeyDown={(event) => {
                  if (event.key === "Escape" && busy === null) closeDeleteConfirmation();
                }}
              >
                <div className="mr-auto min-w-56">
                  <p id="table-cleanup-confirmation" className="text-sm font-semibold">
                    {presentation === "fleet"
                      ? (selectedIds.length === 1 ? t("Remove synchronized columns for {count} table?", { count: selectedIds.length }) : t("Remove synchronized columns for {count} tables?", { count: selectedIds.length }))
                      : (selectedIds.length === 1 ? t("Remove synchronized columns for {count} table?", { count: selectedIds.length }) : t("Remove synchronized columns for {count} tables?", { count: selectedIds.length }))}
                  </p>
                  <p className="text-xs text-muted-foreground">
                    {t("Only synchronized catalog columns for these tables will be removed. The source database is not modified.")}</p>
                </div>
                <Button type="button" variant="ghost" disabled={busy !== null} onClick={closeDeleteConfirmation}>{t("Cancel")}</Button>
                <Button
                  id="table-cleanup-confirm-button"
                  type="button"
                  variant="destructive"
                  disabled={busy !== null}
                  onClick={() => void deleteMetadata(pendingDelete)}
                >
                  <Trash2 />{t("Remove synchronized columns")}</Button>
              </div>
            ) : (
              presentation === "fleet" ? (
                <>
                  <FleetActionSelector
                    actions={fleetActions}
                    selectedCount={selectedIds.length}
                    hiddenSelectedCount={selectedIds.length - visibleSelected}
                    busy={busy !== null}
                    busyLabel={busy === "generate" ? t("Generating…") : busy === "suggest" ? t("Suggesting…") : t("Running…")}
                    selectRef={fleetActionSelectRef}
                    onRun={runFleetAction}
                    onClear={clearSelection}
                    label={t("Table action")}
                  />
                </>
              ) : (
                <>
                  <span className="text-sm font-semibold">{selectedIds.length} {t("selected")}</span>
                  {visibleSelected !== selectedIds.length ? <span className="text-xs text-muted-foreground">{selectedIds.length - visibleSelected} {t("hidden by filter")}</span> : null}
                  <Menu.Root>
                    <Menu.Trigger ref={actionsTriggerRef} className="inline-flex h-8 items-center justify-center gap-2 rounded-md border border-input bg-background px-3 text-sm font-medium hover:bg-muted disabled:pointer-events-none disabled:opacity-50" disabled={busy !== null}>{t("Actions")} <ChevronDown className="size-4" /></Menu.Trigger>
                    <Menu.Portal>
                      <Menu.Positioner side="bottom" align="start" sideOffset={4}>
                        <Menu.Popup className="z-50 min-w-64 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-none">
                          <Menu.Item className="rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-45" disabled={!canManage || !selectedMetadataModel || descriptionGenerationActive || busy !== null || Boolean(currentRun)} onClick={() => void generateDescriptions()}>{t("Generate table description")}</Menu.Item>
                          <Menu.Item className="rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-45" disabled={!canManage || !selectedMetadataModel || descriptionGenerationActive || busy !== null || Boolean(currentRun)} onClick={() => void generateColumnDescriptions()}>{t("Generate descriptions for all columns")}</Menu.Item>
                          <Menu.Item className="rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-45" disabled={!canManage || busy !== null || Boolean(currentRun)} onClick={() => void synchronize("tables")}>{t("Synchronize database tables")}</Menu.Item>
                          <Menu.Item className="rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-45" disabled={!canManage || busy !== null || Boolean(currentRun)} onClick={() => void synchronize("columns", selectedIds)}>{t("Synchronize columns for selected tables")}</Menu.Item>
                          <Menu.Item className="rounded-md px-3 py-2 text-sm outline-none data-[highlighted]:bg-muted data-[disabled]:opacity-45" disabled={!canManage || busy !== null || Boolean(currentRun)} onClick={() => void consolidateDescriptions()}>{t("Copy generated descriptions to Description")}</Menu.Item>
                          <Menu.Separator className="my-1 h-px bg-border" />
                          <Menu.Item className="rounded-md px-3 py-2 text-sm text-destructive outline-none data-[highlighted]:bg-destructive/10 data-[disabled]:opacity-45" disabled={!canManage || busy !== null || Boolean(currentRun)} onClick={() => setPendingDelete("columns")}>{t("Remove synchronized columns")}</Menu.Item>
                        </Menu.Popup>
                      </Menu.Positioner>
                    </Menu.Portal>
                  </Menu.Root>
                  <Button type="button" variant="outline" disabled={!canManage || descriptionGenerationActive || busy !== null} title={descriptionGenerationActive ? t("Wait for the active description generation to finish") : undefined} onClick={() => void suggestSensitive()}><Sparkles />{busy === "suggest" ? t("Analyzing…") : t("Analyze sensitive fields")}</Button>
                  <Button type="button" variant="ghost" onClick={clearSelection}><X />{t("Clear")}</Button>
                </>
              )
            )
          ) : (
            presentation === "fleet" ? (
              <>
                <FleetActionSelector
                  actions={fleetActions}
                  selectedCount={0}
                  busy={busy !== null}
                  busyLabel={busy === "generate" ? t("Generating…") : busy === "suggest" ? t("Suggesting…") : t("Running…")}
                  selectRef={fleetActionSelectRef}
                  onRun={runFleetAction}
                  onClear={clearSelection}
                  label={t("Table action")}
                />
                <input ref={searchInputRef} className="h-8 min-w-40 flex-1 rounded-md border border-input bg-background px-2.5 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15" aria-label={t("Search tables")} placeholder={t("Search")} value={search} onChange={(event) => setSearch(event.target.value)} />
                <span aria-live="polite" className="whitespace-nowrap text-xs tabular-nums text-muted-foreground">{search.trim() ? t("{count} of {total}", { count: displayedCount, total: data.length }) : displayedCount}</span>
                <Button type="button" variant="outline" disabled={isFetching || busy !== null} onClick={() => void refetch()}><RefreshCw className={isFetching ? "animate-spin" : ""} />{t("Refresh")}</Button>
              </>
            ) : (
              <>
                <span className="thot-label whitespace-nowrap">{t("Catalog tables")}</span>
                <input ref={searchInputRef} className="h-8 min-w-40 flex-1 rounded-md border border-input bg-background px-2.5 text-sm outline-none focus:border-primary/60 focus:ring-3 focus:ring-ring/15" aria-label={t("Search tables")} placeholder={t("Search")} value={search} onChange={(event) => setSearch(event.target.value)} />
                <span aria-live="polite" className="whitespace-nowrap text-xs tabular-nums text-muted-foreground">{search.trim() ? t("{count} of {total}", { count: displayedCount, total: data.length }) : displayedCount}</span>
                <Button type="button" variant="outline" disabled={isFetching || busy !== null} onClick={() => void refetch()}><RefreshCw className={isFetching ? "animate-spin" : ""} />{t("Refresh")}</Button>
              </>
            )
          )}
        </div>
        {fleetQueryError ?? <div className="relative min-h-[280px] flex-1">
          <div className={`thot-database-grid ${presentation === "fleet" ? "thot-fleet-ledger-grid " : ""}ag-theme-alpine absolute inset-0 h-full w-full`}>
            <AgGridReact<CatalogTable> key={locale} {...gridLocaleProps}
              ref={gridRef}
              rowData={data}
              columnDefs={columns}
              context={context}
              loading={isLoading}
              quickFilterText={search}
              defaultColDef={{ sortable: true, filter: true, resizable: true }}
              getRowId={({ data: table }) => table.id}
              rowSelection={{ mode: "multiRow", selectAll: "filtered", enableClickSelection: false }}
              onSelectionChanged={({ api }) => {
                if (pendingDelete && busy === null) setPendingDelete(null);
                setSelectedIds(api.getSelectedRows().map((table) => table.id));
              }}
              onModelUpdated={({ api }) => setDisplayedCount(api.getDisplayedRowCount())}
              rowHeight={44}
              headerHeight={38}
              animateRows={false}
              overlayNoRowsTemplate={t("No catalog tables. Synchronize the schema from the database view.")}
            />
          </div>
        </div>}
      </div>
    </section>
  );
}