import Link from 'next/link';
import { Badge } from '@/components/ui/badge';
import { EPI_METRIC_LABEL } from '@/lib/queries/epidemiology';
import type { CoverageMatrixRow } from '@/lib/queries/explorer';
import { fmtDate, fmtInt, humanize, unitLabel } from '@/lib/format';

/**
 * Coverage matrix: what exists, per metric × geography × sex × age group × source × standard population,
 * with the year span, the number of distinct years, observations and cancers. Each row links to the
 * explorer with the same dimensions so a gap can be checked in one click.
 */
export function CoverageTable({ rows, cancers, compact = false }: { rows: CoverageMatrixRow[]; cancers?: string[]; compact?: boolean }) {
  if (rows.length === 0) return null;
  const hrefFor = (r: CoverageMatrixRow) => {
    const qs = new URLSearchParams({ metric: r.metric, geography: r.geography_slug, sex: r.sex, age: r.age_group, from: String(r.year_from), to: String(r.year_to) });
    if (cancers && cancers.length > 0) qs.set('cancers', cancers.join(','));
    return `/explore?${qs.toString()}`;
  };
  return (
    <div className="ci-table-wrap">
      <table className="ci-table">
        <thead>
          <tr>
            <th scope="col">Metric</th>
            <th scope="col">Geography</th>
            <th scope="col">Sex</th>
            <th scope="col">Age</th>
            <th scope="col">Source</th>
            <th scope="col">Standard population</th>
            <th scope="col">Years</th>
            <th scope="col" className="num">
              Distinct years
            </th>
            <th scope="col" className="num">
              Observations
            </th>
            {compact ? null : (
              <th scope="col" className="num">
                Cancers
              </th>
            )}
            <th scope="col">Type</th>
            {compact ? null : <th scope="col">Updated</th>}
            <th scope="col">
              <span className="sr-only">Open</span>
            </th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={`${r.metric}|${r.geography_id}|${r.sex}|${r.age_group}|${r.source_slug}|${r.standard_population ?? ''}|${i}`}>
              <td className="whitespace-nowrap">
                {EPI_METRIC_LABEL[r.metric] ?? humanize(r.metric)} <span className="text-[11.5px] text-ink-3">({unitLabel(r.unit)})</span>
              </td>
              <td>
                <Link className="ci-link" href={`/country/${r.geography_slug}`}>
                  {r.geography_name}
                </Link>
                {r.iso3 ? <span className="ci-mono ml-1 text-[11px] text-ink-3">{r.iso3}</span> : null}
              </td>
              <td>{r.sex === 'all' ? 'Both' : humanize(r.sex)}</td>
              <td>{r.age_group === 'all' ? 'All ages' : r.age_group}</td>
              <td>
                <Link className="ci-src" href={`/source/${r.source_slug}`} title={r.source_name}>
                  {r.source_slug}
                </Link>
              </td>
              <td className="max-w-[220px] text-[12px] text-ink-3">{r.standard_population ?? '—'}</td>
              <td className="ci-num whitespace-nowrap">{r.year_from === r.year_to ? r.year_from : `${r.year_from}–${r.year_to}`}</td>
              <td className="num">{fmtInt(r.years)}</td>
              <td className="num">{fmtInt(r.observations)}</td>
              {compact ? null : <td className="num">{fmtInt(r.n_cancers)}</td>}
              <td>
                {r.estimate_types.map((t) => (
                  <Badge key={t} tone={t === 'observed' ? 'ok' : 'warn'} className="mr-1">
                    {t}
                  </Badge>
                ))}
              </td>
              {compact ? null : <td className="whitespace-nowrap text-[12px] text-ink-3">{fmtDate(r.last_updated)}</td>}
              <td>
                <Link className="ci-link whitespace-nowrap text-[12px]" href={hrefFor(r)}>
                  Open →
                </Link>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}