'use client';
import { LayoutList, Table2 } from 'lucide-react';
import Link from 'next/link';
import { useMemo, useState } from 'react';
import { Evidence } from '@/components/evidence/evidence';
import { ComparabilityBadge, OpennessChip, TrustBadge } from '@/components/models/badges';
import { fmtScoreUnit, opennessLabel } from '@/components/models/shared';
import { Chip, TierBadge } from '@/components/ui/badges';
import { EntityLink } from '@/components/ui/entity';
import { Hint } from '@/components/ui/hint';
import { Note } from '@/components/ui/section';
import { cn } from '@/lib/cn';
import { DASH, fmtAgo, fmtDate, fmtTokens, fmtUsdPerM, fmtValue, hostOf, num } from '@/lib/format';
import { routes } from '@/lib/site';
import type { CompareDimension11, ComparePayload11, ProvenanceEntry } from '@/lib/types';
import { CompareButton } from './compare-button';

/*
  Compare 3.0 (client): row groups × sticky entity headers, "hide identical rows" (default on when ≥ 3 entities), use-case chips that
  reorder and emphasise relevant rows (never a winner), per-cell evidence, mobile horizontal scroll with sticky first column or stacked cards.
  Data is fetched server-side (`/compare`, `diff_only` is a URL parameter); this component only arranges it.
*/

type Group = { id: string; label: string; test: (d: CompareDimension11) => boolean };
const GROUPS: Group[] = [
  { id: 'overview', label: 'Overview', test: (d) => ['release_date', 'status', 'family', 'version', 'openness', 'organization', 'kind', 'website', 'pricing_url', 'model_count', 'category', 'manufacturer', 'latest_version', 'language'].includes(d.key) },
  { id: 'architecture', label: 'Architecture', test: (d) => /parameter_count|architecture|is_moe|num_experts|tokenizer|memory_gb|memory_type|bandwidth|tdp|tflops|compute/.test(d.key) },
  { id: 'context', label: 'Context', test: (d) => /context_length|max_output_tokens|knowledge_cutoff|training_data_cutoff/.test(d.key) },
  { id: 'capabilities', label: 'Capabilities', test: (d) => /modalit|reasoning|tool_calling|structured_output|vision|audio|fine_tuning|features|languages|runtimes/.test(d.key) },
  { id: 'benchmarks', label: 'Benchmarks', test: (d) => d.key.startsWith('bench:') || d.source === 'results' },
  { id: 'pricing', label: 'Pricing', test: (d) => d.source === 'prices' || /per_mtok|provider_count|price/.test(d.key) },
  { id: 'license', label: 'License', test: (d) => /license|licence/.test(d.key) },
  { id: 'history', label: 'History', test: () => false },
];
const USE_CASES: { id: string; label: string; match: RegExp; groups: string[] }[] = [
  { id: 'coding', label: 'Coding', match: /swe-bench|aider|livebench-coding|livebench-agentic|scicode|humaneval|livecodebench|terminal-bench|tool_calling|structured_output/i, groups: ['benchmarks', 'capabilities'] },
  { id: 'reasoning', label: 'Reasoning', match: /gpqa|humanitys-last-exam|aime|math|arc-agi|livebench-reasoning|livebench-math|reasoning|intelligence-index/i, groups: ['benchmarks', 'capabilities'] },
  { id: 'agentic', label: 'Agentic', match: /tau|terminal-bench|agentic|tool_calling|max_output_tokens/i, groups: ['benchmarks', 'capabilities', 'context'] },
  { id: 'long_context', label: 'Long context', match: /context_length|max_output_tokens|knowledge_cutoff/i, groups: ['context'] },
  { id: 'vision', label: 'Vision', match: /mmmu|vision|modalit/i, groups: ['capabilities', 'benchmarks'] },
  { id: 'low_cost', label: 'Low-cost', match: /per_mtok|provider_count|active_parameter/i, groups: ['pricing', 'architecture'] },
  { id: 'local', label: 'Local', match: /parameter_count|openness|license|is_moe|memory/i, groups: ['architecture', 'license', 'overview'] },
  { id: 'embeddings', label: 'Embeddings', match: /mteb|embedding|dimension/i, groups: ['benchmarks', 'capabilities'] },
];

function groupOf(d: CompareDimension11): string {
  return GROUPS.find((g) => g.test(d))?.id ?? 'overview';
}
const LOWER_BETTER = /per_mtok|tdp|price|latency/;

function fmtCell(v: unknown, dim: CompareDimension11): string {
  if (v === null || v === undefined || v === '' || (Array.isArray(v) && v.length === 0)) return 'Unavailable';
  switch (dim.kind) {
    case 'date':
      return fmtDate(String(v));
    case 'bool':
      return v ? 'Yes' : 'No';
    case 'list':
      return (Array.isArray(v) ? v : [v]).map((x) => (typeof x === 'object' && x ? JSON.stringify(x) : String(x))).join(', ');
    case 'number':
      if (/per_mtok/.test(dim.key)) return fmtUsdPerM(v);
      if (dim.key.startsWith('bench:')) return fmtScoreUnit(num(v), dim.unit ?? null);
      if (/context_length|max_output_tokens/.test(dim.key)) return `${fmtTokens(v)} tokens`;
      return fmtValue(v, dim.key);
    default:
      if (dim.key === 'openness') return opennessLabel(v);
      return typeof v === 'string' ? v : fmtValue(v, dim.key);
  }
}
const sameValue = (vals: unknown[]) => {
  const norm = vals.map((v) => JSON.stringify(v ?? null));
  return norm.every((n) => n === norm[0]);
};

export function CompareTerminal({ res, diffOnly }: { res: ComparePayload11; diffOnly: boolean }) {
  const n = res.items.length;
  const [hideIdentical, setHideIdentical] = useState(n >= 3);
  const [useCase, setUseCase] = useState<string | null>(null);
  const [layout, setLayout] = useState<'table' | 'stack'>('table');
  const uc = USE_CASES.find((u) => u.id === useCase) ?? null;
  const isModel = res.entity_type === 'model';

  const rows = useMemo(() => {
    const byGroup = new Map<string, CompareDimension11[]>();
    for (const d of res.dimensions) {
      const g = groupOf(d);
      byGroup.set(g, [...(byGroup.get(g) ?? []), d]);
    }
    // History rows synthesised from the entity summaries (first seen · release · last change).
    const historyDims: CompareDimension11[] = [
      { key: '_first_seen', label: 'First seen in AI Atlas', kind: 'date', source: 'entity' },
      { key: '_last_change', label: 'Last change', kind: 'date', source: 'entity' },
    ];
    byGroup.set('history', historyDims);
    let order = GROUPS.map((g) => g.id);
    if (uc) order = [...uc.groups, ...order.filter((g) => !uc.groups.includes(g))];
    return order.map((id) => ({ id, label: GROUPS.find((g) => g.id === id)?.label ?? id, dims: (byGroup.get(id) ?? []).slice().sort((a, b) => (uc ? Number(uc.match.test(b.key) || uc.match.test(b.label)) - Number(uc.match.test(a.key) || uc.match.test(a.label)) : 0)) })).filter((g) => g.dims.length);
  }, [res.dimensions, uc]);

  const valueOf = (d: CompareDimension11, it: ComparePayload11['items'][number]) => {
    if (d.key === '_first_seen') return it.entity.first_seen_at || null;
    if (d.key === '_last_change') return it.entity.updated_at || null;
    return it.values[d.key];
  };
  const provenanceOf = (d: CompareDimension11, it: ComparePayload11['items'][number]): ProvenanceEntry | null => {
    const p = it.provenance?.[d.key];
    if (p) return p;
    if (d.key.startsWith('bench:') && d.benchmark) {
      const r = (it.results ?? []).find((x) => x.benchmark.slug === d.benchmark && (!d.metric || x.metric === d.metric));
      if (r) return { source_id: null, source_name: hostOf(r.source_url) ?? undefined, url: r.source_url, observed_at: r.observed_at, tier: r.tier, confidence: r.confidence, extractor: 'deterministic', unit: r.unit ?? undefined };
    }
    if (d.source === 'prices') {
      const best = [...(it.prices ?? [])].sort((a, b) => (num(a.output_per_mtok) ?? Infinity) - (num(b.output_per_mtok) ?? Infinity))[0];
      if (best) return { source_id: null, source_name: hostOf(best.source_url) ?? best.provider.name, url: best.source_url, observed_at: best.observed_at, tier: best.tier, confidence: 'high', extractor: 'deterministic', unit: 'USD / 1M tokens' };
    }
    return null;
  };
  const propertyOf = (d: CompareDimension11) => (d.key.startsWith('bench:') && d.benchmark ? `benchmark.${d.benchmark}.${d.metric ?? ''}` : d.key.replace(/^_/, ''));

  let shownRows = 0;
  let hiddenRows = 0;
  const body = rows.map((g) => {
    const dims = g.dims.filter((d) => {
      const vals = res.items.map((it) => valueOf(d, it));
      const identical = sameValue(vals);
      if (hideIdentical && identical && g.id !== 'history') {
        hiddenRows++;
        return false;
      }
      return true;
    });
    shownRows += dims.length;
    return { ...g, dims };
  }).filter((g) => g.dims.length);

  const cellFor = (d: CompareDimension11, it: ComparePayload11['items'][number], best: number | null, emph: boolean) => {
    const v = valueOf(d, it);
    const text = fmtCell(v, d);
    const p = provenanceOf(d, it);
    const isBest = best !== null && num(v) === best;
    const canOpen = v !== null && v !== undefined && v !== '' && d.source !== 'entity';
    return (
      <div className={cn('min-w-0', d.kind === 'number' && 'tnum')}>
        {canOpen ? (
          <Evidence slug={it.entity.slug} property={propertyOf(d)} value={v} display={text} unit={d.unit} fallback={p} entity={{ name: it.entity.name, entity_type: it.entity.entity_type }} className={cn('block text-left whitespace-normal', isBest && 'font-semibold text-ink', emph && 'text-accent')}>
            {d.key === 'openness' && typeof v === 'string' ? <OpennessChip openness={v} /> : d.kind === 'list' ? <span className="flex flex-wrap gap-1">{(Array.isArray(v) ? v : [v]).map((x, i) => <Chip key={i}>{String(x)}</Chip>)}</span> : text}
          </Evidence>
        ) : (
          <span className={cn(text === 'Unavailable' && 'text-ink-3')}>{text}</span>
        )}
        {p && (
          <span className="mt-0.5 hidden items-center gap-1 text-[10.5px] leading-4 text-ink-3 md:flex">
            <TierBadge tier={p.tier} /> <span className="max-w-[9rem] truncate">{p.source_name ?? hostOf(p.url) ?? 'source'}</span> · {fmtAgo(p.observed_at)}
          </span>
        )}
      </div>
    );
  };
  const bestOf = (d: CompareDimension11) => {
    if (d.kind !== 'number' || d.source === 'entity') return null;
    const nums = res.items.map((it) => num(valueOf(d, it))).filter((x): x is number => x !== null);
    if (nums.length < 2) return null;
    const lower = d.higher_is_better === false || (d.higher_is_better === undefined && LOWER_BETTER.test(d.key));
    return lower ? Math.min(...nums) : Math.max(...nums);
  };
  const rowLabel = (d: CompareDimension11) => {
    const comp = res.comparability?.[d.key];
    return (
      <>
        {d.key.startsWith('bench:') && d.benchmark ? (
          <Link href={routes.benchmark(d.benchmark) + (d.metric && d.config_key ? `?metric=${encodeURIComponent(d.metric)}&config_key=${encodeURIComponent(d.config_key)}` : '')} className="text-ink hover:text-accent hover:underline">
            {d.label.split(' · ')[0]}
          </Link>
        ) : (
          <span className="text-ink">{d.label}</span>
        )}
        {(d.unit || d.key.startsWith('bench:')) && <span className="block text-[10.5px] text-ink-3">{d.key.startsWith('bench:') ? d.label.split(' · ').slice(1).join(' · ') : d.unit}</span>}
        {comp && (
          <span className="mt-0.5 flex flex-wrap items-center gap-1">
            <ComparabilityBadge level={comp.level} reasons={comp.reasons} short />
            {comp.reasons?.length ? <Hint text={comp.reasons.join('; ')} /> : null}
            {[...new Set(Object.values(comp.trust ?? {}).map((t) => t.level))].map((lvl) => (
              <TrustBadge key={lvl} level={lvl} />
            ))}
          </span>
        )}
      </>
    );
  };
  const emphasised = (d: CompareDimension11) => !!uc && (uc.match.test(d.key) || uc.match.test(d.label));
  const ROW_TH = { whiteSpace: 'normal', textTransform: 'none', letterSpacing: 0, fontSize: '0.8125rem', fontWeight: 400 } as const;
  const wide = n <= 3 ? 'md:overflow-visible' : 'xl:overflow-visible';
  const stickyTop = n <= 3 ? 'md:sticky md:top-[var(--header-h)] md:z-20' : 'xl:sticky xl:top-[var(--header-h)] xl:z-20';

  return (
    <div className="space-y-4" data-compare-terminal>
      {/* controls */}
      <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm">
        <label className="inline-flex min-h-9 items-center gap-2 text-ink-2">
          <input type="checkbox" checked={hideIdentical} onChange={(e) => setHideIdentical(e.target.checked)} className="size-4 accent-[var(--accent)]" data-hide-identical /> Hide identical rows
        </label>
        <Link href={`?ids=${res.items.map((i) => encodeURIComponent(i.entity.slug)).join(',')}${diffOnly ? '' : '&diff_only=1'}${res.entity_type !== 'model' ? `&mode=${res.entity_type}s` : ''}`} className={cn('inline-flex h-8 items-center border px-2.5 text-xs', diffOnly ? 'border-ink bg-ink text-canvas' : 'border-rule text-ink-2 hover:text-ink')} aria-pressed={diffOnly} data-diff-only>
          Differences only {diffOnly ? '· on' : ''}
        </Link>
        <span className="ml-auto inline-flex items-center gap-1 lg:hidden">
          <button type="button" onClick={() => setLayout('table')} aria-pressed={layout === 'table'} className={cn('inline-flex size-9 items-center justify-center border', layout === 'table' ? 'border-ink text-ink' : 'border-rule text-ink-3')} aria-label="Table layout">
            <Table2 className="size-4" aria-hidden />
          </button>
          <button type="button" onClick={() => setLayout('stack')} aria-pressed={layout === 'stack'} className={cn('inline-flex size-9 items-center justify-center border', layout === 'stack' ? 'border-ink text-ink' : 'border-rule text-ink-3')} aria-label="Stacked cards layout">
            <LayoutList className="size-4" aria-hidden />
          </button>
        </span>
      </div>
      {isModel && (
        <div className="flex flex-wrap items-center gap-1.5" role="group" aria-label="Use case emphasis" data-use-cases>
          <span className="eyebrow mr-1">Emphasise</span>
          {USE_CASES.map((u) => (
            <button key={u.id} type="button" onClick={() => setUseCase(useCase === u.id ? null : u.id)} aria-pressed={useCase === u.id} className={cn('inline-flex h-8 items-center border px-2.5 text-xs whitespace-nowrap', useCase === u.id ? 'border-accent bg-accent-soft text-accent' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink')}>
              {u.label}
            </button>
          ))}
          {uc && <span className="text-[11px] text-ink-3">Relevant rows first and highlighted — no score is combined, no winner is declared.</span>}
        </div>
      )}

      {/* ------------------------------------------------------------------------------------------ table layout */}
      <div className={cn(layout === 'stack' && 'hidden lg:block')}>
        <div className={cn('table-scroll scrollbar-thin relative', wide)}>
          <table className="data-table compare-matrix compact" data-compare-table>
            <caption className="sr-only">Comparison of {n} entities</caption>
            <thead>
              <tr>
                <th scope="col" className={cn('sticky left-0 z-30 w-[9rem] min-w-[9rem] bg-canvas md:w-[13rem] md:min-w-[13rem]', stickyTop)} style={{ whiteSpace: 'normal' }}>
                  Dimension
                </th>
                {res.items.map((it) => (
                  <th key={it.entity.id} scope="col" className={cn('min-w-[10rem] bg-canvas align-top', stickyTop)} style={{ whiteSpace: 'normal' }}>
                    <span className="flex flex-col items-start gap-1 normal-case tracking-normal">
                      <EntityLink e={it.entity} className="text-sm font-semibold" />
                      {it.entity.organization && <span className="text-[11px] font-normal text-ink-3">{it.entity.organization.name}</span>}
                      <span className="flex items-center gap-1">
                        <CompareButton e={it.entity} size="sm" label="Add" />
                        {isModel && n === 2 && <Link href={`/models/${encodeURIComponent(res.items[0]!.entity.slug)}/diff/${encodeURIComponent(res.items[1]!.entity.slug)}`} className="inline-flex h-7 items-center border border-rule px-1.5 text-xs font-normal text-ink-2 hover:text-ink">Diff</Link>}
                      </span>
                    </span>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {body.map((g) => (
                <GroupRows key={g.id} label={g.label} cols={n + 1}>
                  {g.dims.map((d) => {
                    const best = bestOf(d);
                    const emph = emphasised(d);
                    return (
                      <tr key={d.key} className={cn(emph && 'bg-accent-soft/25')} data-dim={d.key}>
                        <th scope="row" className="sticky left-0 z-10 bg-canvas text-left" style={ROW_TH}>
                          {rowLabel(d)}
                        </th>
                        {res.items.map((it) => (
                          <td key={it.entity.id} className="align-top" style={{ whiteSpace: 'normal' }}>
                            {cellFor(d, it, best, emph)}
                          </td>
                        ))}
                      </tr>
                    );
                  })}
                </GroupRows>
              ))}
              {isModel && <PricingRows res={res} n={n} />}
              {isModel && (
                <GroupRows label="Hardware fit" cols={n + 1}>
                  <tr>
                    <th scope="row" className="sticky left-0 z-10 bg-canvas text-left" style={ROW_TH}>
                      Estimated memory
                      <span className="block text-[10.5px] text-warning">estimated</span>
                    </th>
                    {res.items.map((it) => (
                      <td key={it.entity.id} className="align-top text-xs text-ink-3" style={{ whiteSpace: 'normal' }}>
                        {num(it.entity.attributes?.parameter_count) === null ? 'No parameter count — not estimable' : <Link href={`${routes.entity(it.entity)}#hardware-fit`} className="link">Per-device estimates →</Link>}
                      </td>
                    ))}
                  </tr>
                </GroupRows>
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* ------------------------------------------------------------------------------------------ stacked layout (mobile) */}
      {layout === 'stack' && (
        <div className="space-y-6 lg:hidden" data-compare-stack>
          {res.items.map((it) => (
            <section key={it.entity.id} className="border-t border-rule pt-3">
              <h3 className="flex flex-wrap items-center gap-2 text-[15px] font-semibold">
                <EntityLink e={it.entity} /> {it.entity.organization && <span className="text-xs font-normal text-ink-3">{it.entity.organization.name}</span>}
              </h3>
              {body.map((g) => (
                <div key={g.id} className="mt-3">
                  <p className="eyebrow mb-1">{g.label}</p>
                  <dl className="kv [&>div]:grid-cols-[7.5rem_minmax(0,1fr)] [&>div]:py-1">
                    {g.dims.map((d) => (
                      <div key={d.key} className={cn(emphasised(d) && 'bg-accent-soft/25')}>
                        <dt className="text-[12px]">{d.label.split(' · ')[0]}</dt>
                        <dd className="text-[13px]">{cellFor(d, it, bestOf(d), emphasised(d))}</dd>
                      </div>
                    ))}
                  </dl>
                </div>
              ))}
            </section>
          ))}
        </div>
      )}

      <Note>
        {shownRows} rows shown{hiddenRows ? `, ${hiddenRows} identical hidden` : ''}. Bold = best number in a row (highest; lowest for prices) — a reading aid, not a verdict. Benchmarks appear only when every entity has a current result in the same comparability group. {res.note ?? ''} Click any value for its evidence.
      </Note>
    </div>
  );
}

function GroupRows({ label, cols, children }: { label: string; cols: number; children: React.ReactNode }) {
  return (
    <>
      <tr className="group-row">
        <th colSpan={cols} scope="colgroup" className="sticky left-0 !border-b-0 bg-canvas pt-4 text-left text-[11px] tracking-[0.1em] text-ink-3">
          {label}
        </th>
      </tr>
      {children}
    </>
  );
}

/** Cheapest current deployment per provider × entity (from the compare payload's prices). */
function PricingRows({ res, n }: { res: ComparePayload11; n: number }) {
  const providers = new Map<string, { slug: string; name: string; entity_type: string }>();
  const per = res.items.map((it) => {
    const m = new Map<string, { input: number | null; output: number | null; observed: string; url: string | null; tier: number }>();
    for (const p of it.prices ?? []) {
      providers.set(p.provider.slug, p.provider);
      const cur = m.get(p.provider.slug) ?? { input: null, output: null, observed: p.observed_at, url: p.source_url, tier: p.tier };
      const i = num(p.input_per_mtok);
      const o = num(p.output_per_mtok);
      if (i !== null && (cur.input === null || i < cur.input)) cur.input = i;
      if (o !== null && (cur.output === null || o < cur.output)) cur.output = o;
      m.set(p.provider.slug, cur);
    }
    return m;
  });
  if (!providers.size) return null;
  const rows = [...providers.values()].sort((a, b) => a.name.localeCompare(b.name));
  return (
    <GroupRows label="Pricing · cheapest deployment per provider (USD / 1M in / out)" cols={n + 1}>
      {rows.map((prov) => (
        <tr key={prov.slug}>
          <th scope="row" className="sticky left-0 z-10 bg-canvas text-left" style={{ whiteSpace: 'normal', textTransform: 'none', letterSpacing: 0, fontSize: '0.8125rem', fontWeight: 400 }}>
            <EntityLink e={prov} />
          </th>
          {per.map((m, i) => {
            const b = m.get(prov.slug);
            return (
              <td key={res.items[i]!.entity.id} className="tnum align-top" style={{ whiteSpace: 'normal' }}>
                {b ? (
                  <>
                    <span className="text-accent-2">
                      {fmtUsdPerM(b.input)} <span className="text-ink-3">/</span> {fmtUsdPerM(b.output)}
                    </span>
                    <span className="mt-0.5 hidden items-center gap-1 text-[10.5px] text-ink-3 md:flex">
                      <TierBadge tier={b.tier} /> {b.url ? <a href={b.url} target="_blank" rel="noopener noreferrer" className="max-w-[9rem] truncate hover:text-accent">{hostOf(b.url)}</a> : null} · {fmtAgo(b.observed)}
                    </span>
                  </>
                ) : (
                  <span className="text-ink-3">{DASH}</span>
                )}
              </td>
            );
          })}
        </tr>
      ))}
    </GroupRows>
  );
}