import type { Metadata } from 'next';
import Link from 'next/link';
import { PageHeader, Section, KV, Note } from '@/components/ui/section';
import { Badge, ClaimBadge, claimKindFromCategory } from '@/components/ui/badge';
import { EmptyState } from '@/components/ui/empty-state';
import { Freshness } from '@/components/ui/freshness';
import { SourceBadge } from '@/components/ui/source-badge';
import { RadialGraph } from '@/components/graph/radial-graph';
import { PathChainView } from '@/components/graph/path-chain';
import { defaultFocus, edgesFreshness, loadNeighborhood, loadPaths, resolveFocus, suggestedFoci, DEFAULT_GROUP_LIMIT, EXPANDED_GROUP_LIMIT, TRIAL_GROUP_LIMIT, FREQ_MIN, CASES_MIN, type FocusSuggestion } from '@/lib/queries/graph';
import { loadProvenance, toInfo } from '@/lib/queries/provenance';
import { type GraphEdge, type GraphNode, NODE_TYPE_LABEL, NODE_TYPE_ORDER, focusHref, nodeKey, parseFocus, relationshipLabel } from '@/lib/graph-model';
import { fmtInt } from '@/lib/format';
import { str, withParams, type SP } from '@/lib/search-params';

export const dynamic = 'force-dynamic';

const MAX_DRAWN = 60;

export async function generateMetadata({ searchParams }: { searchParams: Promise<SP> }): Promise<Metadata> {
  const sp = await searchParams;
  const f = parseFocus(str(sp, 'focus'));
  const node = f ? await resolveFocus(f) : null;
  const title = node ? `${node.label} — knowledge graph` : 'Knowledge graph';
  return {
    title,
    description: node ? `Contextual knowledge graph around ${node.label}: source-native cancer–gene–variant–drug edges with evidence level and cancer context, plus derived registry counts (trials, cohort frequencies, approvals).` : 'Cancer–gene–variant–drug–trial knowledge graph: every edge carries its cancer context, direction, evidence level and provenance.',
    robots: { index: !str(sp, 'more') },
    alternates: { canonical: node ? `/graph?focus=${node.type}:${encodeURIComponent(node.ref)}` : '/graph' },
  };
}

function FocusForm({ focus, suggestions }: { focus: string; suggestions: FocusSuggestion[] }) {
  return (
    <div className="mt-3">
      <form method="get" action="/graph" className="flex max-w-2xl flex-wrap gap-2">
        <label htmlFor="focus" className="sr-only">
          Focus entity (type:reference)
        </label>
        <input id="focus" name="focus" defaultValue={focus} placeholder="cancer:melanoma · gene:EGFR · variant:braf-v600e · drug:osimertinib · trial:NCT04487080" className="min-w-0 flex-1 border border-rule-strong bg-white px-3 py-2 text-[14px] outline-none focus:border-accent" spellCheck={false} />
        <button type="submit" className="border border-ink bg-ink px-4 py-2 text-[14px] text-paper hover:bg-ink-2">
          Focus
        </button>
      </form>
      <p className="mt-1.5 text-[12px] text-ink-3">
        Accepted: <code className="ci-mono">cancer:&lt;slug&gt;</code>, <code className="ci-mono">gene:&lt;symbol&gt;</code>, <code className="ci-mono">variant:&lt;slug&gt;</code>, <code className="ci-mono">drug:&lt;slug&gt;</code>, <code className="ci-mono">trial:&lt;NCT id&gt;</code>, or a bare CI id. Find slugs with{' '}
        <Link href="/search" className="ci-link">
          search
        </Link>
        .
      </p>
      {suggestions.length ? (
        <p className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[12.5px] text-ink-3">
          <span className="ci-kicker">Most connected</span>
          {suggestions.map((s) => (
            <Link key={`${s.type}:${s.ref}`} href={`/graph?focus=${s.type}:${encodeURIComponent(s.ref)}`} className="ci-link" title={`${fmtInt(s.edges)} knowledge edges`}>
              {s.type === 'gene' ? <span className="ci-mono">{s.label}</span> : s.label} <span className="ci-num text-ink-4">{fmtInt(s.edges)}</span>
            </Link>
          ))}
        </p>
      ) : null}
    </div>
  );
}

function DirectionCell({ e }: { e: GraphEdge }) {
  if (!e.direction) return <span className="text-ink-4">—</span>;
  const tone = e.direction === 'resistance' ? 'warn' : e.direction === 'sensitivity' ? 'ok' : e.direction === 'mixed' ? 'warn' : 'neutral';
  return <Badge tone={tone}>{e.direction}</Badge>;
}

function ContextCell({ e }: { e: GraphEdge }) {
  if (e.cancerContext.length === 0) return <span className="text-ink-4">{e.derived ? 'not mapped' : '—'}</span>;
  const shown = e.cancerContext.slice(0, 3);
  return (
    <span className="inline-flex flex-wrap gap-x-1.5 gap-y-0.5">
      {shown.map((c, i) => (
        <span key={c.id}>
          {c.slug ? (
            <Link href={`/graph?focus=cancer:${c.slug}`} className="ci-link" title={`Explore ${c.name} in the graph`}>
              {c.name}
            </Link>
          ) : (
            <span className="ci-mono">{c.id}</span>
          )}
          {i < shown.length - 1 ? ',' : ''}
        </span>
      ))}
      {e.cancerContext.length > 3 ? <span className="text-ink-3">+{e.cancerContext.length - 3}</span> : null}
    </span>
  );
}

export default async function GraphPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const focusParam = str(sp, 'focus').slice(0, 200);
  const more = str(sp, 'more').slice(0, 40).toUpperCase() || null;
  const suggestions = await suggestedFoci();
  const requested = parseFocus(focusParam);
  const focusRef = requested ?? (await defaultFocus());
  const focus = focusRef ? await resolveFocus(focusRef) : null;

  if (!focus) {
    return (
      <div>
        <PageHeader kicker="Knowledge graph" title="Knowledge graph" lede="Cancer–gene–variant–drug–trial relationships as the sources state them: every edge carries its cancer context, direction, evidence level and provenance. CancerIndex never infers an edge." />
        <FocusForm focus={focusParam} suggestions={suggestions} />
        <div className="mt-6">
          <EmptyState title={requested ? `No ${requested.type} matches “${requested.ref}”` : 'Data not yet available'} knows={[...suggestions.map((s) => ({ label: `${s.label} (${s.type})`, href: `/graph?focus=${s.type}:${encodeURIComponent(s.ref)}` })), { label: 'Search entities', href: '/search' }]}>
            {requested ? 'The reference must be the entity slug (cancer, variant, drug), the HGNC symbol (gene) or the NCT id (trial). Use search to find it, or pick a suggested focus.' : 'No knowledge edges are loaded on this environment yet.'}
          </EmptyState>
        </div>
      </div>
    );
  }

  const nb = await loadNeighborhood(focus, { more });
  const [paths, freshAt] = await Promise.all([focus.type === 'cancer' ? loadPaths(focus, nb.cancerIds) : Promise.resolve([]), edgesFreshness(focus)]);
  const allEdges = nb.groups.flatMap((g) => g.edges);
  const prov = await loadProvenance(allEdges.map((e) => e.provenanceIds[0]).filter((x): x is number => typeof x === 'number'));
  const nodeByKey = new Map<string, GraphNode>(nb.nodes.map((n) => [nodeKey(n), n]));
  const totalEdges = nb.groups.reduce((a, g) => a + g.total, 0);
  const current = { focus: `${focus.type}:${focus.ref}`, more: more ?? '' };
  const hrefMore = (rel: string | null) => `/graph${withParams(current, { more: rel ?? '' })}#edges`;
  const typeOrder = NODE_TYPE_ORDER.filter((t) => nb.degreeByType[t] > 0);

  return (
    <article>
      <PageHeader kicker={`Knowledge graph · ${NODE_TYPE_LABEL[focus.type].replace(/s$/, '')}`} title={focus.type === 'gene' ? <span className="ci-mono font-sans">{focus.label}</span> : focus.label} lede={focus.sublabel ? focus.sublabel.replace(/_/g, ' ') : undefined}>
        <div className="mt-3 grid gap-4 sm:grid-cols-2">
          <KV
            items={[
              { k: 'Identifier', v: <span className="ci-mono">{focus.id}</span> },
              {
                k: 'Entity page',
                v: (
                  <Link href={focus.href} className="ci-link">
                    {focus.href} ↗
                  </Link>
                ),
              },
              { k: 'Edges', v: <span className="ci-num">{fmtInt(totalEdges)}</span> },
            ]}
          />
          <KV
            items={[
              {
                k: 'Neighbours',
                v: typeOrder.length ? (
                  <span className="flex flex-wrap gap-x-3 gap-y-0.5">
                    {typeOrder.map((t) => (
                      <span key={t}>
                        <span className="ci-num">{fmtInt(nb.degreeByType[t])}</span> {NODE_TYPE_LABEL[t].toLowerCase()}
                      </span>
                    ))}
                  </span>
                ) : (
                  'none'
                ),
              },
              { k: 'Drawn', v: `${fmtInt(Math.min(nb.nodes.length, MAX_DRAWN))} of ${fmtInt(nb.nodes.length)} neighbours (cap ${MAX_DRAWN}); table lists every fetched edge` },
            ]}
          />
        </div>
        <FocusForm focus={`${focus.type}:${focus.ref}`} suggestions={suggestions} />
      </PageHeader>

      {nb.nodes.length === 0 ? (
        <EmptyState knows={[{ label: `Open ${focus.label}`, href: focus.href }, ...suggestions.slice(0, 4).map((s) => ({ label: s.label, href: `/graph?focus=${s.type}:${encodeURIComponent(s.ref)}` }))]}>
          No knowledge edge or registry link touches this {focus.type} on this environment. Edges appear once a source (CIViC, ChEMBL, openFDA, ClinicalTrials.gov, GDC) states one — CancerIndex does not infer them.
        </EmptyState>
      ) : (
        <div className="grid gap-8 lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)]">
          <Section id="graph" kicker="Neighbourhood" title="Radial view" description="Focus at the centre; neighbours grouped by entity type. Click a node to re-centre the graph on it; ↗ opens the entity page. Hover a spoke for relationship, evidence level, cancer context and source." level={3}>
            <RadialGraph focus={nb.focus} nodes={nb.nodes} edges={allEdges} maxNodes={MAX_DRAWN} />
          </Section>

          <Section id="paths" kicker="Paths" title={focus.type === 'cancer' ? 'Strongest chains' : 'Paths'} description={focus.type === 'cancer' ? 'Gene → variant → drug chains anchored in this cancer (or a descendant), ranked by source-native evidence level then support, with the approval and trial registry hops when they exist.' : 'Chains are built for cancer foci only.'} level={3}>
            {focus.type !== 'cancer' ? (
              <p className="text-[13px] text-ink-3">
                Pick a cancer in the graph or from the neighbour table to see gene → variant → drug → approval → trial chains.
                {nb.nodes.some((n) => n.type === 'cancer') ? (
                  <>
                    {' '}
                    Cancers here:{' '}
                    {nb.nodes
                      .filter((n) => n.type === 'cancer')
                      .slice(0, 5)
                      .map((n, i) => (
                        <span key={n.id}>
                          {i > 0 ? ', ' : ''}
                          <Link href={focusHref(n.type, n.ref) ?? n.href} className="ci-link">
                            {n.label}
                          </Link>
                        </span>
                      ))}
                    .
                  </>
                ) : null}
              </p>
            ) : paths.length === 0 ? (
              <EmptyState compact>No PREDICTS_RESPONSE_TO edge with direction “sensitivity” names this cancer (or a descendant) in its context, so no chain can be assembled. The neighbour table still lists what the sources state.</EmptyState>
            ) : (
              <>
                <ol className="m-0 list-none p-0">
                  {paths.map((c) => (
                    <PathChainView key={`${c.variant.id}:${c.drug.id}`} chain={c} />
                  ))}
                </ol>
                <p className="mt-2 text-[12px] text-ink-3">
                  Each hop keeps its own claim category: cohort alteration frequency (observed, cases ≥ {CASES_MIN}), CIViC predictive edge (curated, level as stated by CIViC), regulatory approval (authority, jurisdiction, date as published), trial count (registry). A missing hop is shown as missing — never filled in. Not treatment guidance.
                </p>
              </>
            )}
          </Section>
        </div>
      )}

      {nb.groups.length ? (
        <Section id="edges" kicker="Edges" title="Every edge, grouped by relationship" description={`Source-native edges first (aggregated per neighbour, direction, evidence level and source), then derived registry links. Up to ${DEFAULT_GROUP_LIMIT} per relationship (${TRIAL_GROUP_LIMIT} trials); “show all” raises one group to ${EXPANDED_GROUP_LIMIT}.`}>
          <div className="ci-table-wrap">
            <table className="ci-table ci-evidence">
              <thead>
                <tr>
                  <th>Relationship</th>
                  <th>Neighbour</th>
                  <th>Direction</th>
                  <th>Evidence level</th>
                  <th>Cancer context</th>
                  <th className="num">Support</th>
                  <th>Claim</th>
                  <th>Source</th>
                  <th>Expand</th>
                </tr>
              </thead>
              {nb.groups.map((g) => {
                const expanded = more === g.relationshipType;
                return (
                  <tbody key={g.relationshipType}>
                    <tr className="ci-group">
                      <th colSpan={9} scope="colgroup">
                        <span className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
                          <span>
                            {focus.label} <span className="text-ink-2">{relationshipLabel(g.relationshipType)}</span> …
                          </span>
                          <span className="ci-mono text-[11px] text-ink-3">{g.relationshipType}</span>
                          {g.derived ? <Badge tone="outline">derived</Badge> : null}
                          <span className="ci-num text-[12px] text-ink-3">
                            {fmtInt(g.edges.length)} of {fmtInt(g.total)}
                          </span>
                          {g.total > g.edges.length ? (
                            <Link href={hrefMore(g.relationshipType)} className="ci-link text-[12.5px]">
                              show all (up to {EXPANDED_GROUP_LIMIT})
                            </Link>
                          ) : expanded ? (
                            <Link href={hrefMore(null)} className="ci-link text-[12.5px]">
                              show fewer
                            </Link>
                          ) : null}
                        </span>
                      </th>
                    </tr>
                    {g.edges.map((e) => {
                      const nnode = nodeByKey.get(e.neighborKey);
                      if (!nnode) return null;
                      const p = toInfo(prov.get(e.provenanceIds[0] ?? -1));
                      const expand = focusHref(nnode.type, nnode.ref);
                      return (
                        <tr key={e.key}>
                          <td className="whitespace-nowrap text-[12.5px] text-ink-2">
                            {e.via ? (
                              <span title="The focus is the cancer context of this edge (the neighbour and the third entity are the edge's ends)">in context · </span>
                            ) : (
                              <span aria-label={e.outgoing ? 'focus to neighbour' : 'neighbour to focus'}>{e.outgoing ? '→' : '←'} </span>
                            )}
                            {relationshipLabel(e.relationshipType)}
                          </td>
                          <td className="w-t">
                            <Link href={nnode.href} className="ci-link">
                              {nnode.type === 'gene' ? <span className="ci-mono">{nnode.label}</span> : nnode.label}
                            </Link>
                            {nnode.sublabel && nnode.type !== 'gene' ? <span className="ml-1.5 text-[12px] text-ink-3">{nnode.sublabel}</span> : null}
                            {e.via ? (
                              <span className="text-[12.5px] text-ink-2">
                                {' '}
                                → {relationshipLabel(e.relationshipType)}{' '}
                                <Link href={e.via.href} className="ci-link">
                                  {e.via.label}
                                </Link>
                              </span>
                            ) : null}
                            {e.detail ? <div className="mt-0.5 text-[12px] text-ink-3">{e.detail}</div> : null}
                          </td>
                          <td>
                            <DirectionCell e={e} />
                          </td>
                          <td>{e.evidenceLevel ? <Badge tone="accent" mono title="Source-native scale (CIViC A–E, ChEMBL max phase, FDA application type, approval status) — never re-scaled">{e.evidenceLevel}</Badge> : <span className="text-ink-4">—</span>}</td>
                          <td className="text-[12.5px]">
                            <ContextCell e={e} />
                          </td>
                          <td className="num">{fmtInt(e.supportCount)}</td>
                          <td>
                            <ClaimBadge kind={claimKindFromCategory(e.evidenceCategory)} />
                          </td>
                          <td>
                            {e.sourceSlugs.map((s) => (
                              <SourceBadge key={s} compact p={p ?? { sourceSlug: s }} title={p ? undefined : e.derived ? 'Derived by CancerIndex from registry rows of this source' : null} />
                            ))}
                          </td>
                          <td className="whitespace-nowrap">
                            {expand ? (
                              <Link href={expand} className="ci-link text-[12.5px]">
                                graph →
                              </Link>
                            ) : (
                              <Link href={nnode.href} className="ci-link text-[12.5px]">
                                open ↗
                              </Link>
                            )}
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                );
              })}
            </table>
          </div>
          <div className="mt-3 space-y-2">
            <Note>
              An <strong>edge</strong> is a relationship stated by a source (CIViC evidence item, ChEMBL indication or mechanism, openFDA approval) and kept with its native evidence level, direction and cancer context — CancerIndex never infers, merges or re-scales it. Rows marked <em>derived</em> are counts and measurements read from registries (ClinicalTrials.gov conditions and interventions, GDC/cBioPortal cohort frequencies ≥ {Math.round(FREQ_MIN * 100)} % with ≥ {CASES_MIN} cases affected, regulatory approval records): they say how often two entities co-occur in a registry, not that a source asserted a biological or clinical link. Trials are rolled up over the cancer and its descendants; approvals list authority, jurisdiction and date as published.
            </Note>
            <Freshness dataUpdatedAt={freshAt} extra={`${fmtInt(totalEdges)} edges in the database for this focus`} />
          </div>
        </Section>
      ) : null}
    </article>
  );
}