import { SignificanceBadge } from '@/components/ui/badges';
import { Note } from '@/components/ui/section';
import { cn } from '@/lib/cn';
import { fmtPct } from '@/lib/format';
import type { BlockDelta, DiffPayload } from '@/lib/types';

/** Block-level diff (added / removed / modified with before → after text), significance meter and reasons. */
export function DiffViewer({ diff, significance, className }: { diff: DiffPayload; significance?: number | null; className?: string }) {
  const total = diff.added.length + diff.removed.length + diff.modified.length;
  return (
    <div className={cn('space-y-5', className)} data-diff-viewer>
      <div className="grid gap-4 md:grid-cols-[minmax(0,1fr)_minmax(0,1.4fr)]">
        <div>
          <p className="eyebrow">Significance</p>
          <div className="mt-1 flex items-center gap-3">
            <div className="meter flex-1">
              <span style={{ width: `${Math.round((significance ?? 0) * 100)}%`, background: (significance ?? 0) >= 0.65 ? 'var(--warning)' : (significance ?? 0) >= 0.4 ? 'var(--accent)' : 'var(--ink-3)' }} />
            </div>
            <SignificanceBadge value={significance} />
          </div>
          <p className="tnum mt-2 text-xs text-ink-3">
            text delta {fmtPct(diff.text_delta_ratio, 1, true)} · similarity {fmtPct(diff.similarity, 1, true)} · {diff.counts.unchanged !== undefined ? `${diff.counts.unchanged} unchanged blocks` : `${total} changed blocks`}
          </p>
          <div className="mt-2 flex flex-wrap gap-3 text-xs">
            <span className="text-positive">+{diff.added.length} added</span>
            <span className="text-danger">−{diff.removed.length} removed</span>
            <span className="text-warning">~{diff.modified.length} modified</span>
            {diff.moved.length > 0 && <span className="text-ink-3">↕ {diff.moved.length} moved</span>}
          </div>
        </div>
        <div>
          <p className="eyebrow">Why it scored this way</p>
          {diff.reasons.length ? (
            <ul className="mt-1 space-y-0.5 text-sm text-ink-2">
              {diff.reasons.map((r) => (
                <li key={r}>· {r}</li>
              ))}
            </ul>
          ) : (
            <Note className="mt-1">No reasons recorded for this diff.</Note>
          )}
        </div>
      </div>

      {total === 0 ? (
        <Note>No block-level differences above the noise floor between these versions.</Note>
      ) : (
        <div className="space-y-4">
          {diff.added.length > 0 && <Group label="Added" items={diff.added} kind="added" />}
          {diff.removed.length > 0 && <Group label="Removed" items={diff.removed} kind="removed" />}
          {diff.modified.length > 0 && <Group label="Modified" items={diff.modified} kind="modified" />}
        </div>
      )}
    </div>
  );
}

function Group({ label, items, kind }: { label: string; items: BlockDelta[]; kind: 'added' | 'removed' | 'modified' }) {
  return (
    <section>
      <p className="eyebrow mb-1.5">
        {label} <span className="tnum normal-case tracking-normal text-ink-3">({items.length})</span>
      </p>
      <ul className="space-y-2">
        {items.map((b) => (
          <li key={`${kind}-${b.key}`} className={cn('diff-block', kind)}>
            <p className="mono mb-1 flex flex-wrap items-center gap-2 text-[10px] text-ink-3">
              <span className="uppercase tracking-wider">{b.kind}</span>
              <span className="truncate">{b.path}</span>
              <span className="ml-auto tnum">w {b.weight.toFixed(2)}{b.similarity !== null ? ` · sim ${b.similarity.toFixed(2)}` : ''}</span>
            </p>
            {kind === 'modified' ? (
              <>
                <p className="diff-before">{b.before}</p>
                <p className="diff-after mt-1">{b.after}</p>
              </>
            ) : (
              <p className={kind === 'removed' ? 'diff-before' : 'diff-after'}>{kind === 'removed' ? b.before : b.after}</p>
            )}
          </li>
        ))}
      </ul>
    </section>
  );
}