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 { listGenes } from '@/lib/queries/genomics';
import { fmtInt } from '@/lib/format';
import { str, int, bool, withParams, type SP } from '@/lib/search-params';

export const metadata: Metadata = { title: 'Genes', description: 'HGNC genes with curated cancer evidence, variants and cohort frequencies.' };
// 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 GenesPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const q = str(sp, 'q');
  const cancerOnly = bool(sp, 'cancer') ?? false;
  const page = int(sp, 'page', 1, 1, 100_000);
  const { rows, total } = await listGenes({ q, cancerOnly, page, pageSize: PAGE_SIZE });
  const href = (o: Record<string, string | number | null | undefined>) => `/genes${withParams({ q, cancer: cancerOnly ? '1' : '' }, o)}`;
  return (
    <div>
      <PageHeader kicker="Genes" title="Genes" lede="Gene symbols and names follow HGNC. 'Cancer gene' means the gene has at least one curated cancer edge — a derived flag, not a biological verdict." />
      <form method="get" action="/genes" 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">Symbol, alias or name</span>
          <input name="q" defaultValue={q} placeholder="e.g. KRAS, HER2, tumor protein" className="border border-rule-strong bg-white px-2 py-1.5 outline-none focus:border-accent" />
        </label>
        <label className="inline-flex items-center gap-1 pb-2">
          <input type="checkbox" name="cancer" value="1" defaultChecked={cancerOnly} /> Cancer genes only
        </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> genes
      </p>
      {rows.length === 0 ? (
        <div className="mt-3">
          <EmptyState title={total === 0 && !q ? 'Genes not yet available' : 'No gene matches'} knows={[{ label: 'Cancers explorer', href: '/cancers' }, { label: 'Sources', href: '/sources' }]}>
            {total === 0 && !q ? 'The HGNC connector has not run on this environment. Genes appear here once ingested, with CIViC evidence and GDC cohort frequencies attached.' : 'Try a different symbol or alias.'}
          </EmptyState>
        </div>
      ) : (
        <>
          <div className="ci-table-wrap mt-3">
            <table className="ci-table">
              <thead>
                <tr>
                  <th>Symbol</th>
                  <th>Name</th>
                  <th>Location</th>
                  <th>Locus type</th>
                  <th className="num">Evidence items</th>
                  <th className="num">Variants</th>
                  <th>Flags</th>
                </tr>
              </thead>
              <tbody>
                {rows.map((g) => (
                  <tr key={g.id}>
                    <td>
                      <Link className="ci-mono ci-link font-medium" href={`/gene/${g.symbol}`}>
                        {g.symbol}
                      </Link>
                    </td>
                    <td className="min-w-[220px]">{g.name ?? '—'}</td>
                    <td className="ci-mono text-[12px]">{g.location ?? '—'}</td>
                    <td className="text-[12.5px]">{g.locus_type ?? '—'}</td>
                    <td className="num">{fmtInt(g.evidence_count ?? 0)}</td>
                    <td className="num">{fmtInt(g.variant_count ?? 0)}</td>
                    <td>{g.is_cancer_gene ? <Badge tone="accent">Cancer gene</Badge> : null}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <Pagination page={page} pageSize={PAGE_SIZE} total={total} hrefFor={(p) => href({ page: p === 1 ? '' : p })} />
        </>
      )}
    </div>
  );
}