import { Check, Minus, X } from 'lucide-react';
import Link from 'next/link';
import type { ReactNode } from 'react';
import { Estimated } from '@/components/ui/badges';
import { Hint } from '@/components/ui/hint';
import { Note } from '@/components/ui/section';
import { cn } from '@/lib/cn';
import { fmtGb, fmtInt, fmtUsdPerM, num } from '@/lib/format';
import type { Fit, ModelLicence, Num, PriceDistribution, PriceDistributionStats } from '@/lib/types';

/*
  Small server-safe building blocks shared by the intelligence surfaces (frontier · prices · providers · open · run-locally …).
  Every number is passed in from the API; nothing here computes a score.
*/

/** Methodology footnote under a section: the API's own `methodology` / `note` string, never paraphrased into a claim. */
export function Methodology({ text, children, className }: { text?: string | null; children?: ReactNode; className?: string }) {
  if (!text && !children) return null;
  return (
    <Note className={cn('mt-3 max-w-4xl', className)}>
      <span className="eyebrow mr-1.5 text-[10px]">Method</span>
      {text}
      {children}{' '}
      <Link href="/methodology" className="text-ink-3 underline decoration-dotted hover:text-ink">
        /methodology
      </Link>
    </Note>
  );
}

/** Tiny min · p25 · median · p75 · max range bar on a log₁₀ axis shared by the whole column (`domain`). Amber = money. */
export function RangeBar({ d, domain, format = (v) => fmtUsdPerM(v), className, label }: { d: PriceDistributionStats | null | undefined; domain: [number, number]; format?: (v: number) => string; className?: string; label?: string }) {
  const min = num(d?.min);
  const p25 = num(d?.p25);
  const med = num(d?.median);
  const p75 = num(d?.p75);
  const max = num(d?.max);
  if (min === null || max === null || med === null) return <span className="text-xs text-ink-3">—</span>;
  const [lo, hi] = domain;
  const L = (v: number) => Math.log10(Math.max(v, lo));
  const pct = (v: number) => (hi === lo ? 50 : ((L(v) - L(lo)) / (L(hi) - L(lo))) * 100);
  const title = `${label ?? 'Distribution'}: min ${format(min)} · p25 ${p25 === null ? '—' : format(p25)} · median ${format(med)} · p75 ${p75 === null ? '—' : format(p75)} · max ${format(max)}${num(d?.n) !== null ? ` · n=${fmtInt(d?.n)}` : ''}`;
  return (
    <span className={cn('inline-flex items-center gap-2', className)} title={title} aria-label={title}>
      <span className="relative block h-3 w-24 shrink-0" aria-hidden>
        <span className="absolute inset-y-[5px] left-0 right-0 rounded-sm bg-surface-3" />
        <span className="absolute inset-y-[5px] rounded-sm bg-accent-2/60" style={{ left: `${pct(min)}%`, width: `${Math.max(1, pct(max) - pct(min))}%` }} />
        {p25 !== null && p75 !== null && <span className="absolute inset-y-[3px] rounded-sm bg-accent-2" style={{ left: `${pct(p25)}%`, width: `${Math.max(1.5, pct(p75) - pct(p25))}%` }} />}
        <span className="absolute inset-y-0 w-[2px] bg-ink" style={{ left: `calc(${pct(med)}% - 1px)` }} />
      </span>
      <span className="tnum text-xs text-ink-2">
        {format(med)} <span className="text-ink-3">med</span>
      </span>
    </span>
  );
}

/** Log-domain helper for a column of distributions. */
export function distDomain(items: (PriceDistributionStats | null | undefined)[]): [number, number] {
  const mins = items.map((d) => num(d?.min)).filter((v): v is number => v !== null && v > 0);
  const maxs = items.map((d) => num(d?.max)).filter((v): v is number => v !== null && v > 0);
  if (!mins.length || !maxs.length) return [0.01, 100];
  return [Math.min(...mins), Math.max(...maxs)];
}

/** Histogram of current offers by price bucket (from `/prices/index.distribution`). */
export function DistBars({ d, className }: { d: PriceDistribution | null | undefined; className?: string }) {
  const buckets = d?.buckets ?? [];
  const vals = buckets.map((b) => num(b.offers) ?? 0);
  const max = Math.max(1, ...vals);
  if (!buckets.length) return <p className={cn('text-xs text-ink-3', className)}>No distribution returned.</p>;
  return (
    <div className={className}>
      <ol className="flex h-28 items-end gap-1" role="img" aria-label={`Current offers by ${d?.metric ?? 'price'} bucket`}>
        {buckets.map((b, i) => {
          const v = vals[i] ?? 0;
          return (
            <li key={b.label} className="group relative flex min-w-0 flex-1 flex-col items-center justify-end" title={`${b.label}: ${fmtInt(v)} offers`}>
              <span className="tnum mb-0.5 text-[10px] text-ink-3">{v ? fmtInt(v) : ''}</span>
              <span className="block w-full rounded-t-[2px] bg-accent-2/80 group-hover:bg-accent-2" style={{ height: `${Math.max(2, (v / max) * 80)}px` }} />
            </li>
          );
        })}
      </ol>
      <ol className="mt-1 flex gap-1 border-t border-rule pt-1" aria-hidden>
        {buckets.map((b) => (
          <li key={b.label} className="tnum min-w-0 flex-1 truncate text-center text-[9px] text-ink-3 sm:text-[10px]">
            {b.label}
          </li>
        ))}
      </ol>
      <p className="tnum mt-1 text-xs text-ink-3">
        {fmtInt(d?.offers)} current offers · {d?.unit ?? 'USD per 1M tokens'} · {d?.metric?.replace(/_per_mtok$/, '').replace(/_/g, ' ')}
      </p>
    </div>
  );
}

/** Estimated fit result: ✓/✗ + estimated memory + headroom, always next to an `Estimated` label. `compact` for table cells. */
export function FitCell({ fit, compact = false, className }: { fit: Partial<Fit> | null | undefined; compact?: boolean; className?: string }) {
  if (!fit || fit.fits === null || fit.fits === undefined) return <span className={cn('text-xs text-ink-3', className)} aria-label="no estimate">—</span>;
  const mem = num(fit.estimated_memory_gb);
  const head = num(fit.headroom_gb);
  return (
    <span className={cn('tnum inline-flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-xs', className)}>
      <span className={fit.fits ? 'font-medium text-positive' : 'text-danger'}>{fit.fits ? '✓ fits' : '✗ too large'}</span>
      {mem !== null && <span className="text-ink-2">{fmtGb(mem, 1)}</span>}
      {!compact && head !== null && <span className="text-ink-3">{head >= 0 ? '+' : '−'}{fmtGb(Math.abs(head), 1)} headroom</span>}
      {fit.quantization && <span className="mono text-[10px] text-ink-3">{fit.quantization}</span>}
    </span>
  );
}

/** Fit breakdown (weights est./observed · KV cache + method · overhead · reserve) as a compact inline list. */
export function FitBreakdownList({ fit, className }: { fit: Fit; className?: string }) {
  const b = fit.breakdown;
  if (!b) return fit.note ? <p className={cn('text-xs text-ink-3', className)}>{fit.note}</p> : null;
  return (
    <ul className={cn('tnum flex flex-wrap gap-x-3 gap-y-0.5 text-[11px] text-ink-3', className)}>
      <li>
        weights <span className="text-ink-2">{fmtGb(b.weights_gb, 1)}</span> <SourceTag source={b.weights_source} />
      </li>
      <li>
        KV cache <span className="text-ink-2">{fmtGb(b.kv_cache_gb, 2)}</span> <span className="mono">({b.kv_cache_method})</span>
      </li>
      <li>
        overhead <span className="text-ink-2">{fmtGb(b.overhead_gb, 1)}</span>
      </li>
      <li>
        reserved <span className="text-ink-2">{fmtGb(b.reserved_gb, 0)}</span>
      </li>
      <li>
        context <span className="text-ink-2">{fmtInt(b.context)}</span> × batch {fmtInt(b.batch)}
      </li>
    </ul>
  );
}

/** "observed" (green, file size read from the artifact) vs "estimated" (dashed warning). */
export function SourceTag({ source }: { source: string | null | undefined }) {
  if (source === 'observed') return <span className="rounded-[3px] bg-positive-soft px-1 text-[10px] font-medium uppercase tracking-wide text-positive">observed</span>;
  return <span className="rounded-[3px] border border-dashed border-warning/60 px-1 text-[10px] font-medium uppercase tracking-wide text-warning">estimated</span>;
}

/** Banner above any table of estimates: label + the API assumptions (never our own wording). */
export function EstimateBanner({ assumptions, note, counts, className }: { assumptions?: string[]; note?: string | null; counts?: { fits?: Num; evaluated?: Num } | null; className?: string }) {
  return (
    <div className={cn('border-y border-rule py-3', className)} data-estimate-banner>
      <p className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
        <Estimated />
        <span className="font-semibold text-ink">All fit figures are estimates, not measurements.</span>
        {counts && num(counts.fits) !== null && num(counts.evaluated) !== null && (
          <span className="tnum text-ink-3">
            <span className="font-medium text-positive">{fmtInt(counts.fits)}</span> of {fmtInt(counts.evaluated)} evaluated models fit
          </span>
        )}
      </p>
      {note && <p className="mt-1.5 text-xs leading-relaxed text-ink-2">{note}</p>}
      {assumptions && assumptions.length > 0 && (
        <details className="mt-1.5 text-xs text-ink-3">
          <summary className="cursor-pointer select-none hover:text-ink">Assumptions ({assumptions.length})</summary>
          <ul className="mt-1 list-disc space-y-0.5 pl-5 leading-relaxed">
            {assumptions.map((a) => (
              <li key={a}>{a}</li>
            ))}
          </ul>
        </details>
      )}
    </div>
  );
}

/** Licence permission glyphs: commercial · redistribution · derivatives · hosting (✓ allowed · ✗ restricted · – unknown). */
export function LicencePerms({ l, className, withLabel = false }: { l: ModelLicence | null | undefined; className?: string; withLabel?: boolean }) {
  if (!l || l.key === null) {
    return (
      <span className={cn('inline-flex flex-wrap items-center gap-1 text-xs text-ink-3', className)} title={l && 'note' in l && l.note ? l.note : 'Licence not classified'}>
        {l?.raw ? <span className="max-w-[9rem] truncate text-ink-2">{l.raw}</span> : <span>—</span>}
        <span className="rounded-[3px] bg-surface-2 px-1 text-[10px] uppercase tracking-wide">unclassified</span>
      </span>
    );
  }
  const items: [string, boolean | null | undefined, boolean][] = [
    ['Commercial use', l.commercial_use, false],
    ['Redistribution', l.redistribution, false],
    ['Derivatives', l.derivatives, false],
    ['Hosting', l.hosting_restrictions === null || l.hosting_restrictions === undefined ? null : !l.hosting_restrictions, false],
  ];
  return (
    <span className={cn('inline-flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-xs', className)}>
      {withLabel && <span className="mr-1 truncate text-ink">{l.label ?? l.key}</span>}
      {!withLabel && <span className="mono mr-0.5 text-[11px] text-ink-2">{l.key}</span>}
      {items.map(([label, v]) => (
        <span key={label} className={cn('inline-flex size-4 items-center justify-center rounded-[3px]', v === true ? 'bg-positive-soft text-positive' : v === false ? 'bg-danger-soft text-danger' : 'bg-surface-2 text-ink-3')} title={`${label}: ${v === true ? 'allowed' : v === false ? 'restricted' : 'unknown'}`} aria-label={`${label}: ${v === true ? 'allowed' : v === false ? 'restricted' : 'unknown'}`}>
          {v === true ? <Check className="size-3" aria-hidden /> : v === false ? <X className="size-3" aria-hidden /> : <Minus className="size-3" aria-hidden />}
        </span>
      ))}
    </span>
  );
}
export function LicenceLegend({ className }: { className?: string }) {
  return (
    <span className={cn('flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-ink-3', className)}>
      <span>Permissions, in order:</span>
      <span>commercial use</span>
      <span>· redistribution</span>
      <span>· derivatives</span>
      <span>· hosting</span>
      <span className="inline-flex items-center gap-1">
        <span className="inline-flex size-3.5 items-center justify-center rounded-[2px] bg-positive-soft text-positive"><Check className="size-2.5" aria-hidden /></span> allowed
      </span>
      <span className="inline-flex items-center gap-1">
        <span className="inline-flex size-3.5 items-center justify-center rounded-[2px] bg-danger-soft text-danger"><X className="size-2.5" aria-hidden /></span> restricted
      </span>
      <span className="inline-flex items-center gap-1">
        <span className="inline-flex size-3.5 items-center justify-center rounded-[2px] bg-surface-2 text-ink-3"><Minus className="size-2.5" aria-hidden /></span> unknown
      </span>
    </span>
  );
}

/** Trust level chip (leaderboard rows). */
const TRUST_TONE: Record<string, string> = {
  'official-benchmark': 'bg-positive-soft text-positive',
  'peer-reviewed': 'bg-positive-soft text-positive',
  'independent-evaluator': 'bg-accent-soft text-accent',
  'official-model-card': 'bg-warning-soft text-warning',
  community: 'bg-surface-2 text-ink-2',
  unverified: 'bg-danger-soft text-danger',
};
export function TrustChip({ level, label, className }: { level: string | null | undefined; label?: string | null; className?: string }) {
  if (!level) return <span className={cn('text-xs text-ink-3', className)}>—</span>;
  return (
    <span className={cn('inline-flex items-center whitespace-nowrap rounded-[3px] px-1.5 py-[1px] text-[11px] font-medium leading-4', TRUST_TONE[level] ?? 'bg-surface-2 text-ink-2', className)} title={label ?? level}>
      {level.replace(/-/g, ' ')}
    </span>
  );
}

/** Rank chips "benchmark #n" (observed dimensions, never summed). */
export function RankChips({ ranks, max = 4, className }: { ranks: Record<string, number> | { benchmark: string; rank: number }[] | undefined | null; max?: number; className?: string }) {
  const arr = !ranks ? [] : Array.isArray(ranks) ? ranks : Object.entries(ranks).map(([benchmark, rank]) => ({ benchmark, rank }));
  const sorted = arr.slice().sort((a, b) => a.rank - b.rank);
  if (!sorted.length) return <span className={cn('text-xs text-ink-3', className)}>—</span>;
  return (
    <span className={cn('inline-flex flex-wrap gap-1', className)}>
      {sorted.slice(0, max).map((r) => (
        <Link key={r.benchmark} href={`/benchmarks/${encodeURIComponent(r.benchmark)}`} className="tnum inline-flex items-center gap-1 rounded-[3px] bg-surface-2 px-1.5 py-[1px] text-[11px] text-ink-2 hover:text-accent" title={`Rank ${r.rank} on ${r.benchmark} (primary comparability group)`}>
          <span className="truncate max-w-[7rem]">{r.benchmark}</span>
          <span className="font-medium text-ink">#{r.rank}</span>
        </Link>
      ))}
      {sorted.length > max && <span className="text-[11px] text-ink-3">+{sorted.length - max}</span>}
    </span>
  );
}

/** Column header with a sort link (keeps the rest of the URL). */
export function SortTh({ active, href, children, num: n, dir = 'asc' }: { active: boolean; href: string; children: ReactNode; num?: boolean; dir?: 'asc' | 'desc' }) {
  return (
    <th scope="col" className={cn(n && 'num')} aria-sort={active ? (dir === 'asc' ? 'ascending' : 'descending') : undefined}>
      <Link href={href} className={active ? 'text-ink' : 'hover:text-ink'}>
        {children}
        {active && <span aria-hidden> {dir === 'asc' ? '↑' : '↓'}</span>}
      </Link>
    </th>
  );
}

/** Label + definition tooltip pair used in rails and strips. */
export function Defined({ label, definition }: { label: ReactNode; definition?: string | null }) {
  return (
    <span className="inline-flex items-center gap-0.5">
      {label}
      {definition && <Hint text={definition} />}
    </span>
  );
}

/** Shared form control classes for the GET forms in rails. */
export const CTRL = 'h-11 lg:h-10 w-full border border-rule bg-surface px-2.5 text-sm text-ink focus:border-accent focus:outline-none';
export const CTRL_LG = 'h-11 w-full border border-rule bg-surface px-2.5 text-[15px] text-ink focus:border-accent focus:outline-none';
export const BTN_PRIMARY = 'inline-flex h-11 items-center justify-center gap-1.5 bg-ink px-4 text-sm font-medium text-canvas hover:opacity-90';
export const BTN_GHOST = 'inline-flex h-11 lg:h-10 items-center justify-center border border-rule px-3 text-sm text-ink-2 hover:border-rule-strong hover:text-ink';

/** Field wrapper for rail forms. */
export function Field({ label, children, hint, className }: { label: string; children: ReactNode; hint?: ReactNode; className?: string }) {
  return (
    <label className={cn('block min-w-0', className)}>
      <span className="eyebrow block pb-1">{label}</span>
      {children}
      {hint && <span className="mt-0.5 block text-[11px] text-ink-3">{hint}</span>}
    </label>
  );
}