import type { Metadata } from 'next';
import Link from 'next/link';
import type { ReactNode } from 'react';
import { PageHeader, Section, Note } from '@/components/ui/section';
import { EmptyState } from '@/components/ui/empty-state';
import { Freshness } from '@/components/ui/freshness';
import { Badge, ClaimBadge, ConfidenceBadge } from '@/components/ui/badge';
import { SourceBadge } from '@/components/ui/source-badge';
import { CompareBars, type CompareBarDatum } from '@/components/charts/compare-bars';
import { loadCompare, parseCompareIds, COMPARE_MIN, COMPARE_MAX, type CompareEntity } from '@/lib/queries/compare';
import { loadProvenance, toInfo } from '@/lib/queries/provenance';
import { bestRankFor } from '@/lib/queries/rankings';
import { EPI_METRIC_LABEL } from '@/lib/queries/epidemiology';
import { str, type SP } from '@/lib/search-params';
import { fmtInt, fmtValue, humanize, scopeLabel, toDate, unitLabel } from '@/lib/format';
import { ComparePicker } from './picker';

export const dynamic = 'force-dynamic';

export async function generateMetadata({ searchParams }: { searchParams: Promise<SP> }): Promise<Metadata> {
  const ids = parseCompareIds(str(await searchParams, 'ids'));
  const ents = ids.length ? await loadCompare(ids) : [];
  const names = ents.map((e) => e.cancer.canonical_name);
  return {
    title: names.length >= 2 ? `Compare: ${names.join(' vs ')}` : 'Compare cancers',
    description: names.length >= 2 ? `Side-by-side facts for ${names.join(', ')}: taxonomy, US registry figures, trials, literature, curated evidence, cohorts and current ranks — every value with its source and period.` : 'Compare two to four cancers side by side: taxonomy, US registry figures, clinical research, literature, molecular evidence and current ranks, with a source on every value.',
    alternates: { canonical: ids.length ? `/compare?ids=${ids.join(',')}` : '/compare' },
    robots: ids.length ? { index: false, follow: true } : undefined,
  };
}

const EPI_ROWS: Array<[string, string]> = [
  ['mortality_count', 'US annual deaths'],
  ['incidence_count', 'US annual new cases'],
  ['as_mortality_rate', 'US age-standardized mortality'],
  ['as_incidence_rate', 'US age-standardized incidence'],
];

const RANK_METRICS = ['mortality_count', 'incidence_count', 'as_mortality_rate', 'as_incidence_rate', 'mortality_incidence_ratio', 'trial_gap', 'research_gap', 'active_trials', 'recruiting_trials', 'phase3_trials', 'publications_5y', 'publications_12m', 'publication_growth', 'curated_evidence_items', 'associated_genes', 'genomic_cohorts'];

/**
 * /compare?ids=a,b,c (§100): side-by-side table of facts that exist in the database. Registry figures below the
 * top level fall back to the nearest top-level ancestor with an explicit label (methodology#compare).
 */
export default async function ComparePage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const ids = parseCompareIds(str(sp, 'ids'));
  const ents = ids.length ? await loadCompare(ids) : [];
  const missing = ids.filter((s) => !ents.some((e) => e.cancer.slug === s));
  const enough = ents.length >= COMPARE_MIN;
  const provIds = ents.flatMap((e) => [...e.figures.values()].map((f) => f.provenance_id));
  const prov = await loadProvenance(provIds);

  const registryNote = (e: CompareEntity) => (e.registry && e.registry.depth > 0 ? `registry level: ${e.registry.canonical_name}` : null);
  const freshest = ents
    .flatMap((e) => [...[...e.figures.values()].map((f) => toDate(f.updated_at)), e.counters ? toDate(e.counters.updated_at) : null, ...e.ranks.map((r) => toDate(r.generated_at))])
    .filter((d): d is Date => !!d)
    .sort((a, b) => b.getTime() - a.getTime())[0];

  return (
    <div>
      <PageHeader kicker="Comparison engine" title="Compare cancers" lede="Two to four cancers side by side. Only facts present in the database are shown; every figure carries its source, period and unit. Entities at different hierarchy depths are labelled so counts are not read as equivalent." />
      <ComparePicker selected={ents.map((e) => ({ slug: e.cancer.slug, name: e.cancer.canonical_name }))} max={COMPARE_MAX} min={COMPARE_MIN} />
      {missing.length ? (
        <p className="mt-2 text-[12.5px] text-warn">
          Unknown or merged slug{missing.length > 1 ? 's' : ''}: <span className="ci-mono">{missing.join(', ')}</span> — ignored.
        </p>
      ) : null}

      {!enough ? (
        <div className="mt-6">
          <EmptyState title={ents.length === 1 ? 'Add at least one more cancer' : 'Pick cancers to compare'} knows={[{ label: 'Pancreatic vs lung vs glioblastoma', href: '/compare?ids=malignant-pancreatic-neoplasm,malignant-lung-neoplasm,glioblastoma' }, { label: 'Breast vs prostate', href: '/compare?ids=malignant-breast-neoplasm,malignant-prostate-neoplasm' }, { label: 'Cancer explorer', href: '/cancers' }]}>
            Use the picker above or open <span className="ci-mono">/compare?ids=slug-1,slug-2</span> with cancer slugs from their pages.
          </EmptyState>
        </div>
      ) : (
        <div className="mt-6 space-y-8">
          <CompareTable ents={ents} title="Taxonomy" id="taxonomy" rows={[
            { k: 'CancerIndex ID', cells: ents.map((e) => <span className="ci-mono text-[12px]">{e.cancer.id}</span>) },
            { k: 'Entity type', cells: ents.map((e) => humanize(e.cancer.entity_type)) },
            { k: 'Hierarchy depth', cells: ents.map((e) => <span className="ci-num">{e.cancer.depth}</span>) },
            { k: 'Top-level registry site', cells: ents.map((e) => (e.cancer.top_level ? 'Yes' : e.registry ? <span>No — nearest: <Link className="ci-link" href={`/cancer/${e.registry.slug}`}>{e.registry.canonical_name}</Link> <span className="text-ink-3">({e.registry.depth} level{e.registry.depth === 1 ? '' : 's'} up)</span></span> : <span className="text-ink-3">No top-level ancestor</span>)) },
            { k: 'Parents', cells: ents.map((e) => (e.parents.length ? <ul className="space-y-0.5">{e.parents.map((p) => <li key={`${p.hierarchy_type}-${p.slug}`}><Link className="ci-link" href={`/cancer/${p.slug}`}>{p.canonical_name}</Link> <span className="text-[11px] text-ink-3">{p.hierarchy_type}</span></li>)}</ul> : <span className="text-ink-3">root</span>)) },
            { k: 'NCIt / OncoTree', cells: ents.map((e) => <span className="ci-mono text-[12px]">{[e.cancer.primary_ncit_code, e.cancer.primary_oncotree_code].filter(Boolean).join(' · ') || '—'}</span>) },
            { k: 'Badges', cells: ents.map((e) => <span className="flex flex-wrap gap-1">{e.cancer.rare_cancer === true ? <Badge tone="accent">Rare</Badge> : null}{e.cancer.pediatric_relevant ? <Badge>Pediatric</Badge> : null}{e.cancer.hematologic ? <Badge>Hematologic</Badge> : null}{e.cancer.solid_tumor && !e.cancer.hematologic ? <Badge tone="outline">Solid tumor</Badge> : null}{!e.cancer.malignant ? <Badge tone="outline">Non-malignant</Badge> : null}{e.cancer.top_level ? <Badge tone="outline">Top-level</Badge> : null}{e.cancer.rare_cancer == null ? <span className="text-[11.5px] text-ink-3">rarity unknown</span> : null}</span>) },
          ]} caption={<>Taxonomy from NCIt / OncoTree (<ClaimBadge kind="curated" />). Badges are rule-derived from stored attributes.</>} />

          <CompareTable
            ents={ents}
            title="US registry figures (latest year available per metric)"
            id="registry"
            headNote={ents.map((e) => registryNote(e))}
            rows={EPI_ROWS.map(([metric, label]) => ({
              k: label,
              cells: ents.map((e) => {
                const f = e.figures.get(metric);
                if (!f) return e.registry ? <span className="text-[12.5px] text-ink-3">{e.registry.depth > 0 ? 'no registry observation at this level; none for the ancestor either' : 'no observation'}</span> : <span className="text-[12.5px] text-ink-3">no registry observation at this level (no top-level ancestor)</span>;
                const p = toInfo(prov.get(f.provenance_id), 'normalized') ?? { sourceSlug: f.source_slug, sourceName: f.source_name };
                return (
                  <span className="flex flex-col gap-0.5">
                    <span className="flex flex-wrap items-baseline gap-x-1.5">
                      <span className="ci-num text-[16px] font-medium">{fmtValue(f.value, f.unit)}</span>
                      <span className="text-[11px] text-ink-3">{unitLabel(f.unit)}</span>
                      {f.estimate_type !== 'observed' ? <span className="text-[11px] italic text-warn">{f.estimate_type}</span> : null}
                    </span>
                    <span className="text-[11.5px] text-ink-3">
                      {f.year_end && f.year_end !== f.year ? `${f.year}–${f.year_end}` : f.year} · both sexes · all ages{f.standard_population ? ` · ${f.standard_population.replace(/\s*\(.*\)$/, '')}` : ''}
                    </span>
                    <span className="flex flex-wrap items-center gap-1">
                      <SourceBadge p={p} />
                      <ClaimBadge kind="observed" />
                    </span>
                    {e.registry && e.registry.depth > 0 ? <span className="text-[11px] italic text-warn">figures for {e.registry.canonical_name}</span> : null}
                  </span>
                );
              }),
            }))}
            caption={<>Observations as published (site definitions on each entity's Statistics tab). No global figures: IARC / GLOBOCAN is under license review and SEER awaits credentials. For entities below the top level the nearest top-level ancestor's registry figures are shown and labelled; they describe the whole site group, not the subtype.</>}
          />

          <CompareTable
            ents={ents}
            title="Counters (entity + descendants)"
            id="counters"
            rows={[
              ['Active trials', 'active_trial_count', 'clinicaltrials', '/trials'],
              ['Recruiting trials', 'recruiting_trial_count', 'clinicaltrials', '/trials?status=RECRUITING'],
              ['Active Phase III trials', 'phase3_trial_count', 'clinicaltrials', '/trials?phase=PHASE3'],
              ['Publications, last 5 years', 'publication_count_5y', 'pubmed', '/research'],
              ['Publications, last 12 months', 'publication_count_12m', 'pubmed', '/research'],
              ['Curated evidence items', 'evidence_count', 'civic', '/evidence'],
              ['Genes with evidence', 'gene_count', 'civic', '/genomics'],
              ['Genomic cohorts', 'cohort_count', 'gdc', '/genomics'],
              ['Drugs (any / approved)', 'drug_count', 'civic', '/drugs'],
            ].map(([label, field, src, path]) => ({
              k: label as string,
              cells: ents.map((e) => {
                const c = e.counters;
                if (!c) return <span className="text-[12.5px] text-ink-3">counters not computed</span>;
                const v = c[field as keyof typeof c] as number;
                return (
                  <span className="flex flex-col gap-0.5">
                    <Link href={`/cancer/${e.cancer.slug}${path}`} className="ci-num text-[16px] font-medium no-underline hover:text-accent">
                      {fmtInt(v)}
                      {field === 'drug_count' ? <span className="text-[13px] text-ink-3"> / {fmtInt(c.approved_drug_count)}</span> : null}
                    </Link>
                    <span className="flex flex-wrap items-center gap-1 text-[11px] text-ink-3">
                      <SourceBadge p={{ sourceSlug: src as string, layer: 'derived', note: 'Counter computed by CancerIndex over the entity and its descendants.' }} compact />
                      <ClaimBadge kind="computed" />
                    </span>
                  </span>
                );
              }),
            }))}
            caption={<>Counts aggregate over descendants across hierarchy types, so a broad family counts more than one of its subtypes; publication counts are query-based per entity. Counters refreshed {freshest ? <span title={freshest.toISOString()}>{freshest.toISOString().slice(0, 10)}</span> : 'unknown'}.</>}
          />

          <CompareTable
            ents={ents}
            title="Current ranks"
            id="ranks"
            rows={RANK_METRICS.filter((m) => ents.some((e) => e.ranks.some((r) => r.metric_slug === m))).map((m) => ({
              k: ents.flatMap((e) => e.ranks).find((r) => r.metric_slug === m)?.metric_name ?? humanize(m),
              cells: ents.map((e) => {
                const own = bestRankFor(
                  e.ranks.filter((r) => r.cancer_id === e.cancer.id),
                  m,
                  { geo: 'USA', level: e.cancer.top_level ? 'top' : 'all' },
                );
                const viaAncestor = !own && e.registry && e.registry.depth > 0 ? bestRankFor(e.ranks.filter((r) => r.cancer_id === e.registry!.id), m, { geo: 'USA', level: 'top' }) : null;
                const r = own ?? viaAncestor;
                if (!r) return <span className="text-[12px] text-ink-3">not ranked</span>;
                return (
                  <span className="flex flex-col gap-0.5 text-[12.5px]">
                    <Link className="ci-link" href={`/rankings/${r.metric_slug}?scope=${encodeURIComponent(r.scope_key)}`}>
                      <span className="ci-num font-medium">#{r.rank}</span> of {fmtInt(r.eligible_entities)}
                    </Link>
                    <span className="text-[11px] text-ink-3">
                      {fmtValue(r.value, r.unit)} {unitLabel(r.unit)} · {scopeLabel(r.scope_key)}
                    </span>
                    <span className="flex flex-wrap gap-1">
                      <ConfidenceBadge level={r.confidence} />
                      {viaAncestor ? <span className="text-[11px] italic text-warn">rank of {e.registry!.canonical_name}</span> : null}
                    </span>
                  </span>
                );
              }),
            }))}
            caption={<>Ranks come from current snapshots (metric × scope × formula version); "of n" is the number of eligible entities in that scope. Top-level entities are ranked among the 36 mutually exclusive site groups, others among all malignant entities — the two are not comparable. <Link className="ci-link" href="/methodology#versioning">Versioning</Link>.</>}
            emptyText="No current ranking snapshot covers these entities."
          />

          <Section id="charts" kicker="Charts" title="Side by side" description="Bars are proportional within each chart; missing values are shown as a dash, never as zero.">
            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
              <CompareBars title="US annual deaths" unit="count" data={barsFor(ents, (e) => e.figures.get('mortality_count'))} caption={<>Registry observation · latest year · <ClaimBadge kind="observed" /></>} />
              <CompareBars title="US age-standardized mortality" unit="per_100k" data={barsFor(ents, (e) => e.figures.get('as_mortality_rate'))} caption="Per 100,000 · standard population declared by the source" />
              <CompareBars title="Active trials" unit="count" data={ents.map((e) => ({ label: e.cancer.canonical_name, value: e.counters ? e.counters.active_trial_count : null, note: 'ClinicalTrials.gov · entity + descendants', href: `/cancer/${e.cancer.slug}/trials` }))} caption={<>Counter · <ClaimBadge kind="computed" /></>} />
              <CompareBars title="Publications, last 5 years" unit="count" data={ents.map((e) => ({ label: e.cancer.canonical_name, value: e.counters ? e.counters.publication_count_5y : null, note: 'PubMed · stored query per entity', href: `/cancer/${e.cancer.slug}/research` }))} caption={<>Counter · <ClaimBadge kind="computed" /></>} />
            </div>
          </Section>

          <Note>Comparisons juxtapose facts of different natures (registry counts, registrations, literature volume). They are not a judgment of severity or priority, and population figures never describe an individual.</Note>
          <Freshness dataUpdatedAt={freshest ?? null} extra="each cell states its own period and source" />
        </div>
      )}
    </div>
  );
}

function barsFor(ents: CompareEntity[], pick: (e: CompareEntity) => { value: number; year: number; estimate_type: string } | undefined): CompareBarDatum[] {
  return ents.map((e) => {
    const f = pick(e);
    const anc = e.registry && e.registry.depth > 0 ? e.registry.canonical_name : null;
    return { label: e.cancer.canonical_name, value: f ? Number(f.value) : null, note: f ? `${f.year} · ${f.estimate_type}${anc ? ` · registry level: ${anc}` : ''}` : 'no registry observation', href: `/cancer/${e.cancer.slug}/statistics`, muted: !!anc };
  });
}

function CompareTable({ ents, title, id, rows, caption, headNote, emptyText }: { ents: CompareEntity[]; title: string; id: string; rows: Array<{ k: string; cells: ReactNode[] }>; caption?: ReactNode; headNote?: Array<string | null>; emptyText?: string }) {
  const nonEmpty = rows;
  return (
    <Section id={id} kicker="Facts" title={title}>
      {nonEmpty.length === 0 ? (
        <EmptyState compact>{emptyText ?? 'Nothing to compare in this block.'}</EmptyState>
      ) : (
        <div className="ci-table-wrap">
          <table className="ci-table" style={{ minWidth: `${180 + ents.length * 200}px` }}>
            <thead>
              <tr>
                <th className="sticky-col">Fact</th>
                {ents.map((e, i) => (
                  <th key={e.cancer.id}>
                    <Link className="ci-link normal-case tracking-normal" href={`/cancer/${e.cancer.slug}`} style={{ fontSize: 13 }}>
                      {e.cancer.canonical_name}
                    </Link>
                    {headNote?.[i] ? <span className="block text-[10.5px] font-normal normal-case tracking-normal text-warn">{headNote[i]}</span> : null}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {nonEmpty.map((r) => (
                <tr key={r.k}>
                  <th scope="row" className="sticky-col text-left text-[12.5px] font-medium text-ink-2" style={{ verticalAlign: 'top', padding: '7px 10px' }}>
                    {r.k}
                  </th>
                  {r.cells.map((c, i) => (
                    <td key={ents[i]?.cancer.id ?? i} className="text-[13px]">
                      {c}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
      {caption ? <p className="mt-2 flex flex-wrap items-center gap-1 text-[12px] text-ink-3">{caption}</p> : null}
    </Section>
  );
}