"use client";

/**
 * TableView — grid renderer for TABLE (and fallback) views.
 *
 * "Virtualized-ish": renders pages of 50 rows with a "Show more" / prev-next
 * cursor control (the documented pagination), sticky header, row selection
 * with a bulk bar, group headers when the view has a group, per-column
 * quick filters, and inline cell editing via <CellEditor/>.
 */
import { useCallback, useMemo, useRef, useState } from "react";
import {
  ChevronDown,
  ChevronLeft,
  ChevronRight,
  Copy,
  Eye,
  Filter,
  MessageSquare,
  Plus,
  Sparkles,
  Trash2,
  X
} from "lucide-react";
import { cn } from "@/lib/utils";
import { apiFetch } from "@/lib/api";
import { toast } from "@/stores/ui-store";

/** Toast adapter: call sites use variant:"destructive"; core store uses kind. */
const notify = (t: { title: string; description?: string; variant?: string }) =>
  toast(t.variant === "destructive" ? "error" : "success", t.title, t.description);
import { useDatabaseStore } from "@/stores/database-store";
import {
  DatabaseProperty,
  DatabaseView,
  FilterCondition,
  RecordDto,
  RecordValue,
  SortSpec,
  UseDatabaseRecordsResult,
  useBulkUpdateRecords,
  useCreateRecord,
  useDeleteRecord,
  valueToText
} from "@/hooks/use-database";
import { CellRenderer, isEditableProperty } from "@/components/database/cell-renderer";
import { CellEditor } from "@/components/database/cell-editor";
import { PropertyEditor } from "@/components/database/property-editor";

export interface ViewCommonProps {
  databaseId: string;
  view: DatabaseView;
  properties: DatabaseProperty[];
  records: UseDatabaseRecordsResult;
  /** Open the right-hand record panel. */
  onOpenRecord: (record: RecordDto) => void;
  /** Navigate to a record page. */
  onOpenRecordPage: (record: RecordDto) => void;
  /** Ad-hoc sort override change (view tabs + headers feed this). */
  onSortChange: (sort: SortSpec[] | null) => void;
  /** Ad-hoc filter override change (column quick filter). */
  onFilterChange: (filter: FilterCondition | FilterCondition[] | null) => void;
  /** T-166: persist the rows-per-page on the view (`view.pageSize`). */
  onPageSizeChange?: (pageSize: number) => void;
  readOnly?: boolean;
}

const PAGE_SIZE_WINDOW = 50; // rows per cursor page (matches records hook default)

function visibleColumns(view: DatabaseView, properties: DatabaseProperty[]): DatabaseProperty[] {
  const visible = view.config.visibleProperties;
  const cols = visible
    ? visible
        .map((id) => properties.find((p) => p.id === id))
        .filter((p): p is DatabaseProperty => !!p)
    : properties;
  // Title first, keep declared order for the rest.
  const title = cols.find((p) => p.isTitle);
  const rest = cols.filter((p) => p !== title);
  return title ? [title, ...rest] : cols;
}

// ---------------------------------------------------------------------------
// Column quick filter popover
// ---------------------------------------------------------------------------

function ColumnQuickFilter({
  property,
  onApply,
  onClear
}: {
  property: DatabaseProperty;
  onApply: (c: FilterCondition | null) => void;
  onClear: () => void;
}) {
  const [text, setText] = useState("");
  const [optionId, setOptionId] = useState("");
  const selectLike = property.type === "select" || property.type === "status" || property.type === "multi_select";
  const textLike = ["title", "text", "rich_text", "email", "url"].includes(property.type);

  return (
    <div className="w-52 rounded-md border bg-popover p-2 shadow-md">
      <p className="mb-1 text-xs font-medium">Filter: {property.name}</p>
      {textLike && (
        <input
          className="mb-1 w-full rounded border border-input bg-background px-1.5 py-0.5 text-xs outline-none focus-visible:ring-1 focus-visible:ring-ring"
          placeholder="Contains…"
          value={text}
          onChange={(e) => setText(e.target.value)}
        />
      )}
      {selectLike && (
        <select
          className="mb-1 w-full rounded border border-input bg-background px-1.5 py-0.5 text-xs outline-none"
          value={optionId}
          onChange={(e) => setOptionId(e.target.value)}
        >
          <option value="">Any option…</option>
          {(property.config.options ?? []).map((o) => (
            <option key={o.id} value={o.id}>
              {o.name}
            </option>
          ))}
        </select>
      )}
      <div className="flex items-center gap-1">
        <button
          type="button"
          className="flex-1 rounded bg-primary px-2 py-0.5 text-xs text-primary-foreground hover:bg-primary/90"
          onClick={() =>
            onApply(
              textLike && text
                ? { propertyId: property.id, op: "contains", value: { text } }
                : selectLike && optionId
                  ? {
                      propertyId: property.id,
                      op: property.type === "multi_select" ? "contains_any" : "equals",
                      value: property.type === "multi_select" ? { optionIds: [optionId] } : { optionId }
                    }
                  : null
            )
          }
        >
          Apply
        </button>
        <button
          type="button"
          className="rounded px-2 py-0.5 text-xs text-muted-foreground hover:bg-muted"
          onClick={() => {
            onApply({ propertyId: property.id, op: "is_empty", value: undefined });
          }}
        >
          Empty
        </button>
        <button type="button" className="rounded p-0.5 text-muted-foreground hover:bg-muted" onClick={onClear} aria-label="Clear column filter">
          <X className="size-3.5" />
        </button>
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Bulk bar value input (set one property on all selected rows)
// ---------------------------------------------------------------------------

function BulkSetBar({
  databaseId,
  columns,
  records,
  selected
}: {
  databaseId: string;
  columns: DatabaseProperty[];
  records: RecordDto[];
  selected: string[];
}) {
  const clearSelection = useDatabaseStore((s) => s.clearSelection);
  const bulk = useBulkUpdateRecords(databaseId);
  const settable = columns.filter((p) => isEditableProperty(p));
  const [propId, setPropId] = useState<string>(settable.find((p) => p.type === "select" || p.type === "status")?.id ?? settable[0]?.id ?? "");
  const [text, setText] = useState("");
  const [optionId, setOptionId] = useState("");

  const prop = columns.find((p) => p.id === propId);
  const selectLike = prop?.type === "select" || prop?.type === "status";
  const textLike = prop && ["title", "text", "rich_text", "email", "url", "phone"].includes(prop.type);
  const isNumber = prop?.type === "number";
  const isDate = prop?.type === "date";
  const isCheckbox = prop?.type === "checkbox";

  const canApply = selectLike ? !!optionId : isCheckbox ? true : !!text;

  const apply = () => {
    if (!prop) return;
    const value: RecordValue = selectLike
      ? { optionId }
      : isCheckbox
        ? { value: true }
        : isNumber
          ? { value: Number(text) }
          : isDate
            ? { start: new Date(text).toISOString(), end: null }
            : { text, marks: [] };
    const items = records
      .filter((r) => selected.includes(r.id))
      .map((r) => ({ recordId: r.id, properties: { [prop.id]: value }, version: r.version }));
    bulk.mutate(
      items,
      {
        onSuccess: (res) => {
          clearSelection();
          notify({
            title: `Updated ${res.succeeded} record(s)`,
            description: res.failed.length ? `${res.failed.length} failed` : undefined,
            variant: res.failed.length ? "destructive" : "default"
          });
          setText("");
          setOptionId("");
        },
        onError: (e) => notify({ title: "Bulk update failed", description: (e as Error).message, variant: "destructive" })
      }
    );
  };

  return (
    <>
      <select
        className="max-w-32 rounded border border-input bg-background px-1.5 py-0.5 text-xs outline-none"
        value={propId}
        onChange={(e) => setPropId(e.target.value)}
        aria-label="Property to set"
      >
        {settable.map((p) => (
          <option key={p.id} value={p.id}>
            {p.name}
          </option>
        ))}
      </select>
      {selectLike && (
        <select
          className="max-w-32 rounded border border-input bg-background px-1.5 py-0.5 text-xs outline-none"
          value={optionId}
          onChange={(e) => setOptionId(e.target.value)}
          aria-label="Value"
        >
          <option value="">Value…</option>
          {(prop?.config.options ?? []).map((o) => (
            <option key={o.id} value={o.id}>
              {o.name}
            </option>
          ))}
        </select>
      )}
      {textLike && (
        <input
          className="w-32 rounded border border-input bg-background px-1.5 py-0.5 text-xs outline-none"
          placeholder="Value"
          value={text}
          onChange={(e) => setText(e.target.value)}
        />
      )}
      {isNumber && (
        <input
          type="number"
          className="w-20 rounded border border-input bg-background px-1.5 py-0.5 text-xs outline-none"
          value={text}
          onChange={(e) => setText(e.target.value)}
        />
      )}
      {isDate && (
        <input
          type="date"
          className="rounded border border-input bg-background px-1.5 py-0.5 text-xs outline-none"
          value={text}
          onChange={(e) => setText(e.target.value)}
        />
      )}
      <button
        type="button"
        disabled={!canApply || bulk.isPending}
        className="rounded bg-primary px-2 py-0.5 text-xs text-primary-foreground hover:bg-primary/90 disabled:opacity-40"
        onClick={apply}
      >
        {isCheckbox ? "Check all" : "Set"}
      </button>
    </>
  );
}

// ---------------------------------------------------------------------------

export function TableView(props: ViewCommonProps) {
  const {
    databaseId,
    view,
    properties,
    records,
    onOpenRecord,
    onOpenRecordPage,
    onSortChange,
    onFilterChange,
    onPageSizeChange,
    readOnly
  } = props;

  const { data, isLoading, isFetching, hasMore, loadMore, goPrev, canPrev } = records;
  const columns = useMemo(() => visibleColumns(view, properties), [view, properties]);

  const selected = useDatabaseStore((s) => s.selectedRecordIds);
  const setSelected = useDatabaseStore((s) => s.setSelectedRecords);
  const toggleSelected = useDatabaseStore((s) => s.toggleSelectedRecord);
  const clearSelection = useDatabaseStore((s) => s.clearSelection);

  const [editingCell, setEditingCell] = useState<{ recordId: string; propertyId: string } | null>(null);
  const [addPropertyOpen, setAddPropertyOpen] = useState(false);
  // Double-click a column header → the property editor in EDIT mode (rename,
  // options, visibility, delete). The editor's edit mode existed but nothing
  // ever opened it (the + Property button is add-only), so columns could not
  // be renamed from the UI even though PATCH /properties/:id works.
  const [editProperty, setEditProperty] = useState<DatabaseProperty | null>(null);
  const [quickFilter, setQuickFilter] = useState<string | null>(null);
  const [confirmDelete, setConfirmDelete] = useState<string[] | null>(null);
  const headerRef = useRef<HTMLDivElement>(null);

  const createRecord = useCreateRecord(databaseId);
  const deleteRecord = useDeleteRecord(databaseId);

  const titleProp = columns.find((p) => p.isTitle) ?? columns[0];

  // ---- sort cycle (asc → desc → none) for a column -------------------------
  const cycleSort = (propertyId: string) => {
    const sorts = view.sort ?? [];
    const idx = sorts.findIndex((s) => s.propertyId === propertyId);
    const current = sorts[idx];
    let next: SortSpec;
    if (!current) next = { propertyId, direction: "asc" };
    else if (current.direction === "asc") next = { propertyId, direction: "desc" };
    else next = { propertyId, direction: "asc" as const };
    const rest = sorts.filter((s) => s.propertyId !== propertyId);
    if (!current || current.direction === "desc") {
      onSortChange([...rest, next]);
    } else if (current.direction === "asc" && next.direction === "desc") {
      onSortChange([...rest, next]);
    } else {
      onSortChange(rest.length ? rest : null);
    }
  };

  // ---- row actions -----------------------------------------------------------
  const duplicateRecord = async (record: RecordDto) => {
    if (!record.pageId) return;
    try {
      await apiFetch(`/pages/${record.pageId}/duplicate`, { method: "POST", body: JSON.stringify({}) });
      notify({ title: "Record duplicated" });
    } catch (e) {
      notify({ title: "Duplicate failed", description: (e as Error).message, variant: "destructive" });
    }
  };

  const addRow = () => {
    // The API rejects the title inside `properties` (`title_via_title_field`)
    // — it must go in the top-level `title` field (docs/api/databases.md §7).
    createRecord.mutate(
      { title: "New record", properties: {} },
      {
        onSuccess: () => notify({ title: "Row added" }),
        onError: (e) => notify({ title: "Add row failed", description: (e as Error).message, variant: "destructive" })
      }
    );
  };

  // ---- selection helpers -----------------------------------------------------
  const allVisibleIds = data.records.map((r) => r.id);
  const allSelected = allVisibleIds.length > 0 && allVisibleIds.every((id) => selected.includes(id));
  const toggleAll = () => setSelected(allSelected ? [] : allVisibleIds);

  const sortDirFor = (propertyId: string): "asc" | "desc" | null => {
    const s = view.sort?.find((x) => x.propertyId === propertyId);
    return s?.direction ?? null;
  };

  const renderRow = (record: RecordDto) => {
    const isSelected = selected.includes(record.id);
    return (
      <div
        key={record.id}
        data-testid={`record-row-${record.id}`}
        className={cn(
          "group relative grid border-b border-border/60 text-sm transition-colors hover:bg-muted/40",
          isSelected && "bg-primary/5"
        )}
        style={{ gridTemplateColumns: gridTemplate(columns) }}
      >
        {/* checkbox */}
        <div className="flex items-center justify-center border-r border-border/60 px-1">
          <input
            type="checkbox"
            className="size-3.5 accent-[oklch(var(--primary))]"
            checked={isSelected}
            onChange={() => toggleSelected(record.id)}
            aria-label={`Select ${recordTitleSafe(record, properties)}`}
            onClick={(e) => e.stopPropagation()}
          />
        </div>
        {/* cells */}
        {columns.map((p) => {
          const isEditing = editingCell?.recordId === record.id && editingCell?.propertyId === p.id;
          const width = view.config.columnWidths?.[p.id];
          return (
            <div
              key={p.id}
              className={cn(
                "min-w-0 border-r border-border/40 px-2 py-1.5 last:border-r-0",
                isEditing && "z-10"
              )}
              style={width ? { width } : undefined}
            >
              {isEditing ? (
                <CellEditor
                  record={record}
                  property={p}
                  onDone={() => setEditingCell(null)}
                  className="min-w-full"
                />
              ) : (
                <CellRenderer
                  record={record}
                  property={p}
                  value={record.properties[p.id]}
                  readOnly={readOnly}
                  onEdit={
                    readOnly ? undefined : (r, prop) => setEditingCell({ recordId: r.id, propertyId: prop.id })
                  }
                  onOpenRecord={onOpenRecordPage}
                />
              )}
            </div>
          );
        })}
        {/* hover actions */}
        {!readOnly && (
          <div className="absolute right-2 top-1/2 hidden -translate-y-1/2 items-center gap-0.5 rounded-md border bg-background p-0.5 shadow-sm group-hover:flex">
            <button type="button" className="rounded p-1 hover:bg-muted" title="Open record" onClick={() => onOpenRecord(record)}>
              <Eye className="size-3.5" />
            </button>
            <button type="button" className="rounded p-1 hover:bg-muted" title="Duplicate" onClick={() => void duplicateRecord(record)}>
              <Copy className="size-3.5" />
            </button>
            <button type="button" className="rounded p-1 hover:bg-muted" title="Comments" onClick={() => onOpenRecord(record)}>
              <MessageSquare className="size-3.5" />
            </button>
            <button
              type="button"
              className="rounded p-1 text-destructive hover:bg-muted"
              title="Delete"
              onClick={() => setConfirmDelete([record.id])}
            >
              <Trash2 className="size-3.5" />
            </button>
          </div>
        )}
      </div>
    );
  };

  // ---- groups ------------------------------------------------------------------
  const groups = data.groups;

  return (
    <div className="flex h-full flex-col">
      {/* header */}
      <div
        ref={headerRef}
        className="sticky top-0 z-10 grid border-b border-border bg-muted/60 text-xs font-medium text-muted-foreground backdrop-blur"
        style={{ gridTemplateColumns: gridTemplate(columns) }}
      >
        <div className="flex items-center justify-center border-r border-border/60 px-1">
          <input
            type="checkbox"
            className="size-3.5 accent-[oklch(var(--primary))]"
            checked={allSelected}
            onChange={toggleAll}
            aria-label="Select all visible rows"
          />
        </div>
        {columns.map((p) => {
          const dir = sortDirFor(p.id);
          const width = view.config.columnWidths?.[p.id];
          return (
            <div
              key={p.id}
              className="relative flex items-center gap-1 border-r border-border/60 px-2 py-1.5 last:border-r-0"
              style={width ? { width } : undefined}
            >
              <button
                type="button"
                className="flex min-w-0 items-center gap-1 hover:text-foreground"
                onClick={() => cycleSort(p.id)}
                onDoubleClick={() => {
                  if (!readOnly) setEditProperty(p);
                }}
                title={readOnly ? `Sort by ${p.name}` : `Sort by ${p.name} · double-click to rename`}
              >
                {propertyIcon(p.type)}
                <span className="truncate">{p.name}</span>
                {dir && (
                  <ChevronDown className={cn("size-3", dir === "asc" && "rotate-180")} aria-hidden />
                )}
              </button>
              {!readOnly && (
                <div className="relative">
                  <button
                    type="button"
                    className="rounded p-0.5 opacity-0 hover:bg-muted group-hover:opacity-100 focus-visible:opacity-100"
                    onClick={() => setQuickFilter(quickFilter === p.id ? null : p.id)}
                    title={`Filter ${p.name}`}
                    aria-label={`Filter ${p.name}`}
                  >
                    <Filter className="size-3" />
                  </button>
                  {quickFilter === p.id && (
                    <div className="absolute right-0 top-6 z-30">
                      <ColumnQuickFilter
                        property={p}
                        onApply={(c) => {
                          onFilterChange(c);
                          setQuickFilter(null);
                        }}
                        onClear={() => {
                          onFilterChange(null);
                          setQuickFilter(null);
                        }}
                      />
                    </div>
                  )}
                </div>
              )}
            </div>
          );
        })}
        {/* add property */}
        {!readOnly && (
          <div className="px-1">
            <button
              type="button"
              className="rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
              onClick={() => setAddPropertyOpen(true)}
              title="Add property"
              aria-label="Add property"
            >
              <Plus className="size-4" />
            </button>
          </div>
        )}
      </div>

      {/* body */}
      <div className="min-h-0 flex-1 overflow-auto">
        {isLoading ? (
          <div className="space-y-2 p-4">
            {Array.from({ length: 8 }).map((_, i) => (
              <div key={i} className="h-8 animate-pulse rounded bg-muted" />
            ))}
          </div>
        ) : data.records.length === 0 ? (
          <div className="flex flex-col items-center gap-3 py-16 text-center">
            <p className="text-sm text-muted-foreground">
              {properties.length === 0 ? "This database has no properties yet." : "No records match this view."}
            </p>
            {properties.length > 0 && !readOnly && (
              <div className="flex items-center gap-2">
                <button type="button" data-testid="add-row" 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={addRow}>
                  <Plus className="size-4" /> Add row
                </button>
                <button
                  type="button"
                  disabled
                  title="AI row generation lands in Phase 12"
                  className="inline-flex cursor-not-allowed items-center gap-1 rounded-md border px-3 py-1.5 text-sm opacity-50"
                >
                  <Sparkles className="size-4" /> AI generate
                </button>
              </div>
            )}
            {properties.length === 0 && !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={() => setAddPropertyOpen(true)}>
                <Plus className="size-4" /> Add property
              </button>
            )}
          </div>
        ) : (
          <div className="relative">
            {isFetching && <div className="absolute inset-x-0 top-0 z-20 h-0.5 animate-pulse bg-primary" />}
            {groups
              ? groups.map((g) => (
                  <div key={`${g.key.propertyId}:${JSON.stringify(g.key.value)}`}>
                    <div className="sticky top-0 z-[5] flex items-center justify-between border-b border-border bg-muted/80 px-3 py-1 text-xs font-medium backdrop-blur">
                      <span>
                        {g.key.label}
                        <span className="ml-1.5 font-normal text-muted-foreground">({g.count})</span>
                      </span>
                    </div>
                    {g.records.map(renderRow)}
                  </div>
                ))
              : data.records.map(renderRow)}
          </div>
        )}

        {/* footer: count + add-row + pagination (cursor prev / next) */}
        {!isLoading && data.records.length > 0 && (
          <div className="flex items-center justify-between border-t border-border px-3 py-2 text-xs text-muted-foreground">
            <div className="flex items-center gap-2">
              <span>
                {data.records.length} of {data.totalCount ?? "…"} records
              </span>
              {/* T-166: explicit rows-per-page (persisted on the view). The
                  query hook refetches from page 1 when `pageSize` changes
                  (it is part of the query key). */}
              {onPageSizeChange && (
                <label className="flex items-center gap-1">
                  <select
                    data-testid="page-size"
                    aria-label="Rows per page"
                    className="rounded border border-border bg-background px-1 py-0.5 text-xs"
                    value={view.pageSize ?? 50}
                    onChange={(e) => onPageSizeChange(Number(e.target.value))}
                  >
                    {[20, 50, 100, 200].map((n) => (
                      <option key={n} value={n}>
                        {n}
                      </option>
                    ))}
                  </select>
                  <span>per page</span>
                </label>
              )}
            </div>
            <div className="flex items-center gap-1">
              {!readOnly && (
                <button
                  type="button"
                  data-testid="add-row"
                  className="mr-1 inline-flex items-center gap-0.5 rounded border px-2 py-0.5 hover:bg-muted"
                  onClick={addRow}
                  title="Add row"
                >
                  <Plus className="size-3.5" /> Add row
                </button>
              )}
              <button
                type="button"
                disabled={!canPrev}
                className="inline-flex items-center gap-0.5 rounded border px-2 py-0.5 hover:bg-muted disabled:opacity-40"
                onClick={goPrev}
              >
                <ChevronLeft className="size-3.5" /> Prev
              </button>
              <button
                type="button"
                disabled={!hasMore}
                className="inline-flex items-center gap-0.5 rounded border px-2 py-0.5 hover:bg-muted disabled:opacity-40"
                onClick={loadMore}
              >
                Next <ChevronRight className="size-3.5" />
              </button>
            </div>
          </div>
        )}
      </div>

      {/* bulk bar */}
      {selected.length > 0 && !readOnly && (
        <div className="flex flex-wrap items-center gap-2 border-t border-border bg-muted/50 px-3 py-1.5 text-xs">
          <span className="font-medium">{selected.length} selected</span>
          <BulkSetBar
            databaseId={databaseId}
            columns={columns}
            records={data.records}
            selected={selected}
          />
          <button
            type="button"
            className="inline-flex items-center gap-1 rounded border border-destructive/40 px-2 py-0.5 text-destructive hover:bg-destructive/10"
            onClick={() => setConfirmDelete(selected)}
          >
            <Trash2 className="size-3.5" /> Delete
          </button>
          <button type="button" className="ml-auto rounded p-0.5 text-muted-foreground hover:bg-muted" onClick={clearSelection} aria-label="Clear selection">
            <X className="size-3.5" />
          </button>
        </div>
      )}

      {/* delete confirm */}
      {confirmDelete && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
          <div className="w-full max-w-sm rounded-lg border bg-background p-4 shadow-lg">
            <h3 className="text-sm font-medium">
              Delete {confirmDelete.length === 1 ? "this record" : `${confirmDelete.length} records`}?
            </h3>
            <p className="mt-1 text-xs text-muted-foreground">
              The record and its page are hard-deleted. This cannot be undone.
            </p>
            <div className="mt-3 flex justify-end gap-2">
              <button type="button" className="rounded border px-3 py-1 text-sm hover:bg-muted" onClick={() => setConfirmDelete(null)}>
                Cancel
              </button>
              <button
                type="button"
                className="rounded bg-destructive px-3 py-1 text-sm text-destructive-foreground hover:bg-destructive/90"
                onClick={async () => {
                  for (const id of confirmDelete) {
                    try {
                      await deleteRecord.mutateAsync(id);
                    } catch (e) {
                      notify({ title: "Delete failed", description: (e as Error).message, variant: "destructive" });
                    }
                  }
                  setConfirmDelete(null);
                  clearSelection();
                  notify({ title: `Deleted ${confirmDelete.length} record(s)` });
                }}
                disabled={deleteRecord.isPending}
              >
                Delete
              </button>
            </div>
          </div>
        </div>
      )}

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

      {/* edit property dialog (double-clicked a column header) */}
      {editProperty && (
        <PropertyEditor
          databaseId={databaseId}
          properties={properties}
          property={editProperty}
          mode="edit"
          onClose={() => setEditProperty(null)}
        />
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Small helpers
// ---------------------------------------------------------------------------

function gridTemplate(columns: DatabaseProperty[]): string {
  const widths = columns.map((p) => {
    const w = 160;
    return `${w}px`;
  });
  return `28px ${widths.join(" ")} 32px`;
}

function recordTitleSafe(record: RecordDto, properties: DatabaseProperty[]): string {
  const t = properties.find((p) => p.isTitle);
  if (!t) return record.id.slice(-6);
  return valueToText(record.properties[t.id], t) || "Untitled";
}

function titlePropertySafe(properties: DatabaseProperty[]) {
  return properties.find((p) => p.isTitle) ?? properties.find((p) => p.type === "title");
}

function propertyIcon(type: string): React.ReactNode {
  const map: Record<string, string> = {
    title: "T",
    text: "A",
    rich_text: "¶",
    number: "#",
    select: "◉",
    multi_select: "◌",
    status: "●",
    date: "📅",
    date_range: "🗓",
    person: "👤",
    email: "@",
    phone: "✆",
    url: "🔗",
    checkbox: "☑",
    files: "📎",
    created_time: "🕐",
    created_by: "👤",
    last_edited_time: "🕓",
    last_edited_by: "👤",
    relation: "↔",
    rollup: "Σ",
    formula: "ƒ",
    button: "⚡",
    unique_id: "ID"
  };
  return (
    <span className="w-4 shrink-0 text-center text-[10px] text-muted-foreground" aria-hidden>
      {map[type] ?? "•"}
    </span>
  );
}