import type { ReactNode } from 'react';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';

export interface DataTableColumn<T> {
  key: string;
  header: ReactNode;
  cell: (row: T) => ReactNode;
  numeric?: boolean;
  /** Hide on the definition-list (mobile) layout. */
  hideOnMobile?: boolean;
  className?: string;
}

/**
 * Data table that becomes a definition list on < sm (no horizontal overflow). Numeric columns are
 * right-aligned and tabular. Pass `rowKey` for stable keys and `caption` for AT.
 */
export function DataTable<T>({ rows, columns, rowKey, caption, className, dense }: { rows: T[]; columns: DataTableColumn<T>[]; rowKey: (row: T) => string; caption?: string; className?: string; dense?: boolean }) {
  return (
    <div className={cn('min-w-0', className)}>
      <table className="hidden w-full border-collapse text-sm sm:table">
        {caption ? <caption className="sr-only">{caption}</caption> : null}
        <thead>
          <tr className="border-b border-rule text-left text-xs text-ink-3">
            {columns.map((c) => (
              <th key={c.key} scope="col" className={cn('py-2 pr-3 font-medium', c.numeric && 'text-right', c.className)}>
                {c.header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody className="divide-y divide-rule">
          {rows.map((r) => (
            <tr key={rowKey(r)} className="hover:bg-surface-2/60">
              {columns.map((c) => (
                <td key={c.key} className={cn(dense ? 'py-1.5' : 'py-2.5', 'pr-3 align-top', c.numeric && 'tnum text-right', c.className)}>
                  {c.cell(r)}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
      <ul className="divide-y divide-rule sm:hidden" aria-label={caption ?? t('table.definitionList')}>
        {rows.map((r) => (
          <li key={rowKey(r)} className="py-3">
            <dl className="grid grid-cols-[minmax(0,1fr)_auto] gap-x-4 gap-y-1">
              {columns
                .filter((c) => !c.hideOnMobile)
                .map((c, i) => (
                  <div key={c.key} className={cn('contents', i === 0 && 'font-medium')}>
                    <dt className={cn('text-xs text-ink-3', i === 0 && 'sr-only')}>{c.header}</dt>
                    <dd className={cn('min-w-0 text-sm', c.numeric && 'tnum text-right', i === 0 && 'col-span-2 text-base')}>{c.cell(r)}</dd>
                  </div>
                ))}
            </dl>
          </li>
        ))}
      </ul>
    </div>
  );
}