Data Table

"use client";

import { useId, useMemo, useState, type ReactNode } from "react";
import { ArrowDown, ArrowUp, ArrowUpDown, Search } 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;
}

export interface DataTableProps<T> {
  columns: DataTableColumn<T>[];
  rows: T[];
  getRowId: (row: T) => string;
  title: string;
  description?: string;
  /** Enables the search field; return the text to match against. */
  searchText?: (row: T) => string;
  actions?: ReactNode;
  emptyState?: ReactNode;
  initialSort?: { key: string; direction: "asc" | "desc" };
  className?: string;
}

export function DataTable<T>({
  columns,
  rows,
  getRowId,
  title,
  description,
  searchText,
  actions,
  emptyState = "No results.",
  initialSort,
  className,
}: DataTableProps<T>) {
  const [sort, setSort] = useState(initialSort ?? null);
  const [query, setQuery] = useState("");
  const titleId = useId();
  const searchId = useId();

  const visible = useMemo(() => {
    const q = query.trim().toLowerCase();
    let out = q && searchText ? rows.filter((r) => searchText(r).toLowerCase().includes(q)) : rows;
    const col = sort && columns.find((c) => c.key === sort.key);
    if (sort && col?.sortValue) {
      const get = col.sortValue;
      const f = sort.direction === "asc" ? 1 : -1;
      out = [...out].sort((a, b) => (get(a) < get(b) ? -f : get(a) > get(b) ? f : 0));
    }
    return out;
  }, [rows, columns, sort, query, searchText]);

  return (
    <div className={cn("da-stroke overflow-hidden rounded-da-lg bg-da-surface text-da-surface-fg shadow-da-lg backdrop-blur-da backdrop-saturate-150", className)}>
      <div className="flex flex-wrap items-center gap-4 p-5">
        <div className="min-w-0 flex-1">
          <h3 id={titleId} className="font-da-display text-lg font-semibold tracking-da-display">
            {title}
          </h3>
          {description && <p className="text-sm text-da-muted-fg">{description}</p>}
        </div>
        {searchText && (
          <div className="flex h-9 items-center gap-2 rounded-da-pill border border-da-border-strong/60 bg-da-input px-3 focus-within:ring-4 focus-within:ring-da-primary/15">
            <Search aria-hidden className="size-4 text-da-muted-fg" />
            <label htmlFor={searchId} className="sr-only">
              Search {title}
            </label>
            <input
              id={searchId}
              type="search"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="Search…"
              className="w-36 bg-transparent text-sm outline-none placeholder:text-da-muted-fg"
            />
          </div>
        )}
        {actions}
      </div>
      <div className="overflow-x-auto px-2 pb-2">
        <table className="w-full border-separate border-spacing-y-1 text-sm" aria-labelledby={titleId}>
          <thead className="text-xs text-da-muted-fg">
            <tr>
              {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("px-3 py-2 font-semibold", col.align === "right" ? "text-right" : "text-left", col.hideOnMobile && "hidden md:table-cell")}
                  >
                    {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 inline-flex items-center gap-1 rounded-da-sm hover:text-da-fg", active && "text-da-fg", col.align === "right" && "flex-row-reverse")}
                      >
                        {col.header}
                        {active ? (
                          sort.direction === "asc" ? <ArrowUp aria-hidden className="size-3" /> : <ArrowDown aria-hidden className="size-3" />
                        ) : (
                          <ArrowUpDown aria-hidden className="size-3 opacity-50" />
                        )}
                      </button>
                    ) : (
                      col.header
                    )}
                  </th>
                );
              })}
            </tr>
          </thead>
          <tbody>
            {visible.length === 0 ? (
              <tr>
                <td colSpan={columns.length} className="px-3 py-12 text-center text-da-muted-fg">
                  {emptyState}
                </td>
              </tr>
            ) : (
              visible.map((row) => (
                <tr key={getRowId(row)} className="da-transition group">
                  {columns.map((col, ci) => (
                    <td
                      key={col.key}
                      className={cn(
                        "bg-da-surface-2 px-3 py-3 transition-colors duration-(--da-duration) group-hover:bg-da-secondary",
                        ci === 0 && "rounded-l-da-md",
                        ci === columns.length - 1 && "rounded-r-da-md",
                        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>
    </div>
  );
}

export default DataTable;