'use client';

// ── Code Tab (Phase 4) ────────────────────────────────────────────────────────
// Shows a live source diff for the selected component based on pending style
// edits, with hunk-level accept/reject, Send-to-Agent, and Realtime status.
// Extracted from Inspector.tsx as per spec SOURCE-AWARE-CANVAS.md Phase 2.
//
// Phase 4 additions:
//   • diffIndicators: 'bars'  — gutter bar change indicators
//   • lineAnnotations         — token match badges on addition lines
//   • renderAnnotation        — renders the token key pill
//   • onTokenEnter/Leave      — hover tooltip showing matched design token
//   • rejectedHunks Set       — tracks explicitly rejected hunks
//   • allRejected guard       — disables Send-to-Agent when all hunks rejected

import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
import { useVirtualizer } from '@tanstack/react-virtual';
import { useCanvas } from '@/store/canvas';
import { useHistory } from '@/store/history';
import { useDiffs } from '@/hooks/useDiffs';
import { useIndexer } from '@/hooks/useIndexer';
import { useCanvasTheme } from '@/store/canvasTheme';
import { generatePatch } from '@originmain/diff-engine';
import type { PropChange } from '@originmain/diff-engine';
import type { FiberNode } from '@originmain/renderer';
import type { IntentDiff } from '@originmain/origin-graph';
import { FileDiff as PierreDiff } from '@pierre/diffs/react';
import type { DiffLineAnnotation } from '@pierre/diffs/react';
import { processFile, diffAcceptRejectHunk } from '@pierre/diffs';
import type { FileDiffMetadata } from '@pierre/diffs';
import { resolveValueToToken } from '@originmain/design-language';
import { browserClient } from '@/lib/supabase';
import type { SupabaseClient } from '@supabase/supabase-js';

// ── Helpers ────────────────────────────────────────────────────────────────────

/**
 * Best-effort application of PropChange values to a source file string.
 * Searches for `propKey: oldValue` patterns and replaces with new values.
 */
function applyChangesToSource(source: string, changes: PropChange[]): string {
  let result = source;
  for (const change of changes) {
    if (change.before === undefined || change.before === change.after) continue;
    const escapedBefore = String(change.before).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    const re = new RegExp(`(${change.key}\\s*:\\s*)${escapedBefore}`, 'g');
    result = result.replace(re, `$1${String(change.after)}`);
  }
  return result;
}

// ── Sub-components ─────────────────────────────────────────────────────────────

const STATUS_COLOR: Record<string, string> = {
  DRAFT:    '#FFBA7B',
  REVIEWED: '#7EB8FF',
  APPLIED:  '#7DD3A8',
  REJECTED: '#FF8080',
};

export function SavedDiffRow({ diff }: { diff: IntentDiff }) {
  const T = useCanvasTheme();
  const changes = diff.changes as { propChanges?: PropChange[]; styleChanges?: PropChange[] } | null;
  const count   = (changes?.propChanges?.length ?? 0) + (changes?.styleChanges?.length ?? 0);
  const color   = STATUS_COLOR[diff.status] ?? T.dim;
  return (
    <div style={{ marginBottom: 8, padding: '6px 8px', background: T.bgDeep, borderRadius: 6 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 2 }}>
        <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '0.5625rem', color }}>
          {diff.status}
        </span>
        <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '0.5rem', color: T.dim }}>
          {count} change{count !== 1 ? 's' : ''}
        </span>
      </div>
      {diff.aggregate_summary && (
        <span style={{ fontFamily: 'sans-serif', fontSize: '0.625rem', color: T.fgMuted, lineHeight: 1.4, display: 'block' }}>
          {diff.aggregate_summary}
        </span>
      )}
    </div>
  );
}

export function DiffChangeRow({ change }: { change: PropChange }) {
  const isRemoved  = change.changeType === 'removed';
  const isAdded    = change.changeType === 'added';
  const isModified = change.changeType === 'modified';

  const rows: Array<{ op: 'del' | 'add'; text: string }> = [];
  if (isModified) {
    rows.push({ op: 'del', text: `− ${change.key}: ${change.before}` });
    rows.push({ op: 'add', text: `+ ${change.key}: ${change.after}` });
  } else if (isRemoved) {
    rows.push({ op: 'del', text: `− ${change.key}: ${change.before}` });
  } else if (isAdded) {
    rows.push({ op: 'add', text: `+ ${change.key}: ${change.after}` });
  }

  return (
    <>
      {rows.map((r, i) => (
        <div
          key={i}
          style={{
            fontFamily: "'JetBrains Mono', ui-monospace, monospace",
            fontSize: '0.625rem', padding: '4px 8px',
            borderRadius: 4, marginBottom: 3, lineHeight: 1.55,
            background: r.op === 'del' ? 'rgba(255,70,70,0.08)' : 'rgba(70,220,120,0.08)',
            color:      r.op === 'del' ? '#FF8080' : '#7DDBA0',
            borderLeft: `2px solid ${r.op === 'del' ? 'rgba(255,80,80,0.3)' : 'rgba(70,220,120,0.3)'}`,
          }}
        >
          {r.text}
        </div>
      ))}
    </>
  );
}

// ── HunkList — virtualised list of hunk accept/reject controls ────────────────
// Uses @tanstack/react-virtual so even a 1 000-hunk diff won't freeze the panel.
// Each row is ~26px high; overscan=3 keeps the list feeling instant on scroll.

interface HunkListProps {
  hunks: FileDiffMetadata['hunks'];
  allRejected: boolean;
  fileDiff: FileDiffMetadata;
  handleRejectHunk: (renderedIdx: number) => void;
  setFileDiff: (d: FileDiffMetadata) => void;
}

function HunkList({ hunks, allRejected, fileDiff, handleRejectHunk, setFileDiff }: HunkListProps) {
  const T = useCanvasTheme();
  const scrollRef = useRef<HTMLDivElement>(null);

  const virtualizer = useVirtualizer({
    count: hunks.length,
    getScrollElement: () => scrollRef.current,
    estimateSize: () => 26,
    overscan: 3,
  });

  return (
    <div
      style={{
        padding: '8px 12px', borderTop: `1px solid ${T.border}`,
        display: 'flex', flexDirection: 'column', gap: 5,
      }}
    >
      <span style={{
        fontFamily: "'JetBrains Mono', monospace", fontSize: '0.5rem',
        color: T.dim, letterSpacing: '0.07em', textTransform: 'uppercase', marginBottom: 2,
      }}>
        {hunks.length} hunk{hunks.length !== 1 ? 's' : ''}
        {allRejected && <span style={{ color: '#FF8080', marginLeft: 6 }}>— all rejected</span>}
      </span>

      {/* Scrollable virtual container — capped at 160px so it doesn't crowd the diff */}
      <div ref={scrollRef} style={{ maxHeight: 160, overflowY: 'auto' }}>
        <div style={{ height: virtualizer.getTotalSize(), position: 'relative' }}>
          {virtualizer.getVirtualItems().map((vItem) => (
            <div
              key={vItem.index}
              data-index={vItem.index}
              ref={virtualizer.measureElement}
              style={{
                position: 'absolute', top: 0, left: 0, width: '100%',
                transform: `translateY(${vItem.start}px)`,
                display: 'flex', alignItems: 'center', gap: 5, paddingBottom: 4,
              }}
            >
              <span style={{
                fontFamily: "'JetBrains Mono', monospace", fontSize: '0.5rem',
                color: T.fgMuted, flex: 1,
              }}>
                Hunk {vItem.index + 1}
              </span>
              <button
                onClick={() => setFileDiff(diffAcceptRejectHunk(fileDiff, vItem.index, 'accept'))}
                style={{
                  fontFamily: "'JetBrains Mono', monospace", fontSize: '0.5rem',
                  color: '#7DD3A8', background: 'rgba(125,211,168,0.08)',
                  border: '1px solid rgba(125,211,168,0.28)', borderRadius: 3,
                  padding: '2px 7px', cursor: 'pointer',
                }}
              >
                accept
              </button>
              <button
                onClick={() => handleRejectHunk(vItem.index)}
                style={{
                  fontFamily: "'JetBrains Mono', monospace", fontSize: '0.5rem',
                  color: '#FF6B6B', background: 'rgba(255,107,107,0.08)',
                  border: '1px solid rgba(255,107,107,0.28)', borderRadius: 3,
                  padding: '2px 7px', cursor: 'pointer',
                }}
              >
                reject
              </button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Main CodeTab component ─────────────────────────────────────────────────────

interface CodeTabProps {
  componentId:   string | null;
  componentData: FiberNode | null;
  artboardId:    string | null;
}

// ── Token annotation metadata shape ───────────────────────────────────────────
interface TokenAnnotationMeta {
  tokenKey:  string;
  tokenName: string;
}

export function CodeTab({ componentId, componentData, artboardId }: CodeTabProps) {
  const T = useCanvasTheme();
  const {
    indexerStatus, undoStyleEdit, patchStyleEdit,
    designLanguageTokens, artboardRootFontSize,
  } = useCanvas();
  const { stacks }    = useHistory();
  const { fetchFile } = useIndexer();
  const { createDiff } = useDiffs(artboardId);

  const [diffStyle,   setDiffStyle]   = useState<'split' | 'unified'>('split');
  const [fileDiff,    setFileDiff]    = useState<FileDiffMetadata | null>(null);
  const [patchStr,    setPatchStr]    = useState<string>('');
  const [isLoading,   setIsLoading]   = useState(false);
  const [diffError,   setDiffError]   = useState<string | null>(null);
  const [isSending,   setIsSending]   = useState(false);
  const [exportedId,  setExportedId]  = useState<string | null>(null);
  const [intentRtStatus, setIntentRtStatus] = useState<string | null>(null);

  // ── Phase 4: rejection tracking ───────────────────────────────────────────
  // rejectedHunks tracks each explicit hunk rejection; size compared against
  // initialHunkCount to determine when all hunks have been dismissed.
  const [rejectedHunks, setRejectedHunks] = useState<Set<number>>(new Set());
  const [initialHunkCount, setInitialHunkCount] = useState(0);
  // Monotonically incrementing ID so each rejection inserts a unique entry.
  const rejectionIdRef = useRef(0);

  // ── Phase 4: token hover tooltip ──────────────────────────────────────────
  const [tokenTooltip, setTokenTooltip] = useState<{
    tokenKey: string; tokenName: string; x: number; y: number;
  } | null>(null);

  const tokens        = designLanguageTokens ?? [];
  const rootFontSizePx = artboardId ? (artboardRootFontSize[artboardId] ?? 16) : 16;

  const artboardHistory = artboardId
    ? (stacks[artboardId] ?? { past: [], future: [] })
    : { past: [], future: [] };
  const pendingChanges = artboardHistory.past
    .flatMap(e => e.changes)
    .filter(c => c.changeType !== 'unchanged');

  // ── Generate diff ──────────────────────────────────────────────────────────
  useEffect(() => {
    if (!componentData?.callSite || indexerStatus !== 'ready' || pendingChanges.length === 0) {
      setFileDiff(null);
      setPatchStr('');
      return;
    }
    let cancelled = false;
    setIsLoading(true);
    setDiffError(null);

    void (async () => {
      try {
        const filePath     = componentData.callSite!.fileName.replace(/\\/g, '/');
        const sourceContent = await fetchFile(filePath).catch(() => null);

        let patch: string;
        if (sourceContent) {
          const afterContent = applyChangesToSource(sourceContent, pendingChanges);
          patch = generatePatch(sourceContent, afterContent, { filename: filePath });
        } else {
          const beforeText = pendingChanges.map(c => `  ${c.key}: ${String(c.before)},`).join('\n');
          const afterText  = pendingChanges.map(c => `  ${c.key}: ${String(c.after)},`).join('\n');
          patch = generatePatch(beforeText, afterText, { filename: filePath });
        }

        if (cancelled || !patch) return;
        const parsed = processFile(patch);
        if (!cancelled) {
          setFileDiff(parsed ?? null);
          setPatchStr(patch);
          // Reset rejection tracking when a fresh diff arrives.
          setRejectedHunks(new Set());
          rejectionIdRef.current = 0;
          setInitialHunkCount(parsed?.hunks?.length ?? 0);
        }
      } catch (err) {
        if (!cancelled) setDiffError(err instanceof Error ? err.message : 'Diff generation failed');
      } finally {
        if (!cancelled) setIsLoading(false);
      }
    })();

    return () => { cancelled = true; };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [componentData?.callSite?.fileName, pendingChanges.length, indexerStatus, fetchFile]);

  // ── Realtime — watch intent_diffs for agent status ─────────────────────────
  useEffect(() => {
    if (!exportedId) return;
    const db = browserClient() as unknown as SupabaseClient;
    const channel = db
      .channel(`code_tab_intent_${exportedId}`)
      .on(
        'postgres_changes',
        { event: 'UPDATE', schema: 'public', table: 'intent_diffs', filter: `id=eq.${exportedId}` },
        (payload: { new: Record<string, unknown> }) => {
          const status = payload.new['status'];
          if (typeof status === 'string') setIntentRtStatus(status);
        },
      )
      .subscribe();
    return () => { void db.removeChannel(channel); };
  }, [exportedId]);

  // ── Cmd+Z undo ─────────────────────────────────────────────────────────────
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'z' && !e.shiftKey) {
        const undone = undoStyleEdit();
        if (undone) {
          e.preventDefault();
          patchStyleEdit(undone.artboardId, undone.nodeId, undone.property, undone.previousValue);
        }
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [undoStyleEdit, patchStyleEdit]);

  // ── Empty state ────────────────────────────────────────────────────────────
  if (!componentId) {
    return (
      <div style={{ padding: '32px 20px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, textAlign: 'center' }}>
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" style={{ opacity: 0.22 }}>
          <polyline points="7,9 2,14 7,19"   stroke="white" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
          <polyline points="21,9 26,14 21,19" stroke="white" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
          <line x1="16" y1="6" x2="12" y2="22" stroke="white" strokeWidth="1.4" strokeLinecap="round"/>
        </svg>
        <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '0.5625rem', color: T.dim, letterSpacing: '0.04em', lineHeight: 1.6 }}>
          Select a component to<br/>view its source
        </span>
      </div>
    );
  }

  const filePath  = componentData?.callSite?.fileName?.replace(/\\/g, '/') ?? null;
  const shortPath = filePath ? filePath.split('/').slice(-2).join('/') : null;
  const hunkCount = fileDiff?.hunks?.length ?? 0;

  // ── Phase 4: allRejected guard ────────────────────────────────────────────
  // True when the user has explicitly dismissed every hunk via "reject".
  // Prevents sending an empty diff to the agent.
  const allRejected = initialHunkCount > 0 && rejectedHunks.size >= initialHunkCount;

  // ── Phase 4: per-hunk reject handler ─────────────────────────────────────
  const handleRejectHunk = useCallback((renderedIdx: number) => {
    const id = rejectionIdRef.current++;
    setRejectedHunks(prev => new Set([...prev, id]));
    setFileDiff(prev => prev ? diffAcceptRejectHunk(prev, renderedIdx, 'reject') : null);
  }, []);

  // ── Phase 4: line annotations (token match badges on addition lines) ──────
  // For each hunk that is not yet rejected, find the first pending change
  // whose new value resolves to a known design token and annotate the first
  // addition line of that hunk with the token key/name.
  const lineAnnotations = useMemo<DiffLineAnnotation<TokenAnnotationMeta>[]>(() => {
    if (!fileDiff || !tokens.length) return [];

    const annotations: DiffLineAnnotation<TokenAnnotationMeta>[] = [];

    fileDiff.hunks.forEach((hunk) => {
      for (const change of pendingChanges) {
        const cssValue = String(change.after ?? '').trim();
        if (!cssValue) continue;
        const match = resolveValueToToken(cssValue, tokens, rootFontSizePx);
        if (match) {
          annotations.push({
            side: 'additions',
            lineNumber: hunk.additionStart,
            metadata: { tokenKey: match.token.key, tokenName: match.token.name },
          });
          break; // one annotation per hunk
        }
      }
    });

    return annotations;
  }, [fileDiff, tokens, pendingChanges, rootFontSizePx]);

  // ── Phase 4: annotation renderer ─────────────────────────────────────────
  // Renders the token key as a small pill badge in the diff gutter annotation slot.
  const renderAnnotation = useCallback(
    (annotation: DiffLineAnnotation<TokenAnnotationMeta>): React.ReactNode => {
      if (!annotation.metadata) return null;
      return (
        <span
          title={annotation.metadata.tokenName}
          style={{
            display: 'inline-flex', alignItems: 'center',
            padding: '1px 5px', borderRadius: 3, flexShrink: 0, whiteSpace: 'nowrap',
            background: 'rgba(125,211,168,0.10)',
            border: '1px solid rgba(125,211,168,0.28)',
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: '0.45rem', color: '#7DD3A8', letterSpacing: '0.04em', lineHeight: 1.2,
          }}
        >
          {annotation.metadata.tokenKey}
        </span>
      );
    },
    [],
  );

  async function handleSendToAgent() {
    if (!artboardId || !fileDiff || pendingChanges.length === 0 || isSending) return;
    setIsSending(true);
    try {
      const result = await createDiff.mutateAsync({
        artboard_id:       artboardId,
        changes:           { propChanges: pendingChanges, styleChanges: [] },
        aggregate_summary: `Code diff — ${componentData?.name ?? componentId} (${pendingChanges.length} change${pendingChanges.length !== 1 ? 's' : ''})`,
        status:            'EXPORTED',
        session_id:        '',
        exported_code:     patchStr || null,
      });
      setExportedId(result.id);
      setIntentRtStatus('EXPORTED');
    } catch { /* mutation error shown via createDiff.isError */ }
    finally { setIsSending(false); }
  }

  const rtColour =
    intentRtStatus === 'IMPLEMENTED' ? '#7DD3A8' :
    intentRtStatus === 'BLOCKED'     ? '#FF6B6B' : '#FFBA7B';
  const rtBg =
    intentRtStatus === 'IMPLEMENTED' ? 'rgba(125,211,168,0.10)' :
    intentRtStatus === 'BLOCKED'     ? 'rgba(255,107,107,0.10)' : 'rgba(255,186,123,0.10)';
  const rtBorder =
    intentRtStatus === 'IMPLEMENTED' ? 'rgba(125,211,168,0.30)' :
    intentRtStatus === 'BLOCKED'     ? 'rgba(255,107,107,0.30)' : 'rgba(255,186,123,0.30)';
  const rtLabel =
    intentRtStatus === 'IMPLEMENTED' ? '✓ Implemented by agent' :
    intentRtStatus === 'BLOCKED'     ? '✗ Blocked — check agent output' :
    intentRtStatus ?? '';

  const canSend = !!fileDiff && !isSending && pendingChanges.length > 0 && !allRejected;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>

      {/* ── Header ────────────────────────────────────────────────────────── */}
      <div style={{
        padding: '9px 12px', borderBottom: `1px solid ${T.border}`,
        flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 7,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '0.5625rem', color: T.fgMuted, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {shortPath ?? '—'}
            {componentData?.callSite?.lineNumber != null && (
              <span style={{ color: T.dim }}>:{componentData.callSite.lineNumber}</span>
            )}
          </span>
          <span
            title={indexerStatus === 'ready' ? 'CLI indexer ready' : indexerStatus === 'indexing' ? 'Indexing…' : 'CLI indexer offline'}
            style={{
              display: 'inline-block', width: 5, height: 5, borderRadius: '50%', flexShrink: 0,
              background: indexerStatus === 'ready' ? '#7DD3A8' : indexerStatus === 'indexing' ? '#FFBA7B' : T.dim,
              boxShadow: indexerStatus === 'ready' ? '0 0 5px rgba(125,211,168,0.7)' : 'none',
              transition: 'background 0.25s',
            }}
          />
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
          <span style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: '0.5625rem',
            color: T.accent, background: T.accentBg,
            border: `1px solid ${T.accent}33`, borderRadius: 4, padding: '1px 6px',
            overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 100,
          }}>
            {componentData?.name ?? componentId}
          </span>
          <span style={{ flex: 1 }} />
          {(['split', 'unified'] as const).map(s => (
            <button
              key={s}
              onClick={() => setDiffStyle(s)}
              style={{
                fontFamily: "'JetBrains Mono', monospace", fontSize: '0.5rem',
                letterSpacing: '0.04em', textTransform: 'uppercase',
                color: diffStyle === s ? T.accent : T.dim,
                background: diffStyle === s ? T.accentBg : 'transparent',
                border: `1px solid ${diffStyle === s ? T.accent + '44' : 'transparent'}`,
                borderRadius: 3, padding: '2px 6px', cursor: 'pointer',
                transition: 'color 0.15s, background 0.15s',
              }}
            >
              {s}
            </button>
          ))}
        </div>
      </div>

      {/* ── Diff viewer ───────────────────────────────────────────────────── */}
      <div style={{ flex: 1, overflow: 'auto', minHeight: 0 }}>
        {indexerStatus !== 'ready' ? (
          <div style={{ padding: '20px 14px' }}>
            <div style={{ padding: '10px 12px', background: 'rgba(255,186,123,0.06)', border: '1px solid rgba(255,186,123,0.2)', borderRadius: 7 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 6 }}>
                <div style={{ width: 5, height: 5, borderRadius: '50%', background: '#FFBA7B', flexShrink: 0 }} />
                <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '0.5625rem', color: '#FFBA7B', letterSpacing: '0.04em' }}>CLI indexer offline</span>
              </div>
              <p style={{ fontFamily: "'Inter', sans-serif", fontSize: '0.5875rem', color: T.fgDim, lineHeight: 1.6, margin: 0 }}>
                Source diffs require the CLI indexer. Run{' '}
                <code style={{ fontFamily: "'JetBrains Mono', monospace", color: '#FFBA7B', fontSize: '0.5rem' }}>
                  npx @originmain/cli dev
                </code>{' '}to enable.
              </p>
            </div>
          </div>
        ) : pendingChanges.length === 0 ? (
          <div style={{ padding: '36px 14px', textAlign: 'center' }}>
            <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '0.5625rem', color: T.dim, letterSpacing: '0.04em' }}>
              No pending changes
            </span>
          </div>
        ) : isLoading ? (
          <div style={{ padding: '36px 14px', textAlign: 'center' }}>
            <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '0.5625rem', color: T.dim }}>Generating diff…</span>
          </div>
        ) : diffError ? (
          <div style={{ padding: '14px', fontFamily: "'JetBrains Mono', monospace", fontSize: '0.5625rem', color: '#FF6B6B' }}>
            {diffError}
          </div>
        ) : fileDiff ? (
          <div style={{ position: 'relative' }}>
            {/* Token hover tooltip (Phase 4) */}
            {tokenTooltip && (
              <div
                style={{
                  position: 'fixed',
                  left: tokenTooltip.x, top: tokenTooltip.y + 4,
                  zIndex: 9999,
                  padding: '4px 8px', borderRadius: 5,
                  background: '#1A1A22', border: '1px solid rgba(125,211,168,0.3)',
                  pointerEvents: 'none',
                }}
              >
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '0.5rem', color: '#7DD3A8' }}>
                  {tokenTooltip.tokenKey}
                </div>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '0.45rem', color: 'rgba(255,255,255,0.4)', marginTop: 1 }}>
                  {tokenTooltip.tokenName}
                </div>
              </div>
            )}

            <PierreDiff<TokenAnnotationMeta>
              fileDiff={fileDiff}
              lineAnnotations={lineAnnotations}
              renderAnnotation={renderAnnotation}
              options={{
                diffStyle,
                lineDiffType: 'char',
                diffIndicators: 'bars',
                onTokenEnter: (props, event) => {
                  void event;
                  const match = resolveValueToToken(props.tokenText, tokens, rootFontSizePx);
                  if (match) {
                    const rect = props.tokenElement.getBoundingClientRect();
                    setTokenTooltip({
                      tokenKey: match.token.key,
                      tokenName: match.token.name,
                      x: rect.left,
                      y: rect.bottom,
                    });
                  }
                },
                onTokenLeave: () => setTokenTooltip(null),
                onTokenClick: (props, event) => {
                  void event;
                  // Copy token key to clipboard on click.
                  const match = resolveValueToToken(props.tokenText, tokens, rootFontSizePx);
                  if (match) {
                    void navigator.clipboard.writeText(match.token.key).catch(() => { /* non-fatal */ });
                  }
                },
              }}
              style={{ fontSize: '0.5625rem' }}
            />
            {hunkCount > 0 && (
              <HunkList
                hunks={fileDiff.hunks}
                allRejected={allRejected}
                fileDiff={fileDiff}
                handleRejectHunk={handleRejectHunk}
                setFileDiff={setFileDiff}
              />
            )}
          </div>
        ) : null}
      </div>

      {/* ── Footer: Realtime status + Send to Agent ───────────────────────── */}
      <div style={{ padding: '9px 12px', borderTop: `1px solid ${T.border}`, flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 7 }}>
        {intentRtStatus && (
          <div style={{ padding: '4px 9px', background: rtBg, border: `1px solid ${rtBorder}`, borderRadius: 5 }}>
            <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '0.5rem', color: rtColour, letterSpacing: '0.02em' }}>
              {rtLabel}
            </span>
          </div>
        )}
        <button
          onClick={() => void handleSendToAgent()}
          disabled={!canSend}
          style={{
            width: '100%', fontFamily: "'JetBrains Mono', monospace", fontSize: '0.5875rem',
            background: canSend ? T.accent : T.bgDeep,
            color: canSend ? '#fff' : T.dim,
            border: 'none', borderRadius: 6, padding: '7px 0',
            cursor: canSend ? 'pointer' : 'not-allowed',
            transition: 'background 0.15s',
          }}
        >
          {isSending ? 'Sending…' : 'Send to Agent'}
        </button>
      </div>
    </div>
  );
}