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

export const metadata: Metadata = { title: 'Search', robots: { index: false } };
export const dynamic = 'force-dynamic';

const TYPE_LABEL: Record<string, string> = { cancer: 'Cancers', gene: 'Genes', variant: 'Variants', drug: 'Drugs', trial: 'Clinical trials', publication: 'Publications', source: 'Sources' };
const TYPE_ORDER = ['cancer', 'gene', 'variant', 'drug', 'trial', 'publication', 'source'];

export default async function SearchPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const q = str(sp, 'q').slice(0, 200);
  const hits = q.length >= 2 ? await searchEntities(q, 50) : [];
  const groups = new Map<string, typeof hits>();
  for (const h of hits) groups.set(h.type, [...(groups.get(h.type) ?? []), h]);
  const types = [...groups.keys()].sort((a, b) => TYPE_ORDER.indexOf(a) - TYPE_ORDER.indexOf(b));

  return (
    <div>
      <PageHeader kicker="Search" title={q ? <>Results for <q className="italic">{q}</q></> : 'Search'} lede="Typed results across cancers, genes, variants, drugs, trials, publications and sources. Ordering: exact name, then alias or identifier, then prefix, then fuzzy match." />
      <form method="get" action="/search" className="flex max-w-2xl gap-2">
        <input name="q" defaultValue={q} placeholder="glioblastoma, EGFR, L858R, osimertinib, NCT04487080, 31562796…" className="flex-1 border border-rule-strong bg-white px-3 py-2 text-[15px] outline-none focus:border-accent" aria-label="Search query" autoFocus={!q} />
        <button type="submit" className="border border-ink bg-ink px-4 py-2 text-[14px] text-paper hover:bg-ink-2">
          Search
        </button>
      </form>

      {q.length > 0 && q.length < 2 ? <p className="mt-4 text-[13.5px] text-ink-3">Type at least two characters.</p> : null}
      {q.length >= 2 && hits.length === 0 ? (
        <div className="mt-6">
          <EmptyState title="No entity matches" knows={[{ label: 'Browse cancers', href: '/cancers' }, { label: 'Taxonomy', href: '/taxonomy' }, { label: 'Genes', href: '/genes' }, { label: 'Drugs', href: '/drugs' }]}>
            No cancer, gene, variant, drug, trial or publication matched <q>{q}</q>. Only indexed entities are searchable; some entity types are not yet ingested on this environment.
          </EmptyState>
        </div>
      ) : null}
      {hits.length ? (
        <div className="mt-6 space-y-8">
          <p className="text-[13px] text-ink-3">
            <span className="ci-num font-medium text-ink">{fmtInt(hits.length)}</span> results in {types.length} {types.length === 1 ? 'type' : 'types'}
          </p>
          {types.map((t) => (
            <section key={t} aria-labelledby={`type-${t}`}>
              <h2 id={`type-${t}`} className="mb-2 text-xl">
                {TYPE_LABEL[t] ?? t} <span className="ci-num text-[13px] text-ink-3">{groups.get(t)!.length}</span>
              </h2>
              <ul className="divide-y divide-rule">
                {groups.get(t)!.map((h) => (
                  <li key={`${h.type}-${h.id}`} className="flex flex-wrap items-baseline gap-x-3 py-2 text-[14px]">
                    <Link href={h.href} className="ci-link font-medium">
                      {h.title}
                    </Link>
                    {h.subtitle ? <span className="text-[12.5px] text-ink-3">{h.subtitle}</span> : null}
                    <span className="ml-auto flex items-center gap-1.5">
                      <span className="ci-mono text-[10.5px] text-ink-4">{h.id}</span>
                      <Badge tone="outline">{h.match}</Badge>
                    </span>
                  </li>
                ))}
              </ul>
            </section>
          ))}
        </div>
      ) : null}
    </div>
  );
}