import Link from 'next/link';
import { Section } from '@/components/ui/section';
import { EmptyState } from '@/components/ui/empty-state';
import { Freshness } from '@/components/ui/freshness';
import { Badge, ClaimBadge } from '@/components/ui/badge';
import { SourceBadge } from '@/components/ui/source-badge';
import { getGeographyBySlug, topCancersFor, yearsFor, type TopCancersResult } from '@/lib/queries/geography';
import { EPI_METRIC_LABEL } from '@/lib/queries/epidemiology';
import { fmtInt, fmtValue, unitLabel, toDate } from '@/lib/format';

/**
 * Home module "Cancer burden in the United States (latest year)" (§105, §328): top 5 by deaths and top 5 by
 * age-standardized incidence, straight from observations, with year and source on every row.
 */
export async function BurdenModule({ slug = 'united-states' }: { slug?: string }) {
  const geo = await getGeographyBySlug(slug);
  const years = geo ? await yearsFor(geo.id) : [];
  const latest = years[0];
  const [deaths, asir] = geo && latest ? await Promise.all([topCancersFor(geo, 'mortality_count', latest, 'all', 5), topCancersFor(geo, 'as_incidence_rate', latest, 'all', 5)]) : [null, null];
  const has = !!(deaths?.rows.length || asir?.rows.length);
  const freshest = [...(deaths?.rows ?? []), ...(asir?.rows ?? [])].map((r) => toDate(r.updated_at)).filter((d): d is Date => !!d).sort((a, b) => b.getTime() - a.getTime())[0] ?? null;

  return (
    <Section
      id="us-burden"
      kicker="Cancer burden"
      title={`Cancer burden in the United States${latest ? ` (${latest})` : ''}`}
      description="Registry observations as published by the source, both sexes, all ages, per site group. No all-sites total is shown unless the source publishes one."
      actions={
        <Link href={`/country/${slug}`} className="ci-link">
          Country page →
        </Link>
      }
    >
      {!has ? (
        <EmptyState title="No US observation yet">
          Burden figures appear once a licensed registry connector has ingested observations for the United States. IARC / GLOBOCAN remains under license review; SEER awaits credentials.
          <div className="mt-1">
            <Link href="/countries" className="ci-link">
              Countries with data
            </Link>
          </div>
        </EmptyState>
      ) : (
        <>
          <div className="grid gap-6 md:grid-cols-2">
            {[deaths, asir].map((res) => (res ? <TopFive key={res.metric} res={res} sex="all" slug={slug} /> : null))}
          </div>
          <Freshness dataUpdatedAt={freshest} extra={`source: ${deaths?.rows[0]?.source_slug ?? asir?.rows[0]?.source_slug ?? 'registry'} · per-site rows, not summed`} />
        </>
      )}
    </Section>
  );
}

function TopFive({ res, sex, slug }: { res: TopCancersResult; sex: string; slug: string }) {
  const first = res.rows[0];
  if (!first) {
    return (
      <div>
        <p className="ci-kicker mb-1">{EPI_METRIC_LABEL[res.metric] ?? res.metric}</p>
        <EmptyState compact>No {EPI_METRIC_LABEL[res.metric]?.toLowerCase() ?? res.metric} observation for {res.requestedYear}.</EmptyState>
      </div>
    );
  }
  const allObserved = res.rows.every((r) => r.estimate_type === 'observed');
  return (
    <div className="min-w-0">
      <p className="mb-1 flex flex-wrap items-baseline justify-between gap-x-2">
        <span className="ci-kicker">Top 5 · {EPI_METRIC_LABEL[res.metric] ?? res.metric}</span>
        <span className="text-[11.5px] text-ink-3">
          {res.year}
          {res.year !== res.requestedYear ? ` (latest available; ${res.requestedYear} not yet published)` : ''} · {unitLabel(first.unit)}
        </span>
      </p>
      <div className="ci-table-wrap">
        <table className="ci-table">
          <thead>
            <tr>
              <th className="num">#</th>
              <th>Cancer</th>
              <th className="num">{unitLabel(first.unit)}</th>
              <th>Type</th>
            </tr>
          </thead>
          <tbody>
            {res.rows.map((r, i) => (
              <tr key={r.cancer_id}>
                <td className="num">{r.rank ?? i + 1}</td>
                <td>
                  <Link className="ci-link" href={`/cancer/${r.slug}`}>
                    {r.canonical_name}
                  </Link>
                </td>
                <td className="num font-medium">{fmtValue(r.value, r.unit)}</td>
                <td>
                  <Badge tone={r.estimate_type === 'observed' ? 'ok' : 'warn'}>{r.estimate_type}</Badge>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {/* div, not p: the SourceBadge popover contains a <dl>, which the HTML parser would use to close a <p> (hydration mismatch). */}
      <div className="mt-1.5 flex flex-wrap items-center gap-1.5 text-[11.5px] text-ink-3">
        <SourceBadge p={{ sourceSlug: first.source_slug, sourceName: first.source_name, dataset: first.site_definition ? 'USCS site groups' : null, layer: 'normalized' }} />
        <ClaimBadge kind="observed" />
        {first.standard_population ? <span>standard: {first.standard_population}</span> : null}
        {res.rows.some((r) => r.rank == null) ? <span>rank = position in this table when no snapshot covers the year</span> : <span>rank from snapshot {first.rank_scope_key ? <span className="ci-mono">{first.rank_scope_key}</span> : null}</span>}
        {!allObserved ? <span className="italic text-warn">includes estimated values</span> : null}
        <Link className="ci-link" href={`/country/${slug}?sex=${sex}&year=${res.year}#${res.metric}`}>
          full table ({fmtInt(res.rows.length)} shown) →
        </Link>
      </div>
    </div>
  );
}