import { ExternalLink } from 'lucide-react';
import { ScrollX } from '@/components/models/scroll-x';
import Link from 'next/link';
import { Evidence } from '@/components/evidence/evidence';
import { ComparabilityBadge, ConfigChipEl, TrustBadge } from '@/components/models/badges';
import { configChipsOf, fmtScoreUnit, scoreDelta } from '@/components/models/shared';
import { Estimated } from '@/components/ui/badges';
import { DataTable, Td, Th } from '@/components/ui/data-table';
import { EntityLink } from '@/components/ui/entity';
import { Hint } from '@/components/ui/hint';
import { SourceCell } from '@/components/ui/provenance';
import { Note } from '@/components/ui/section';
import { EmptyState } from '@/components/ui/unavailable';
import { cn } from '@/lib/cn';
import { DASH, fmtAgo, fmtDate, fmtGb, fmtInt, fmtTokens, fmtUsdPerM, fmtValue, hostOf, num } from '@/lib/format';
import { propertyLabel, routes } from '@/lib/site';
import type { BenchmarkListItem, Deployment, HardwareFitRow, ModelDetail, ProvenanceEntry, VersionHistoryItem } from '@/lib/types';

/* ------------------------------------------------------------------------------------------------------ identity panel */

/** Canonical model · official checkpoints · third-party artifacts (by kind) · provider deployments · API aliases · folded variants. */
export function IdentityPanel({ d }: { d: ModelDetail }) {
  const id = d.identity;
  const kinds = d.artifacts?.items ?? [];
  if (!id) return <p className="text-sm text-ink-3">Identity block not returned by the API for this entity.</p>;
  // The definition hint sits at the far right of the value cell (right-aligned bubble): in the narrow label column the 18rem bubble would widen the page.
  const Row = ({ k, hint, children }: { k: string; hint?: string; children: React.ReactNode }) => (
    <div>
      <dt>{k}</dt>
      <dd className="flex items-start justify-between gap-2 text-ink">
        <span className="min-w-0 flex-1">{children}</span>
        {hint && <Hint text={hint} align="right" className="-my-1 shrink-0" />}
      </dd>
    </div>
  );
  return (
    <dl className="kv" data-identity-panel>
      <Row k="Canonical model" hint="One row per real model release. Artifacts (checkpoints, quantisations, conversions) and folded evaluation variants point here.">
        <span className="font-medium">{id.canonical_model ? 'Yes' : 'No'}</span>
        {d.identity_confidence && <span className="ml-2 text-xs text-ink-3">identity confidence: {d.identity_confidence}</span>}
      </Row>
      <Row k="Official checkpoints" hint={id.note ?? 'hf_repo identifiers carried by the model itself.'}>
        {id.official_checkpoints.length ? (
          <ul className="space-y-0.5">
            {id.official_checkpoints.map((c) => (
              <li key={c}>
                <a href={`https://huggingface.co/${c}`} target="_blank" rel="noopener noreferrer" className="mono inline-flex items-center gap-1 text-[13px] text-ink hover:text-accent">
                  {c} <ExternalLink className="size-3" aria-hidden />
                </a>
              </li>
            ))}
          </ul>
        ) : (
          <span className="text-ink-3">None recorded{d.openness?.category === 'proprietary' ? ' — closed weights' : ''}</span>
        )}
      </Row>
      <Row k="Artifacts" hint="Separate entities (checkpoint · quantization · conversion · packaging) pointing to this model through canonical_id.">
        {kinds.length ? (
          <span className="flex flex-wrap gap-x-3 gap-y-0.5">
            {kinds.map((k) => (
              <a key={k.kind} href="#versions-artifacts" className="tnum text-ink-2 hover:text-accent">
                {fmtInt(k.count)} {k.kind}
                {k.count === 1 ? '' : 's'}
              </a>
            ))}
            <span className="text-xs text-ink-3">
              {fmtInt(id.official_artifacts)} official · {fmtInt(id.third_party_artifacts)} third-party
            </span>
          </span>
        ) : (
          <span className="text-ink-3">None recorded</span>
        )}
      </Row>
      <Row k="Provider deployments">
        {id.provider_deployments ? (
          <a href="#providers-pricing" className="tnum hover:text-accent">
            {fmtInt(id.provider_deployments)}
          </a>
        ) : (
          <span className="text-ink-3">None recorded</span>
        )}
      </Row>
      <Row k="API aliases" hint="Identifiers under which providers and evaluators refer to this model.">
        {id.api_aliases.length ? <span className="mono flex flex-wrap gap-x-2 gap-y-0.5 text-[12px] text-ink-2">{id.api_aliases.map((a) => <span key={a}>{a}</span>)}</span> : <span className="text-ink-3">None</span>}
      </Row>
      <Row k="Folded evaluation variants" hint="Effort / thinking variants (…-high, …-non-reasoning) are result configurations of this model, not separate models. Their old URLs redirect here.">
        <span className="tnum">{fmtInt(id.folded_variants)}</span>
      </Row>
    </dl>
  );
}

/* ------------------------------------------------------------------------------------------------------ deployments */

export function DeploymentsTable({ deployments, modelSlug }: { deployments: Deployment[]; modelSlug: string }) {
  if (!deployments.length) return <EmptyState title="No provider deployment recorded">Deployments appear when a provider's public pricing or model listing is crawled.</EmptyState>;
  const rows = [...deployments].sort((a, b) => (num(a.prices.output) ?? Infinity) - (num(b.prices.output) ?? Infinity) || (num(a.prices.input) ?? Infinity) - (num(b.prices.input) ?? Infinity));
  const has = (k: keyof Deployment['prices']) => rows.some((r) => num(r.prices[k]) !== null);
  const showCached = has('cached_input');
  const showWrite = has('cache_write');
  const showBatch = has('batch_input') || has('batch_output');
  const showNative = rows.some((r) => Object.keys(r.prices.native_units ?? {}).length > 0);
  const showImage = has('per_image') || has('per_request');
  const delisted = rows.filter((r) => r.status === 'delisted').length;
  return (
    <>
      <ScrollX><DataTable caption="Provider deployments, cheapest output first" compact>
        <thead>
          <tr>
            <Th>Provider</Th>
            <Th num>Context</Th>
            <Th num>Input / 1M</Th>
            {showCached && <Th num>Cached in</Th>}
            {showWrite && <Th num>Cache write</Th>}
            <Th num>Output / 1M</Th>
            {showBatch && <Th num>Batch in / out</Th>}
            {showImage && <Th num>Per image / request</Th>}
            {showNative && <Th>Native units</Th>}
            <Th>Status</Th>
            <Th>Observed</Th>
            <Th>Source</Th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => {
            const native = Object.entries(r.prices.native_units ?? {});
            const evidence = (k: string, v: unknown, display: string) => (
              <Evidence slug={modelSlug} property={`price.${k}.${r.provider.slug}`} value={v} display={display} unit="USD / 1M tokens" label={`${propertyLabel(k)} · ${r.provider.name}`} fallback={{ source_id: null, source_name: hostOf(r.source_url) ?? r.provider.name, url: r.source_url, observed_at: r.observed_at, tier: r.tier, confidence: 'high', extractor: 'deterministic', unit: 'USD / 1M tokens' }} entity={{ name: r.model.name, entity_type: 'model' }}>
                {display}
              </Evidence>
            );
            return (
              <tr key={r.id} className={r.status === 'delisted' ? 'opacity-60' : undefined}>
                <Td primary>
                  <span className="flex flex-wrap items-center gap-x-2">
                    <EntityLink e={r.provider} />
                    {i === 0 && r.status === 'active' && num(r.prices.output) !== null && <span className="text-[10px] font-medium uppercase tracking-wide text-accent-2">cheapest output</span>}
                  </span>
                  {r.provider_model_id && <span className="mono block text-[11px] text-ink-3">{r.provider_model_id}</span>}
                </Td>
                <Td num label="Context" className="tnum text-ink-2">
                  {num(r.context_length) === null ? DASH : fmtTokens(r.context_length)}
                  {num(r.max_output_tokens) !== null && <span className="block text-[11px] text-ink-3">out {fmtTokens(r.max_output_tokens)}</span>}
                </Td>
                <Td num label="Input / 1M" className="tnum font-medium text-accent-2">
                  {num(r.prices.input) === null ? DASH : evidence('input_per_mtok', r.prices.input, fmtUsdPerM(r.prices.input))}
                </Td>
                {showCached && (
                  <Td num label="Cached in" className="tnum text-ink-2">
                    {fmtUsdPerM(r.prices.cached_input)}
                  </Td>
                )}
                {showWrite && (
                  <Td num label="Cache write" className="tnum text-ink-2">
                    {fmtUsdPerM(r.prices.cache_write)}
                  </Td>
                )}
                <Td num label="Output / 1M" className="tnum font-medium text-accent-2">
                  {num(r.prices.output) === null ? DASH : evidence('output_per_mtok', r.prices.output, fmtUsdPerM(r.prices.output))}
                </Td>
                {showBatch && (
                  <Td num label="Batch in / out" className="tnum text-ink-2">
                    {num(r.prices.batch_input) === null && num(r.prices.batch_output) === null ? DASH : `${fmtUsdPerM(r.prices.batch_input)} / ${fmtUsdPerM(r.prices.batch_output)}`}
                  </Td>
                )}
                {showImage && (
                  <Td num label="Per image / request" className="tnum text-ink-2">
                    {num(r.prices.per_image) === null && num(r.prices.per_request) === null ? DASH : `${num(r.prices.per_image) === null ? DASH : `$${fmtValue(num(r.prices.per_image))}`} / ${num(r.prices.per_request) === null ? DASH : `$${fmtValue(num(r.prices.per_request))}`}`}
                  </Td>
                )}
                {showNative && (
                  <Td label="Native units" className="text-xs text-ink-2">
                    {native.length ? (
                      <span className="flex flex-wrap gap-1" title={native.map(([k, v]) => `${k}=${String(v)}`).join('\n')}>
                        {native.slice(0, 3).map(([k, v]) => (
                          <span key={k} className="mono rounded-[3px] bg-surface-2 px-1 text-[10.5px]">
                            {k}={typeof v === 'object' ? JSON.stringify(v) : String(v)}
                          </span>
                        ))}
                        {native.length > 3 && <span className="text-ink-3">+{native.length - 3}</span>}
                      </span>
                    ) : (
                      DASH
                    )}
                  </Td>
                )}
                <Td label="Status">
                  <span className={cn('text-xs font-medium', r.status === 'active' ? 'text-positive' : 'text-warning')}>{r.status}</span>
                  {r.valid_to && <span className="block text-[11px] text-ink-3">until {fmtDate(r.valid_to)}</span>}
                </Td>
                <Td label="Observed" className="text-xs text-ink-2" title={r.observed_at}>
                  {fmtAgo(r.observed_at)}
                  <span className="block text-[11px] text-ink-3">since {fmtDate(r.valid_from)}</span>
                </Td>
                <Td label="Source">
                  <SourceCell url={r.source_url} tier={r.tier} />
                </Td>
              </tr>
            );
          })}
        </tbody>
      </DataTable></ScrollX>
      <Note className="mt-3">
        {rows[0]?.prices.unit ?? 'USD per 1M tokens'} as published by each provider; native units (per-request fees, flex/priority tiers) are kept verbatim. Rows are append-only — every price change is kept in the history below.
        {delisted > 0 && ` ${fmtInt(delisted)} delisted deployment${delisted === 1 ? '' : 's'} shown greyed.`} <Link href={routes.calculator()} className="link">Cost of a workload →</Link>
      </Note>
    </>
  );
}

/* ------------------------------------------------------------------------------------------------------ version history */

function fmtVersionValue(property: string, v: unknown): string {
  if (v === null || v === undefined) return 'unknown';
  if (/context_length|max_output_tokens/.test(property)) return `${fmtTokens(v)}`;
  return fmtValue(v, property);
}

/** property → "128K → 200K → 1M" with dates; every hop is an evidence trigger (claim id, source, tier). */
export function VersionHistoryBlock({ items, d }: { items: VersionHistoryItem[]; d: ModelDetail }) {
  const shown = items.filter((v) => v.transitions.length > 0);
  if (!shown.length) return <p className="text-sm text-ink-3">No versioned property recorded yet.</p>;
  const sorted = [...shown].sort((a, b) => b.transitions.length - a.transitions.length || a.property.localeCompare(b.property));
  return (
    <div className="space-y-3" data-version-history>
      {sorted.map((v) => {
        const first = v.transitions[0];
        const chain = [first?.from ?? null, ...v.transitions.map((t) => t.to)];
        const changes = v.transitions.filter((t) => t.from !== null && t.from !== undefined).length;
        return (
          <div key={v.property} className="grid gap-1 border-b border-rule py-2 sm:grid-cols-[10rem_minmax(0,1fr)]">
            <p className="text-[13px] text-ink-3">
              {propertyLabel(v.property)}
              <span className="block text-[11px]">
                {changes ? `${fmtInt(changes)} change${changes === 1 ? '' : 's'}` : 'first observation only'}
              </span>
            </p>
            <div className="min-w-0">
              <p className="tnum flex flex-wrap items-center gap-x-1.5 gap-y-1 text-sm">
                {chain.map((val, i) => {
                  const t = i === 0 ? null : v.transitions[i - 1];
                  const isLast = i === chain.length - 1;
                  const text = fmtVersionValue(v.property, val);
                  if (!t) return val === null || val === undefined ? null : <span key={i} className="text-ink-3">{text}</span>;
                  const fallback: ProvenanceEntry = { source_id: null, source_name: hostOf(t.source_url) ?? undefined, url: t.source_url, observed_at: t.valid_from, tier: t.tier, confidence: t.status === 'conflicting' ? 'conflicted' : 'high', extractor: 'deterministic' };
                  return (
                    <span key={t.claim_id} className="inline-flex items-center gap-1.5">
                      {(i > 1 || (chain[0] !== null && chain[0] !== undefined)) && <span className="text-ink-3">→</span>}
                      <Evidence slug={d.slug} property={v.property} value={t.to} display={text} fallback={fallback} entity={{ name: d.name, entity_type: d.entity_type }} className={cn(isLast ? 'font-semibold text-ink' : 'text-ink-2')}>
                        {text}
                      </Evidence>
                      <span className="text-[11px] text-ink-3" title={t.valid_from}>
                        {fmtDate(t.effective_at ?? t.valid_from)}
                      </span>
                    </span>
                  );
                })}
                {v.transitions[v.transitions.length - 1]?.valid_to === null && <span className="text-[10px] font-medium uppercase tracking-wide text-positive">current</span>}
              </p>
            </div>
          </div>
        );
      })}
      <Note>Each hop is a claim: click a value for its source, tier and observation time. Nothing is overwritten — a new observation closes the previous claim.</Note>
    </div>
  );
}

/* ------------------------------------------------------------------------------------------------------ benchmarks grouped */

/** Benchmark → metric / comparability group → best current row (trust, comparability note, n results, vs leader, leaderboard link). */
export function ModelBenchmarksBlock({ d, leaders }: { d: ModelDetail; leaders: BenchmarkListItem[] | null }) {
  const b = d.benchmarks;
  if (!b || !b.items.length) return <EmptyState title="No benchmark results recorded">Results appear when a tier 1–3 source publishes them; we never copy scores without a source.</EmptyState>;
  const leaderMap = new Map<string, BenchmarkListItem>();
  for (const l of leaders ?? []) leaderMap.set(l.slug, l);
  const items = [...b.items].sort((x, y) => (x.category ?? '').localeCompare(y.category ?? '') || x.name.localeCompare(y.name));
  const rows: React.ReactNode[] = [];
  for (const bm of items) {
    const li = leaderMap.get(bm.slug);
    for (const m of bm.metrics) {
      for (const g of m.groups) {
        const isPrimary = li?.primary_group?.config_key === g.config_key && li?.primary_group?.metric === m.metric;
        const leader = isPrimary ? li?.leader : null;
        const leaderIsSelf = leader?.model.slug === d.slug;
        const delta = leader && !leaderIsSelf ? scoreDelta(g.best.score, leader.score, g.best.unit) : null;
        const chips = configChipsOf(g.best.config, null, 4);
        const conditions = chips.filter((c) => c.kind === 'condition');
        rows.push(
          <tr key={`${bm.slug}:${m.metric}:${g.config_key}`}>
            <Td primary>
              <Link href={routes.benchmark(bm.slug) + `?metric=${encodeURIComponent(m.metric)}&config_key=${encodeURIComponent(g.config_key)}`} className="text-ink hover:text-accent hover:underline">
                {bm.name}
              </Link>
              <span className="block text-[11px] text-ink-3">
                {bm.category ?? ''}
                {bm.category ? ' · ' : ''}
                {g.comparability_group}
              </span>
            </Td>
            <Td num label="Best score" className="tnum">
              <Evidence slug={d.slug} property={`benchmark.${bm.slug}.${m.metric}`} value={g.best.score} display={fmtScoreUnit(g.best.score, g.best.unit)} label={`${bm.name} · ${m.metric}`} fallback={{ source_id: null, source_name: hostOf(g.best.source_url) ?? undefined, url: g.best.source_url, observed_at: g.best.observed_at, tier: g.best.tier, confidence: 'high', extractor: 'deterministic', unit: g.best.unit ?? undefined }} entity={{ name: d.name, entity_type: d.entity_type }} className="font-semibold">
                {fmtScoreUnit(g.best.score, g.best.unit)}
              </Evidence>
              {!g.higher_is_better && <span className="block text-[10px] text-ink-3">lower is better</span>}
            </Td>
            <Td label="Trust">
              <TrustBadge level={g.best.trust_level} label={g.best.trust_label} />
            </Td>
            <Td 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-ink-3">{DASH}</span>}
              </span>
              {conditions.length > 0 && <span className="block text-[10px] text-ink-3">conditions differ across rows → partially comparable</span>}
            </Td>
            <Td num label="Results" className="tnum text-ink-2">
              {fmtInt(g.n_rows)}
            </Td>
            <Td label="vs leader" className="tnum whitespace-nowrap">
              {leaderIsSelf ? (
                <span className="text-xs font-medium text-positive">current leader</span>
              ) : leader ? (
                <span title={`Leader: ${leader.model.name} ${fmtScoreUnit(leader.score, leader.unit)}`}>
                  <span className={cn('font-medium', delta?.startsWith('+') ? 'text-positive' : 'text-ink-2')}>{delta}</span>
                  <span className="block text-[11px] text-ink-3">vs {leader.model.name}</span>
                </span>
              ) : (
                <span className="text-xs text-ink-3" title="Leader delta is shown only for the benchmark's primary comparability group">
                  {isPrimary ? DASH : 'non-primary group'}
                </span>
              )}
            </Td>
            <Td label="Evaluated" className="tnum text-xs text-ink-2" title={g.best.evaluated_at ? undefined : `Observed ${fmtDate(g.best.observed_at)}; the source gave no evaluation date`}>
              {g.best.evaluated_at ? fmtDate(g.best.evaluated_at) : <span className="text-ink-3">obs. {fmtDate(g.best.observed_at)}</span>}
            </Td>
            <Td label="Source">
              <SourceCell url={g.best.source_url} tier={g.best.tier} />
            </Td>
          </tr>,
        );
      }
    }
  }
  return (
    <>
      <ScrollX><DataTable caption="Benchmark results grouped by comparability group" compact>
        <thead>
          <tr>
            <Th>Benchmark · group</Th>
            <Th num>Best score</Th>
            <Th>Trust</Th>
            <Th>Configuration</Th>
            <Th num>Results</Th>
            <Th>vs leader</Th>
            <Th>Evaluated</Th>
            <Th>Source</Th>
          </tr>
        </thead>
        <tbody>{rows}</tbody>
      </DataTable></ScrollX>
      <Note className="mt-3">
        {b.note ?? 'Current rows only, grouped by benchmark → canonical metric → comparability group.'} {fmtInt(b.total_rows)} current rows in total. “vs leader” compares with the current leader of the benchmark's primary group only; other groups are not directly comparable. <Link href="/methodology#benchmarks" className="link">Comparability rules →</Link>
      </Note>
    </>
  );
}

/* ------------------------------------------------------------------------------------------------------ hardware fit */

export function HardwareFitBlock({ rows, assumptions, modelSlug }: { rows: HardwareFitRow[]; assumptions?: string[]; modelSlug: string }) {
  if (!rows.length) return <EmptyState title="No hardware estimate available">Estimates need a parameter count; this model has none recorded from a source.</EmptyState>;
  const sorted = [...rows].sort((a, b) => Number(b.fits) - Number(a.fits) || (num(a.hardware.attributes?.memory_gb) ?? 0) - (num(b.hardware.attributes?.memory_gb) ?? 0));
  const fits = sorted.filter((r) => r.fits).length;
  return (
    <>
      <div className="mb-3 flex flex-wrap items-center gap-2">
        <Estimated />
        <p className="tnum text-sm text-ink-2">
          {fmtInt(fits)} of {fmtInt(sorted.length)} device × quantization combinations fit.
        </p>
        <Link href={`${routes.runLocally()}?model=${encodeURIComponent(modelSlug)}`} className="link text-sm">
          Run locally: your machine →
        </Link>
      </div>
      <ScrollX><DataTable caption="Estimated hardware fit" compact>
        <thead>
          <tr>
            <Th>Hardware</Th>
            <Th>Quantization</Th>
            <Th num>Device memory</Th>
            <Th num>Est. memory</Th>
            <Th>Fits</Th>
          </tr>
        </thead>
        <tbody>
          {sorted.map((r, i) => (
            <tr key={`${r.hardware.id}-${r.quantization}-${i}`}>
              <Td primary>
                <EntityLink e={r.hardware} />
              </Td>
              <Td label="Quantization" className="mono text-xs text-ink-2">
                {r.quantization}
              </Td>
              <Td num label="Device memory" className="tnum text-ink-2">
                {fmtGb(r.hardware.attributes?.memory_gb as never)}
              </Td>
              <Td num label="Est. memory" className="tnum">
                {fmtGb(r.estimated_memory_gb, 1)} <span className="text-[10px] uppercase tracking-wide text-warning">est.</span>
              </Td>
              <Td label="Fits" className={r.fits ? 'font-medium text-positive' : 'text-ink-3'}>
                {r.fits ? 'Yes' : 'No'}
              </Td>
            </tr>
          ))}
        </tbody>
      </DataTable></ScrollX>
      {assumptions && assumptions.length > 0 && (
        <details className="mt-3 text-xs text-ink-3">
          <summary className="cursor-pointer text-ink-2">Assumptions ({assumptions.length})</summary>
          <ul className="mt-1 list-disc space-y-0.5 pl-4">
            {assumptions.map((a) => (
              <li key={a}>{a}</li>
            ))}
          </ul>
        </details>
      )}
    </>
  );
}

/* ------------------------------------------------------------------------------------------------------ artifacts */

export function ArtifactsBlock({ d }: { d: ModelDetail }) {
  const groups = d.artifacts?.items ?? [];
  if (!groups.length) return <p className="text-sm text-ink-3">No artifact (checkpoint, quantisation, conversion or packaging) points to this model yet.</p>;
  return (
    <div className="space-y-4" data-artifacts-block>
      {groups.map((g) => (
        <div key={g.kind}>
          <p className="eyebrow mb-1">
            {g.kind}
            {g.count === 1 ? '' : 's'} <span className="tnum text-ink-3">{fmtInt(g.count)}</span>
          </p>
          <ul className="divide-y divide-rule border-y border-rule">
            {g.items.map((a) => {
              const at = a.attributes ?? {};
              return (
                <li key={a.id} className="grid grid-cols-[minmax(0,1fr)_auto] items-baseline gap-x-3 py-1.5 text-sm">
                  <span className="min-w-0">
                    <Link href={routes.artifact(a.slug)} className="text-ink hover:text-accent hover:underline">
                      {a.name}
                    </Link>
                    <span className="block truncate text-[11px] text-ink-3">
                      {a.organization?.name ?? ''}
                      {typeof at.quant_format === 'string' ? ` · ${String(at.quant_format).toUpperCase()}` : ''}
                      {Array.isArray(at.weights_dtype) && at.weights_dtype.length ? ` · ${(at.weights_dtype as string[]).join('/')}` : ''}
                      {num(at['metric.downloads']) !== null ? ` · ${fmtInt(at['metric.downloads'])} downloads` : ''}
                    </span>
                  </span>
                  <span className="tnum text-xs text-ink-2">{num(at.file_size_gb) !== null ? fmtGb(at.file_size_gb, 1) : DASH}</span>
                </li>
              );
            })}
            {g.count > g.items.length && <li className="py-1.5 text-xs text-ink-3">+{fmtInt(g.count - g.items.length)} more — see the graph.</li>}
          </ul>
        </div>
      ))}
    </div>
  );
}

/* ------------------------------------------------------------------------------------------------------ comparability legend (reused) */
export function ComparabilityLegend() {
  return (
    <p className="flex flex-wrap items-center gap-2 text-[11px] text-ink-3">
      <ComparabilityBadge level="comparable" /> same task and conditions · <ComparabilityBadge level="partially-comparable" /> same task, conditions differ (effort, temperature, judge) · <ComparabilityBadge level="not-comparable" /> different variant or metric
    </p>
  );
}