import type { Metadata } from 'next';
import Link from 'next/link';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { EntityLink } from '@/components/ui/entity';
import { Container, Note, PageHeader } from '@/components/ui/section';
import { EmptyState, Unavailable } from '@/components/ui/unavailable';
import { api, safe } from '@/lib/api';
import { cn } from '@/lib/cn';
import { fmtAgo, fmtInt, fmtScore, num } from '@/lib/format';
import { routes } from '@/lib/site';

export const metadata: Metadata = { title: 'AI benchmarks & leaderboards', description: 'Benchmarks with their published results, evaluation configs and current leaders — never compared blindly across configs.', alternates: { canonical: '/benchmarks' } };
export const revalidate = 300;

export default async function BenchmarksPage({ searchParams }: { searchParams: Promise<{ category?: string }> }) {
  const { category } = await searchParams;
  const res = await safe(api.benchmarks());
  const all = (res?.items ?? []).slice().sort((a, b) => (num(b.result_count) ?? 0) - (num(a.result_count) ?? 0));
  const cats = new Map<string, number>();
  for (const b of all) {
    const c = typeof b.attributes?.category === 'string' ? b.attributes.category : null;
    if (c) cats.set(c, (cats.get(c) ?? 0) + 1);
  }
  const catList = [...cats.entries()].sort((x, y) => y[1] - x[1] || x[0].localeCompare(y[0]));
  const items = category ? all.filter((b) => b.attributes?.category === category) : all;
  const chip = (active: boolean) => cn('inline-flex h-8 items-center gap-1.5 border px-2.5 text-xs whitespace-nowrap', active ? 'border-ink bg-ink text-canvas' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink');
  return (
    <Container>
      <PageHeader eyebrow="Benchmarks" title="Benchmarks" lede="Evaluation suites and the results published for them. Each result carries its configuration; leaders are shown per benchmark, not as a composite." aside={res ? <p className="tnum text-sm text-ink-3">{fmtInt(items.length)}{category ? ` of ${fmtInt(all.length)}` : ''} benchmarks</p> : undefined}>
        {catList.length > 0 && (
          <nav aria-label="Category" className="no-scrollbar -mx-4 mt-6 flex gap-1.5 overflow-x-auto px-4 md:mx-0 md:flex-wrap md:px-0">
            <Link href={routes.benchmarks()} className={chip(!category)} aria-current={!category ? 'true' : undefined}>
              All <span className="tnum opacity-70">{fmtInt(all.length)}</span>
            </Link>
            {catList.map(([c, n]) => (
              <Link key={c} href={`/benchmarks?category=${encodeURIComponent(c)}`} className={chip(category === c)} aria-current={category === c ? 'true' : undefined}>
                {c} <span className="tnum opacity-70">{fmtInt(n)}</span>
              </Link>
            ))}
          </nav>
        )}
      </PageHeader>
      <div className="pb-16">
        {!res ? (
          <Unavailable what="Benchmarks" />
        ) : items.length === 0 ? (
          <EmptyState title={category ? `No benchmark in “${category}”` : 'No benchmarks recorded yet'}>{category && <Link href={routes.benchmarks()} className="link">Show all benchmarks</Link>}</EmptyState>
        ) : (
          <>
            <DataTable caption="Benchmarks">
              <thead>
                <tr>
                  <Th>Benchmark</Th>
                  <Th>Category</Th>
                  <Th>Metric</Th>
                  <Th num>Results</Th>
                  <Th num>Models</Th>
                  <Th>Current leader</Th>
                  <Th>Updated</Th>
                </tr>
              </thead>
              <tbody>
                {items.length === 0 && <EmptyRow cols={7}>No benchmarks recorded yet.</EmptyRow>}
                {items.map((b) => {
                  const a = b.attributes ?? {};
                  return (
                    <tr key={b.id}>
                      <Td primary>
                        <Link href={routes.benchmark(b.slug)} className="text-ink hover:text-accent hover:underline">{b.name}</Link>
                        {(b.description || typeof a.task === 'string') && <span className="block max-w-md truncate text-xs text-ink-3">{b.description ?? (a.task as string)}</span>}
                      </Td>
                      <Td label="Category" className="text-ink-2">{typeof a.category === 'string' ? <Link href={`/benchmarks?category=${encodeURIComponent(a.category)}`} className="hover:text-accent">{a.category}</Link> : <span className="text-ink-3">—</span>}</Td>
                      <Td label="Metric" className="text-ink-2">
                        {typeof a.metric === 'string' ? a.metric : <span className="text-ink-3">—</span>}
                        {typeof a.unit === 'string' && a.unit && <span className="text-ink-3"> ({a.unit})</span>}
                      </Td>
                      <Td num label="Results" className="tnum">{fmtInt(b.result_count)}</Td>
                      <Td num label="Models" className="tnum text-ink-2">{fmtInt(b.model_count)}</Td>
                      <Td label="Current leader">
                        {b.top ? (
                          <span>
                            <EntityLink e={b.top.model} className="font-medium" /> <span className="tnum text-ink-2">{fmtScore(b.top.score)}{a.unit === '%' ? '%' : ''}</span>
                            {b.top.model.organization && <span className="block text-xs text-ink-3">{b.top.model.organization.name}</span>}
                          </span>
                        ) : (
                          <span className="text-ink-3">—</span>
                        )}
                      </Td>
                      <Td label="Updated" className="text-ink-2" title={b.updated_at}>{fmtAgo(b.updated_at)}</Td>
                    </tr>
                  );
                })}
              </tbody>
            </DataTable>
            <Note className="mt-3">Leader = best current result under the benchmark's default direction (higher or lower is better). Configs differ; open a benchmark for its leaderboard, config filter and per-model history.</Note>
          </>
        )}
      </div>
    </Container>
  );
}