import type { Metadata } from 'next';
import Link from 'next/link';
import { Heatmap } from '@/components/charts';
import { ComparabilityLegend } from '@/components/entity/model-blocks';
import { MatrixFilterRail } from '@/components/benchmarks/filter-rails';
import { TerminalLayout } from '@/components/layout/terminal';
import { TrustBadge } from '@/components/models/badges';
import { fmtScoreUnit, trustShort } from '@/components/models/shared';
import { Container, Note } from '@/components/ui/section';
import { EmptyState, Unavailable } from '@/components/ui/unavailable';
import { apiD1, safe } from '@/lib/api';
import { cn } from '@/lib/cn';
import { fmtInt, num } from '@/lib/format';
import { routes, SITE_NAME, SITE_URL } from '@/lib/site';

export const metadata: Metadata = {
  title: 'Benchmark matrix — models × benchmarks, best comparable current score',
  description: 'Heatmap of canonical models against benchmarks: each cell is the best current score inside the comparability group, coloured by rank within the column. Pick benchmarks, filter by organization or family and release year, restrict to comparable rows.',
  alternates: { canonical: '/benchmarks/matrix' },
  openGraph: { title: `Benchmark matrix | ${SITE_NAME}`, url: `${SITE_URL}/benchmarks/matrix`, type: 'website' },
};
export const revalidate = 600;

type SP = Record<string, string | undefined>;
const LIMITS = [30, 60, 100];

export default async function MatrixPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const benchmarks = (sp.benchmarks ?? '').split(',').map((s) => s.trim()).filter(Boolean);
  const org = sp.org?.trim() || undefined;
  const family = sp.family?.trim() || undefined;
  const comparableOnly = sp.comparable_only === '1';
  const minCells = Math.min(12, Math.max(1, Number(sp.min_cells) || 3));
  const limit = LIMITS.includes(Number(sp.limit)) ? Number(sp.limit) : 60;
  const yearFrom = /^\d{4}$/.test(sp.year_from ?? '') ? Number(sp.year_from) : undefined;
  const yearTo = /^\d{4}$/.test(sp.year_to ?? '') ? Number(sp.year_to) : undefined;
  const [matrix, list] = await Promise.all([safe(apiD1.matrix({ benchmarks: benchmarks.length ? benchmarks.join(',') : undefined, org, family, comparable_only: comparableOnly ? 1 : undefined, min_cells: minCells, limit })), safe(apiD1.benchmarks())]);
  const withResults = (list?.items ?? []).filter((b) => (num(b.result_count) ?? 0) > 0).sort((x, y) => (num(y.result_count) ?? 0) - (num(x.result_count) ?? 0));
  // Release-year range filters rows in the page (the API has no date filter on the matrix; cells carry no dates).
  const rows = (matrix?.rows ?? []).filter((r) => {
    const y = r.model.release_date ? Number(r.model.release_date.slice(0, 4)) : null;
    if (yearFrom !== undefined && (y === null || y < yearFrom)) return false;
    if (yearTo !== undefined && (y === null || y > yearTo)) return false;
    return true;
  });
  const cols = matrix?.columns ?? [];
  const colById = new Map(cols.map((c) => [c.id, c]));
  const colIds = cols.map((c) => c.id);
  // Colour by within-column rank: 1 = best rank in the column, 0 = last among the models that have a cell.
  const colRanks = new Map<string, number[]>();
  for (const c of cols) colRanks.set(c.id, rows.map((r) => r.cells[c.id]?.rank).filter((x): x is number => typeof x === 'number').sort((a, b) => a - b));
  const cellFn = (rowKey: string, colKey: string) => {
    const r = rows.find((x) => x.model.id === rowKey);
    const c = r?.cells[colKey];
    const col = colById.get(colKey);
    if (!r || !c || !col) return { value: null, title: r && col ? `${r.model.name} · ${col.name}: no current result in this group` : undefined };
    const ranks = colRanks.get(colKey) ?? [];
    const pos = ranks.indexOf(c.rank);
    const value = ranks.length > 1 ? 1 - pos / (ranks.length - 1) : 1;
    const unit = typeof list?.items.find((b) => b.id === colKey)?.unit === 'string' ? (list?.items.find((b) => b.id === colKey)?.unit as string) : null;
    return {
      value,
      label: fmtScoreUnit(c.score, unit),
      href: `${routes.benchmark(col.slug)}?metric=${encodeURIComponent(col.metric)}&config_key=${encodeURIComponent(c.config_key)}`,
      title: `${r.model.name} · ${col.name}: ${fmtScoreUnit(c.score, unit)} · rank ${c.rank} of ${col.n_models} · ${trustShort(c.trust_level)} · ${c.comparability}`,
    };
  };
  const filterCount = [benchmarks.length ? '1' : undefined, org, family, comparableOnly ? '1' : undefined, yearFrom, yearTo].filter(Boolean).length;
  const trustLevels = [...new Set(rows.flatMap((r) => Object.values(r.cells).map((c) => c?.trust_level).filter(Boolean)))] as string[];
  const partially = rows.reduce((n, r) => n + Object.values(r.cells).filter((c) => c && c.comparability !== 'comparable').length, 0);
  const cellsN = rows.reduce((n, r) => n + r.n_cells, 0);
  const ld = { '@context': 'https://schema.org', '@type': 'Dataset', name: 'Benchmark matrix', url: `${SITE_URL}/benchmarks/matrix`, description: metadata.description };

  const filters = <MatrixFilterRail benchmarks={withResults.map((b) => ({ slug: b.slug, name: b.name, models: num(b.model_count) ?? 0 }))} picked={benchmarks} org={org} family={family} yearFrom={sp.year_from} yearTo={sp.year_to} comparableOnly={comparableOnly} minCells={minCells} limit={limit} limits={LIMITS} />;
  const inspector = (
    <div className="space-y-5 text-sm" data-matrix-legend>
      <dl className="kv [&>div]:grid-cols-[7rem_minmax(0,1fr)] [&>div]:py-1">
        <div>
          <dt>Rows</dt>
          <dd className="tnum text-ink">
            {fmtInt(rows.length)} <span className="text-ink-3">of {fmtInt(matrix?.total_rows ?? 0)} eligible</span>
          </dd>
        </div>
        <div>
          <dt>Columns</dt>
          <dd className="tnum text-ink">{fmtInt(cols.length)}</dd>
        </div>
        <div>
          <dt>Cells</dt>
          <dd className="tnum text-ink">
            {fmtInt(cellsN)} {partially ? <span className="text-ink-3">· {fmtInt(partially)} partially comparable</span> : null}
          </dd>
        </div>
      </dl>
      <div>
        <p className="eyebrow mb-1">Colour</p>
        <p className="text-xs text-ink-2">Within-column rank of the model's best comparable current score: darkest = best rank in that column. Colours never compare across columns; the number in the cell is the score itself.</p>
        <div className="mt-2 flex h-2 overflow-hidden rounded-sm" aria-hidden>
          {[0.1, 0.3, 0.5, 0.7, 0.9].map((k) => (
            <span key={k} className="flex-1" style={{ background: `color-mix(in srgb, var(--type-benchmark) ${Math.round(8 + k * 72)}%, var(--surface))` }} />
          ))}
        </div>
        <p className="mt-0.5 flex justify-between text-[10px] text-ink-3">
          <span>last</span>
          <span>best</span>
        </p>
      </div>
      {trustLevels.length > 0 && (
        <div>
          <p className="eyebrow mb-1">Trust levels present</p>
          <p className="flex flex-wrap gap-1">
            {trustLevels.map((t) => (
              <TrustBadge key={t} level={t} />
            ))}
          </p>
        </div>
      )}
      <div>
        <p className="eyebrow mb-1">Comparability</p>
        <ComparabilityLegend />
      </div>
      {matrix?.methodology && <Note>{matrix.methodology}</Note>}
      <Note>
        `mean_rank` orders the rows; it is a sort key, not a score. <Link href="/methodology#benchmarks" className="link">Methodology →</Link>
      </Note>
    </div>
  );

  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }} />
      <Container wide>
        <header className="flex flex-col gap-3 pb-4 pt-6 md:flex-row md:items-end md:justify-between md:pt-8">
          <div className="min-w-0">
            <p className="eyebrow">
              <Link href={routes.benchmarks()} className="hover:text-ink">
                Benchmarks
              </Link>{' '}
              / Matrix
            </p>
            <h1 className="display mt-1 text-[26px] md:text-[34px]">Benchmark matrix</h1>
            <p className="mt-2 max-w-2xl text-sm text-ink-2">Canonical models × benchmarks. Each cell is the best current score in the benchmark's comparability group; hover for score, rank, trust and comparability, click to open the leaderboard.</p>
          </div>
          {matrix && (
            <p className="tnum text-sm text-ink-2">
              <span className="font-semibold text-ink">{fmtInt(rows.length)}</span> models × <span className="font-semibold text-ink">{fmtInt(cols.length)}</span> benchmarks
            </p>
          )}
        </header>
      </Container>
      <TerminalLayout filters={filters} filterCount={filterCount} inspector={inspector} inspectorTitle="Legend" storageKey="aia-matrix-inspector">
        <div className="pb-16">
          {!matrix ? (
            <Unavailable what="Benchmark matrix" />
          ) : rows.length === 0 || cols.length === 0 ? (
            <EmptyState title="No model has enough comparable cells for this selection">Lower “min cells”, widen the release range or pick other benchmarks.</EmptyState>
          ) : (
            <>
              <Heatmap
                rows={rows.map((r) => ({ key: r.model.id, label: r.model.name, href: `/models/${encodeURIComponent(r.model.slug)}`, sub: [r.model.organization, r.model.release_date ? r.model.release_date.slice(0, 4) : null].filter(Boolean).join(' · ') }))}
                cols={cols.map((c) => ({ key: c.id, label: c.name.length > 22 ? `${c.name.slice(0, 21)}…` : c.name, href: routes.benchmark(c.slug), sub: `${c.metric} · ${fmtInt(c.n_models)} models` }))}
                cell={cellFn}
                min={0}
                max={1}
                color="var(--type-benchmark)"
                caption="Benchmark matrix: models × benchmarks, best comparable current score, coloured by within-column rank"
                rowHeader="Model"
                className="max-h-[75dvh] overflow-auto scrollbar-thin"
              />
              <Note className={cn('mt-3')}>
                Rows are the models with at least {fmtInt(matrix.min_cells)} cells{comparableOnly ? ' (comparable rows only)' : ''}, ordered by mean rank; {yearFrom || yearTo ? `release-year filter applied in the page (${yearFrom ?? '…'} – ${yearTo ?? '…'}); ` : ''}columns are {benchmarks.length ? 'the picked benchmarks' : 'the 12 benchmarks with the most current results'}. Empty = no current result in the group, never interpolated.
              </Note>
            </>
          )}
        </div>
      </TerminalLayout>
    </>
  );
}