import Link from 'next/link';
import { Section, KV, Note } from '@/components/ui/section';
import { EmptyState } from '@/components/ui/empty-state';
import { Badge, ClaimBadge } from '@/components/ui/badge';
import { SourceBadge } from '@/components/ui/source-badge';
import { Freshness } from '@/components/ui/freshness';
import { CompletenessDots } from '@/components/ui/completeness';
import { loadProvenance, toInfo } from '@/lib/queries/provenance';
import { fmtInt, humanize, isoDate } from '@/lib/format';
import { KeyFigures, CompletenessRow } from '../key-figures';
import type { CancerBundle } from '../load';

export async function OverviewTab({ b }: { b: CancerBundle }) {
  const { cancer: c, counters, parents, children, aliases, anatomy } = b;
  const prov = await loadProvenance([c.description_provenance_id]);
  const descProv = toInfo(prov.get(c.description_provenance_id ?? -1), 'raw');
  const byType = new Map<string, typeof parents>();
  for (const p of parents) byType.set(p.hierarchy_type, [...(byType.get(p.hierarchy_type) ?? []), p]);
  const childrenByType = new Map<string, typeof children>();
  for (const ch of children) childrenByType.set(ch.hierarchy_type, [...(childrenByType.get(ch.hierarchy_type) ?? []), ch]);
  const synonyms = aliases.filter((a) => a.alias_type !== 'preferred' && a.alias_type !== 'abbreviation');

  const knows = [
    { label: `Taxonomy: ${parents.length} parent${parents.length === 1 ? '' : 's'}, ${children.length} ${children.length === 1 ? 'child' : 'children'}`, href: `/cancer/${c.slug}#taxonomy` },
    ...(anatomy.length ? [{ label: `Anatomy: ${anatomy.map((a) => a.name).join(', ')}`, href: `/cancer/${c.slug}#anatomy` }] : []),
    ...(b.codes.length ? [{ label: `${b.codes.length} cross-reference codes`, href: `/cancer/${c.slug}/sources` }] : []),
  ];

  return (
    <div className="space-y-8">
      {/* Key figures strip (§43, §309): full width, above the definition. */}
      <div>
        <KeyFigures b={b} />
        <CompletenessRow completeness={counters?.completeness} computedAt={counters?.updated_at} />
      </div>
    <div className="grid gap-8 lg:grid-cols-[1.5fr_1fr]">
      <div className="space-y-8">
        <Section id="definition" kicker="Definition" title="What this entity is">
          {c.description ? (
            <>
              <p className="max-w-3xl text-[15px] leading-relaxed text-ink">{c.description}</p>
              {/* div, not p: the SourceBadge popover contains a <dl>, which the HTML parser uses to close an open <p> → hydration mismatch (React #418). */}
              <div className="mt-2 flex flex-wrap items-center gap-1.5 text-[12px] text-ink-3">
                Definition text as published by {descProv ? <SourceBadge p={descProv} /> : 'the source terminology'} <ClaimBadge kind="curated" />
              </div>
              <Freshness dataUpdatedAt={prov.get(c.description_provenance_id ?? -1)?.retrieved_at ?? c.updated_at} sourceVersion={prov.get(c.description_provenance_id ?? -1)?.dataset_version ?? c.classification_version} />
            </>
          ) : (
            <EmptyState title="Definition not yet available" knows={knows}>
              The NCIt definition is attached when the NCIt connector ingests this concept{c.primary_ncit_code ? ` (${c.primary_ncit_code})` : ''}. CancerIndex does not write its own definitions.
            </EmptyState>
          )}
        </Section>

        <Section id="taxonomy" kicker="Taxonomy" title="Position in the hierarchies" description="Several hierarchies coexist; edges are listed per hierarchy type with their source.">
          {parents.length === 0 && children.length === 0 ? (
            <EmptyState compact>No hierarchy edge for this entity yet.</EmptyState>
          ) : (
            <div className="grid gap-6 sm:grid-cols-2">
              <div>
                <p className="ci-kicker mb-1.5">Parents</p>
                {parents.length ? (
                  [...byType.entries()].map(([type, ps]) => (
                    <div key={type} className="mb-2">
                      <Badge tone="outline" className="mb-1">
                        {type}
                      </Badge>
                      <ul className="text-[13.5px]">
                        {ps.map((p) => (
                          <li key={`${type}-${p.id}`} className="py-0.5">
                            <Link className={`ci-link ${p.malignant ? '' : 'text-ink-3'}`} href={`/cancer/${p.slug}`}>
                              {p.canonical_name}
                            </Link>
                            <span className="ml-1.5 text-[11.5px] text-ink-3">{humanize(p.entity_type)}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  ))
                ) : (
                  <p className="text-[13px] text-ink-3">Root node — no parent in any ingested hierarchy.</p>
                )}
              </div>
              <div>
                <p className="ci-kicker mb-1.5">Children ({fmtInt(children.length)})</p>
                {children.length ? (
                  [...childrenByType.entries()].map(([type, cs]) => (
                    <div key={type} className="mb-2">
                      <Badge tone="outline" className="mb-1">
                        {type}
                      </Badge>
                      <ul className="max-h-[420px] overflow-y-auto text-[13.5px]">
                        {cs.map((ch) => (
                          <li key={`${type}-${ch.id}`} className="flex items-baseline justify-between gap-2 py-0.5">
                            <Link className={`ci-link ${ch.malignant ? '' : 'text-ink-3'}`} href={`/cancer/${ch.slug}`}>
                              {ch.canonical_name}
                            </Link>
                            {ch.child_count > 0 ? <span className="ci-num text-[11px] text-ink-3">{ch.child_count} sub</span> : null}
                          </li>
                        ))}
                      </ul>
                    </div>
                  ))
                ) : (
                  <p className="text-[13px] text-ink-3">Leaf node — no children.</p>
                )}
              </div>
            </div>
          )}
          {counters && counters.descendant_count > children.length ? <p className="mt-2 text-[12px] text-ink-3">{fmtInt(counters.descendant_count)} descendants in total; counters on this page aggregate over all of them.</p> : null}
        </Section>

        <Section id="anatomy" kicker="Anatomy" title="Anatomical sites">
          {anatomy.length ? (
            <ul className="flex flex-wrap gap-2 text-[13.5px]">
              {anatomy.map((a) => (
                <li key={`${a.site_id}-${a.relation}`}>
                  <Link href={`/cancers?site=${a.slug}`} className="inline-flex items-center gap-1.5 border border-rule px-2 py-1 no-underline hover:border-accent">
                    <span className="text-ink">{a.name}</span>
                    {a.relation !== 'primary' ? <Badge tone="outline">{a.relation}</Badge> : null}
                    {a.ncit_code ? <span className="ci-mono text-[10.5px] text-ink-4">{a.ncit_code}</span> : null}
                  </Link>
                </li>
              ))}
            </ul>
          ) : (
            <EmptyState compact>No anatomical site linked yet.</EmptyState>
          )}
        </Section>
      </div>

      <aside className="space-y-8">
        <Section id="facts" kicker="Record" title="Identity" level={3}>
          <KV
            items={[
              { k: 'CancerIndex ID', v: <span className="ci-mono">{c.id}</span> },
              { k: 'Entity type', v: humanize(c.entity_type) },
              { k: 'Malignant', v: c.malignant ? 'Yes' : 'No' },
              { k: 'Solid / hematologic', v: c.hematologic ? 'Hematologic' : c.solid_tumor ? 'Solid tumor' : '—' },
              { k: 'Pediatric relevant', v: c.pediatric_relevant ? 'Yes' : 'Not flagged' },
              { k: 'Rare cancer', v: c.rare_cancer == null ? <span className="text-ink-3">Unknown (no incidence data yet)</span> : c.rare_cancer ? 'Yes' : 'No' },
              { k: 'Hierarchy depth', v: <span className="ci-num">{c.depth}</span> },
              { k: 'Classification version', v: c.classification_version ? <span className="ci-mono">{c.classification_version}</span> : null },
              { k: 'Semantic types', v: c.semantic_types.length ? c.semantic_types.join(', ') : null },
              { k: 'Status', v: humanize(c.status) },
              { k: 'Record updated', v: isoDate(c.updated_at) },
            ]}
          />
        </Section>

        <Section id="completeness" kicker="Coverage" title="Data completeness" level={3}>
          <CompletenessDots
            filled={{
              taxonomy: true,
              epidemiology: counters?.epidemiology_obs_count ?? 0,
              survival: counters?.survival_obs_count ?? 0,
              genomics: counters?.cohort_count ?? 0,
              evidence: counters?.evidence_count ?? 0,
              drugs: counters?.drug_count ?? 0,
              trials: counters?.trial_count ?? 0,
              literature: counters?.publication_count ?? 0,
            }}
          />
          {counters ? (
            <KV
              className="mt-3"
              items={[
                { k: 'Trials (all / active)', v: <span className="ci-num">{fmtInt(counters.trial_count)} / {fmtInt(counters.active_trial_count)}</span> },
                { k: 'Publications (all / 5y)', v: <span className="ci-num">{fmtInt(counters.publication_count)} / {fmtInt(counters.publication_count_5y)}</span> },
                { k: 'Evidence items', v: <span className="ci-num">{fmtInt(counters.evidence_count)}</span> },
                { k: 'Genes / variants', v: <span className="ci-num">{fmtInt(counters.gene_count)} / {fmtInt(counters.variant_count)}</span> },
                { k: 'Drugs (any / approved)', v: <span className="ci-num">{fmtInt(counters.drug_count)} / {fmtInt(counters.approved_drug_count)}</span> },
                { k: 'Genomic cohorts', v: <span className="ci-num">{fmtInt(counters.cohort_count)}</span> },
                { k: 'Epidemiology / survival obs.', v: <span className="ci-num">{fmtInt(counters.epidemiology_obs_count)} / {fmtInt(counters.survival_obs_count)}</span> },
              ]}
            />
          ) : (
            <p className="mt-2 text-[12.5px] text-ink-3">Counters have not been computed for this entity yet (they are refreshed after each connector run). Only the taxonomy domain is populated.</p>
          )}
          {counters ? <Freshness dataUpdatedAt={counters.updated_at} extra="counters aggregate over descendants" /> : null}
        </Section>

        <Section id="synonyms" kicker="Names" title={`Synonyms (${fmtInt(synonyms.length)})`} level={3}>
          {synonyms.length ? (
            <ul className="max-h-[300px] overflow-y-auto text-[13px]">
              {synonyms.map((a, i) => (
                <li key={`${a.alias}-${i}`} className="flex items-baseline justify-between gap-2 border-b border-rule py-0.5">
                  <span>{a.alias}</span>
                  <span className="text-[11px] text-ink-3">
                    {a.alias_type}
                    {a.source_terminology ? ` · ${a.source_terminology}` : ''}
                  </span>
                </li>
              ))}
            </ul>
          ) : (
            <p className="text-[13px] text-ink-3">Only the preferred name is recorded so far.</p>
          )}
        </Section>
        <Note>CancerIndex is a research and information platform. It does not diagnose and does not recommend treatment.</Note>
      </aside>
    </div>
    </div>
  );
}