Data Table

"use client";

import { useId, useMemo, useState, type ReactNode } from "react";
import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
import { cn } from "@/lib/utils";

export interface DataTableColumn<T> {
  /** Unique key; also used to read `row[key]` when no `cell` is given. */
  key: string;
  header: string;
  cell?: (row: T) => ReactNode;
  /** Value used for sorting; enables the sort button on the header. */
  sortValue?: (row: T) => string | number;
  align?: "left" | "right" | "center";
  /** Hide the column below the `sm` breakpoint. */
  hideOnMobile?: boolean;
  className?: string;
}

export interface DataTableProps<T> {
  columns: DataTableColumn<T>[];
  rows: T[];
  getRowId: (row: T) => string;
  /** Accessible caption (visible above the table). */
  caption: string;
  /** Optional element aligned right of the caption (filters, buttons…). */
  toolbar?: ReactNode;
  emptyMessage?: string;
  initialSort?: { key: string; direction: "asc" | "desc" };
  onRowClick?: (row: T) => void;
  className?: string;
}

type SortState = { key: string; direction: "asc" | "desc" } | null;

export function DataTable<T>({
  columns,
  rows,
  getRowId,
  caption,
  toolbar,
  emptyMessage = "Nothing here yet.",
  initialSort,
  onRowClick,
  className,
}: DataTableProps<T>) {
  const [sort, setSort] = useState<SortState>(initialSort ?? null);
  const captionId = useId();

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

  const toggleSort = (key: string) =>
    setSort((s) => (s?.key !== key ? { key, direction: "asc" } : s.direction === "asc" ? { key, direction: "desc" } : null));

  const alignClass = (a: DataTableColumn<T>["align"]) => (a === "right" ? "text-right" : a === "center" ? "text-center" : "text-left");

  return (
    <div className={cn("da-stroke bg-da-surface text-da-surface-fg shadow-da-md", className)}>
      <div className="da-stroke-b flex flex-wrap items-center justify-between gap-3 bg-da-primary px-4 py-3 text-da-primary-fg">
        <p id={captionId} className="font-da-display text-lg tracking-da-display uppercase">
          {caption}
        </p>
        {toolbar}
      </div>
      <div className="overflow-x-auto">
        <table className="w-full border-collapse text-sm" aria-labelledby={captionId}>
          <thead>
            <tr className="da-stroke-b bg-da-surface-2">
              {columns.map((col) => {
                const active = sort?.key === col.key;
                const ariaSort = active ? (sort.direction === "asc" ? "ascending" : "descending") : col.sortValue ? "none" : undefined;
                return (
                  <th
                    key={col.key}
                    scope="col"
                    aria-sort={ariaSort}
                    className={cn(
                      "px-4 py-3 font-da-mono text-[11px] font-bold tracking-da-label whitespace-nowrap uppercase",
                      alignClass(col.align),
                      col.hideOnMobile && "hidden sm:table-cell",
                    )}
                  >
                    {col.sortValue ? (
                      <button
                        type="button"
                        onClick={() => toggleSort(col.key)}
                        className={cn(
                          "da-focus inline-flex items-center gap-1.5 uppercase hover:underline hover:decoration-2 hover:underline-offset-4",
                          col.align === "right" && "flex-row-reverse",
                        )}
                      >
                        {col.header}
                        {active ? (
                          sort.direction === "asc" ? (
                            <ArrowUp aria-hidden className="size-3.5" strokeWidth={3} />
                          ) : (
                            <ArrowDown aria-hidden className="size-3.5" strokeWidth={3} />
                          )
                        ) : (
                          <ArrowUpDown aria-hidden className="size-3.5 opacity-50" strokeWidth={2.5} />
                        )}
                      </button>
                    ) : (
                      col.header
                    )}
                  </th>
                );
              })}
            </tr>
          </thead>
          <tbody>
            {sorted.length === 0 ? (
              <tr>
                <td colSpan={columns.length} className="px-4 py-12 text-center font-bold text-da-muted-fg">
                  {emptyMessage}
                </td>
              </tr>
            ) : (
              sorted.map((row) => (
                <tr
                  key={getRowId(row)}
                  onClick={onRowClick ? () => onRowClick(row) : undefined}
                  className={cn("[&+tr]:da-stroke-t da-transition hover:bg-da-muted", onRowClick && "cursor-pointer")}
                >
                  {columns.map((col) => (
                    <td
                      key={col.key}
                      className={cn("px-4 py-3.5 align-middle", alignClass(col.align), col.hideOnMobile && "hidden sm:table-cell", col.className)}
                    >
                      {col.cell ? col.cell(row) : String((row as Record<string, unknown>)[col.key] ?? "")}
                    </td>
                  ))}
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}

export default DataTable;