"use client";

/**
 * DataTable — admin-grade table chrome.
 *
 * Wraps the standard <table> with sticky header, hover-row highlight,
 * subtle striped rows, and consistent cell padding. Columns are
 * declared as a config array so individual pages don't have to
 * re-implement the alignment + width plumbing.
 */

import type { ReactNode } from "react";

export interface Column<T> {
  key: string;
  header: ReactNode;
  /** Per-cell renderer. Receives the row + index. */
  cell: (row: T, idx: number) => ReactNode;
  /** Tailwind alignment override (text-left default). */
  align?: "left" | "right" | "center";
  /** Optional width hint (e.g. "w-24"). */
  width?: string;
  /** Tailwind class applied to the th. Useful for sortable affordance. */
  thClass?: string;
}

interface Props<T> {
  columns: Array<Column<T>>;
  rows: T[];
  /** Stable key extractor so React doesn't churn on re-render. */
  rowKey: (row: T, idx: number) => string;
  /** Optional click handler for a whole row. Renders cursor-pointer. */
  onRowClick?: (row: T) => void;
  /** Highlight a specific row (e.g. selected detail-drawer target). */
  highlightKey?: string | null;
  /** When true, alternate row backgrounds. Off by default; works
   *  best for dense numeric tables. */
  striped?: boolean;
  /** Empty state rendered when rows.length === 0. */
  emptyState?: ReactNode;
}

export function DataTable<T>({
  columns, rows, rowKey, onRowClick, highlightKey,
  striped = false, emptyState,
}: Props<T>) {
  if (rows.length === 0 && emptyState) {
    return <>{emptyState}</>;
  }
  return (
    <div className="bg-white border border-slate-100 rounded-xl overflow-hidden shadow-sm">
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead className="bg-slate-50 border-b border-slate-200 sticky top-0 z-10">
            <tr className="text-[10px] font-semibold text-slate-500 uppercase tracking-wider">
              {columns.map((c) => (
                <th
                  key={c.key}
                  className={[
                    "px-3 py-3",
                    c.align === "right" ? "text-right" : c.align === "center" ? "text-center" : "text-left",
                    c.width ?? "",
                    c.thClass ?? "",
                  ].join(" ")}
                >
                  {c.header}
                </th>
              ))}
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100">
            {rows.map((row, idx) => {
              const key = rowKey(row, idx);
              const stripeClass = striped && idx % 2 === 1 ? "bg-slate-50/30" : "";
              const highlightClass = highlightKey === key ? "bg-brand-50/60" : stripeClass;
              return (
                <tr
                  key={key}
                  onClick={onRowClick ? () => onRowClick(row) : undefined}
                  className={`transition-colors hover:bg-slate-50 ${highlightClass} ${onRowClick ? "cursor-pointer" : ""}`}
                >
                  {columns.map((c) => (
                    <td
                      key={c.key}
                      className={[
                        "px-3 py-3",
                        c.align === "right" ? "text-right" : c.align === "center" ? "text-center" : "text-left",
                      ].join(" ")}
                    >
                      {c.cell(row, idx)}
                    </td>
                  ))}
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}
