import type { Metadata } from 'next';
import Link from 'next/link';
import { PageHeader, Section, Note } from '@/components/ui/section';
import { Badge, ClaimBadge, StatusBadge } 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, TableProvenance } from '@/components/ui/source-badge';
import { APPROVALS_PAGE_SIZE, approvalFacets, approvalStats, countApprovals, listApprovals, type ApprovalFilters, type FeedApprovalRow } from '@/lib/queries/approvals';
import { loadProvenance, toInfo } from '@/lib/queries/provenance';
import { fmtDate, fmtInt, truncate } from '@/lib/format';
import { pageInfo } from '@/lib/pagination';
import { str, int, withParams, type SP } from '@/lib/search-params';

export const metadata: Metadata = {
  title: 'Oncology approvals',
  description: 'Regulatory approval records for oncology drugs by authority and jurisdiction — dated, sourced, one record per application or DIN.',
  alternates: { canonical: '/approvals' },
};
// Filtered feed: rendered per request (searchParams); 600 s is the CDN/ISR hint shared by list pages.
export const revalidate = 600;

const STATUSES = ['approved', 'accelerated', 'conditional', 'withdrawn', 'superseded'];

function monthKey(d: string | null): string {
  return d && /^\d{4}-\d{2}/.test(d) ? d.slice(0, 7) : 'undated';
}
function monthLabel(k: string): string {
  return k === 'undated' ? 'Date not stated' : fmtDate(`${k}-01`, { year: 'numeric', month: 'long' });
}

export default async function ApprovalsPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const f: ApprovalFilters = { authority: str(sp, 'authority'), jurisdiction: str(sp, 'jurisdiction'), cancer: str(sp, 'cancer'), status: STATUSES.includes(str(sp, 'status')) ? str(sp, 'status') : '', year: /^\d{4}$/.test(str(sp, 'year')) ? str(sp, 'year') : '', q: str(sp, 'q').slice(0, 100) };
  const requestedPage = int(sp, 'page', 1, 1, 100_000);
  const [stats, facets, total] = await Promise.all([approvalStats(), approvalFacets(), countApprovals(f)]);
  const info = pageInfo(requestedPage, APPROVALS_PAGE_SIZE, total);
  const rows = total ? await listApprovals(f, info.page) : [];
  const prov = await loadProvenance(rows.map((r) => r.provenance_id));
  const filtered = Object.values(f).some(Boolean);
  const href = (o: Record<string, string | number | null | undefined>) => `/approvals${withParams({ ...f, page: info.page > 1 ? info.page : '' }, o)}`;

  // Group the page's rows by month, latest first (rows arrive sorted by approval_date desc).
  const groups: Array<{ key: string; rows: FeedApprovalRow[] }> = [];
  for (const r of rows) {
    const key = monthKey(r.approval_date);
    const g = groups[groups.length - 1];
    if (g && g.key === key) g.rows.push(r);
    else groups.push({ key, rows: [r] });
  }
  const latestUpdate = stats.byAuthority.reduce<Date | null>((m, a) => (a.updated_at && (!m || new Date(a.updated_at) > m) ? new Date(a.updated_at) : m), null);

  return (
    <div>
      <PageHeader kicker="Regulatory" title="Oncology approvals" lede="Every record is one authority's decision for one application or DIN, shown with its jurisdiction, date, indication text as published and status. A molecule approved in one jurisdiction for one indication is not 'approved' in general.">
        <p className="mt-2 flex flex-wrap items-center gap-2 text-[12.5px]">
          <ClaimBadge kind="regulatory" />
          <Link className="ci-link" href="/pipeline">
            Development pipeline →
          </Link>
          <Link className="ci-link" href="/methodology/pipeline">
            Methodology
          </Link>
        </p>
      </PageHeader>

      {stats.total === 0 ? (
        <EmptyState knows={[{ label: 'Drugs', href: '/drugs' }, { label: 'Sources', href: '/sources' }]}>No regulatory connector has run on this environment yet.</EmptyState>
      ) : (
        <>
          <Section id="overview" kicker="Coverage" title="Approval records by authority" description="Counts of records, not of drugs approved: one application can carry several dated records (original approval, efficacy supplements, one row per DIN in Canada).">
            <div className="grid gap-3 sm:grid-cols-4">
              {[
                { k: 'Approval records', v: stats.total },
                { k: 'Distinct drugs', v: stats.distinctDrugs },
                { k: 'Records naming a cancer', v: stats.withCancer },
                { k: 'Dated in the last 12 months', v: stats.last12m },
              ].map((t) => (
                <div key={t.k} className="border border-rule bg-paper-2 px-3 py-2">
                  <p className="ci-kicker">{t.k}</p>
                  <p className="ci-num text-xl font-medium">{fmtInt(t.v)}</p>
                </div>
              ))}
            </div>
            <div className="ci-table-wrap mt-3">
              <table className="ci-table">
                <thead>
                  <tr>
                    <th scope="col">Authority</th>
                    <th scope="col">Jurisdiction</th>
                    <th scope="col" className="num">Records</th>
                    <th scope="col" className="num">Drugs</th>
                    <th scope="col" className="num">In force</th>
                    <th scope="col" className="num">Withdrawn / cancelled</th>
                    <th scope="col" className="num">Last 12 months</th>
                    <th scope="col">Latest dated record</th>
                  </tr>
                </thead>
                <tbody>
                  {stats.byAuthority.map((a) => (
                    <tr key={`${a.authority}-${a.jurisdiction}`}>
                      <td>
                        <Link className="ci-link" href={href({ authority: a.authority, jurisdiction: a.jurisdiction, page: '' })}>
                          {a.authority}
                        </Link>
                      </td>
                      <td className="ci-mono">{a.jurisdiction}</td>
                      <td className="num">{fmtInt(a.n)}</td>
                      <td className="num">{fmtInt(a.distinct_drugs)}</td>
                      <td className="num">{fmtInt(a.approved_like)}</td>
                      <td className="num">{fmtInt(a.withdrawn)}</td>
                      <td className="num">{fmtInt(a.last_12m)}</td>
                      <td className="whitespace-nowrap">{fmtDate(a.latest_date)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <Freshness dataUpdatedAt={latestUpdate} extra={`${stats.byAuthority.length} authority · jurisdiction pair${stats.byAuthority.length === 1 ? '' : 's'} ingested`} />
          </Section>

          <Section id="feed" kicker="Feed" title={`Approval records (${fmtInt(total)})`} description="Latest approval date first; records without a date are listed last. Filters combine.">
            <form method="get" action="/approvals" 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">Authority</span>
                <select name="authority" defaultValue={f.authority} className="border border-rule-strong bg-white px-2 py-1.5">
                  <option value="">Any</option>
                  {[...new Map(facets.authorities.map((a) => [a.authority, a])).values()].map((a) => (
                    <option key={a.authority} value={a.authority}>
                      {a.authority}
                    </option>
                  ))}
                </select>
              </label>
              <label className="flex flex-col gap-1">
                <span className="ci-kicker">Jurisdiction</span>
                <select name="jurisdiction" defaultValue={f.jurisdiction} className="border border-rule-strong bg-white px-2 py-1.5">
                  <option value="">Any</option>
                  {[...new Set(facets.authorities.map((a) => a.jurisdiction))].sort().map((j) => (
                    <option key={j} value={j}>
                      {j}
                    </option>
                  ))}
                </select>
              </label>
              <label className="flex flex-col gap-1">
                <span className="ci-kicker">Status</span>
                <select name="status" defaultValue={f.status} className="border border-rule-strong bg-white px-2 py-1.5">
                  <option value="">Any</option>
                  {facets.statuses.map((s) => (
                    <option key={s.status} value={s.status}>
                      {s.status} ({fmtInt(s.n)})
                    </option>
                  ))}
                </select>
              </label>
              <label className="flex flex-col gap-1">
                <span className="ci-kicker">Year</span>
                <select name="year" defaultValue={f.year} className="border border-rule-strong bg-white px-2 py-1.5">
                  <option value="">Any</option>
                  {facets.years.map((y) => (
                    <option key={y.year} value={y.year}>
                      {y.year} ({fmtInt(y.n)})
                    </option>
                  ))}
                </select>
              </label>
              <label className="flex flex-col gap-1">
                <span className="ci-kicker">Cancer slug</span>
                <input name="cancer" defaultValue={f.cancer} placeholder="e.g. malignant-lung-neoplasm" 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">Drug or indication text</span>
                <input name="q" defaultValue={f.q} placeholder="e.g. osimertinib, Keytruda, NSCLC" className="border border-rule-strong bg-white px-2 py-1.5 outline-none focus:border-accent" />
              </label>
              <button type="submit" className="border border-ink bg-ink px-3 py-1.5 text-paper hover:bg-ink-2">
                Apply
              </button>
              {filtered ? (
                <Link className="ci-link text-[12.5px]" href="/approvals">
                  Clear
                </Link>
              ) : null}
            </form>

            {rows.length === 0 ? (
              <div className="mt-3">
                <EmptyState title={filtered ? 'No approval record matches' : 'Data not yet available'} knows={[{ label: 'Drugs', href: '/drugs' }, { label: 'Pipeline', href: '/pipeline' }]}>
                  {filtered ? 'Try fewer filters. Cancer filters only match records whose indication text named exactly one cancer; Health Canada records never name a cancer.' : 'No regulatory approval records have been ingested yet.'}
                </EmptyState>
              </div>
            ) : (
              <>
                {groups.map((g) => {
                  const first = g.rows[0]!;
                  const caption = toInfo(prov.get(first.provenance_id)) ?? { sourceSlug: first.source_slug, sourceName: first.source_name };
                  const sources = new Set(g.rows.map((r) => r.source_slug));
                  return (
                    <section key={g.key} aria-labelledby={`m-${g.key}`} className="mt-5">
                      <h3 id={`m-${g.key}`} className="text-lg">
                        {monthLabel(g.key)} <span className="text-[13px] font-normal text-ink-3">· {fmtInt(g.rows.length)} record{g.rows.length === 1 ? '' : 's'} on this page</span>
                      </h3>
                      <TableProvenance p={caption} claim={<ClaimBadge kind="regulatory" />}>
                        {sources.size > 1 ? `${sources.size} sources in this month (hover a row badge for its dataset)` : 'authority, jurisdiction, dates and indication text as published'}
                      </TableProvenance>
                      <div className="ci-table-wrap">
                        <table className="ci-table">
                          <thead>
                            <tr>
                              <th scope="col">Date</th>
                              <th scope="col">Drug</th>
                              <th scope="col">Authority · jurisdiction</th>
                              <th scope="col">Cancer</th>
                              <th scope="col">Indication (as published)</th>
                              <th scope="col">Type</th>
                              <th scope="col">Status</th>
                              <th scope="col">Source</th>
                            </tr>
                          </thead>
                          <tbody>
                            {g.rows.map((a) => (
                              <tr key={a.id}>
                                <td className="whitespace-nowrap">{fmtDate(a.approval_date)}</td>
                                <td className="min-w-[140px]">
                                  <Link className="ci-link font-medium" href={`/drug/${a.drug_slug}`}>
                                    {a.drug_name}
                                  </Link>
                                </td>
                                <td className="whitespace-nowrap">
                                  <span className="text-ink-2">{a.authority}</span> <Badge mono tone="outline">{a.jurisdiction}</Badge>
                                </td>
                                <td className="min-w-[160px] text-[12.5px]">
                                  {a.tumor_agnostic ? <Badge tone="accent">Tumor-agnostic</Badge> : null}
                                  {a.cancer_slug ? (
                                    <Link className="ci-link" href={`/cancer/${a.cancer_slug}`}>
                                      {a.cancer_name}
                                    </Link>
                                  ) : !a.tumor_agnostic ? (
                                    <span className="text-ink-3">cancer not stated in this record</span>
                                  ) : null}
                                </td>
                                <td className="min-w-[260px] max-w-[460px] text-[12.5px]" title={a.indication}>
                                  {truncate(a.indication, 140)}
                                </td>
                                <td className="ci-mono text-[12px]">{a.approval_type ?? '—'}{a.application_number ? <span className="block text-ink-3">{a.application_number}</span> : null}</td>
                                <td>
                                  <StatusBadge status={a.status} />
                                  {a.source_status && a.source_status.toLowerCase() !== a.status ? <span className="block text-[11px] text-ink-3">source: {a.source_status}</span> : null}
                                  {a.withdrawal_date ? <span className="block text-[11px] text-danger">since {fmtDate(a.withdrawal_date)}</span> : null}
                                </td>
                                <td>
                                  <SourceBadge compact p={toInfo(prov.get(a.provenance_id)) ?? { sourceSlug: a.source_slug, sourceName: a.source_name }} />
                                </td>
                              </tr>
                            ))}
                          </tbody>
                        </table>
                      </div>
                    </section>
                  );
                })}
                <Pager total={total} pageSize={APPROVALS_PAGE_SIZE} page={info.page} hrefFor={(p) => href({ page: p > 1 ? p : '' })} label="Approval pages" noun="approval records" />
              </>
            )}
            <div className="mt-4">
              <Note>
                A record is one authority's decision for one application/DIN; the same molecule appears once per jurisdiction and indication. Health Canada DPD does not publish indications — its records state the brand, DIN and ATC class only, and a cancelled or dormant DIN is the status of one product, not of the molecule. FDA cancer mappings come from label text and are flagged probabilistic on the drug page.
              </Note>
            </div>
          </Section>
        </>
      )}
    </div>
  );
}