import type { Metadata } from 'next';
import Link from 'next/link';
import { PageHeader } from '@/components/ui/section';
import { EmptyState } from '@/components/ui/empty-state';
import { Badge } from '@/components/ui/badge';
import { Pagination } from '@/components/ui/pagination';
import { listDrugs } from '@/lib/queries/drugs';
import { fmtInt, humanize } from '@/lib/format';
import { str, int, withParams, type SP } from '@/lib/search-params';

export const metadata: Metadata = { title: 'Drugs', description: 'Oncology drugs with jurisdiction-aware approvals, curated evidence and trials.' };
// 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;

export default async function DrugsPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const q = str(sp, 'q');
  const kind = str(sp, 'kind');
  const page = int(sp, 'page', 1, 1, 100_000);
  const { rows, total, kinds } = await listDrugs({ q, kind, page, pageSize: PAGE_SIZE });
  const href = (o: Record<string, string | number | null | undefined>) => `/drugs${withParams({ q, kind }, o)}`;
  return (
    <div>
      <PageHeader kicker="Drugs" title="Drugs" lede="One entity per molecule (INN preferred); brand names and development codes are aliases. Approvals are always shown with jurisdiction and indication." />
      <form method="get" action="/drugs" 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">Name or alias</span>
          <input name="q" defaultValue={q} placeholder="e.g. osimertinib, Keytruda, AZD9291" 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">Kind</span>
          <select name="kind" defaultValue={kind} className="border border-rule-strong bg-white px-2 py-1.5">
            <option value="">Any</option>
            {kinds.map((k) => (
              <option key={k.kind} value={k.kind}>
                {humanize(k.kind)} ({k.n})
              </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>
      </form>
      <p className="mt-3 text-[13px] text-ink-2">
        <span className="ci-num font-medium text-ink">{fmtInt(total)}</span> drugs
      </p>
      {rows.length === 0 ? (
        <div className="mt-3">
          <EmptyState title={total === 0 && !q && !kind ? 'Drugs not yet available' : 'No drug matches'} knows={[{ label: 'Cancers explorer', href: '/cancers' }, { label: 'Sources', href: '/sources' }]}>
            {total === 0 && !q && !kind ? 'Drug entities are created by the CIViC therapy, NCIt and regulatory connectors; none has run on this environment yet.' : 'Try another name, brand or development code.'}
          </EmptyState>
        </div>
      ) : (
        <>
          <div className="ci-table-wrap mt-3">
            <table className="ci-table">
              <thead>
                <tr>
                  <th>Drug</th>
                  <th>Kind</th>
                  <th>Mechanism</th>
                  <th className="num">Approvals</th>
                  <th className="num">Evidence items</th>
                  <th className="num">Trials</th>
                  <th>Identifiers</th>
                </tr>
              </thead>
              <tbody>
                {rows.map((d) => (
                  <tr key={d.id}>
                    <td className="min-w-[180px]">
                      <Link className="ci-link font-medium" href={`/drug/${d.slug}`}>
                        {d.name}
                      </Link>
                    </td>
                    <td>{d.kind ? <Badge>{humanize(d.kind)}</Badge> : '—'}</td>
                    <td className="max-w-[320px] text-[12.5px] text-ink-2">{d.mechanism ?? '—'}</td>
                    <td className="num">{fmtInt(d.approval_count ?? 0)}</td>
                    <td className="num">{fmtInt(d.evidence_count ?? 0)}</td>
                    <td className="num">{fmtInt(d.trial_count ?? 0)}</td>
                    <td className="ci-mono text-[11px] text-ink-3">{[d.ncit_code, d.chembl_id, d.drugbank_id].filter(Boolean).join(' · ') || '—'}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <Pagination page={page} pageSize={PAGE_SIZE} total={total} hrefFor={(p) => href({ page: p === 1 ? '' : p })} />
        </>
      )}
    </div>
  );
}