import Link from 'next/link';
import { Badge, ClaimBadge } from '@/components/ui/badge';
import { SourceBadge, provenanceTitle, type ProvenanceInfo } from '@/components/ui/source-badge';
import { Pager } from '@/components/ui/pager';
import { EPI_METRIC_LABEL } from '@/lib/queries/epidemiology';
import type { ExplorerObsRow } from '@/lib/queries/explorer';
import { TABLE_PAGE_SIZE } from '@/lib/explorer-params';
import { fmtInt, fmtValue, humanize, unitLabel } from '@/lib/format';

export function obsProvenance(r: ExplorerObsRow): ProvenanceInfo {
  return {
    sourceSlug: r.source_slug,
    sourceName: r.source_name,
    dataset: r.dataset,
    datasetVersion: r.dataset_version,
    retrievedAt: r.retrieved_at,
    sourceUrl: r.source_url,
    license: r.source_license,
    layer: 'normalized',
    evidenceType: 'observed_data',
  };
}

/**
 * Every observation behind the charts, 50 per page, with the unit, CI, estimate type, standard
 * population, site definition and a per-row provenance popover (datasets differ between rows).
 */
export function ObservationsTable({ rows, page, hrefFor }: { rows: ExplorerObsRow[]; page: number; hrefFor: (page: number) => string }) {
  const total = rows.length;
  const start = (page - 1) * TABLE_PAGE_SIZE;
  const shown = rows.slice(start, start + TABLE_PAGE_SIZE);
  const units = [...new Set(rows.map((r) => r.unit))];
  const observedOnly = rows.every((r) => r.estimate_type === 'observed');
  // One provenance popover per distinct (source, dataset) in the caption; rows carry compact badges whose
  // title repeats dataset · version · retrieved (dense tables: the popover markup is not repeated 50 times).
  const captionProv = new Map<string, ProvenanceInfo>();
  for (const r of rows) {
    const k = `${r.source_slug}|${r.dataset ?? ''}`;
    if (!captionProv.has(k)) captionProv.set(k, obsProvenance(r));
  }
  return (
    <div>
      {/* div, not p: popovers contain a <dl>. */}
      <div className="mb-2 flex flex-wrap items-center gap-2 text-[12px] text-ink-3">
        {[...captionProv.values()].map((p) => (
          <SourceBadge key={`${p.sourceSlug}|${p.dataset ?? ''}`} p={p} />
        ))}
        <ClaimBadge kind="observed" />
        <span>
          {fmtInt(total)} observation{total === 1 ? '' : 's'} · values exactly as published by the source, units harmonized ({units.map(unitLabel).join(', ')}) · hover a row's source badge for its dataset, version and retrieval date
          {observedOnly ? '' : ' · rows labelled estimated/projected are model outputs of the source'}
        </span>
      </div>
      <div className="ci-table-wrap">
        <table className="ci-table">
          <thead>
            <tr>
              <th scope="col">Year</th>
              <th scope="col">Cancer</th>
              <th scope="col">Geography</th>
              <th scope="col">Sex</th>
              <th scope="col">Age</th>
              <th scope="col">Metric</th>
              <th scope="col" className="num">
                Value
              </th>
              <th scope="col">Unit</th>
              <th scope="col" className="num">
                95% CI
              </th>
              <th scope="col">Type</th>
              <th scope="col">Standard population</th>
              <th scope="col">Site definition</th>
              <th scope="col">Source</th>
            </tr>
          </thead>
          <tbody>
            {shown.map((r) => (
              <tr key={r.id}>
                <td className="ci-num">{r.year_end && r.year_end !== r.year ? `${r.year}–${r.year_end}` : r.year}</td>
                <td>
                  <Link className="ci-link" href={`/cancer/${r.cancer_slug}/statistics`}>
                    {r.cancer_name}
                  </Link>
                </td>
                <td>
                  <Link className="ci-link" href={`/country/${r.geography_slug}`}>
                    {r.geography_name}
                  </Link>
                </td>
                <td>{r.sex === 'all' ? 'Both' : humanize(r.sex)}</td>
                <td>{r.age_group === 'all' ? 'All ages' : r.age_group}</td>
                <td className="whitespace-nowrap text-[12.5px]">{EPI_METRIC_LABEL[r.metric] ?? humanize(r.metric)}</td>
                <td className="num font-medium">{fmtValue(r.value, r.unit)}</td>
                <td className="text-[12px] text-ink-3">{unitLabel(r.unit)}</td>
                <td className="num text-ink-3">{r.lower_ci != null && r.upper_ci != null ? `${fmtValue(r.lower_ci, r.unit)}–${fmtValue(r.upper_ci, r.unit)}` : '—'}</td>
                <td>
                  <Badge tone={r.estimate_type === 'observed' ? 'ok' : 'warn'}>{r.estimate_type}</Badge>
                </td>
                <td className="max-w-[200px] text-[12px] text-ink-3">{r.standard_population ?? '—'}</td>
                <td className="max-w-[260px] text-[12px] text-ink-3">{r.site_definition ?? '—'}</td>
                <td>
                  <SourceBadge compact p={obsProvenance(r)} title={provenanceTitle(obsProvenance(r))} />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <Pager total={total} pageSize={TABLE_PAGE_SIZE} page={page} hrefFor={hrefFor} noun="observations" label="Observations pagination" />
    </div>
  );
}