import Link from 'next/link';
import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';
import { fmtInt } from '@/lib/format';

/**
 * Compact heatmap table (rows × columns) with sequential intensity from the accent hue. Server-renderable.
 * Cells with null are drawn hollow, never as 0.
 */
export function Heatmap({ rows, cols, get, rowHref, format = fmtInt, className, colLabel = (c) => c }: { rows: { key: string; label: ReactNode }[]; cols: string[]; get: (row: string, col: string) => number | null; rowHref?: (row: string) => string | undefined; format?: (v: number) => string; className?: string; colLabel?: (c: string) => ReactNode }) {
  let max = 0;
  for (const r of rows) for (const c of cols) max = Math.max(max, get(r.key, c) ?? 0);
  return (
    <div className={cn('table-scroll', className)}>
      <table className="w-full border-separate border-spacing-[2px] text-xs">
        <thead>
          <tr>
            <th className="sticky left-0 z-[2] bg-canvas text-left font-medium text-ink-2" />
            {cols.map((c) => (
              <th key={c} className="whitespace-nowrap px-1 pb-1 text-center font-medium text-ink-3">
                {colLabel(c)}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((r) => {
            const href = rowHref?.(r.key);
            return (
              <tr key={r.key}>
                <th className="sticky left-0 z-[2] max-w-[10rem] truncate bg-canvas pr-2 text-left font-medium text-ink-2">
                  {href ? (
                    <Link href={href} className="hover:text-accent">
                      {r.label}
                    </Link>
                  ) : (
                    r.label
                  )}
                </th>
                {cols.map((c) => {
                  const v = get(r.key, c);
                  const a = v === null || max === 0 ? 0 : 0.08 + 0.82 * Math.sqrt(v / max);
                  return (
                    <td key={c} className={cn('tnum h-7 min-w-[2.4rem] rounded-[2px] text-center', v === null && 'border border-dashed border-rule text-ink-3')} style={v === null ? undefined : { background: `color-mix(in srgb, var(--accent) ${Math.round(a * 100)}%, var(--surface-2))`, color: a > 0.55 ? 'var(--accent-ink)' : 'var(--ink)' }} title={v === null ? 'no data' : `${format(v)}`}>
                      {v === null ? '·' : v === 0 ? '' : format(v)}
                    </td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}