import type { Metadata } from 'next';
import Link from 'next/link';
import { PageHeader, Section, Note } from '@/components/ui/section';
import { Badge, ClaimBadge } from '@/components/ui/badge';
import { EmptyState } from '@/components/ui/empty-state';
import { Freshness } from '@/components/ui/freshness';
import { Pager } from '@/components/ui/pager';
import { SourceBadge } from '@/components/ui/source-badge';
import { PIPELINE_FUNNEL, PIPELINE_PAGE_SIZE, PIPELINE_STAGES, countPipelineRows, listPipelineRows, pipelineSourceSlugs, pipelineSummary, pipelineTopDrugsPerStage, topLevelCancerOptions, type PipelineRow, type PipelineStage } from '@/lib/queries/approvals';
import { fmtDate, fmtInt, phaseLabel } from '@/lib/format';
import { pageInfo } from '@/lib/pagination';
import { str, int, withParams, type SP } from '@/lib/search-params';

export const metadata: Metadata = {
  title: 'Drug development pipeline',
  description: 'Development stage of oncology drugs per top-level cancer, derived from registered interventional trials and jurisdiction-aware approvals.',
  alternates: { canonical: '/pipeline' },
};
export const revalidate = 600;

const STAGE_LABEL: Record<PipelineStage, string> = {
  phase_not_stated: 'Phase not stated',
  phase1: 'Phase 1',
  phase2: 'Phase 2',
  phase3: 'Phase 3',
  phase4: 'Phase 4',
  approved: 'Approved',
  withdrawn: 'Withdrawn',
};

function StageBadge({ stage }: { stage: PipelineStage }) {
  const tone = stage === 'approved' ? 'ok' : stage === 'withdrawn' ? 'danger' : stage === 'phase_not_stated' ? 'outline' : 'neutral';
  return <Badge tone={tone}>{STAGE_LABEL[stage] ?? stage}</Badge>;
}

/**
 * Funnel: one server-rendered SVG bar per stage (phase 1 → approved), width ∝ number of drugs,
 * with the representative drugs (most active trials) listed beside each bar.
 */
function Funnel({ stages, top, hrefFor }: { stages: Array<{ stage: PipelineStage; drugs: number; active_trials: number }>; top: Map<PipelineStage, PipelineRow[]>; hrefFor: (stage: PipelineStage) => string }) {
  const funnel = PIPELINE_FUNNEL.map((s) => stages.find((x) => x.stage === s) ?? { stage: s, drugs: 0, active_trials: 0 });
  const max = Math.max(...funnel.map((s) => s.drugs), 1);
  return (
    <ol className="m-0 list-none space-y-3 p-0">
      {funnel.map((s) => {
        const w = Math.max(s.drugs > 0 ? 1 : 0, Math.round((s.drugs / max) * 100));
        const reps = top.get(s.stage) ?? [];
        return (
          <li key={s.stage} className="grid gap-x-4 gap-y-1 sm:grid-cols-[140px_1fr]">
            <div className="text-[13.5px]">
              <Link className="ci-link font-medium" href={hrefFor(s.stage)}>
                {STAGE_LABEL[s.stage]}
              </Link>
              <p className="m-0 text-[12px] text-ink-3">
                <span className="ci-num">{fmtInt(s.drugs)}</span> drug{s.drugs === 1 ? '' : 's'} · <span className="ci-num">{fmtInt(s.active_trials)}</span> active trials
              </p>
            </div>
            <div className="min-w-0">
              <svg viewBox="0 0 100 10" preserveAspectRatio="none" width="100%" height="14" role="img" aria-label={`${STAGE_LABEL[s.stage]}: ${s.drugs} drugs`} className="block">
                <rect x="0" y="0" width="100" height="10" fill="var(--color-paper-2)" />
                <rect x="0" y="0" width={w} height="10" fill={s.stage === 'approved' ? 'var(--color-ink-2)' : 'var(--color-accent)'} />
              </svg>
              <p className="m-0 mt-1 text-[12.5px] text-ink-2">
                {reps.length ? (
                  reps.map((r, i) => (
                    <span key={r.id}>
                      {i > 0 ? ', ' : ''}
                      <Link className="ci-link" href={`/drug/${r.drug_slug}`} title={`${fmtInt(r.active_trials)} active trials`}>
                        {r.drug_name}
                      </Link>
                    </span>
                  ))
                ) : (
                  <span className="text-ink-4">no drug at this stage</span>
                )}
              </p>
            </div>
          </li>
        );
      })}
    </ol>
  );
}

export default async function PipelinePage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const cancerSlug = str(sp, 'cancer');
  const stage = (PIPELINE_STAGES as readonly string[]).includes(str(sp, 'stage')) ? (str(sp, 'stage') as PipelineStage) : '';
  const requestedPage = int(sp, 'page', 1, 1, 100_000);
  const options = await topLevelCancerOptions();
  const cancer = options.find((c) => c.slug === cancerSlug) ?? null;
  const scopeId = cancer?.id ?? null;
  const [summary, top, total, sources] = await Promise.all([pipelineSummary(scopeId), pipelineTopDrugsPerStage(scopeId, 5), countPipelineRows(scopeId, stage), pipelineSourceSlugs()]);
  const info = pageInfo(requestedPage, PIPELINE_PAGE_SIZE, total);
  const rows = total ? await listPipelineRows(scopeId, stage, info.page) : [];
  const current = { cancer: cancer?.slug ?? '', stage, page: info.page > 1 ? info.page : '' };
  const href = (o: Record<string, string | number | null | undefined>) => `/pipeline${withParams(current, o)}`;
  const side = summary.stages.filter((s) => s.stage === 'withdrawn' || s.stage === 'phase_not_stated');

  return (
    <div>
      <PageHeader kicker="Derived" title={cancer ? `Development pipeline · ${cancer.canonical_name}` : 'Drug development pipeline'} lede="For each drug, the most advanced stage supported by registered interventional trials and jurisdiction-aware approval records. Approval in any ingested jurisdiction outranks trial phase; a drug is counted once, at its highest stage.">
        <p className="mt-2 flex flex-wrap items-center gap-2 text-[12.5px]">
          <ClaimBadge kind="computed" />
          {summary.formulaVersion ? <span className="ci-mono text-ink-3">{summary.formulaVersion}</span> : null}
          <Link className="ci-link" href="/methodology/pipeline">
            Stage rules
          </Link>
          <Link className="ci-link" href="/approvals">
            Approvals feed →
          </Link>
        </p>
      </PageHeader>

      <form method="get" action="/pipeline" className="flex flex-wrap items-end gap-2 border-y border-rule py-3 text-[13.5px]">
        <label className="flex flex-col gap-1">
          <span className="ci-kicker">Top-level cancer</span>
          <select name="cancer" defaultValue={cancer?.slug ?? ''} className="max-w-[360px] border border-rule-strong bg-white px-2 py-1.5">
            <option value="">All cancers (one row per drug)</option>
            {options.map((c) => (
              <option key={c.id} value={c.slug}>
                {c.canonical_name} ({fmtInt(c.drugs)})
              </option>
            ))}
          </select>
        </label>
        <label className="flex flex-col gap-1">
          <span className="ci-kicker">Stage</span>
          <select name="stage" defaultValue={stage} className="border border-rule-strong bg-white px-2 py-1.5">
            <option value="">Any</option>
            {PIPELINE_STAGES.map((s) => (
              <option key={s} value={s}>
                {STAGE_LABEL[s]}
              </option>
            ))}
          </select>
        </label>
        <button type="submit" className="border border-ink bg-ink px-3 py-1.5 text-paper hover:bg-ink-2">
          Apply
        </button>
        {cancer || stage ? (
          <Link className="ci-link text-[12.5px]" href="/pipeline">
            Clear
          </Link>
        ) : null}
      </form>

      {summary.drugs === 0 ? (
        <div className="mt-4">
          <EmptyState knows={[{ label: 'Approvals feed', href: '/approvals' }, { label: 'Drugs', href: '/drugs' }]}>{cancer ? `No drug is linked to ${cancer.canonical_name} through a registered interventional trial or an approval record yet.` : 'The pipeline has not been computed on this environment yet (pnpm cix intel).'}</EmptyState>
        </div>
      ) : (
        <>
          <Section id="funnel" kicker="Funnel" title={`${fmtInt(summary.drugs)} drugs by highest stage`} description={cancer ? `Drugs reach ${cancer.canonical_name} through trial conditions or approval indications mapped to it or to one of its descendant entities.` : 'Across all cancers: a drug is placed once, at the highest stage it reaches anywhere. Representative drugs are those with the most active trials at that stage.'}>
            <Funnel stages={summary.stages} top={top} hrefFor={(s) => href({ stage: s, page: '' })} />
            {side.some((s) => s.drugs > 0) ? (
              <p className="mt-3 text-[12.5px] text-ink-3">
                Outside the funnel:{' '}
                {side
                  .filter((s) => s.drugs > 0)
                  .map((s, i) => (
                    <span key={s.stage}>
                      {i > 0 ? ' · ' : ''}
                      <Link className="ci-link" href={href({ stage: s.stage, page: '' })}>
                        {STAGE_LABEL[s.stage]}
                      </Link>{' '}
                      <span className="ci-num">{fmtInt(s.drugs)}</span>
                    </span>
                  ))}
                . "Withdrawn" = every approval record for the scope is withdrawn or superseded; "phase not stated" = trials exist but none states a phase.
              </p>
            ) : null}
            <div className="mt-2 flex flex-wrap items-center gap-1.5 text-[12px] text-ink-3">
              <ClaimBadge kind="computed" />
              {sources.map((s) => (
                <SourceBadge key={s} p={{ sourceSlug: s, layer: 'derived', note: 'Inputs: trial_interventions × trial_conditions × clinical_trials (interventional) and drug_approvals.' }} />
              ))}
              {summary.formulaVersion ? <span className="ci-mono">{summary.formulaVersion}</span> : null}
            </div>
            <Freshness dataUpdatedAt={summary.computedAt} extra="recomputed with the intelligence layer" />
          </Section>

          <Section id="drugs" kicker="Drugs" title={`${fmtInt(total)} ${stage ? STAGE_LABEL[stage].toLowerCase() : ''} drug${total === 1 ? '' : 's'}${cancer ? ` · ${cancer.canonical_name}` : ''}`} description="Most advanced stage first, then most active trials. Trial counts are interventional studies linking the drug (and, when a cancer is selected, the cancer).">
            {rows.length === 0 ? (
              <EmptyState compact>No drug at this stage for the selected scope.</EmptyState>
            ) : (
              <>
                <div className="ci-table-wrap">
                  <table className="ci-table">
                    <thead>
                      <tr>
                        <th scope="col">Drug</th>
                        <th scope="col">Stage</th>
                        <th scope="col">Max phase</th>
                        <th scope="col" className="num">Active</th>
                        <th scope="col" className="num">Recruiting</th>
                        <th scope="col" className="num">Phase 3</th>
                        <th scope="col" className="num">Total trials</th>
                        <th scope="col" className="num">Approvals</th>
                        <th scope="col">Jurisdictions</th>
                        <th scope="col">First approval</th>
                        <th scope="col">First trial</th>
                      </tr>
                    </thead>
                    <tbody>
                      {rows.map((r) => (
                        <tr key={r.id}>
                          <td className="min-w-[160px]">
                            <Link className="ci-link font-medium" href={`/drug/${r.drug_slug}#pipeline`}>
                              {r.drug_name}
                            </Link>
                          </td>
                          <td>
                            <StageBadge stage={r.stage} />
                          </td>
                          <td className="text-[12.5px] text-ink-2">{r.max_phase ? phaseLabel(r.max_phase) : '—'}</td>
                          <td className="num">{fmtInt(r.active_trials)}</td>
                          <td className="num">{fmtInt(r.recruiting_trials)}</td>
                          <td className="num">{fmtInt(r.phase3_trials)}</td>
                          <td className="num">{fmtInt(r.total_trials)}</td>
                          <td className="num">{fmtInt(r.approvals)}</td>
                          <td className="ci-mono text-[12px]">{r.jurisdictions.length ? r.jurisdictions.join(', ') : '—'}</td>
                          <td className="whitespace-nowrap">{fmtDate(r.first_approval_date)}</td>
                          <td className="whitespace-nowrap">{r.first_trial_date ? (r.first_trial_date.length >= 10 ? fmtDate(r.first_trial_date) : r.first_trial_date) : '—'}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
                <Pager total={total} pageSize={PIPELINE_PAGE_SIZE} page={info.page} hrefFor={(p) => href({ page: p > 1 ? p : '' })} label="Pipeline pages" noun="drugs" />
              </>
            )}
            <div className="mt-4">
              <Note tone="warn">Stages describe registered activity and ingested regulatory records, not efficacy. Only ingested jurisdictions (currently US and Canada) can place a drug at "approved"; trial phases are as registered by sponsors. Nothing here is a treatment recommendation.</Note>
            </div>
          </Section>
        </>
      )}
    </div>
  );
}