import { useCallback, useEffect, useRef, useState } from 'react';
import { Terminal } from '@xterm/xterm';
import { FitAddon } from '@xterm/addon-fit';
import { SearchAddon } from '@xterm/addon-search';
import { WebLinksAddon } from '@xterm/addon-web-links';
import '@xterm/xterm/css/xterm.css';
import { ChevronDown, ChevronUp, Maximize2, RefreshCw, X } from 'lucide-react';
import { toast } from 'sonner';
import { api } from '@/api/client';
import {
  chatInputsRegistry,
  sendToChat,
  sendToTerminal,
  terminalsRegistry,
  type ChatInputRegistration,
} from '@/lib/events';
import { cn } from '@/lib/utils';

// Architecture invariants (do not regress without reading the comments
// next to each):
//
//   - Resize is in-band on the WebSocket as a JSON text frame. The HTTP
//     /resize endpoint had a race with PTY-map registration; WS frames
//     don't.
//   - Server `init` text frame triggers term.clear() so a stale buffer
//     can't leak through the capture-pane replay.
//   - DOM renderer only (no @xterm/addon-webgl). The WebGL atlas bakes
//     glyphs via Canvas2D at load time and locks against whatever font
//     is registered then; @fontsource JBM Variable subsets don't cover
//     U+2500-25FF, so the atlas baked against the system fallback and
//     opencode/claude banners rendered garbled. DOM renderer uses real
//     text spans, so the browser's text rasterizer handles unicode
//     fallback per-character — boolab pattern, just works.
//   - Refit on document.fonts.ready (post-open) so xterm's cell metrics
//     don't bake against the system fallback. Boolab pattern: rAF inside
//     fonts.ready, plus a 150ms safety-net setTimeout.

interface Props {
  sessionId: string;
  paneId: string;
  label: string;
  active?: boolean;
}

// Terminal background matches the pane container's `bg-[#0b0f14]` so any
// sub-cell rounding remainder is invisible. Update both if the theme changes.
const TERM_BG = '#0b0f14';

const XTERM_THEME = {
  background: TERM_BG,
  foreground: '#d6deeb',
  cursor: '#82aaff',
  selectionBackground: '#1d3b53',
  black: '#011627',
  red: '#ef5350',
  green: '#22da6e',
  yellow: '#c5e478',
  blue: '#82aaff',
  magenta: '#c792ea',
  cyan: '#7fdbca',
  white: '#d6deeb',
  brightBlack: '#575656',
  brightRed: '#ef5350',
  brightGreen: '#22da6e',
  brightYellow: '#ffeb95',
  brightBlue: '#82aaff',
  brightMagenta: '#c792ea',
  brightCyan: '#7fdbca',
  brightWhite: '#ffffff',
};

type ConnState = 'connecting' | 'open' | 'reconnecting' | 'disconnected';

const MAX_RECONNECT_ATTEMPTS = 5;
const RECONNECT_DELAYS_MS = [500, 1000, 2000, 4000, 8000];

const LONG_PRESS_MS = 500;
const LONG_PRESS_TOLERANCE_PX = 10;

// xterm 5 ships no public dimensions API — `_core._renderService.dimensions`
// is internal but stable across the package versions we ship.
function cellSize(term: Terminal, container: HTMLElement): { w: number; h: number } {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const dims = (term as any)._core?._renderService?.dimensions?.css?.cell;
  if (dims && dims.width > 0 && dims.height > 0) {
    return { w: dims.width, h: dims.height };
  }
  const rect = container.getBoundingClientRect();
  return { w: rect.width / Math.max(term.cols, 1), h: rect.height / Math.max(term.rows, 1) };
}

function pointToCell(
  term: Terminal,
  container: HTMLElement,
  clientX: number,
  clientY: number,
): { col: number; bufferRow: number } {
  const rect = container.getBoundingClientRect();
  const { w, h } = cellSize(term, container);
  const localX = Math.max(0, clientX - rect.left);
  const localY = Math.max(0, clientY - rect.top);
  const col = Math.min(term.cols - 1, Math.floor(localX / Math.max(w, 1)));
  const screenRow = Math.min(term.rows - 1, Math.floor(localY / Math.max(h, 1)));
  const bufferRow = term.buffer.active.viewportY + screenRow;
  return { col, bufferRow };
}

const WORD_RE = /[\w.~$\-/]+/g;
function wordRangeAt(line: string, col: number): { start: number; end: number } | null {
  for (const m of line.matchAll(WORD_RE)) {
    const start = m.index ?? 0;
    const end = start + m[0].length;
    if (col >= start && col < end) return { start, end };
    if (start > col) return null;
  }
  return null;
}

export function TerminalPane({ sessionId, paneId, label, active = false }: Props) {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const termRef = useRef<Terminal | null>(null);
  const searchRef = useRef<SearchAddon | null>(null);
  const wsRef = useRef<WebSocket | null>(null);
  const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const reconnectAttemptRef = useRef(0);
  const closedByUserRef = useRef(false);
  // Last size pushed through term.onResize. Mirrors xterm's authoritative
  // cols/rows; consulted on every WS open so the resize frame carries the
  // currently-measured size, not a stale lastSize from before the latest fit.
  const lastSizeRef = useRef<{ cols: number; rows: number }>({ cols: 80, rows: 24 });
  const reconnectFnRef = useRef<() => void>(() => {});

  const [connState, setConnState] = useState<ConnState>('connecting');
  const [menu, setMenu] = useState<{ x: number; y: number } | null>(null);
  const [searchOpen, setSearchOpen] = useState(false);
  const [chatInputs, setChatInputs] = useState<ChatInputRegistration[]>([]);
  const setMenuRef = useRef(setMenu);
  setMenuRef.current = setMenu;
  const setSearchOpenRef = useRef(setSearchOpen);
  setSearchOpenRef.current = setSearchOpen;
  const setChatInputsRef = useRef(setChatInputs);
  setChatInputsRef.current = setChatInputs;

  // v1.10.8d: sticky Ctrl for the on-screen hotkey bar (boolab pattern).
  // ctrlArmedRef is read synchronously inside term.onData (per keystroke);
  // ctrlArmed state mirror exists so the Ctrl button can highlight in React.
  // Auto-disarms after 5s so a stray tap doesn't quietly mangle the next
  // keystroke minutes later.
  const [ctrlArmed, setCtrlArmed] = useState(false);
  const ctrlArmedRef = useRef(false);
  const ctrlTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const setCtrlArmedSync = useCallback((armed: boolean) => {
    ctrlArmedRef.current = armed;
    setCtrlArmed(armed);
    if (ctrlTimerRef.current) {
      clearTimeout(ctrlTimerRef.current);
      ctrlTimerRef.current = null;
    }
    if (armed) {
      ctrlTimerRef.current = setTimeout(() => {
        ctrlArmedRef.current = false;
        setCtrlArmed(false);
        ctrlTimerRef.current = null;
      }, 5000);
    }
  }, []);
  const armCtrl = useCallback(() => {
    setCtrlArmedSync(!ctrlArmedRef.current);
  }, [setCtrlArmedSync]);
  // sendInput: write to the WS as a binary frame (server-side discriminator
  // routes binary to PTY, text to JSON control). Used by the hotkey bar.
  const sendInput = useCallback((text: string) => {
    if (!text) return;
    const ws = wsRef.current;
    if (!ws || ws.readyState !== WebSocket.OPEN) return;
    try {
      ws.send(new TextEncoder().encode(text));
    } catch {
      /* ignore */
    }
  }, []);
  // fitFull lives inside the main useEffect (closure over `disposed`/`ctr`);
  // expose via a ref so the hotkey bar's fit button and the visualViewport
  // resize handler can reach it.
  const fitFullRef = useRef<() => void>(() => {});
  const triggerFit = useCallback(() => {
    fitFullRef.current();
  }, []);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;
    const ctr: HTMLDivElement = container;

    let disposed = false;
    closedByUserRef.current = false;
    reconnectAttemptRef.current = 0;

    // On mobile viewports drop to 11px so opencode/claude get enough cols.
    const fontSize = typeof window !== 'undefined' && window.innerWidth < 768 ? 11 : 13;
    const term = new Terminal({
      convertEol: true,
      cursorBlink: true,
      allowProposedApi: true,
      fontFamily:
        "'JetBrains Mono Variable', 'JetBrains Mono', 'Fira Code', Menlo, monospace",
      fontSize,
      // Locked cell metrics so DOM-renderer rows line up: integer-multiple
      // line height and zero letter spacing keep glyph spans cell-aligned.
      // globals.css enforces the same with !important so an inherited rule
      // can't fight us.
      lineHeight: 1.0,
      letterSpacing: 0,
      scrollback: 10_000,
      fastScrollModifier: 'shift',
      altClickMovesCursor: false,
      theme: XTERM_THEME,
    });
    termRef.current = term;
    const fit = new FitAddon();
    const search = new SearchAddon();
    searchRef.current = search;
    term.loadAddon(fit);
    term.loadAddon(search);
    term.loadAddon(new WebLinksAddon());
    term.open(ctr);

    // Bypass FitAddon's proposeDimensions(), which subtracts the native
    // scrollbar's reserved width even after CSS hides it (boolab fix). We
    // compute cols/rows directly from host.clientWidth/Height ÷ cell metrics.
    // Falls through (no-op) if cell metrics aren't measured yet — a later
    // refit (fonts.ready / setTimeout / ResizeObserver) will catch it.
    //
    // v1.10.8d: row count uses the VISIBLE height (clipped against the
    // visualViewport) rather than raw clientHeight. h-dvh on the root only
    // shrinks for the URL bar — not the iOS keyboard — so without the clip
    // we allocate rows for the area hidden behind the keyboard, and bash's
    // cursor (pushed down by MOTD on SSH login) ends up below the fold.
    const fitFull = (): void => {
      if (disposed) return;
      const t = termRef.current;
      if (!t) return;
      if (!t.element || !(t.element as HTMLElement).offsetParent) return;
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const core: any = (t as any)._core;
      const cellW: number | undefined = core?._renderService?.dimensions?.css?.cell?.width;
      const cellH: number | undefined = core?._renderService?.dimensions?.css?.cell?.height;
      if (!cellW || !cellH || cellW <= 0 || cellH <= 0) return;
      let visibleHeight = ctr.clientHeight;
      const vp2 = typeof window !== 'undefined' ? window.visualViewport : null;
      if (vp2) {
        const rect = ctr.getBoundingClientRect();
        // visualViewport.height is the layout viewport minus the keyboard.
        // rect.bottom is in layout-viewport coordinates. clip to whichever
        // is smaller. offsetTop/pageTop adjustments aren't needed at zoom=1.
        const visibleBottom = Math.min(rect.bottom, vp2.height);
        const clipped = Math.max(0, visibleBottom - rect.top);
        if (clipped > 0) visibleHeight = clipped;
      }
      const cols = Math.max(2, Math.floor(ctr.clientWidth / cellW));
      const rows = Math.max(1, Math.floor(visibleHeight / cellH));
      if (cols !== t.cols || rows !== t.rows) {
        try {
          t.resize(cols, rows);
        } catch {
          /* ignore */
        }
      }
    };
    fitFullRef.current = fitFull;

    // boolab pattern: term.onResize fires synchronously inside term.resize()
    // and on init. We always update lastSizeRef so a fresh WS connect (or
    // reconnect) carries the current measured size; we send a resize frame
    // when the WS is open. No gating by an "is-started" flag — the WS itself
    // is the gate (it ignores writes when not open).
    term.onResize(({ cols, rows }) => {
      lastSizeRef.current = { cols, rows };
      if (cols < 2 || rows < 1) return;
      const ws = wsRef.current;
      if (!ws || ws.readyState !== WebSocket.OPEN) return;
      try {
        ws.send(JSON.stringify({ type: 'resize', cols, rows }));
      } catch {
        /* ignore */
      }
    });

    // Keystrokes go out as a BINARY frame so the server can disambiguate them
    // from JSON control frames. TextEncoder is in every modern browser.
    //
    // Sticky Ctrl: when armed (via the hotkey bar), apply Ctrl to the next
    // single ASCII printable (0x40-0x7e — '@', A-Z, [, \, ], ^, _, `, a-z,
    // {, |, }, ~) and disarm. Multi-byte sequences (arrows, Esc, F-keys) pass
    // through untouched and disarm so a stuck arm doesn't poison them.
    term.onData((data) => {
      const ws = wsRef.current;
      if (!ws || ws.readyState !== WebSocket.OPEN) return;
      let out = data;
      if (ctrlArmedRef.current) {
        if (data.length === 1) {
          const c = data.charCodeAt(0);
          if (c >= 0x40 && c <= 0x7e) {
            out = String.fromCharCode(c & 0x1f);
          }
        }
        setCtrlArmedSync(false);
      }
      try {
        ws.send(new TextEncoder().encode(out));
      } catch {
        /* ignore */
      }
    });

    function buildWsUrl(): string {
      const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
      const { cols, rows } = lastSizeRef.current;
      return `${proto}//${window.location.host}/ws/term/sessions/${sessionId}/panes/${paneId}?cols=${cols}&rows=${rows}`;
    }

    function scheduleReconnect(): void {
      if (disposed || closedByUserRef.current) return;
      const attempt = reconnectAttemptRef.current;
      if (attempt >= MAX_RECONNECT_ATTEMPTS) {
        setConnState('disconnected');
        return;
      }
      const delay = RECONNECT_DELAYS_MS[Math.min(attempt, RECONNECT_DELAYS_MS.length - 1)]!;
      reconnectAttemptRef.current = attempt + 1;
      if (reconnectTimerRef.current) clearTimeout(reconnectTimerRef.current);
      reconnectTimerRef.current = setTimeout(connect, delay);
    }

    function connect(): void {
      if (disposed || closedByUserRef.current) return;
      const existing = wsRef.current;
      if (existing && existing.readyState !== WebSocket.CLOSED) return;
      let ws: WebSocket;
      try {
        ws = new WebSocket(buildWsUrl());
      } catch {
        scheduleReconnect();
        return;
      }
      ws.binaryType = 'arraybuffer';
      wsRef.current = ws;

      ws.addEventListener('open', () => {
        if (disposed) return;
        reconnectAttemptRef.current = 0;
        setConnState('open');
        // boolab pattern: send our currently-measured size as a resize frame
        // on every WS open. Server's PTY adopts it immediately; no race
        // window between attach and resize.
        const { cols, rows } = lastSizeRef.current;
        if (cols >= 2 && rows >= 1) {
          try {
            ws.send(JSON.stringify({ type: 'resize', cols, rows }));
          } catch {
            /* ignore */
          }
        }
      });

      ws.addEventListener('message', (e) => {
        const t = termRef.current;
        if (!t) return;
        if (typeof e.data === 'string') {
          try {
            const parsed = JSON.parse(e.data) as { type?: string; code?: number };
            if (parsed.type === 'init') {
              // boolab pattern: wipe any pre-attach buffer state, then the
              // server's next frame (a single binary capture-pane replay)
              // will paint the current tmux pane state in cleanly. Re-send
              // our measured size in case the server's init size (from the
              // WS query string) is stale relative to a fit that landed
              // between opening and now.
              try {
                t.clear();
              } catch {
                /* ignore */
              }
              const { cols, rows } = lastSizeRef.current;
              if (cols >= 2 && rows >= 1) {
                try {
                  ws.send(JSON.stringify({ type: 'resize', cols, rows }));
                } catch {
                  /* ignore */
                }
              }
              return;
            }
            if (parsed.type === 'exit') {
              t.write(`\r\n\x1b[2m[process exited with code ${parsed.code ?? 0}]\x1b[0m\r\n`);
              return;
            }
          } catch {
            /* not JSON — fall through and write as text */
          }
          t.write(e.data);
        } else {
          t.write(new Uint8Array(e.data as ArrayBuffer));
        }
      });

      ws.addEventListener('close', () => {
        if (disposed) return;
        wsRef.current = null;
        if (closedByUserRef.current) return;
        setConnState('reconnecting');
        scheduleReconnect();
      });

      ws.addEventListener('error', () => {
        // close fires after; let close own the retry.
      });
    }

    function manualReconnect(): void {
      if (disposed) return;
      closedByUserRef.current = false;
      reconnectAttemptRef.current = 0;
      if (reconnectTimerRef.current) {
        clearTimeout(reconnectTimerRef.current);
        reconnectTimerRef.current = null;
      }
      try {
        wsRef.current?.close();
      } catch {
        /* ignore */
      }
      setConnState('reconnecting');
      setTimeout(connect, 50);
    }
    reconnectFnRef.current = manualReconnect;

    // Init: rAF-defer one frame so xterm's render service can populate
    // _renderService.dimensions, then fitFull → /start (idempotent, sizes
    // the tmux session) → connect WS. The WS handler also ensureSession's
    // as belt-and-suspenders, so a /start failure is non-fatal.
    const initRaf = requestAnimationFrame(() => {
      if (disposed) return;
      fitFull();
      const { cols, rows } = lastSizeRef.current;
      api.terminals
        .start(sessionId, paneId, cols, rows)
        .catch(() => {
          /* WS handler will ensureSession itself — non-fatal */
        })
        .finally(() => {
          if (disposed) return;
          connect();
        });
    });

    // Boolab pattern: term measures cell metrics on open() against whatever
    // font is registered at that instant; if the font hasn't loaded yet we
    // get a fallback measurement and the wrong cols. Refit when
    // document.fonts.ready resolves.
    let fontRaf: number | null = null;
    if (typeof document !== 'undefined' && document.fonts && document.fonts.ready) {
      document.fonts.ready
        .then(() => {
          if (disposed) return;
          fontRaf = requestAnimationFrame(() => fitFull());
        })
        .catch(() => {
          /* ignore */
        });
    }

    // Second-pass refit: mobile browsers can settle layout slightly late,
    // causing the rAF fit to measure a stale clientWidth.
    const delayedFit = setTimeout(() => fitFull(), 150);

    // ResizeObserver: refit on any container size change. No debounce —
    // term.onResize itself is the throttle (no-op when cols/rows unchanged).
    const ro = new ResizeObserver(() => {
      fitFull();
    });
    ro.observe(ctr);

    const onVis = (): void => {
      if (document.visibilityState !== 'visible') return;
      const ws = wsRef.current;
      if (!ws || ws.readyState === WebSocket.CLOSED || ws.readyState === WebSocket.CLOSING) {
        manualReconnect();
      } else {
        // Refit in case the layout changed while hidden. Single rAF so the
        // measurement runs after the tab's first composited frame back in
        // the foreground.
        requestAnimationFrame(() => {
          if (disposed) return;
          fitFull();
        });
      }
    };
    document.addEventListener('visibilitychange', onVis);

    // v1.10.8d: visualViewport.resize fires when the iOS keyboard opens or
    // closes — the layout viewport stays full-height (so our h-dvh root
    // doesn't shrink), but the visual viewport contracts above the keyboard.
    // Refit so xterm's row count matches the visible area, then scroll to
    // bottom so the cursor stays above the keyboard fold (boolab pattern).
    let onVpResize: (() => void) | null = null;
    const vp = typeof window !== 'undefined' ? window.visualViewport : null;
    if (vp) {
      onVpResize = (): void => {
        if (disposed) return;
        fitFull();
        const t = termRef.current;
        if (t) {
          try { t.scrollToBottom(); } catch { /* ignore */ }
        }
      };
      vp.addEventListener('resize', onVpResize);
    }

    // ============================================================
    // v1.10.4 features (long-press menu, right-click, search, registry)
    // Kept verbatim — independent of the WS/fit path that v1.10.8c fixes.
    // ============================================================

    function pasteFromClipboard(): void {
      if (!navigator.clipboard || typeof navigator.clipboard.readText !== 'function') {
        toast.error('Paste blocked — long-press input area instead');
        return;
      }
      navigator.clipboard
        .readText()
        .then((text) => {
          if (!text) return;
          const ws = wsRef.current;
          if (ws && ws.readyState === WebSocket.OPEN) {
            try {
              ws.send(new TextEncoder().encode(text));
            } catch {
              /* ignore */
            }
          }
        })
        .catch(() => {
          toast.error('Paste blocked — long-press input area instead');
        });
    }

    term.attachCustomKeyEventHandler((e) => {
      if (e.type !== 'keydown') return true;
      const mod = e.ctrlKey || e.metaKey;
      if (!mod) return true;
      const isC = e.key === 'c' || e.key === 'C';
      const isV = e.key === 'v' || e.key === 'V';
      const isF = e.key === 'f' || e.key === 'F';
      if (isC) {
        if (term.hasSelection()) {
          const sel = term.getSelection();
          if (sel) {
            navigator.clipboard.writeText(sel).catch(() => {
              toast.error('Clipboard write failed');
            });
          }
          return false;
        }
        return !e.shiftKey;
      }
      if (isV) {
        pasteFromClipboard();
        return false;
      }
      if (isF) {
        setSearchOpenRef.current(true);
        return false;
      }
      return true;
    });

    // Long-press selection + floating menu (touch).
    let lpTimer: ReturnType<typeof setTimeout> | null = null;
    let lpStart: { x: number; y: number } | null = null;
    let lpAnchor: { col: number; bufferRow: number } | null = null;
    let inSelection = false;
    function clearLp(): void {
      if (lpTimer !== null) {
        clearTimeout(lpTimer);
        lpTimer = null;
      }
      lpStart = null;
    }
    function selectWord(col: number, bufferRow: number): boolean {
      const line = term.buffer.active.getLine(bufferRow);
      if (!line) return false;
      const text = line.translateToString(true);
      const range = wordRangeAt(text, col);
      if (!range) return false;
      term.select(range.start, bufferRow, range.end - range.start);
      return true;
    }
    function extendSelection(
      anchor: { col: number; bufferRow: number },
      to: { col: number; bufferRow: number },
    ): void {
      const a = anchor;
      const b = to;
      let s: { col: number; row: number };
      let e: { col: number; row: number };
      if (a.bufferRow < b.bufferRow || (a.bufferRow === b.bufferRow && a.col <= b.col)) {
        s = { col: a.col, row: a.bufferRow };
        e = { col: b.col, row: b.bufferRow };
      } else {
        s = { col: b.col, row: b.bufferRow };
        e = { col: a.col, row: a.bufferRow };
      }
      const rowsBetween = e.row - s.row;
      const length = rowsBetween * term.cols + (e.col - s.col) + 1;
      term.select(s.col, s.row, length);
    }
    function onTouchStart(e: TouchEvent): void {
      if (e.touches.length !== 1) return;
      const t = e.touches[0]!;
      if ((e.target as Element | null)?.closest('[data-term-menu]')) return;
      lpStart = { x: t.clientX, y: t.clientY };
      lpAnchor = pointToCell(term, ctr, t.clientX, t.clientY);
      inSelection = false;
      lpTimer = setTimeout(() => {
        if (disposed || !lpAnchor) return;
        const ok = selectWord(lpAnchor.col, lpAnchor.bufferRow);
        if (!ok) return;
        inSelection = true;
        setMenuRef.current({ x: t.clientX, y: Math.max(t.clientY - 50, 8) });
      }, LONG_PRESS_MS);
    }
    function onTouchMove(e: TouchEvent): void {
      if (e.touches.length !== 1) return;
      const t = e.touches[0]!;
      if (inSelection && lpAnchor) {
        e.preventDefault();
        const to = pointToCell(term, ctr, t.clientX, t.clientY);
        extendSelection(lpAnchor, to);
        return;
      }
      if (!lpStart) return;
      const dx = t.clientX - lpStart.x;
      const dy = t.clientY - lpStart.y;
      if (Math.abs(dx) > LONG_PRESS_TOLERANCE_PX || Math.abs(dy) > LONG_PRESS_TOLERANCE_PX) {
        clearLp();
      }
    }
    function onTouchEnd(): void {
      if (!inSelection) clearLp();
      inSelection = false;
    }
    function onTouchCancel(): void {
      clearLp();
      inSelection = false;
    }
    ctr.addEventListener('touchstart', onTouchStart, { passive: true });
    ctr.addEventListener('touchmove', onTouchMove, { passive: false });
    ctr.addEventListener('touchend', onTouchEnd, { passive: true });
    ctr.addEventListener('touchcancel', onTouchCancel, { passive: true });

    function onContextMenu(e: MouseEvent): void {
      e.preventDefault();
      setMenuRef.current({ x: e.clientX, y: e.clientY });
    }
    ctr.addEventListener('contextmenu', onContextMenu);

    function onDocPointerDown(e: PointerEvent): void {
      const t = e.target as Element | null;
      if (t && t.closest('[data-term-menu]')) return;
      setMenuRef.current(null);
    }
    document.addEventListener('pointerdown', onDocPointerDown);

    const unregister = terminalsRegistry.register(
      paneId,
      label,
      () => {
        try {
          term.focus();
        } catch {
          /* ignore */
        }
      },
      () => setSearchOpenRef.current(true),
      () => pasteFromClipboard(),
    );
    const unsubscribe = sendToTerminal.subscribe(({ pane_id, text }) => {
      if (pane_id !== paneId) return;
      const ws = wsRef.current;
      if (!ws || ws.readyState !== WebSocket.OPEN) return;
      const payload = text.endsWith('\n') ? text : `${text}\n`;
      try {
        ws.send(new TextEncoder().encode(payload));
      } catch {
        /* ignore */
      }
    });
    setChatInputsRef.current(chatInputsRegistry.list());
    const unsubChats = chatInputsRegistry.subscribe(() => {
      setChatInputsRef.current(chatInputsRegistry.list());
    });

    return () => {
      disposed = true;
      closedByUserRef.current = true;
      cancelAnimationFrame(initRaf);
      if (fontRaf !== null) cancelAnimationFrame(fontRaf);
      clearTimeout(delayedFit);
      if (reconnectTimerRef.current) {
        clearTimeout(reconnectTimerRef.current);
        reconnectTimerRef.current = null;
      }
      if (ctrlTimerRef.current) {
        clearTimeout(ctrlTimerRef.current);
        ctrlTimerRef.current = null;
      }
      if (lpTimer !== null) clearTimeout(lpTimer);
      ro.disconnect();
      document.removeEventListener('visibilitychange', onVis);
      if (vp && onVpResize) vp.removeEventListener('resize', onVpResize);
      document.removeEventListener('pointerdown', onDocPointerDown);
      ctr.removeEventListener('touchstart', onTouchStart);
      ctr.removeEventListener('touchmove', onTouchMove);
      ctr.removeEventListener('touchend', onTouchEnd);
      ctr.removeEventListener('touchcancel', onTouchCancel);
      ctr.removeEventListener('contextmenu', onContextMenu);
      unsubscribe();
      unsubChats();
      unregister();
      const ws = wsRef.current;
      if (ws) {
        try {
          ws.close(1000, 'unmount');
        } catch {
          /* ignore */
        }
        wsRef.current = null;
      }
      try {
        term.dispose();
      } catch {
        /* ignore */
      }
      termRef.current = null;
      searchRef.current = null;
      reconnectFnRef.current = () => {};
    };
  }, [sessionId, paneId, label]);

  // Refit when this pane becomes the visible/focused one (e.g. mobile pane
  // switch, maximize toggle). term.onResize will send the resize WS frame if
  // cols or rows actually changed.
  useEffect(() => {
    if (!active) return;
    const raf = requestAnimationFrame(() => {
      const t = termRef.current;
      const host = containerRef.current;
      if (!t || !host) return;
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const core: any = (t as any)._core;
      const cellW: number | undefined = core?._renderService?.dimensions?.css?.cell?.width;
      const cellH: number | undefined = core?._renderService?.dimensions?.css?.cell?.height;
      if (!cellW || !cellH || cellW <= 0 || cellH <= 0) return;
      const cols = Math.max(2, Math.floor(host.clientWidth / cellW));
      const rows = Math.max(1, Math.floor(host.clientHeight / cellH));
      if (cols !== t.cols || rows !== t.rows) {
        try {
          t.resize(cols, rows);
        } catch {
          /* ignore */
        }
      }
    });
    return () => cancelAnimationFrame(raf);
  }, [active]);

  function actCopy(): void {
    const term = termRef.current;
    if (!term) return;
    const sel = term.getSelection();
    if (!sel) {
      setMenu(null);
      return;
    }
    navigator.clipboard.writeText(sel).catch(() => toast.error('Clipboard write failed'));
    term.clearSelection();
    setMenu(null);
  }
  function actPaste(): void {
    const reg = terminalsRegistry.get(paneId);
    reg?.paste();
    setMenu(null);
  }
  function actSelectAll(): void {
    termRef.current?.selectAll();
    setMenu(null);
  }
  function actSearch(): void {
    setSearchOpen(true);
    setMenu(null);
  }
  function actSendToChat(chatId: string): void {
    const term = termRef.current;
    if (!term) return;
    const sel = term.getSelection();
    if (!sel) {
      setMenu(null);
      return;
    }
    sendToChat.emit({ chat_id: chatId, text: sel });
    setMenu(null);
  }

  const hasSelection = !!termRef.current?.getSelection();

  return (
    <div className="relative flex flex-col flex-1 min-w-0 self-stretch w-full h-full bg-[#0b0f14]">
      {/* xterm CSS overrides live in src/styles/globals.css (boolab pattern).
          Putting them in an inline <style> here races the upstream xterm.css
          on first paint — the right-edge #000 stripe survives the override. */}
      <TerminalHotkeyBar
        ctrlArmed={ctrlArmed}
        onSendBytes={sendInput}
        onArmCtrl={armCtrl}
        onFit={triggerFit}
      />
      <div
        ref={containerRef}
        className="flex-1 min-h-0 w-full overflow-hidden"
        style={{ touchAction: 'pan-y', background: TERM_BG }}
        data-testid="terminal-pane"
      />
      {searchOpen && (
        <SearchBar
          searchRef={searchRef}
          theme={XTERM_THEME}
          onClose={() => setSearchOpen(false)}
        />
      )}
      {menu && (
        <FloatingMenu
          x={menu.x}
          y={menu.y}
          hasSelection={hasSelection}
          chatInputs={chatInputs}
          onCopy={actCopy}
          onPaste={actPaste}
          onSelectAll={actSelectAll}
          onSearch={actSearch}
          onSendToChat={actSendToChat}
          onDismiss={() => setMenu(null)}
        />
      )}
      {connState === 'reconnecting' && (
        <div className="absolute inset-x-0 top-0 bg-amber-900/85 text-amber-100 text-xs px-3 py-1 flex items-center gap-2 pointer-events-none">
          <RefreshCw size={12} className="animate-spin" />
          <span>Reconnecting…</span>
        </div>
      )}
      {connState === 'disconnected' && (
        <div className="absolute inset-x-0 top-0 bg-destructive/85 text-destructive-foreground text-xs px-3 py-1 flex items-center gap-2">
          <span>Disconnected from terminal server.</span>
          <button
            type="button"
            onClick={() => reconnectFnRef.current()}
            className="ml-auto inline-flex items-center gap-1 rounded bg-background/20 hover:bg-background/30 px-2 py-0.5"
          >
            <RefreshCw size={12} /> Reconnect
          </button>
        </div>
      )}
    </div>
  );
}

// ============================================================
// TerminalHotkeyBar — v1.10.8d port of boolab's TerminalHotkeyBar.jsx +
// terminalHotkeysStore.js DEFAULT_BAR. The catalog is hardcoded inline (no
// zustand store, no settings UI) — single-user homelab doesn't need either.
// Add new entries by extending BAR below.
// ============================================================
type Hotkey =
  | { id: string; label: string; bytes: string; sticky?: undefined }
  | { id: string; label: string; sticky: 'ctrl'; bytes?: undefined };

const HOTKEY_BAR: Hotkey[] = [
  { id: 'esc', label: 'Esc', bytes: '\x1b' },
  { id: 'shift-tab', label: '⇧Tab', bytes: '\x1b[Z' },
  { id: 'tab', label: 'Tab', bytes: '\t' },
  { id: 'ctrl', label: 'Ctrl', sticky: 'ctrl' },
  { id: 'ctrl-c', label: 'Ctrl+C', bytes: '\x03' },
  { id: 'arrow-up', label: '↑', bytes: '\x1b[A' },
  { id: 'arrow-down', label: '↓', bytes: '\x1b[B' },
  { id: 'arrow-left', label: '←', bytes: '\x1b[D' },
  { id: 'arrow-right', label: '→', bytes: '\x1b[C' },
];

interface TerminalHotkeyBarProps {
  ctrlArmed: boolean;
  onSendBytes: (bytes: string) => void;
  onArmCtrl: () => void;
  onFit: () => void;
}

function TerminalHotkeyBar({
  ctrlArmed,
  onSendBytes,
  onArmCtrl,
  onFit,
}: TerminalHotkeyBarProps) {
  // Stop the touch from reaching the terminal pane below (which calls
  // preventDefault on touchmove to suppress page-scroll). Without this a
  // tap-and-drag on a hotkey button would also scroll the terminal buffer.
  const stopTouch = useCallback((e: React.TouchEvent) => e.stopPropagation(), []);
  const press = useCallback(
    (entry: Hotkey) => {
      if (entry.sticky === 'ctrl') {
        onArmCtrl();
      } else if (entry.bytes !== undefined) {
        onSendBytes(entry.bytes);
      }
    },
    [onArmCtrl, onSendBytes],
  );

  return (
    <div
      role="toolbar"
      aria-label="Terminal hotkeys"
      className="flex shrink-0 items-center gap-1 overflow-x-auto border-b border-border bg-muted/30 px-2 py-1"
      style={{
        scrollbarWidth: 'thin',
        WebkitOverflowScrolling: 'touch',
        // Suppress iOS native swipe-back gesture starting on the bar; pinch
        // and other multi-touch gestures still pass through.
        touchAction: 'pan-x',
      }}
      onTouchStart={stopTouch}
      onTouchMove={stopTouch}
    >
      {HOTKEY_BAR.map((entry) => {
        const isCtrl = entry.sticky === 'ctrl';
        const armed = isCtrl && ctrlArmed;
        return (
          <button
            key={entry.id}
            type="button"
            onClick={() => press(entry)}
            aria-pressed={isCtrl ? armed : undefined}
            aria-label={entry.label}
            className={cn(
              'shrink-0 rounded border px-2 py-0.5 text-xs font-mono transition-colors',
              armed
                ? 'border-primary bg-primary text-primary-foreground'
                : 'border-border text-foreground hover:bg-muted',
            )}
            style={{
              minHeight: 28,
              minWidth: 36,
              WebkitTouchCallout: 'none',
              userSelect: 'none',
            }}
          >
            {entry.label}
          </button>
        );
      })}
      <button
        type="button"
        onClick={onFit}
        aria-label="Fit terminal"
        title="Fit terminal to container"
        className="shrink-0 inline-flex items-center justify-center rounded border border-border text-foreground hover:bg-muted"
        style={{
          minHeight: 28,
          minWidth: 36,
          paddingInline: 8,
          WebkitTouchCallout: 'none',
          userSelect: 'none',
        }}
      >
        <Maximize2 size={14} />
      </button>
    </div>
  );
}

// ============================================================
// FloatingMenu — kept from v1.10.4 (mobile long-press + desktop right-click)
// ============================================================
interface FloatingMenuProps {
  x: number;
  y: number;
  hasSelection: boolean;
  chatInputs: ChatInputRegistration[];
  onCopy: () => void;
  onPaste: () => void;
  onSelectAll: () => void;
  onSearch: () => void;
  onSendToChat: (chatId: string) => void;
  onDismiss: () => void;
}
function FloatingMenu({
  x,
  y,
  hasSelection,
  chatInputs,
  onCopy,
  onPaste,
  onSelectAll,
  onSearch,
  onSendToChat,
  onDismiss,
}: FloatingMenuProps) {
  const [submenu, setSubmenu] = useState(false);
  const MENU_W = 200;
  const MENU_H = 220;
  const left = Math.min(x, window.innerWidth - MENU_W - 8);
  const top = Math.min(y, window.innerHeight - MENU_H - 8);

  useEffect(() => {
    function onKey(ev: KeyboardEvent): void {
      if (ev.key === 'Escape') onDismiss();
    }
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onDismiss]);

  const flatChat = chatInputs.length === 1 ? chatInputs[0] : null;

  return (
    <div
      data-term-menu="1"
      role="menu"
      style={{
        position: 'fixed',
        top,
        left,
        background: '#1a1d24',
        border: '1px solid #2a2d34',
        borderRadius: 8,
        padding: 4,
        fontSize: 14,
        minWidth: MENU_W,
        boxShadow: '0 8px 24px rgba(0,0,0,0.5)',
        zIndex: 50,
        color: '#d6deeb',
      }}
    >
      <MenuItem disabled={!hasSelection} onClick={onCopy}>Copy</MenuItem>
      <MenuItem onClick={onPaste}>Paste</MenuItem>
      <MenuItem onClick={onSelectAll}>Select All</MenuItem>
      <MenuItem onClick={onSearch}>Search</MenuItem>
      {flatChat && (
        <MenuItem disabled={!hasSelection} onClick={() => onSendToChat(flatChat.chatId)}>
          Send to {flatChat.label}
        </MenuItem>
      )}
      {chatInputs.length > 1 && (
        <div>
          <button
            type="button"
            disabled={!hasSelection}
            onClick={() => setSubmenu((v) => !v)}
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              width: '100%',
              padding: '10px 12px',
              minHeight: 44,
              background: 'transparent',
              border: 0,
              color: hasSelection ? '#d6deeb' : '#575656',
              cursor: hasSelection ? 'pointer' : 'not-allowed',
              borderRadius: 6,
              textAlign: 'left',
            }}
          >
            <span>Send to chat</span>
            {submenu ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
          </button>
          {submenu && hasSelection && (
            <div style={{ paddingLeft: 8 }}>
              {chatInputs.map((c) => (
                <MenuItem key={c.chatId} onClick={() => onSendToChat(c.chatId)}>
                  {c.label}
                </MenuItem>
              ))}
            </div>
          )}
        </div>
      )}
      <div style={{ height: 1, background: '#2a2d34', margin: '4px 0' }} />
      <MenuItem onClick={onDismiss}>Dismiss</MenuItem>
    </div>
  );
}

function MenuItem({
  children,
  onClick,
  disabled = false,
}: {
  children: React.ReactNode;
  onClick: () => void;
  disabled?: boolean;
}) {
  return (
    <button
      type="button"
      role="menuitem"
      disabled={disabled}
      onClick={onClick}
      style={{
        display: 'block',
        width: '100%',
        padding: '10px 12px',
        minHeight: 44,
        background: 'transparent',
        border: 0,
        color: disabled ? '#575656' : '#d6deeb',
        cursor: disabled ? 'not-allowed' : 'pointer',
        textAlign: 'left',
        borderRadius: 6,
        fontSize: 14,
      }}
      onMouseEnter={(ev) => {
        if (!disabled) (ev.currentTarget as HTMLButtonElement).style.background = '#2a2d34';
      }}
      onMouseLeave={(ev) => {
        (ev.currentTarget as HTMLButtonElement).style.background = 'transparent';
      }}
    >
      {children}
    </button>
  );
}

// ============================================================
// SearchBar — kept from v1.10.4
// ============================================================
interface SearchBarProps {
  searchRef: React.MutableRefObject<SearchAddon | null>;
  theme: typeof XTERM_THEME;
  onClose: () => void;
}
function SearchBar({ searchRef, theme, onClose }: SearchBarProps) {
  const [q, setQ] = useState('');
  const [counts, setCounts] = useState<{ idx: number; total: number }>({ idx: -1, total: 0 });
  const inputRef = useRef<HTMLInputElement | null>(null);
  useEffect(() => {
    inputRef.current?.focus();
  }, []);
  useEffect(() => {
    const addon = searchRef.current;
    if (!addon) return;
    const sub = addon.onDidChangeResults(({ resultIndex, resultCount }) => {
      setCounts({ idx: resultIndex, total: resultCount });
    });
    return () => sub.dispose();
  }, [searchRef]);
  useEffect(() => {
    const addon = searchRef.current;
    if (!addon) return;
    if (q.length === 0) {
      addon.clearDecorations?.();
      setCounts({ idx: -1, total: 0 });
      return;
    }
    addon.findNext(q, {
      incremental: true,
      decorations: {
        matchBackground: theme.selectionBackground,
        matchOverviewRuler: theme.cursor,
        activeMatchBackground: theme.cursor,
        activeMatchColorOverviewRuler: theme.cursor,
      },
    });
  }, [q, searchRef, theme]);

  function findNext(): void {
    if (!q) return;
    searchRef.current?.findNext(q);
  }
  function findPrev(): void {
    if (!q) return;
    searchRef.current?.findPrevious(q);
  }
  function onKey(ev: React.KeyboardEvent<HTMLInputElement>): void {
    if (ev.key === 'Escape') {
      ev.preventDefault();
      onClose();
      return;
    }
    if (ev.key === 'Enter') {
      ev.preventDefault();
      if (ev.shiftKey) findPrev();
      else findNext();
    }
  }

  return (
    <div
      style={{
        position: 'absolute',
        top: 8,
        right: 8,
        background: '#1a1d24',
        border: '1px solid #2a2d34',
        borderRadius: 8,
        padding: 4,
        display: 'flex',
        alignItems: 'center',
        gap: 4,
        boxShadow: '0 4px 12px rgba(0,0,0,0.4)',
        zIndex: 40,
      }}
    >
      <input
        ref={inputRef}
        value={q}
        onChange={(ev) => setQ(ev.target.value)}
        onKeyDown={onKey}
        placeholder="Search…"
        style={{
          background: 'transparent',
          border: 0,
          outline: 'none',
          color: '#d6deeb',
          padding: '8px 8px',
          fontSize: 13,
          width: 160,
          minHeight: 36,
        }}
      />
      {q.length > 0 && (
        <span
          style={{
            fontSize: 11,
            color: counts.total === 0 ? '#ef5350' : '#575656',
            minWidth: 56,
            textAlign: 'right',
            padding: '0 4px',
            whiteSpace: 'nowrap',
          }}
        >
          {counts.total === 0
            ? 'No match'
            : counts.idx === -1
              ? `${counts.total}+`
              : `${counts.idx + 1} of ${counts.total}`}
        </span>
      )}
      <button
        type="button"
        onClick={findPrev}
        aria-label="Previous match"
        title="Previous (Shift+Enter)"
        style={iconBtnStyle}
      >
        <ChevronUp size={16} />
      </button>
      <button
        type="button"
        onClick={findNext}
        aria-label="Next match"
        title="Next (Enter)"
        style={iconBtnStyle}
      >
        <ChevronDown size={16} />
      </button>
      <button
        type="button"
        onClick={onClose}
        aria-label="Close search"
        title="Close (Esc)"
        style={iconBtnStyle}
      >
        <X size={16} />
      </button>
    </div>
  );
}

const iconBtnStyle: React.CSSProperties = {
  display: 'inline-flex',
  alignItems: 'center',
  justifyContent: 'center',
  width: 44,
  height: 44,
  background: 'transparent',
  border: 0,
  color: '#d6deeb',
  cursor: 'pointer',
  borderRadius: 6,
};