import Link from 'next/link';
import { CompareButton } from '@/components/compare/compare-button';
import { ComparabilityBadge, ConfigChipEl, OpennessChip, TrustBadge } from '@/components/models/badges';
import { configChipsOf, fmtScoreUnit, refToSummary } from '@/components/models/shared';
import { FrontierLineChart } from './client-charts';
import { ScrollX } from '@/components/models/scroll-x';
import { EntityLink } from '@/components/ui/entity';
import { Pagination } from '@/components/ui/pagination';
import { SourceCell } from '@/components/ui/provenance';
import { Note } from '@/components/ui/section';
import { EmptyState } from '@/components/ui/unavailable';
import { cn } from '@/lib/cn';
import { fmtDate, fmtInt, fmtSigned } from '@/lib/format';
import { routes } from '@/lib/site';
import type { BenchmarkFrontierPayload, Group, LeaderboardRow } from '@/lib/types';

/*
  Leaderboard 2.0 (server): one row per canonical model — rank (+Δ vs closed rows) · model · score bar · trust · config chips ·
  comparability vs leader · evaluated/observed · source · History · Compare. Mobile stacks (rank + model + score first).
*/

export function Leaderboard2({ rows, group, total, limit, offset, makeHref, historyHref, activeModel, unit }: { rows: LeaderboardRow[]; group: Group | null; total: number; limit: number; offset: number; makeHref: (offset: number) => string; historyHref: (slug: string) => string; activeModel?: string; unit?: string | null }) {
  if (!rows.length) return <EmptyState title="No result in this group with these filters">Relax the trust / organization filters or pick another comparability group.</EmptyState>;
  const hib = rows[0]?.higher_is_better !== false;
  const scores = rows.map((r) => r.score).filter(Number.isFinite);
  const max = Math.max(...scores);
  const min = Math.min(...scores);
  const width = (s: number) => {
    if (!Number.isFinite(s) || max <= 0) return 0;
    const v = hib ? s / max : min > 0 ? min / s : 0;
    return Math.max(2, Math.min(100, v * 100));
  };
  const u = unit ?? rows[0]?.unit ?? null;
  const leader = rows.find((r) => r.rank === 1) ?? rows[0];
  return (
    <>
      <ScrollX>
      <table className="data-table stack compact" data-leaderboard>
        <caption className="sr-only">Leaderboard</caption>
        <thead>
          <tr>
            <th scope="col" className="w-12">
              #
            </th>
            <th scope="col">Model</th>
            <th scope="col" className="num">
              Score
            </th>
            <th scope="col">Trust</th>
            <th scope="col">Configuration</th>
            <th scope="col">vs leader</th>
            <th scope="col">Evaluated</th>
            <th scope="col">Source</th>
            <th scope="col" className="text-right">
              <span className="sr-only">Actions</span>
            </th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r) => {
            const on = activeModel === r.model.slug;
            const chips = configChipsOf(r.config, group?.config ?? null, 4);
            const openness = typeof r.model.attributes?.openness === 'string' ? r.model.attributes.openness : null;
            return (
              <tr key={r.result_id} className={cn(on && 'bg-accent-soft/40')} data-model={r.model.slug}>
                <td className="tnum text-ink-3" data-label="Rank">
                  <span className="font-medium text-ink">{fmtInt(r.rank)}</span>
                  {r.delta_rank !== null && r.delta_rank !== 0 && (
                    <span className={cn('ml-1 text-[11px]', r.delta_rank > 0 ? 'text-positive' : 'text-danger')} title={`Rank moved ${fmtSigned(r.delta_rank)} vs the closed rows of this group${r.previous_rank ? ` (was ${r.previous_rank})` : ''}`}>
                      {r.delta_rank > 0 ? '▲' : '▼'}
                      {Math.abs(r.delta_rank)}
                    </span>
                  )}
                </td>
                <td className="primary">
                  <span className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
                    <EntityLink e={{ ...r.model, entity_type: 'model' }} />
                    {openness && <OpennessChip openness={openness} />}
                  </span>
                  <span className="block text-[11px] text-ink-3">
                    {r.model.organization?.name ?? ''}
                    {typeof r.model.attributes?.family === 'string' ? ` · ${r.model.attributes.family}` : ''}
                    {r.n_rows > 1 ? ` · best of ${r.n_rows} rows` : ''}
                  </span>
                </td>
                <td className="num tnum font-medium" data-label="Score">
                  <span className="inline-flex flex-col items-end gap-1">
                    <span>{fmtScoreUnit(r.score, u)}</span>
                    <span className="block h-1 w-24 overflow-hidden rounded-sm bg-surface-2" aria-hidden>
                      <span className="block h-full" style={{ width: `${width(r.score)}%`, background: 'var(--type-benchmark)' }} />
                    </span>
                  </span>
                </td>
                <td data-label="Trust">
                  <TrustBadge level={r.trust_level} label={r.trust_label} />
                </td>
                <td data-label="Configuration">
                  <span className="flex flex-wrap gap-1">{chips.length ? chips.map((c) => <ConfigChipEl key={c.key} k={c.key} v={c.value} kind={c.kind} />) : <span className="text-xs text-ink-3">group defaults</span>}</span>
                </td>
                <td data-label="vs leader">
                  {r.rank === 1 ? <span className="text-xs font-medium text-positive">leader</span> : <ComparabilityBadge level={r.comparability} reasons={r.comparability_reasons} />}
                  {leader && r.rank !== 1 && <span className="tnum block text-[11px] text-ink-3">{(hib ? r.score - leader.score : leader.score - r.score).toFixed(Math.abs(r.score - leader.score) < 10 ? 2 : 1)}{u === '%' ? ' pt' : ''}</span>}
                </td>
                <td data-label="Evaluated" className="tnum whitespace-nowrap text-xs text-ink-2" title={r.evaluated_at ? undefined : `Observed ${fmtDate(r.observed_at)}; the source gave no evaluation date`}>
                  {r.evaluated_at ? fmtDate(r.evaluated_at) : <span className="text-ink-3">obs. {fmtDate(r.observed_at)}</span>}
                </td>
                <td data-label="Source">
                  <SourceCell url={r.source_url} tier={r.tier} />
                </td>
                <td className="text-right">
                  <span className="inline-flex flex-wrap items-center justify-end gap-1">
                    <Link href={historyHref(r.model.slug)} className={cn('inline-flex h-7 items-center border px-1.5 text-xs whitespace-nowrap', on ? 'border-accent bg-accent-soft text-accent' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink')} aria-pressed={on}>
                      History
                    </Link>
                    <CompareButton e={refToSummary(r.model)} size="sm" label="" />
                  </span>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
      </ScrollX>
      <Pagination total={total} limit={limit} offset={offset} makeHref={makeHref} className="mt-4" />
      <Note className="mt-3">
        One row per canonical model — its best current row inside this comparability group (effort variants are folded into the model). Bars are relative to the page's best score{hib ? '' : ' (lower is better)'}. “vs leader” reads comparability: partially comparable = same task, conditions differ (reasoning effort, temperature, judge). <Link href="/methodology#benchmarks" className="link">Rules →</Link>
      </Note>
    </>
  );
}

/** Frontier over time: a point each time a new best appeared in the group; markers = leader changes. */
export function FrontierChart({ frontier, group, unit }: { frontier: BenchmarkFrontierPayload | null; group: Group | null; unit?: string | null }) {
  if (!frontier) return <Note>Frontier history unavailable.</Note>;
  const series = frontier.series.find((s) => (group ? s.group.config_key === group.config_key && s.group.metric === group.metric : s.primary)) ?? frontier.series.find((s) => s.primary) ?? frontier.series[0];
  if (!series) return <Note>No frontier history for this group.</Note>;
  const pts = series.points.map((p) => ({ x: new Date(p.date), y: p.score, p })).filter((x) => !Number.isNaN(x.x.getTime())).sort((a, b) => a.x.getTime() - b.x.getTime());
  const days = new Set(pts.map((p) => p.x.toISOString().slice(0, 10)));
  return (
    <div data-frontier-chart>
      {pts.length < 2 || days.size < 2 ? (
        <Note>
          {pts.length === 0 ? 'No leader recorded yet.' : `${fmtInt(pts.length)} leader change${pts.length === 1 ? '' : 's'} recorded, all dated ${fmtDate(pts[0]?.p.date)} — the frontier line needs at least two distinct dates.`} The corpus is young: every result was first observed on the same day, so leader changes will separate in time as sources are re-crawled.
        </Note>
      ) : (
        <FrontierLineChart points={pts.map((p) => ({ x: p.p.date, y: p.y }))} unit={unit ?? null} label={`Frontier of ${frontier.benchmark.name}`} />
      )}
      {pts.length > 0 && (
        <ol className="mt-3 divide-y divide-rule border-y border-rule text-sm">
          {[...pts].reverse().slice(0, 8).map((p) => (
            <li key={p.p.result_id} className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-baseline gap-x-3 py-1.5">
              <span className="tnum font-medium">{fmtScoreUnit(p.y, unit)}</span>
              <span className="min-w-0 truncate">
                <EntityLink e={{ ...p.p.model, entity_type: 'model' }} /> <span className="text-xs text-ink-3">{p.p.model.organization?.name ?? ''}</span> <TrustBadge level={p.p.trust_level} className="ml-1" />
              </span>
              <span className="tnum text-xs text-ink-2">{fmtDate(p.p.date)}</span>
            </li>
          ))}
        </ol>
      )}
      <Note className="mt-2">{frontier.methodology}</Note>
    </div>
  );
}

/** Group picker: links when ≤ 8 groups, else a GET <select> — always server-rendered. */
export function GroupPicker({ groups, active, makeHref, slug, hidden }: { groups: Group[]; active: Group | null; makeHref: (g: Group) => string; slug: string; hidden: Record<string, string | undefined> }) {
  if (groups.length <= 1) return active ? <p className="text-xs text-ink-2">{active.label}</p> : null;
  const sorted = [...groups].sort((a, b) => b.model_count - a.model_count);
  if (sorted.length <= 8)
    return (
      <ul className="space-y-px" data-group-picker>
        {sorted.map((g) => {
          const on = active?.config_key === g.config_key && active?.metric === g.metric;
          return (
            <li key={`${g.metric}:${g.config_key}`}>
              <Link href={makeHref(g)} className={cn('flex min-h-8 items-start justify-between gap-2 px-1 py-1 text-[12px] leading-4 hover:bg-surface-2', on ? 'bg-surface-2 font-medium text-ink' : 'text-ink-2')} aria-current={on ? 'true' : undefined} title={g.label}>
                <span className="min-w-0">
                  <span className="block">{g.metric}</span>
                  <span className="mono block truncate text-[10.5px] font-normal text-ink-3">{Object.entries(g.config).map(([k, v]) => `${k}=${String(v)}`).join(' · ') || 'default'}</span>
                </span>
                <span className="tnum shrink-0 text-[11px] text-ink-3">{fmtInt(g.model_count)}</span>
              </Link>
            </li>
          );
        })}
      </ul>
    );
  return (
    <form action={routes.benchmark(slug)} method="get" className="space-y-2" data-group-picker>
      {Object.entries(hidden).map(([k, v]) => (v ? <input key={k} type="hidden" name={k} value={v} /> : null))}
      <select name="group" defaultValue={active ? `${active.metric}|${active.config_key}` : ''} className="h-9 w-full border border-rule bg-surface px-2 text-[12px] text-ink focus:border-accent focus:outline-none" aria-label="Comparability group">
        {sorted.map((g) => (
          <option key={`${g.metric}:${g.config_key}`} value={`${g.metric}|${g.config_key}`}>
            {g.label} ({g.model_count})
          </option>
        ))}
      </select>
      <button type="submit" className="inline-flex h-8 w-full items-center justify-center bg-ink px-3 text-[12px] font-medium text-canvas hover:opacity-90">
        Show group
      </button>
    </form>
  );
}