import type { Metadata } from 'next';
import Link from 'next/link';
import { PageHeader, Note } from '@/components/ui/section';
import { EmptyState } from '@/components/ui/empty-state';
import { Freshness } from '@/components/ui/freshness';
import { ClaimBadge } from '@/components/ui/badge';
import { WorldMap, mapScaleFor, undrawnCountries, type MapCountryDatum } from '@/components/charts/world-map';
import { CITY_LIMIT, SITE_METRICS, SITE_PHASES, cityCounts, countryCounts, distinctTrialCount, listTopLevelCancers, siteCountsAvailable, type SiteMetric, type SitePhase } from '@/lib/queries/trial-sites';
import { getDescendantIds } from '@/lib/queries/cancers';
import { fmtInt, fmtPct, phaseLabel } from '@/lib/format';
import { classLabel } from '@/lib/map-scale';
import { oneOf, str, withParams, type SP } from '@/lib/search-params';

export const metadata: Metadata = {
  title: 'Clinical trial map',
  description: 'Where oncology trials recruit: registered ClinicalTrials.gov study sites per country, for all cancers or one top-level cancer, by phase and recruiting status.',
};
export const revalidate = 600;

const TRIALS_STATUS_FOR_RECRUITING = 'RECRUITING';

export default async function TrialMapPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const cancerSlug = str(sp, 'cancer').slice(0, 120);
  const phase = (oneOf(sp, 'phase', [...SITE_PHASES, ''] as const, '') || null) as SitePhase | null;
  const recruiting = str(sp, 'recruiting') === '1';
  const metric: SiteMetric = oneOf(sp, 'metric', SITE_METRICS, 'sites');

  const cancers = await listTopLevelCancers();
  const cancer = cancerSlug ? (cancers.find((c) => c.slug === cancerSlug) ?? null) : null;
  const scope = { cancerId: cancer?.id ?? null, phase, recruitingOnly: recruiting };
  const cancerIds = cancer ? await getDescendantIds(cancer.id) : null;
  const live = { cancerIds, phase, recruitingOnly: recruiting };
  const [rows, trialsDistinct, cities, available] = await Promise.all([countryCounts(scope), distinctTrialCount(live), cancer ? cityCounts(live) : Promise.resolve([]), siteCountsAvailable()]);

  const current = { cancer: cancer?.slug ?? '', phase: phase ?? '', recruiting: recruiting ? '1' : '', metric: metric === 'sites' ? '' : metric };
  const href = (o: Record<string, string | number | null | undefined>) => `/trials/map${withParams(current, o)}`;
  const trialsHref = (country: string) => `/trials${withParams({ country, phase: phase ?? '', status: recruiting ? TRIALS_STATUS_FOR_RECRUITING : '', cancer: cancer?.slug ?? '' }, {})}`;

  const totalSites = rows.reduce((s, r) => s + r.sites, 0);
  const data: MapCountryDatum[] = rows.map((r) => ({ country: r.country, iso3: r.iso3, sites: r.sites, trials: r.trials, href: trialsHref(r.country) }));
  const sorted = [...data].sort((a, b) => b[metric] - a[metric] || a.country.localeCompare(b.country));
  const scale = mapScaleFor(data, metric);
  const undrawn = undrawnCountries(data);
  const computedAt = rows[0]?.computed_at ?? null;
  const formula = rows[0]?.formula_version ?? null;
  const scopeText = [cancer ? `${cancer.canonical_name} (and NCIt descendants)` : 'all oncology trials', phase ? phaseLabel(phase) : 'any phase', recruiting ? 'recruiting sites only' : 'all site statuses'].join(' · ');
  const tableId = 'trial-map-table';

  return (
    <div>
      <PageHeader kicker="Clinical trials" title="Clinical trial map" lede="Registered study sites per country, as entered by registrants on ClinicalTrials.gov. A study with 40 sites in one country weighs 40 there; the trials column counts each study once per country.">
        <p className="mt-2 text-[13px] text-ink-3">
          <Link href="/trials" className="ci-link">
            Trials list
          </Link>{' '}
          ·{' '}
          <Link href="/methodology/trial-map" className="ci-link">
            Method
          </Link>
        </p>
      </PageHeader>

      <form method="get" action="/trials/map" className="grid gap-2 border-y border-rule py-3 text-[13.5px] sm:grid-cols-2 lg:grid-cols-[2fr_1fr_1fr_1fr_auto]" role="search" aria-label="Filter the trial map">
        <label className="flex flex-col gap-1">
          <span className="ci-kicker">Cancer (top-level)</span>
          <select name="cancer" defaultValue={cancer?.slug ?? ''} className="border border-rule-strong bg-white px-2 py-1.5">
            <option value="">All oncology trials</option>
            {cancers.map((c) => (
              <option key={c.id} value={c.slug}>
                {c.canonical_name}
              </option>
            ))}
          </select>
        </label>
        <label className="flex flex-col gap-1">
          <span className="ci-kicker">Phase</span>
          <select name="phase" defaultValue={phase ?? ''} className="border border-rule-strong bg-white px-2 py-1.5">
            <option value="">Any</option>
            {SITE_PHASES.map((p) => (
              <option key={p} value={p}>
                {phaseLabel(p)}
                {p === 'PHASE1' ? ' (incl. early phase 1)' : ''}
              </option>
            ))}
          </select>
        </label>
        <label className="flex flex-col gap-1">
          <span className="ci-kicker">Sites</span>
          <select name="recruiting" defaultValue={recruiting ? '1' : ''} className="border border-rule-strong bg-white px-2 py-1.5">
            <option value="">All statuses</option>
            <option value="1">Recruiting only</option>
          </select>
        </label>
        <label className="flex flex-col gap-1">
          <span className="ci-kicker">Colour by</span>
          <select name="metric" defaultValue={metric} className="border border-rule-strong bg-white px-2 py-1.5">
            <option value="sites">Sites</option>
            <option value="trials">Trials</option>
          </select>
        </label>
        <div className="flex items-end">
          <button type="submit" className="border border-ink bg-ink px-3 py-1.5 text-paper hover:bg-ink-2">
            Apply
          </button>
        </div>
      </form>

      {cancerSlug && !cancer ? (
        <p className="mt-2 text-[13px] text-warn" role="status">
          Unknown or non-top-level cancer slug “{cancerSlug}” — the map is precomputed for top-level cancers only; showing all oncology trials.
        </p>
      ) : null}

      {rows.length === 0 ? (
        <div className="mt-4">
          <EmptyState title="Data not yet available" knows={[{ label: 'Trials list', href: '/trials' }, { label: 'Cancers explorer', href: '/cancers' }]}>
            {available ? (
              <>No registered site matches this scope ({scopeText}). Relax a filter.</>
            ) : (
              <>
                Country aggregates of trial sites have not been computed on this environment. Run <code className="ci-mono">pnpm cix intel</code> after the ClinicalTrials.gov connector to populate <code className="ci-mono">trial_site_country_counts</code>.
              </>
            )}
          </EmptyState>
        </div>
      ) : (
        <>
          <dl className="mt-4 flex flex-wrap gap-x-8 gap-y-2 text-[13.5px]" aria-label="Scope totals">
            <div className="min-w-[8rem]">
              <dt className="ci-kicker">Countries with sites</dt>
              <dd className="ci-num text-left text-xl text-ink">{fmtInt(rows.length)}</dd>
            </div>
            <div className="min-w-[8rem]">
              <dt className="ci-kicker">Sites</dt>
              <dd className="ci-num text-left text-xl text-ink">{fmtInt(totalSites)}</dd>
            </div>
            <div className="min-w-[8rem]">
              <dt className="ci-kicker">Trials</dt>
              <dd className="ci-num text-left text-xl text-ink">{fmtInt(trialsDistinct)}</dd>
            </div>
          </dl>
          <p className="mt-1 text-[12.5px] text-ink-3" role="status">
            Scope: {scopeText}. Trials = distinct studies with ≥ 1 site in a named country; the per-country trial column sums to more because multinational studies count once per country.
          </p>

          <div className="mt-4 max-w-[960px]">
            <WorldMap data={data} metric={metric} cities={cities.length ? cities : undefined} ariaLabel={`World map of clinical trial ${metric} per country — ${scopeText}. The table below lists the same values.`} describedBy={tableId} />
          </div>
          {cancer ? (
            <p className="mt-1 text-[12px] text-ink-3">
              City dots: top {fmtInt(Math.min(CITY_LIMIT, cities.length))} cities by sites for this cancer (registrant-entered city, mean geocoded position), {recruiting ? 'recruiting sites only' : 'all statuses'}. {cities.length === 0 ? 'No geocoded site in scope.' : ''}
            </p>
          ) : (
            <p className="mt-1 text-[12px] text-ink-3">City-level dots appear when a cancer is selected (the whole-registry city aggregate is too heavy to run per request).</p>
          )}
          {undrawn.length > 0 ? (
            <p className="mt-1 text-[12px] text-ink-3">
              Not drawn at this scale ({undrawn.length}): {undrawn.map((u) => `${u.country} ${fmtInt(u[metric])}`).join(', ')}. They are in the table.
            </p>
          ) : null}

          <div className="mt-5 ci-table-wrap">
            <table className="ci-table" id={tableId}>
              <caption className="text-left">
                <span className="flex flex-wrap items-center gap-1.5 text-[12px] text-ink-3">
                  <ClaimBadge kind="computed" />
                  <span>
                    Country aggregates · formula <span className="ci-mono">{formula}</span> · source clinicaltrials · class = quantile class on the map
                  </span>
                </span>
              </caption>
              <thead>
                <tr>
                  <th className="num">#</th>
                  <th>Country</th>
                  <th>ISO3</th>
                  <th className="num">Sites</th>
                  <th className="num">Trials</th>
                  <th className="num">Share of sites</th>
                  <th>Class</th>
                  <th>Trials list</th>
                </tr>
              </thead>
              <tbody>
                {sorted.map((r, i) => {
                  const cls = scale.classes.find((c) => r[metric] >= c.lo && r[metric] <= c.hi);
                  return (
                    <tr key={r.country}>
                      <td className="num">{i + 1}</td>
                      <td>{r.country}</td>
                      <td className="ci-mono">{r.iso3 ?? <span className="text-ink-4">—</span>}</td>
                      <td className="num">{fmtInt(r.sites)}</td>
                      <td className="num">{fmtInt(r.trials)}</td>
                      <td className="num">{fmtPct(totalSites ? r.sites / totalSites : null)}</td>
                      <td>
                        {cls ? (
                          <span className="inline-flex items-center gap-1.5">
                            <span className="inline-block h-3 w-3 border border-rule-strong" style={{ background: cls.fill }} aria-hidden />
                            <span className="ci-num text-[12px]">{classLabel(cls, (n) => fmtInt(n))}</span>
                          </span>
                        ) : (
                          '—'
                        )}
                      </td>
                      <td>
                        <Link href={r.href} className="ci-link">
                          View trials →
                        </Link>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
          <Freshness dataUpdatedAt={computedAt} extra={`${fmtInt(rows.length)} countries · formula ${formula ?? '—'} · source: clinicaltrials`} />

          <div className="mt-4 space-y-2">
            <Note>
              Site counts come from the locations entered by registrants (a study with 40 US sites weighs 40 in the United States). “Recruiting” is the location status when the registrant provided one; otherwise the study’s overall status is used. Interventional and observational studies are both included; the country name is the registrant’s. Historical names without an ISO 3166-1 code (Serbia and Montenegro, Federal Republic of Yugoslavia, Netherlands Antilles) are listed without ISO3 and not painted.
            </Note>
            <Note>
              Classes are quantiles of the displayed metric over countries with at least one site, recomputed for every filter, so colours are comparable within one view, not across views. Numbers, not colours, carry the meaning: hover or focus a country, or read the table. The “View trials” link filters the trials list by country{recruiting ? ' and by study status RECRUITING (an approximation of site status)' : ''}.{' '}
              <Link href="/methodology/trial-map" className="ci-link">
                Full method
              </Link>
              .
            </Note>
          </div>
          <p className="mt-3 text-[12px] text-ink-3">
            Permalink:{' '}
            <Link href={href({})} className="ci-link ci-mono">
              {href({}) || '/trials/map'}
            </Link>
          </p>
        </>
      )}
    </div>
  );
}