import type { Metadata } from 'next';
import { PageHeader } from '@/components/ui/section';
import { EmptyState } from '@/components/ui/empty-state';
import { Pager } from '@/components/ui/pager';
import { TrialTable } from '@/components/data/trial-list';
import { Freshness } from '@/components/ui/freshness';
import { listTrialRows, trialFacets, TRIAL_PAGE_SIZE } from '@/lib/queries/trials';
import { getCancerBySlug, getDescendantIds } from '@/lib/queries/cancers';
import { fmtInt, humanize, phaseLabel } from '@/lib/format';
import { pageInfo } from '@/lib/pagination';
import { str, int, withParams, type SP } from '@/lib/search-params';

export const metadata: Metadata = { title: 'Clinical trials', description: 'ClinicalTrials.gov oncology studies mapped to the cancer taxonomy, filterable by status, phase, country and cancer.' };
// Filtered list: rendered per request (searchParams); 600 s is the CDN/ISR hint shared by all list pages.
export const revalidate = 600;

export default async function TrialsPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const q = str(sp, 'q').slice(0, 200);
  const status = str(sp, 'status');
  const phase = str(sp, 'phase');
  const country = str(sp, 'country');
  const cancerSlug = str(sp, 'cancer');
  const page = int(sp, 'page', 1, 1, 100_000);
  const cancer = cancerSlug ? await getCancerBySlug(cancerSlug) : null;
  const cancerIds = cancer ? await getDescendantIds(cancer.id) : null;
  const [facets, { rows, total }] = await Promise.all([trialFacets(cancerIds), listTrialRows({ q, status, phase, country, cancerIds, page, pageSize: TRIAL_PAGE_SIZE })]);
  const info = pageInfo(page, TRIAL_PAGE_SIZE, total);
  const current = { q, status, phase, country, cancer: cancerSlug };
  const href = (o: Record<string, string | number | null | undefined>) => `/trials${withParams(current, o)}`;
  const anyTrials = facets.statuses.reduce((s, x) => s + x.n, 0);
  const filtered = Boolean(q || status || phase || country || cancer);

  return (
    <div>
      <PageHeader kicker="Clinical trials" title="Clinical trials" lede="Studies registered on ClinicalTrials.gov whose conditions were reconciled to the cancer taxonomy. Status and phase are as posted by the registrant." />
      <form method="get" action="/trials" className="grid gap-2 border-y border-rule py-3 text-[13.5px] sm:grid-cols-2 lg:grid-cols-[2fr_1fr_1fr_1fr_1fr_auto]" role="search" aria-label="Filter trials">
        <label className="flex flex-col gap-1">
          <span className="ci-kicker">NCT, title, acronym or sponsor</span>
          <input name="q" defaultValue={q} className="border border-rule-strong bg-white px-2 py-1.5 outline-none focus:border-accent" />
        </label>
        <label className="flex flex-col gap-1">
          <span className="ci-kicker">Status</span>
          <select name="status" defaultValue={status} className="border border-rule-strong bg-white px-2 py-1.5">
            <option value="">Any</option>
            <option value="active">Active (any)</option>
            {facets.statuses.map((s) => (
              <option key={s.k} value={s.k}>
                {humanize(s.k)} ({s.n})
              </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>
            {facets.phases.map((p) => (
              <option key={p.k} value={p.k}>
                {phaseLabel(p.k)} ({p.n})
              </option>
            ))}
          </select>
        </label>
        <label className="flex flex-col gap-1">
          <span className="ci-kicker">Country</span>
          <select name="country" defaultValue={country} className="border border-rule-strong bg-white px-2 py-1.5">
            <option value="">Any</option>
            {facets.countries.map((c) => (
              <option key={c.k} value={c.k}>
                {c.k} ({c.n})
              </option>
            ))}
          </select>
        </label>
        <label className="flex flex-col gap-1">
          <span className="ci-kicker">Cancer (slug)</span>
          <input name="cancer" defaultValue={cancerSlug} placeholder="e.g. glioblastoma" className="border border-rule-strong bg-white px-2 py-1.5 outline-none focus:border-accent" />
        </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>
      <p className="mt-3 text-[13px] text-ink-2" role="status">
        <span className="ci-num font-medium text-ink">{fmtInt(total)}</span> studies{filtered ? ' match' : ' indexed'}
        {cancer ? (
          <>
            {' '}
            · mapped to <span className="font-medium">{cancer.canonical_name}</span> and descendants
          </>
        ) : cancerSlug ? (
          <span className="text-warn"> — unknown cancer slug "{cancerSlug}" (ignored)</span>
        ) : null}
      </p>
      {rows.length === 0 ? (
        <div className="mt-3">
          <EmptyState title={anyTrials === 0 ? 'Trials not yet available' : 'No study matches these filters'} knows={[{ label: 'Cancers explorer', href: '/cancers' }, { label: 'Sources', href: '/sources' }]}>
            {anyTrials === 0 ? 'The ClinicalTrials.gov connector has not run on this environment. Studies appear here once ingested and their conditions reconciled to the taxonomy.' : 'Relax a filter or clear the search.'}
          </EmptyState>
        </div>
      ) : (
        <>
          <div className="mt-3">
            <TrialTable
              rows={rows}
              summary={
                <>
                  Showing {fmtInt(info.from)}–{fmtInt(info.to)} of {fmtInt(total)} studies
                </>
              }
            />
          </div>
          <Pager page={info.page} pageSize={TRIAL_PAGE_SIZE} total={total} hrefFor={(p) => href({ page: p === 1 ? '' : p })} label="Trial pages" noun="studies" />
          <Freshness dataUpdatedAt={rows.reduce<Date | string | null>((m, t) => (m == null || String(t.updated_at) > String(m) ? t.updated_at : m), null)} extra="source: clinicaltrials" />
        </>
      )}
    </div>
  );
}