Data Table

"use client";

import { useId, useMemo, useState, type ReactNode } from "react";
import { ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react";
import { cn } from "@/lib/utils";

export interface DataTableColumn<T> {
  key: string;
  header: string;
  cell?: (row: T) => ReactNode;
  sortValue?: (row: T) => string | number;
  align?: "left" | "right";
  hideOnMobile?: boolean;
  /** Tailwind width class, e.g. "w-32". */
  width?: string;
}

export interface DataTableProps<T> {
  columns: DataTableColumn<T>[];
  rows: T[];
  getRowId: (row: T) => string;
  /** Accessible name of the table (rendered as a visually hidden caption). */
  label: string;
  /** Enables row checkboxes; called with the selected ids. */
  onSelectionChange?: (ids: string[]) => void;
  /** Content of the bar shown when rows are selected (receives the ids). */
  bulkActions?: (ids: string[]) => ReactNode;
  emptyState?: ReactNode;
  initialSort?: { key: string; direction: "asc" | "desc" };
  className?: string;
}

export function DataTable<T>({
  columns,
  rows,
  getRowId,
  label,
  onSelectionChange,
  bulkActions,
  emptyState = "No results.",
  initialSort,
  className,
}: DataTableProps<T>) {
  const [sort, setSort] = useState(initialSort ?? null);
  const [selected, setSelected] = useState<string[]>([]);
  const selectable = Boolean(onSelectionChange || bulkActions);
  const baseId = useId();

  const sorted = useMemo(() => {
    const col = sort && columns.find((c) => c.key === sort.key);
    if (!sort || !col?.sortValue) return rows;
    const get = col.sortValue;
    const f = sort.direction === "asc" ? 1 : -1;
    return [...rows].sort((a, b) => (get(a) < get(b) ? -f : get(a) > get(b) ? f : 0));
  }, [rows, columns, sort]);

  const update = (next: string[]) => {
    setSelected(next);
    onSelectionChange?.(next);
  };
  const allIds = sorted.map(getRowId);
  const allSelected = allIds.length > 0 && allIds.every((id) => selected.includes(id));
  const someSelected = selected.length > 0 && !allSelected;

  return (
    <div className={cn("da-stroke relative overflow-hidden rounded-da-lg bg-da-surface text-da-surface-fg", className)}>
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <caption className="sr-only">{label}</caption>
          <thead className="border-b border-da-border bg-da-surface-2/60 text-[13px] text-da-muted-fg">
            <tr>
              {selectable && (
                <th scope="col" className="w-10 pl-4">
                  <input
                    type="checkbox"
                    aria-label="Select all rows"
                    checked={allSelected}
                    ref={(el) => {
                      if (el) el.indeterminate = someSelected;
                    }}
                    onChange={() => update(allSelected ? [] : allIds)}
                    className="da-focus size-3.5 accent-da-primary"
                  />
                </th>
              )}
              {columns.map((col) => {
                const active = sort?.key === col.key;
                return (
                  <th
                    key={col.key}
                    scope="col"
                    aria-sort={active ? (sort.direction === "asc" ? "ascending" : "descending") : col.sortValue ? "none" : undefined}
                    className={cn("h-9 px-4 font-medium whitespace-nowrap", col.align === "right" ? "text-right" : "text-left", col.hideOnMobile && "hidden md:table-cell", col.width)}
                  >
                    {col.sortValue ? (
                      <button
                        type="button"
                        onClick={() =>
                          setSort((s) => (s?.key !== col.key ? { key: col.key, direction: "asc" } : s.direction === "asc" ? { key: col.key, direction: "desc" } : null))
                        }
                        className={cn("da-focus da-transition -mx-1 inline-flex items-center gap-1 rounded-da-sm px-1 hover:text-da-fg", active && "text-da-fg", col.align === "right" && "flex-row-reverse")}
                      >
                        {col.header}
                        {active ? (
                          sort.direction === "asc" ? (
                            <ChevronUp aria-hidden className="size-3.5" />
                          ) : (
                            <ChevronDown aria-hidden className="size-3.5" />
                          )
                        ) : (
                          <ChevronsUpDown aria-hidden className="size-3.5 opacity-40" />
                        )}
                      </button>
                    ) : (
                      col.header
                    )}
                  </th>
                );
              })}
            </tr>
          </thead>
          <tbody className="divide-y divide-da-border">
            {sorted.length === 0 ? (
              <tr>
                <td colSpan={columns.length + (selectable ? 1 : 0)} className="px-4 py-14 text-center text-da-muted-fg">
                  {emptyState}
                </td>
              </tr>
            ) : (
              sorted.map((row) => {
                const id = getRowId(row);
                const isSelected = selected.includes(id);
                return (
                  <tr key={id} aria-selected={selectable ? isSelected : undefined} className={cn("da-transition hover:bg-da-fg/[0.025]", isSelected && "bg-da-accent/60 hover:bg-da-accent/70")}>
                    {selectable && (
                      <td className="pl-4">
                        <input
                          id={`${baseId}-${id}`}
                          type="checkbox"
                          aria-label={`Select row ${id}`}
                          checked={isSelected}
                          onChange={() => update(isSelected ? selected.filter((s) => s !== id) : [...selected, id])}
                          className="da-focus size-3.5 accent-da-primary"
                        />
                      </td>
                    )}
                    {columns.map((col) => (
                      <td key={col.key} className={cn("h-11 px-4", col.align === "right" && "text-right", col.hideOnMobile && "hidden md:table-cell")}>
                        {col.cell ? col.cell(row) : String((row as Record<string, unknown>)[col.key] ?? "")}
                      </td>
                    ))}
                  </tr>
                );
              })
            )}
          </tbody>
        </table>
      </div>

      {bulkActions && selected.length > 0 && (
        <div
          role="region"
          aria-label="Bulk actions"
          className="da-stroke absolute bottom-3 left-1/2 flex -translate-x-1/2 items-center gap-3 rounded-da-md bg-da-surface py-1.5 pr-1.5 pl-3 text-sm shadow-da-lg transition-[opacity,translate] duration-(--da-duration) starting:translate-y-2 starting:opacity-0"
        >
          <span className="whitespace-nowrap text-da-muted-fg">{selected.length} selected</span>
          {bulkActions(selected)}
        </div>
      )}
    </div>
  );
}

export default DataTable;