"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { IconArrowDown, IconArrowUp, IconSelector } from "@tabler/icons-react";
import { cn } from "../lib/utils";
import { transitions } from "../lib/motion";

/**
 * DataGrid: the table for real record sets. Sortable columns, row
 * selection with a floating bulk-action bar, roving keyboard focus
 * (↑/↓ move, Space selects, Enter opens), a sticky header, skeleton and
 * empty states, and windowed rendering past a few hundred rows so 50k
 * records scroll smoothly.
 */

export interface DataGridColumn<T> {
  key: string;
  header: React.ReactNode;
  cell: (row: T) => React.ReactNode;
  /** Enables sorting on this column. */
  sortValue?: (row: T) => string | number | boolean | null | undefined;
  align?: "start" | "end" | "center";
  /** CSS width, e.g. "12rem" or "30%". */
  width?: string;
  /** Hide below the `sm` breakpoint. */
  hideOnMobile?: boolean;
}

export interface DataGridSort {
  key: string;
  direction: "asc" | "desc";
}

export interface DataGridProps<T> {
  rows: readonly T[];
  columns: ReadonlyArray<DataGridColumn<T>>;
  getRowId: (row: T) => string;
  label: string;
  onRowOpen?: (row: T) => void;
  selectable?: boolean;
  selectedIds?: ReadonlySet<string>;
  onSelectionChange?: (ids: Set<string>) => void;
  /** Rendered in a floating bar while rows are selected. */
  selectionActions?: (ids: Set<string>, clear: () => void) => React.ReactNode;
  sort?: DataGridSort | null;
  onSortChange?: (sort: DataGridSort | null) => void;
  loading?: boolean;
  empty?: React.ReactNode;
  density?: "comfortable" | "compact";
  /** Scroll container max height; the header stays pinned. */
  maxHeight?: string;
  className?: string;
}

const WINDOW_THRESHOLD = 300;
const OVERSCAN = 12;

const INTERACTIVE = "button, a[href], input, select, textarea, label, [role='button'], [role='checkbox'], [role='menuitem'], [contenteditable='true']";

/** True when the event started on a control inside the row, not the row. */
function fromInteractiveChild(event: React.SyntheticEvent<HTMLElement>): boolean {
  const target = event.target as HTMLElement | null;
  const control = target?.closest(INTERACTIVE);
  return Boolean(control && control !== event.currentTarget && event.currentTarget.contains(control));
}

function compare(a: unknown, b: unknown): number {
  if (a === b) return 0;
  if (a === null || a === undefined) return 1;
  if (b === null || b === undefined) return -1;
  if (typeof a === "number" && typeof b === "number") return a - b;
  if (typeof a === "boolean" && typeof b === "boolean") return Number(a) - Number(b);
  return String(a).localeCompare(String(b), undefined, { numeric: true, sensitivity: "base" });
}

function Checkbox({
  checked,
  indeterminate,
  onChange,
  label,
}: {
  checked: boolean;
  indeterminate?: boolean;
  onChange: (checked: boolean) => void;
  label: string;
}) {
  return (
    <button
      type="button"
      role="checkbox"
      aria-checked={indeterminate ? "mixed" : checked}
      aria-label={label}
      onClick={(event) => {
        event.stopPropagation();
        onChange(!checked);
      }}
      className={cn(
        "flex size-4 items-center justify-center rounded-[5px] border transition-[background-color,border-color] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
        checked || indeterminate ? "border-action bg-action text-background" : "border-border bg-background hover:border-foreground/30",
      )}
    >
      <AnimatePresence initial={false}>
        {checked || indeterminate ? (
          <motion.svg
            key={indeterminate ? "mixed" : "check"}
            viewBox="0 0 12 12"
            className="size-2.5"
            initial={{ scale: 0.4, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0.4, opacity: 0 }}
            transition={transitions.quick}
          >
            {indeterminate ? (
              <path d="M2.5 6h7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
            ) : (
              <path d="M2.5 6.2l2.2 2.3 4.8-5" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
            )}
          </motion.svg>
        ) : null}
      </AnimatePresence>
    </button>
  );
}

export function DataGrid<T>({
  rows,
  columns,
  getRowId,
  label,
  onRowOpen,
  selectable = false,
  selectedIds,
  onSelectionChange,
  selectionActions,
  sort: controlledSort,
  onSortChange,
  loading = false,
  empty,
  density = "comfortable",
  maxHeight = "70vh",
  className,
}: DataGridProps<T>) {
  const reduceMotion = useReducedMotion();
  const [localSort, setLocalSort] = React.useState<DataGridSort | null>(null);
  const sort = controlledSort === undefined ? localSort : controlledSort;
  const [localSelection, setLocalSelection] = React.useState<Set<string>>(new Set());
  const selection = selectedIds ? new Set(selectedIds) : localSelection;
  const [focusIndex, setFocusIndex] = React.useState(0);
  const scrollRef = React.useRef<HTMLDivElement | null>(null);
  const rowRefs = React.useRef(new Map<number, HTMLTableRowElement>());
  const [scrollTop, setScrollTop] = React.useState(0);
  const [viewport, setViewport] = React.useState(600);
  const rowHeight = density === "compact" ? 36 : 46;

  const sorted = React.useMemo(() => {
    if (!sort) return rows;
    const column = columns.find((candidate) => candidate.key === sort.key);
    if (!column?.sortValue) return rows;
    const direction = sort.direction === "asc" ? 1 : -1;
    return [...rows].sort((a, b) => compare(column.sortValue!(a), column.sortValue!(b)) * direction);
  }, [rows, columns, sort]);

  const setSort = (next: DataGridSort | null) => {
    if (controlledSort === undefined) setLocalSort(next);
    onSortChange?.(next);
  };
  const setSelection = (next: Set<string>) => {
    if (!selectedIds) setLocalSelection(next);
    onSelectionChange?.(next);
  };
  const toggleRow = (id: string) => {
    const next = new Set(selection);
    if (next.has(id)) next.delete(id);
    else next.add(id);
    setSelection(next);
  };
  const allIds = sorted.map(getRowId);
  const selectedCount = allIds.filter((id) => selection.has(id)).length;

  const windowed = sorted.length > WINDOW_THRESHOLD;
  React.useEffect(() => {
    const element = scrollRef.current;
    if (!element || !windowed) return;
    setViewport(element.clientHeight);
    const observer = new ResizeObserver(() => setViewport(element.clientHeight));
    observer.observe(element);
    return () => observer.disconnect();
  }, [windowed]);
  const start = windowed ? Math.max(0, Math.floor(scrollTop / rowHeight) - OVERSCAN) : 0;
  const end = windowed
    ? Math.min(sorted.length, Math.ceil((scrollTop + viewport) / rowHeight) + OVERSCAN)
    : sorted.length;
  const visible = sorted.slice(start, end);
  const animateLayout = !reduceMotion && sorted.length <= 120;

  const focusRow = (index: number) => {
    const clamped = Math.max(0, Math.min(sorted.length - 1, index));
    setFocusIndex(clamped);
    const element = scrollRef.current;
    if (element && windowed) {
      const top = clamped * rowHeight;
      if (top < element.scrollTop) element.scrollTop = top;
      else if (top + rowHeight > element.scrollTop + element.clientHeight - 40) {
        element.scrollTop = top + rowHeight - element.clientHeight + 40;
      }
    }
    requestAnimationFrame(() => rowRefs.current.get(clamped)?.focus());
  };

  const cellPadding = density === "compact" ? "px-3 py-1.5" : "px-4 py-2.5";

  return (
    <div className={cn("relative", className)}>
      <div
        ref={scrollRef}
        onScroll={(event) => setScrollTop(event.currentTarget.scrollTop)}
        className="relative overflow-auto rounded-2xl border border-border/60 bg-card"
        style={{ maxHeight }}
      >
        <table
          aria-label={label}
          aria-rowcount={sorted.length}
          className="w-full table-fixed border-separate border-spacing-0 text-sm"
          // Fixed layout keeps columns steady, but on a phone it would squeeze
          // every column to a few letters: keep a readable width per column
          // and let the card scroll sideways instead.
          style={{ minWidth: `${columns.filter((column) => !column.hideOnMobile).length * 7 + (selectable ? 2.5 : 0)}rem` }}
        >
          <thead className="sticky top-0 z-10">
            <tr>
              {selectable ? (
                <th scope="col" className="w-10 border-b border-border/60 bg-card/95 pl-4 backdrop-blur">
                  <Checkbox
                    label={selectedCount === allIds.length ? "Clear selection" : "Select all"}
                    checked={allIds.length > 0 && selectedCount === allIds.length}
                    indeterminate={selectedCount > 0 && selectedCount < allIds.length}
                    onChange={(checked) => setSelection(checked ? new Set(allIds) : new Set())}
                  />
                </th>
              ) : null}
              {columns.map((column) => {
                const active = sort?.key === column.key;
                const ariaSort = active ? (sort.direction === "asc" ? "ascending" : "descending") : "none";
                return (
                  <th
                    key={column.key}
                    scope="col"
                    aria-sort={column.sortValue ? ariaSort : undefined}
                    style={column.width ? { width: column.width } : undefined}
                    className={cn(
                      "border-b border-border/60 bg-card/95 text-xs font-medium text-muted-foreground backdrop-blur",
                      cellPadding,
                      column.align === "end" ? "text-right" : column.align === "center" ? "text-center" : "text-left",
                      column.hideOnMobile && "hidden sm:table-cell",
                    )}
                  >
                    {column.sortValue ? (
                      <button
                        type="button"
                        onClick={() =>
                          setSort(
                            !active
                              ? { key: column.key, direction: "asc" }
                              : sort.direction === "asc"
                                ? { key: column.key, direction: "desc" }
                                : null,
                          )
                        }
                        className={cn(
                          "-mx-1 inline-flex items-center gap-1 rounded-md px-1 py-0.5 transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
                          active && "text-foreground",
                        )}
                      >
                        {column.header}
                        <span className="relative flex size-3.5 items-center justify-center">
                          <AnimatePresence initial={false} mode="popLayout">
                            <motion.span
                              key={active ? sort.direction : "none"}
                              initial={{ opacity: 0, y: active && sort.direction === "asc" ? 3 : -3 }}
                              animate={{ opacity: 1, y: 0 }}
                              exit={{ opacity: 0 }}
                              transition={transitions.quick}
                              className="flex"
                            >
                              {!active ? (
                                <IconSelector className="size-3.5 opacity-40" />
                              ) : sort.direction === "asc" ? (
                                <IconArrowUp className="size-3.5" />
                              ) : (
                                <IconArrowDown className="size-3.5" />
                              )}
                            </motion.span>
                          </AnimatePresence>
                        </span>
                      </button>
                    ) : (
                      column.header
                    )}
                  </th>
                );
              })}
            </tr>
          </thead>
          <tbody>
            {loading
              ? Array.from({ length: 6 }, (_, index) => (
                  <tr key={`skeleton-${index}`}>
                    {selectable ? <td className="border-b border-border/40 pl-4" /> : null}
                    {columns.map((column, columnIndex) => (
                      <td key={column.key} className={cn("border-b border-border/40", cellPadding, column.hideOnMobile && "hidden sm:table-cell")}>
                        <span
                          className="block h-3.5 animate-pulse rounded bg-muted"
                          style={{ width: `${70 - ((index + columnIndex) % 3) * 15}%` }}
                        />
                      </td>
                    ))}
                  </tr>
                ))
              : null}
            {!loading && windowed && start > 0 ? (
              <tr aria-hidden="true" style={{ height: start * rowHeight }} />
            ) : null}
            {!loading
              ? visible.map((row, offset) => {
                  const index = start + offset;
                  const id = getRowId(row);
                  const selected = selection.has(id);
                  return (
                    <motion.tr
                      key={id}
                      ref={(element) => {
                        if (element) rowRefs.current.set(index, element);
                        else rowRefs.current.delete(index);
                      }}
                      layout={animateLayout ? "position" : false}
                      transition={transitions.enter}
                      aria-rowindex={index + 2}
                      aria-selected={selectable ? selected : undefined}
                      tabIndex={index === focusIndex ? 0 : -1}
                      onFocus={() => setFocusIndex(index)}
                      onClick={(event) => {
                        // A button, link, or checkbox inside a cell is its own action.
                        if (fromInteractiveChild(event)) return;
                        onRowOpen?.(row);
                      }}
                      onKeyDown={(event) => {
                        // Row keys apply only while the row itself has focus.
                        if (event.target !== event.currentTarget) return;
                        if (event.key === "ArrowDown") {
                          event.preventDefault();
                          focusRow(index + 1);
                        } else if (event.key === "ArrowUp") {
                          event.preventDefault();
                          focusRow(index - 1);
                        } else if (event.key === "Home") {
                          event.preventDefault();
                          focusRow(0);
                        } else if (event.key === "End") {
                          event.preventDefault();
                          focusRow(sorted.length - 1);
                        } else if (event.key === " " && selectable) {
                          event.preventDefault();
                          toggleRow(id);
                        } else if (event.key === "Enter" && onRowOpen) {
                          event.preventDefault();
                          onRowOpen(row);
                        }
                      }}
                      className={cn(
                        "group/row outline-none transition-colors duration-100",
                        onRowOpen && "cursor-pointer",
                        selected ? "bg-action/[0.06]" : "hover:bg-muted/40 focus-visible:bg-muted/40",
                      )}
                      {...(windowed ? { style: { height: rowHeight } } : {})}
                    >
                      {selectable ? (
                        <td className="w-10 border-b border-border/40 pl-4 group-last/row:border-b-0">
                          <Checkbox
                            label={selected ? "Deselect row" : "Select row"}
                            checked={selected}
                            onChange={() => toggleRow(id)}
                          />
                        </td>
                      ) : null}
                      {columns.map((column, columnIndex) => (
                        <td
                          key={column.key}
                          className={cn(
                            "overflow-hidden border-b border-border/40 text-ellipsis whitespace-nowrap text-foreground group-last/row:border-b-0",
                            cellPadding,
                            column.align === "end" ? "text-right tabular-nums" : column.align === "center" ? "text-center" : "text-left",
                            columnIndex === 0 && "font-medium",
                            column.hideOnMobile && "hidden sm:table-cell",
                          )}
                        >
                          {column.cell(row)}
                        </td>
                      ))}
                    </motion.tr>
                  );
                })
              : null}
            {!loading && windowed && end < sorted.length ? (
              <tr aria-hidden="true" style={{ height: (sorted.length - end) * rowHeight }} />
            ) : null}
          </tbody>
        </table>
        {!loading && sorted.length === 0 ? (
          <div className="flex flex-col items-center gap-1 px-6 py-12 text-center">
            {empty ?? (
              <>
                <p className="text-sm font-medium text-foreground">Nothing to show</p>
                <p className="text-sm text-muted-foreground">Records appear here as they are added.</p>
              </>
            )}
          </div>
        ) : null}
      </div>
      <AnimatePresence>
        {selectable && selectedCount > 0 && selectionActions ? (
          <motion.div
            initial={{ opacity: 0, y: 12, scale: 0.97 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 12, scale: 0.97 }}
            transition={transitions.spring}
            role="toolbar"
            aria-label={`${selectedCount} selected`}
            className="sticky bottom-3 z-20 mx-auto mt-3 flex w-fit items-center gap-2 rounded-2xl border border-border/70 bg-popover/95 py-1.5 pl-4 pr-1.5 shadow-[0_8px_30px_-8px_rgba(0,0,0,0.25)] backdrop-blur"
          >
            <span className="text-sm font-medium tabular-nums text-foreground">{selectedCount} selected</span>
            <span className="mx-1 h-4 w-px bg-border" aria-hidden="true" />
            {selectionActions(
              new Set(allIds.filter((id) => selection.has(id))),
              () => setSelection(new Set()),
            )}
          </motion.div>
        ) : null}
      </AnimatePresence>
    </div>
  );
}