import type { Metadata } from 'next';
import Link from 'next/link';
import { PageHeader } from '@/components/ui/section';
import { Badge, ConfidenceBadge } from '@/components/ui/badge';
import { CompletenessDots } from '@/components/ui/completeness';
import { EmptyState } from '@/components/ui/empty-state';
import { Pagination } from '@/components/ui/pagination';
import { explorerCount, explorerRows, listAnatomicalSites, ENTITY_TYPES, SORTS, type ExplorerFilters, type ExplorerRow } from '@/lib/queries/cancers';
import { fmtInt, humanize } from '@/lib/format';
import { str, int, oneOf, bool, withParams, type SP } from '@/lib/search-params';

export const metadata: Metadata = { title: 'Cancers', description: 'Explore every indexed cancer entity with filters for type, anatomical site, hematologic and pediatric relevance.' };
// Filtered list: rendered per request (searchParams); 600 s is the CDN/ISR hint shared by all list pages.
export const revalidate = 600;

const PAGE_SIZE = 50;

function dataConfidence(r: ExplorerRow): string {
  const domains = [r.epidemiology_obs_count, r.survival_obs_count, r.gene_count, r.evidence_count, r.drug_count, r.active_trial_count, r.publication_count_5y].filter((n) => (n ?? 0) > 0).length;
  if (domains >= 5) return 'HIGH';
  if (domains >= 3) return 'MEDIUM';
  if (domains >= 1) return 'LOW';
  return 'INSUFFICIENT_DATA';
}

export default async function CancersPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const f: ExplorerFilters = {
    q: str(sp, 'q'),
    level: oneOf(sp, 'level', ['top', 'all'] as const, 'all'),
    entityType: ENTITY_TYPES.includes(str(sp, 'entity_type') as (typeof ENTITY_TYPES)[number]) ? str(sp, 'entity_type') : '',
    malignant: bool(sp, 'malignant'),
    hematologic: bool(sp, 'hematologic'),
    pediatric: bool(sp, 'pediatric'),
    site: str(sp, 'site'),
    sort: oneOf(sp, 'sort', SORTS, 'name'),
    page: int(sp, 'page', 1, 1, 10_000),
    pageSize: PAGE_SIZE,
  };
  const [total, rows, sites] = await Promise.all([explorerCount(f), explorerRows(f), listAnatomicalSites()]);
  const current = { q: f.q, level: f.level, entity_type: f.entityType, malignant: f.malignant == null ? '' : f.malignant ? '1' : '0', hematologic: f.hematologic == null ? '' : f.hematologic ? '1' : '0', pediatric: f.pediatric == null ? '' : f.pediatric ? '1' : '0', site: f.site, sort: f.sort };
  const href = (o: Record<string, string | number | null | undefined>) => `/cancers${withParams({ ...current, level: f.level === 'all' ? '' : f.level }, o)}`;

  return (
    <div>
      <PageHeader kicker="Explorer" title="Cancers" lede="Every indexed disease entity from the canonical taxonomy. Counters aggregate over each entity's descendants; completeness dots show which data domains hold at least one record." />

      <form method="get" action="/cancers" 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]">
        <label className="flex flex-col gap-1">
          <span className="ci-kicker">Name, alias or code</span>
          <input name="q" defaultValue={f.q} placeholder="e.g. glioblastoma, NSCLC, C4914" 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">Level</span>
          <select name="level" defaultValue={f.level} className="border border-rule-strong bg-white px-2 py-1.5">
            <option value="all">All entities</option>
            <option value="top">Top-level (ranking set)</option>
          </select>
        </label>
        <label className="flex flex-col gap-1">
          <span className="ci-kicker">Entity type</span>
          <select name="entity_type" defaultValue={f.entityType} className="border border-rule-strong bg-white px-2 py-1.5">
            <option value="">Any</option>
            {ENTITY_TYPES.map((t) => (
              <option key={t} value={t}>
                {humanize(t)}
              </option>
            ))}
          </select>
        </label>
        <label className="flex flex-col gap-1">
          <span className="ci-kicker">Anatomical site</span>
          <select name="site" defaultValue={f.site} className="border border-rule-strong bg-white px-2 py-1.5">
            <option value="">Any</option>
            {sites.map((s) => (
              <option key={s.slug} value={s.slug}>
                {s.name} ({s.n})
              </option>
            ))}
          </select>
        </label>
        <label className="flex flex-col gap-1">
          <span className="ci-kicker">Sort</span>
          <select name="sort" defaultValue={f.sort} className="border border-rule-strong bg-white px-2 py-1.5">
            <option value="name">Name</option>
            <option value="trials">Active trials</option>
            <option value="publications">Publications (5y)</option>
            <option value="evidence">Evidence items</option>
            <option value="descendants">Descendants</option>
          </select>
        </label>
        <div className="flex flex-col justify-end gap-1">
          <div className="flex flex-wrap gap-x-3 gap-y-1 text-[12.5px]">
            <label className="inline-flex items-center gap-1">
              <input type="checkbox" name="malignant" value="1" defaultChecked={f.malignant === true} /> Malignant
            </label>
            <label className="inline-flex items-center gap-1">
              <input type="checkbox" name="hematologic" value="1" defaultChecked={f.hematologic === true} /> Hematologic
            </label>
            <label className="inline-flex items-center gap-1">
              <input type="checkbox" name="pediatric" value="1" defaultChecked={f.pediatric === true} /> Pediatric
            </label>
          </div>
          <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">
        <span className="ci-num font-medium text-ink">{fmtInt(total)}</span> {total === 1 ? 'entity' : 'entities'}
        {f.q ? (
          <>
            {' '}
            matching <q>{f.q}</q>
          </>
        ) : null}
        {f.level === 'top' && total === 0 ? <span className="text-ink-3"> — the top-level flag is assigned when the NCIt anchor concepts are ingested; until then browse all entities.</span> : null}
      </p>

      {rows.length === 0 ? (
        <div className="mt-3">
          <EmptyState title="No entity matches these filters" knows={[{ label: 'Browse all entities', href: '/cancers' }, { label: 'Taxonomy tree', href: '/taxonomy' }]} />
        </div>
      ) : (
        <>
          <div className="ci-table-wrap mt-3">
            <table className="ci-table">
              <thead>
                <tr>
                  <th className="sticky-col">Cancer</th>
                  <th>Type</th>
                  <th>Parent(s)</th>
                  <th className="num">Active trials (count)</th>
                  <th className="num">Publications 5y (count)</th>
                  <th className="num">Evidence items (count)</th>
                  <th className="num">Children</th>
                  <th>Completeness</th>
                  <th>Data confidence</th>
                </tr>
              </thead>
              <tbody>
                {rows.map((r) => (
                  <tr key={r.id}>
                    <td className="sticky-col min-w-[220px]">
                      <Link href={`/cancer/${r.slug}`} className="ci-link font-medium">
                        {r.canonical_name}
                      </Link>
                      <span className="ci-mono ml-2 text-[10.5px] text-ink-4">{r.id}</span>
                      <span className="mt-0.5 flex flex-wrap gap-1">
                        {r.hematologic ? <Badge>Hematologic</Badge> : null}
                        {r.pediatric_relevant ? <Badge>Pediatric</Badge> : null}
                        {r.rare_cancer === true ? <Badge tone="accent">Rare</Badge> : null}
                        {!r.malignant ? <Badge tone="outline">Non-malignant / precursor</Badge> : null}
                      </span>
                    </td>
                    <td>
                      <Badge>{humanize(r.entity_type)}</Badge>
                    </td>
                    <td className="max-w-[260px] text-[12.5px] text-ink-2">
                      {r.parents?.length
                        ? r.parents.map((p, i) => (
                            <span key={p.slug}>
                              {i > 0 ? ', ' : ''}
                              <Link className="ci-link" href={`/cancer/${p.slug}`}>
                                {p.name}
                              </Link>
                            </span>
                          ))
                        : <span className="text-ink-4">root</span>}
                    </td>
                    <td className="num">{r.active_trial_count == null ? <span className="text-ink-4">—</span> : fmtInt(r.active_trial_count)}</td>
                    <td className="num">{r.publication_count_5y == null ? <span className="text-ink-4">—</span> : fmtInt(r.publication_count_5y)}</td>
                    <td className="num">{r.evidence_count == null ? <span className="text-ink-4">—</span> : fmtInt(r.evidence_count)}</td>
                    <td className="num">{fmtInt(r.child_count)}</td>
                    <td>
                      <CompletenessDots filled={{ taxonomy: true, epidemiology: r.epidemiology_obs_count ?? 0, survival: r.survival_obs_count ?? 0, genomics: r.gene_count ?? 0, evidence: r.evidence_count ?? 0, drugs: r.drug_count ?? 0, trials: r.active_trial_count ?? 0, literature: r.publication_count_5y ?? 0 }} />
                    </td>
                    <td>
                      <ConfidenceBadge level={dataConfidence(r)} />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <Pagination page={f.page} pageSize={PAGE_SIZE} total={total} hrefFor={(p) => href({ page: p === 1 ? '' : p })} />
          <p className="mt-2 text-[11.5px] text-ink-3">"—" means no counter has been computed for this entity yet (counters appear after the first connector of that domain runs). Data confidence summarizes how many domains hold data; it is not a clinical judgement.</p>
        </>
      )}
    </div>
  );
}