"use client";
import clsx from "clsx";
import type { ReactNode } from "react";
import { Empty, Skeleton } from "./ui";

export interface Column<T> {
  key: string;
  header: ReactNode;
  render?: (row: T, i: number) => ReactNode;
  num?: boolean;
  className?: string;
  /** hide below `sm` to save width on phones; still visible in the card view */
  hideSm?: boolean;
  mono?: boolean;
}

interface Props<T> {
  columns: Column<T>[];
  rows: T[] | null | undefined;
  rowKey: (row: T, i: number) => string | number;
  loading?: boolean;
  empty?: ReactNode;
  /** Card layout under 640px (default) or always horizontal scroll */
  mobile?: "cards" | "scroll";
  maxHeight?: string;
  onRowClick?: (row: T) => void;
  footer?: ReactNode;
}

function cell<T>(c: Column<T>, row: T, i: number): ReactNode {
  if (c.render) return c.render(row, i);
  const v = (row as Record<string, unknown>)[c.key];
  if (v === null || v === undefined) return <span className="text-ink-3">—</span>;
  if (typeof v === "object") return <code className="text-xs">{JSON.stringify(v)}</code>;
  return String(v);
}

export function DataTable<T>({ columns, rows, rowKey, loading, empty, mobile = "cards", maxHeight, onRowClick, footer }: Props<T>) {
  if (loading && !rows) return <Skeleton rows={5} />;
  if (!rows || rows.length === 0) return <Empty>{empty ?? "No rows."}</Empty>;
  return (
    <div className={clsx(loading && "opacity-60 transition-opacity")}>
      {/* Cards (mobile) */}
      {mobile === "cards" && (
        <ul className="flex flex-col gap-2 sm:hidden">
          {rows.map((r, i) => (
            <li key={rowKey(r, i)} className={clsx("rounded-md border border-border bg-surface-1 p-3", onRowClick && "cursor-pointer active:bg-surface-2")} onClick={onRowClick ? () => onRowClick(r) : undefined}>
              <dl className="grid grid-cols-[minmax(0,40%)_1fr] gap-x-3 gap-y-1 text-sm">
                {columns.map((c) => (
                  <div key={c.key} className="contents">
                    <dt className="truncate text-xs text-ink-3">{c.header}</dt>
                    <dd className={clsx("min-w-0 break-words", c.mono && "font-mono text-xs", c.num && "tnum")}>{cell(c, r, i)}</dd>
                  </div>
                ))}
              </dl>
            </li>
          ))}
        </ul>
      )}
      {/* Table */}
      <div className={clsx("table-wrap", mobile === "cards" && "hidden sm:block")} style={maxHeight ? { maxHeight, overflowY: "auto" } : undefined}>
        <table className="table">
          <thead>
            <tr>
              {columns.map((c) => (
                <th key={c.key} className={clsx(c.num && "text-right", c.hideSm && "hidden md:table-cell", c.className)}>
                  {c.header}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={rowKey(r, i)} className={clsx(onRowClick && "cursor-pointer")} onClick={onRowClick ? () => onRowClick(r) : undefined}>
                {columns.map((c) => (
                  <td key={c.key} className={clsx(c.num && "num", c.mono && "font-mono text-xs", c.hideSm && "hidden md:table-cell", c.className)}>
                    {cell(c, r, i)}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {footer && <div className="mt-2 flex items-center justify-between gap-2 text-xs text-ink-3">{footer}</div>}
    </div>
  );
}