import Link from 'next/link';
import { Legend, LineChart } from '@/components/charts/charts';
import { CompareButton } from '@/components/compare/compare-button';
import { ConfidenceBadge } from '@/components/ui/badges';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
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, fmtScore } from '@/lib/format';
import { routes } from '@/lib/site';
import type { BenchmarkResult } from '@/lib/types';

/** Per-model identifiers (one row each) are useless as filters; everything else becomes a chip candidate. */
const PER_ROW_KEYS = new Set(['aa_slug', 'model_tag', 'model_id', 'run_id', 'submission_id', 'date', 'submitted_at', 'url']);

/** Distinct config values seen on the page (value → count), skipping per-row identifiers and singletons. */
export function configChips(results: BenchmarkResult[], max = 10): { value: string; key: string; count: number }[] {
  const counts = new Map<string, { key: string; count: number }>();
  for (const r of results) {
    for (const [k, v] of Object.entries(r.config ?? {})) {
      if (PER_ROW_KEYS.has(k) || v === null || v === undefined || v === '') continue;
      const s = typeof v === 'object' ? JSON.stringify(v) : String(v);
      if (s.length > 40) continue;
      const cur = counts.get(s);
      if (cur) cur.count += 1;
      else counts.set(s, { key: k, count: 1 });
    }
  }
  return [...counts.entries()]
    .map(([value, x]) => ({ value, key: x.key, count: x.count }))
    .filter((c) => c.count > 1 && c.count < results.length)
    .sort((a, b) => b.count - a.count || a.value.localeCompare(b.value))
    .slice(0, max);
}

export function configSummary(c: Record<string, unknown>): string {
  return Object.entries(c ?? {})
    .filter(([, v]) => v !== null && v !== undefined && v !== '')
    .slice(0, 4)
    .map(([k, v]) => `${k}=${typeof v === 'object' ? JSON.stringify(v) : String(v)}`)
    .join(' · ');
}

export function ConfigChips({ slug, chips, active, model }: { slug: string; chips: ReturnType<typeof configChips>; active?: string; model?: string }) {
  if (!chips.length && !active) return null;
  const cls = (on: boolean) => cn('inline-flex h-8 items-center gap-1.5 border px-2.5 text-xs whitespace-nowrap', on ? 'border-ink bg-ink text-canvas' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink');
  return (
    <nav aria-label="Configuration filter" className="no-scrollbar -mx-4 flex gap-1.5 overflow-x-auto px-4 md:mx-0 md:flex-wrap md:px-0">
      <Link href={routes.benchmark(slug, { model })} className={cls(!active)} aria-current={!active ? 'true' : undefined}>
        All configs
      </Link>
      {active && !chips.some((c) => c.value === active) && (
        <Link href={routes.benchmark(slug, { model })} className={cls(true)} aria-current="true" title="Remove this filter">
          <span className="mono">{active}</span> ×
        </Link>
      )}
      {chips.map((c) => (
        <Link key={c.value} href={routes.benchmark(slug, { config: active === c.value ? undefined : c.value, model })} className={cls(active === c.value)} aria-current={active === c.value ? 'true' : undefined} title={`config.${c.key} contains “${c.value}” (${c.count} rows on this page)`}>
          <span className="text-ink-3 opacity-80">{c.key}</span> <span className="mono">{c.value}</span>
        </Link>
      ))}
    </nav>
  );
}

/**
 * Leaderboard table: rank · model (+org) · score with a relative bar · config · evaluated · source · compare/history.
 * Bars are relative to the best score of the page (per direction) — a reading aid, not a normalisation.
 */
export function Leaderboard({ slug, results, total, limit, offset, config, model, unit, makeHref }: { slug: string; results: BenchmarkResult[]; total: number; limit: number; offset: number; config?: string; model?: string; unit?: string | null; makeHref: (offset: number) => string }) {
  if (!results.length) return <EmptyState title={config ? 'No result matches this configuration filter' : 'No benchmark results recorded'}>{config ? <Link href={routes.benchmark(slug, { model })} className="link">Clear the filter</Link> : 'Results appear when a tier 1–3 source publishes them; we never copy scores without a source.'}</EmptyState>;
  const hib = results[0]?.higher_is_better !== false;
  const scores = results.map((r) => r.score).filter((s) => Number.isFinite(s));
  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 ?? results[0]?.unit ?? null;
  return (
    <>
      <DataTable caption="Leaderboard">
        <thead>
          <tr>
            <Th className="w-10">#</Th>
            <Th>Model</Th>
            <Th num>Score</Th>
            <Th>Config</Th>
            <Th>Evaluated</Th>
            <Th>Source</Th>
            <Th className="w-40"><span className="sr-only">Actions</span></Th>
          </tr>
        </thead>
        <tbody>
          {results.length === 0 && <EmptyRow cols={7} />}
          {results.map((r, i) => {
            const rank = offset + i + 1;
            const isModel = model && r.model.slug === model;
            return (
              <tr key={r.id} className={isModel ? 'bg-accent-soft/40' : undefined}>
                <Td className="tnum text-ink-3" hideStack>{fmtInt(rank)}</Td>
                <Td primary>
                  <span className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
                    <span className="tnum text-xs text-ink-3 md:hidden">#{fmtInt(rank)}</span>
                    <EntityLink e={r.model} />
                  </span>
                  {r.model.organization && <span className="block text-xs text-ink-3">{r.model.organization.name}</span>}
                </Td>
                <Td num label="Score" className="tnum font-medium">
                  <span className="inline-flex flex-col items-end gap-1">
                    <span>
                      {fmtScore(r.score)}
                      {u === '%' ? '%' : u ? <span className="text-ink-3"> {u}</span> : null}
                    </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 label="Config" className="mono max-w-[18rem] truncate text-xs text-ink-3" title={JSON.stringify(r.config)}>{configSummary(r.config) || '—'}</Td>
                <Td label="Evaluated" className="tnum text-ink-2 whitespace-nowrap" 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">— <span className="text-[11px]">(obs. {fmtDate(r.observed_at)})</span></span>}
                </Td>
                <Td label="Source">
                  <SourceCell url={r.source_url} tier={r.tier} /> <ConfidenceBadge confidence={r.confidence !== 'high' && r.confidence !== 'medium' ? r.confidence : null} />
                </Td>
                <Td className="text-right">
                  <span className="inline-flex flex-wrap items-center justify-end gap-1.5">
                    <Link href={routes.benchmark(slug, { config, model: isModel ? undefined : r.model.slug })} className={cn('inline-flex h-7 items-center border px-1.5 text-xs whitespace-nowrap', isModel ? 'border-accent bg-accent-soft text-accent' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink')} aria-pressed={!!isModel}>
                      History
                    </Link>
                    <CompareButton e={r.model} size="sm" />
                  </span>
                </Td>
              </tr>
            );
          })}
        </tbody>
      </DataTable>
      <Pagination total={total} limit={limit} offset={offset} makeHref={makeHref} className="mt-4" />
      <Note className="mt-3">
        Scores are reported as published, with their evaluation configuration (harness, prompting, judge). The bar is relative to the best score on this page{hib ? '' : ' (lower is better)'}. Results with different configs are not directly comparable — see <Link href="/methodology#benchmarks" className="link">methodology</Link>.
      </Note>
    </>
  );
}

/** Score history for one model on this benchmark (all rows incl. superseded), as a time series. */
export function HistoryChart({ items, model, unit }: { items: BenchmarkResult[]; model: string; unit?: string | null }) {
  const name = items[0]?.model.name ?? model;
  const pts = items
    .map((r) => ({ x: new Date(r.evaluated_at ?? r.observed_at), y: r.score, r }))
    .filter((p) => !Number.isNaN(p.x.getTime()) && Number.isFinite(p.y))
    .sort((a, b) => a.x.getTime() - b.x.getTime());
  const u = unit ?? items[0]?.unit ?? null;
  const fmt = (v: number) => `${fmtScore(v)}${u === '%' ? '%' : ''}`;
  const days = new Set(pts.map((p) => p.x.toISOString().slice(0, 10)));
  return (
    <div>
      <p className="eyebrow mb-2">
        Score history · {name} <span className="tnum text-ink-3">{fmtInt(items.length)} {items.length === 1 ? 'row' : 'rows'}</span>
      </p>
      {pts.length < 2 || days.size < 2 ? (
        <Note>
          Not enough history to chart — {pts.length === 0 ? 'no result recorded for this model' : pts.length === 1 ? `a single observation (${fmt(pts[0]?.y ?? 0)} on ${fmtDate(pts[0]?.r.evaluated_at ?? pts[0]?.r.observed_at)})` : `${fmtInt(pts.length)} observations, all dated ${fmtDate(pts[0]?.r.evaluated_at ?? pts[0]?.r.observed_at)}`}. Rows under different configurations count separately; the list below shows each one.
        </Note>
      ) : (
        <>
          <LineChart series={[{ name, color: 'var(--type-benchmark)', points: pts.map((p) => ({ x: p.x, y: p.y })) }]} height={200} yFormat={fmt} showDots yLabel={`Score history for ${name}`} />
          <Legend series={[{ name, color: 'var(--type-benchmark)' }]} className="mt-2" />
        </>
      )}
      {pts.length > 0 && (
        <ul className="mt-3 divide-y divide-rule border-y border-rule text-sm">
          {[...pts].reverse().slice(0, 12).map((p) => (
            <li key={p.r.id} className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-baseline gap-x-3 py-1.5">
              <span className="tnum font-medium">{fmt(p.y)}</span>
              <span className="mono truncate text-xs text-ink-3" title={JSON.stringify(p.r.config)}>{configSummary(p.r.config) || '—'}</span>
              <span className="tnum text-xs text-ink-2">{fmtDate(p.r.evaluated_at ?? p.r.observed_at)}</span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}