import Link from 'next/link';
import { resolutionAction } from '@/lib/admin/actions';
import type { ResolutionDecision, ResolutionItem, ResolutionSide } from '@/lib/admin/types';
import { cn } from '@/lib/cn';
import { fmtDate, fmtInt, fmtParams, fmtPct, fmtTokens, num } from '@/lib/format';
import { routes } from '@/lib/site';
import { EntityBadge } from '@/components/ui/badges';
import { ActionButton, KindChip, Mono } from './ui';

/*
  One candidate pair, side by side (server component): every comparable field on one row, equal values dimmed, differing
  values highlighted; signals; six decisions as server-action forms. Direction matters for merge / variant_of /
  family_member: "A → B" means A is merged into (or becomes a variant / member of) B.
*/

type Row = { label: string; a: React.ReactNode; b: React.ReactNode; same: boolean };

function val(v: unknown): string {
  if (v === null || v === undefined || v === '') return '—';
  if (Array.isArray(v)) return v.length ? v.map(String).join(', ') : '—';
  return String(v);
}
function rowsFor(a: ResolutionSide, b: ResolutionSide): Row[] {
  const r = (label: string, fa: unknown, fb: unknown, fmt: (v: unknown) => React.ReactNode = val) => ({ label, a: fmt(fa), b: fmt(fb), same: JSON.stringify(fa ?? null) === JSON.stringify(fb ?? null) });
  const ids = (s: ResolutionSide) => s.identifiers?.map((i) => `${i.scheme}:${i.value}`) ?? [];
  const na = (s: ResolutionSide) => (s.name_analysis ?? {}) as Record<string, unknown>;
  return [
    r('Name', a.name, b.name),
    r('Slug', a.slug, b.slug, (v) => <Mono>{val(v)}</Mono>),
    r('Organization', a.organization, b.organization),
    r('Family', a.family, b.family),
    r('Parameters', a.parameter_count, b.parameter_count, (v) => fmtParams(v)),
    r('Active params', a.active_parameter_count, b.active_parameter_count, (v) => fmtParams(v)),
    r('Release date', a.release_date, b.release_date, (v) => (typeof v === 'string' ? fmtDate(v) : '—')),
    r('Architecture', a.architecture ?? a.model_type, b.architecture ?? b.model_type),
    r('Openness', a.openness, b.openness),
    r('Context', a.context_length, b.context_length, (v) => (num(v) === null ? '—' : fmtTokens(v))),
    r('HF repo', a.hf_repo, b.hf_repo, (v) => <Mono>{val(v)}</Mono>),
    r('Identifiers', ids(a), ids(b), (v) => (Array.isArray(v) && v.length ? <span className="flex flex-col">{v.map((x) => <Mono key={String(x)}>{String(x)}</Mono>)}</span> : '—')),
    r('Aliases', a.aliases, b.aliases, (v) => (Array.isArray(v) && v.length ? <span className="text-xs">{v.map(String).join(' · ')}</span> : '—')),
    r('Variant key', a.variant_key, b.variant_key, (v) => <Mono>{val(v)}</Mono>),
    r('Base key (name analysis)', na(a).base_key, na(b).base_key, (v) => <Mono>{val(v)}</Mono>),
    r('Is artifact (name analysis)', na(a).is_artifact, na(b).is_artifact, (v) => (v === true ? 'yes' : v === false ? 'no' : '—')),
    r('Identity confidence', a.identity_confidence, b.identity_confidence),
    r('Relations · sources · claims', [a.relations, a.sources, a.claims], [b.relations, b.sources, b.claims], (v) => (Array.isArray(v) ? <span className="tnum">{v.map((x) => fmtInt(x)).join(' · ')}</span> : '—')),
    r('Prices · results', [a.prices, a.results], [b.prices, b.results], (v) => (Array.isArray(v) ? <span className="tnum">{v.map((x) => fmtInt(x)).join(' · ')}</span> : '—')),
    r('First seen', a.first_seen_at, b.first_seen_at, (v) => (typeof v === 'string' ? fmtDate(v) : '—')),
  ];
}

const DECISION_LABEL: Record<ResolutionDecision, { label: string; tone: 'neutral' | 'accent' | 'danger' | 'positive'; title: string }> = {
  merge: { label: 'Merge', tone: 'danger', title: 'Merge A into B: aliases, identifiers, claims, relations and events move to B; A keeps resolving to B.' },
  alias: { label: 'Alias', tone: 'accent', title: 'Record A’s name as an alias of B without merging the rows.' },
  variant_of: { label: 'Variant of', tone: 'accent', title: 'A is an evaluation / effort variant of B (canonical_id = B), folded into B in the model universe.' },
  family_member: { label: 'Family member', tone: 'accent', title: 'A belongs to family B (B must be a model_family).' },
  keep_separate: { label: 'Keep separate', tone: 'positive', title: 'Two different entities: the pair stops being proposed.' },
  defer: { label: 'Defer', tone: 'neutral', title: 'Not now — keep the pair pending.' },
};
const DIRECTIONAL = new Set<ResolutionDecision>(['merge', 'alias', 'variant_of', 'family_member']);

function Side({ s, letter }: { s: ResolutionSide; letter: 'A' | 'B' }) {
  return (
    <div className="min-w-0">
      <p className="eyebrow">{letter}</p>
      <p className="flex flex-wrap items-center gap-1.5">
        <EntityBadge type={s.entity_type} small />
        <Link href={routes.entity(s)} className="truncate text-sm font-medium text-ink hover:text-accent hover:underline">
          {s.name}
        </Link>
      </p>
      <Mono title={s.id}>{s.id}</Mono>
    </div>
  );
}

export function ResolutionPair({ item, decisions, returnTo }: { item: ResolutionItem; decisions: ResolutionDecision[]; returnTo: string }) {
  const rows = rowsFor(item.a, item.b);
  const decided = item.decision ? (typeof item.decision === 'string' ? item.decision : item.decision.decision) : null;
  const sim = num(item.similarity);
  return (
    <article className="border border-rule" data-resolution-pair>
      <header className="flex flex-col gap-2 border-b border-rule bg-surface-2/50 px-3 py-2 md:flex-row md:items-center md:justify-between">
        <div className="flex flex-wrap items-center gap-2 text-xs">
          {item.signals.map((s, i) => (
            <KindChip key={i} value={s.kind} />
          ))}
          {sim !== null && <span className="tnum text-ink-2">similarity {fmtPct(sim * 100, 0)}</span>}
          {item.same_organization && <span className="text-positive">same organization</span>}
          {item.same_variant_key && <span className="text-accent">same variant key</span>}
          {item.hint && <span className="text-ink-3">· {item.hint}</span>}
        </div>
        {decided && (
          <span className="text-xs text-ink-2">
            decided: <Mono>{decided}</Mono>
          </span>
        )}
      </header>
      <div className="grid gap-4 p-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
        <Side s={item.a} letter="A" />
        <Side s={item.b} letter="B" />
      </div>
      <div className="overflow-x-auto">
        <table className="data-table compact w-full table-fixed" style={{ minWidth: '36rem' }}>
          <caption className="sr-only">Side by side</caption>
          <colgroup>
            <col style={{ width: '11rem' }} />
            <col />
            <col />
          </colgroup>
          <thead>
            <tr>
              <th scope="col">Field</th>
              <th scope="col">A</th>
              <th scope="col">B</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r) => (
              <tr key={r.label} className={cn(r.same && 'text-ink-3')}>
                <td className="text-xs text-ink-2">{r.label}</td>
                <td className={cn('break-words text-xs [overflow-wrap:anywhere]', !r.same && 'bg-warning-soft/40 text-ink')} style={{ whiteSpace: 'normal' }}>{r.a}</td>
                <td className={cn('break-words text-xs [overflow-wrap:anywhere]', !r.same && 'bg-warning-soft/40 text-ink')} style={{ whiteSpace: 'normal' }}>{r.b}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {!decided && (
        <footer className="border-t border-rule px-3 py-2">
          <p className="mb-2 text-[11px] text-ink-3">Directional decisions read A → B (A merged into / variant of / member of B). Use the second row to apply them the other way round.</p>
          <div className="flex flex-wrap items-center gap-1.5">
            {decisions.map((d) => (
              <form key={d} action={resolutionAction} className="inline">
                <input type="hidden" name="a" value={item.a.id} />
                <input type="hidden" name="b" value={item.b.id} />
                <input type="hidden" name="decision" value={d} />
                <input type="hidden" name="return" value={returnTo} />
                <ActionButton tone={DECISION_LABEL[d]?.tone ?? 'neutral'} title={DECISION_LABEL[d]?.title}>
                  {DECISION_LABEL[d]?.label ?? d}
                  {DIRECTIONAL.has(d) ? ' A → B' : ''}
                </ActionButton>
              </form>
            ))}
          </div>
          <div className="mt-1.5 flex flex-wrap items-center gap-1.5">
            {decisions.filter((d) => DIRECTIONAL.has(d)).map((d) => (
              <form key={`${d}-rev`} action={resolutionAction} className="inline">
                <input type="hidden" name="a" value={item.b.id} />
                <input type="hidden" name="b" value={item.a.id} />
                <input type="hidden" name="decision" value={d} />
                <input type="hidden" name="return" value={returnTo} />
                <ActionButton tone="neutral" title={`${DECISION_LABEL[d]?.title} (reversed)`}>
                  {DECISION_LABEL[d]?.label ?? d} B → A
                </ActionButton>
              </form>
            ))}
          </div>
        </footer>
      )}
    </article>
  );
}