import { Chip, TierBadge } from '@/components/ui/badges';
import { DataTable, Td, Th } from '@/components/ui/data-table';
import { EntityLink } from '@/components/ui/entity';
import { Note } from '@/components/ui/section';
import { cn } from '@/lib/cn';
import { fmtAgo, fmtDate, fmtScore, fmtUsdPerM, fmtValue, num } from '@/lib/format';
import { routes } from '@/lib/site';
import type { BenchmarkResult, CompareDimension, ComparePayload, Price, ProvenanceEntry } from '@/lib/types';
import { CompareButton } from './compare-button';

/* ------------------------------------------------------------------------------------------------------ helpers */

const PRICE_KEYS = new Set(['best_input_per_mtok', 'best_output_per_mtok', 'min_input_per_mtok', 'min_output_per_mtok']);
/** Numeric dimensions where lower is better. */
function lowerIsBetter(key: string): boolean {
  return PRICE_KEYS.has(key) || /tdp|price|latency/.test(key);
}

function host(url: string | null | undefined): string | null {
  if (!url) return null;
  try {
    return new URL(url).hostname.replace(/^www\./, '');
  } catch {
    return null;
  }
}

/** Compact per-cell provenance: T1 · host · 3 h ago (full text in title). */
function CellProvenance({ p }: { p: ProvenanceEntry }) {
  const h = p.source_name ?? host(p.url) ?? 'source';
  return (
    <span className="mt-0.5 hidden items-center gap-1 text-[11px] leading-4 text-ink-3 md:flex">
      <TierBadge tier={p.tier} />
      {p.url ? (
        <a href={p.url} target="_blank" rel="noopener noreferrer" className="max-w-[10rem] truncate hover:text-accent">
          {h}
        </a>
      ) : (
        <span className="max-w-[10rem] truncate">{h}</span>
      )}
      <span>· {fmtAgo(p.observed_at)}</span>
    </span>
  );
}

function CellValue({ v, dim }: { v: unknown; dim: CompareDimension }) {
  if (v === null || v === undefined || v === '' || (Array.isArray(v) && v.length === 0)) return <span className="text-ink-3">Unavailable</span>;
  switch (dim.kind) {
    case 'date':
      return <>{fmtDate(String(v))}</>;
    case 'bool':
      return <>{v ? 'Yes' : 'No'}</>;
    case 'list': {
      const arr = Array.isArray(v) ? v : [v];
      return (
        <span className="flex flex-wrap gap-1">
          {arr.map((x, i) => (
            <Chip key={i}>{typeof x === 'object' && x ? JSON.stringify(x) : String(x)}</Chip>
          ))}
        </span>
      );
    }
    case 'number':
      if (PRICE_KEYS.has(dim.key)) return <span className="text-accent-2">{fmtUsdPerM(v)}</span>;
      return <>{fmtValue(v, dim.key)}</>;
    default:
      return <>{typeof v === 'string' ? v : fmtValue(v, dim.key)}</>;
  }
}

const STICKY = 'sticky left-0 z-10 bg-canvas';
/** First-column width: table layout ignores max-width, so set width + min-width explicitly. */
const FIRST = 'w-[9rem] min-w-[9rem] md:w-[12rem] md:min-w-[12rem]';
/** `.table-scroll td { white-space: nowrap }` out-specifies utilities — wrap the first column inline. */
const WRAP = { whiteSpace: 'normal' } as const;

/** Horizontal scroll wrapper without the negative page margins (so the sticky column pins at the very left edge). */
function ScrollTable({ children, caption, className }: { children: React.ReactNode; caption: string; className?: string }) {
  return (
    <div className="table-scroll">
      <DataTable stack={false} caption={caption} className={className}>
        {children}
      </DataTable>
    </div>
  );
}

function EntityHead({ e }: { e: ComparePayload['items'][number]['entity'] }) {
  return (
    <span className="flex flex-col items-start gap-1 normal-case tracking-normal">
      <EntityLink e={e} className="text-sm font-semibold whitespace-normal" />
      {e.organization && <span className="text-[11px] font-normal text-ink-3">{e.organization.name}</span>}
      <CompareButton e={e} size="sm" label="Add" />
    </span>
  );
}

/* ------------------------------------------------------------------------------------------------------ matrix */

/** Dimension × entity matrix: sticky first column, horizontal scroll, kind-aware formatting, per-cell provenance. */
export function CompareMatrix({ res }: { res: ComparePayload }) {
  return (
    <>
      <ScrollTable caption="Comparison matrix" className="compare-matrix">
        <thead>
          <tr>
            <Th className={cn(STICKY, FIRST)} style={WRAP}>Dimension</Th>
            {res.items.map((it) => (
              <Th key={it.entity.id} className="min-w-[10rem] align-top">
                <EntityHead e={it.entity} />
              </Th>
            ))}
          </tr>
        </thead>
        <tbody>
          {res.dimensions.map((dim) => {
            const nums = res.items.map((it) => num(it.values[dim.key]));
            const present = nums.filter((n): n is number => n !== null);
            const best = dim.kind === 'number' && present.length > 1 ? (lowerIsBetter(dim.key) ? Math.min(...present) : Math.max(...present)) : null;
            return (
              <tr key={dim.key}>
                <Td className={cn(STICKY, FIRST, 'text-ink-2')} style={WRAP}>
                  {dim.label}
                  {dim.unit && <span className="block text-[11px] text-ink-3">{dim.unit}</span>}
                </Td>
                {res.items.map((it, i) => {
                  const v = it.values[dim.key];
                  const p = it.provenance?.[dim.key];
                  const isBest = best !== null && nums[i] === best;
                  return (
                    <Td key={it.entity.id} className={cn('align-top', dim.kind === 'number' && 'tnum', dim.kind === 'list' && 'whitespace-normal')} title={p ? `${p.source_name ?? host(p.url) ?? ''} · tier ${p.tier} · ${fmtDate(p.observed_at)}` : undefined}>
                      <span className={cn('block', isBest && 'font-semibold text-ink')}>
                        <CellValue v={v} dim={dim} />
                      </span>
                      {p && <CellProvenance p={p} />}
                    </Td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </ScrollTable>
      <Note className="mt-3">Bold marks the best number in a row (highest, or lowest for prices); it is not a verdict. Each value carries its own source and tier; hover a cell for the observation date. Missing values are shown as unavailable, never estimated.</Note>
    </>
  );
}

/* ------------------------------------------------------------------------------------------------------ shared benchmarks */

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(' · ');
}

/** Benchmarks with a current result for every compared model (best result per model per benchmark). */
export function SharedBenchmarks({ res }: { res: ComparePayload }) {
  const perItem = res.items.map((it) => {
    const m = new Map<string, BenchmarkResult>();
    for (const r of it.results ?? []) {
      const prev = m.get(r.benchmark.slug);
      if (!prev || (r.higher_is_better === false ? r.score < prev.score : r.score > prev.score)) m.set(r.benchmark.slug, r);
    }
    return m;
  });
  const first = perItem[0];
  const shared = first ? [...first.values()].filter((r) => perItem.every((m) => m.has(r.benchmark.slug))) : [];
  const anyResults = res.items.some((it) => (it.results?.length ?? 0) > 0);
  if (shared.length === 0)
    return (
      <p className="text-sm text-ink-3">
        {anyResults ? 'No benchmark has a published result for every compared model.' : 'No benchmark results recorded for these models.'} Per-model results are on each model page (Benchmarks tab).
      </p>
    );
  shared.sort((a, b) => a.benchmark.name.localeCompare(b.benchmark.name));
  return (
    <>
      <ScrollTable caption="Shared benchmark results">
        <thead>
          <tr>
            <Th className={cn(STICKY, FIRST)} style={WRAP}>Benchmark</Th>
            {res.items.map((it) => (
              <Th key={it.entity.id} className="min-w-[8rem]">
                <EntityLink e={it.entity} className="text-sm font-semibold normal-case tracking-normal whitespace-normal" />
              </Th>
            ))}
          </tr>
        </thead>
        <tbody>
          {shared.map((row) => {
            const cells = perItem.map((m) => m.get(row.benchmark.slug) ?? null);
            const scores = cells.map((c) => (c ? c.score : null)).filter((s): s is number => s !== null);
            const best = scores.length > 1 ? (row.higher_is_better === false ? Math.min(...scores) : Math.max(...scores)) : null;
            return (
              <tr key={row.benchmark.slug}>
                <Td className={cn(STICKY, FIRST, 'text-ink-2')} style={WRAP}>
                  <EntityLink e={row.benchmark} />
                  <span className="block text-[11px] text-ink-3">
                    {row.metric ?? '—'}
                    {row.higher_is_better === false ? ' · lower is better' : ''}
                  </span>
                </Td>
                {cells.map((c, i) => (
                  <Td key={res.items[i]!.entity.id} className="tnum align-top" title={c ? configSummary(c.config) || undefined : undefined}>
                    {c ? (
                      <>
                        <span className={cn('block', best !== null && c.score === best && 'font-semibold text-ink')}>
                          {fmtScore(c.score)}
                          {c.unit === '%' ? '%' : c.unit ? <span className="text-ink-3"> {c.unit}</span> : ''}
                        </span>
                        <span className="mt-0.5 hidden items-center gap-1 text-[11px] text-ink-3 md:flex">
                          <TierBadge tier={c.tier} />
                          <span className="max-w-[10rem] truncate">{configSummary(c.config) || (c.evaluated_at ? fmtDate(c.evaluated_at) : '')}</span>
                        </span>
                      </>
                    ) : (
                      <span className="text-ink-3">—</span>
                    )}
                  </Td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </ScrollTable>
      <Note className="mt-3">Only benchmarks with a result for every compared model are shown (best current result per model). Configurations may differ — hover a score for its config; scores under different configs are not strictly comparable.</Note>
    </>
  );
}

/* ------------------------------------------------------------------------------------------------------ prices */

type Best = { input: number | null; output: number | null; observed: string; url: string | null; tier: number };

/** Provider × entity: cheapest current input / output per provider for each compared model. */
export function ComparePrices({ res }: { res: ComparePayload }) {
  const providers = new Map<string, Price['provider']>();
  const perItem = res.items.map((it) => {
    const m = new Map<string, Best>();
    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 inp = num(p.input_per_mtok);
      const out = num(p.output_per_mtok);
      if (inp !== null && (cur.input === null || inp < cur.input)) cur.input = inp;
      if (out !== null && (cur.output === null || out < cur.output)) cur.output = out;
      if (p.observed_at > cur.observed) cur.observed = p.observed_at;
      m.set(p.provider.slug, cur);
    }
    return m;
  });
  if (providers.size === 0) return <p className="text-sm text-ink-3">No current prices recorded for these models.</p>;
  const rows = [...providers.values()].sort((a, b) => a.name.localeCompare(b.name));
  const bestOverall = res.items.map((_, i) => {
    let best: number | null = null;
    for (const b of perItem[i]!.values()) if (b.input !== null && (best === null || b.input < best)) best = b.input;
    return best;
  });
  return (
    <>
      <ScrollTable caption="Best current prices per provider (USD per 1M tokens)">
        <thead>
          <tr>
            <Th className={cn(STICKY, FIRST)} style={WRAP}>Provider</Th>
            {res.items.map((it) => (
              <Th key={it.entity.id} className="min-w-[9rem]">
                <EntityLink e={it.entity} className="text-sm font-semibold normal-case tracking-normal whitespace-normal" />
                <span className="block text-[10px] font-normal text-ink-3">in / out per 1M</span>
              </Th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((prov) => (
            <tr key={prov.slug}>
              <Td className={cn(STICKY, FIRST)} style={WRAP}>
                <EntityLink e={prov} />
              </Td>
              {perItem.map((m, i) => {
                const b = m.get(prov.slug);
                if (!b) return <Td key={res.items[i]!.entity.id} className="text-ink-3">—</Td>;
                const cheapest = bestOverall[i] !== null && b.input === bestOverall[i];
                return (
                  <Td key={res.items[i]!.entity.id} className="tnum align-top" title={`observed ${fmtDate(b.observed)}`}>
                    <span className={cn('block text-accent-2', cheapest && 'font-semibold')}>
                      {fmtUsdPerM(b.input)} <span className="text-ink-3">/</span> {fmtUsdPerM(b.output)}
                    </span>
                    <span className="mt-0.5 hidden items-center gap-1 text-[11px] text-ink-3 md:flex">
                      <TierBadge tier={b.tier} />
                      {b.url ? (
                        <a href={b.url} target="_blank" rel="noopener noreferrer" className="max-w-[10rem] truncate hover:text-accent">
                          {host(b.url)}
                        </a>
                      ) : null}
                      <span>· {fmtAgo(b.observed)}</span>
                    </span>
                  </Td>
                );
              })}
            </tr>
          ))}
        </tbody>
      </ScrollTable>
      <Note className="mt-3">
        Cheapest current input / output price of each provider for each model, as published on the provider's pricing page (USD per 1M tokens). Bold = the model's cheapest provider. Full tables and history on each model page, or the <a href={routes.prices()} className="link">price index</a>.
      </Note>
    </>
  );
}