"use client";

import { useEffect, useRef, useState, useCallback } from "react";

import type { Terminal } from "@xterm/xterm";

import type { FitAddon } from "@xterm/addon-fit";

import type { TermCreds, LaunchSpec } from "@/lib/term";

import { buildWsUrl } from "@/lib/term";

export type TermStatus = "idle" | "connecting" | "live" | "closed" | "error";

interface UseTermSocketArgs {

  creds: TermCreds | null;

  spec: LaunchSpec | null;

  visible: boolean;

}

interface UseTermSocketReturn {

  containerRef: (el: HTMLDivElement | null) => void;

  status: TermStatus;

  sessionName: string | null;

  fit: () => void;

  banner: string | null;

  fontSize: number;

  setFontSize: (n: number) => void;

}

const TERM_THEME = {

  background: "#050607",

  foreground: "#e8eaed",

  cursor: "#16e0c8",

  cursorAccent: "#050607",

  selectionBackground: "rgba(22,224,200,0.22)",

  black: "#0a0c0e",

  red: "#ff6b6b",

  green: "#0d9e8e",

  yellow: "#c9a85a",

  blue: "#6ba8ff",

  magenta: "#c792ea",

  cyan: "#0d9e8e",

  white: "#8b929e",

  brightBlack: "#4a525e",

  brightRed: "#ff8585",

  brightGreen: "#16e0c8",

  brightYellow: "#e8c468",

  brightBlue: "#8fbcff",

  brightMagenta: "#dcb4ff",

  brightCyan: "#16e0c8",

  brightWhite: "#e8eaed",

};

const TERM_FONT_KEY = "darwin-term-fontsize";

const FONT_MIN = 9;

const FONT_MAX = 20;

function clampFontSize(n: number): number {

  return Math.max(FONT_MIN, Math.min(FONT_MAX, Math.round(n)));

}

function readPersistedFontSize(): number {

  if (typeof window === "undefined") return 13;

  try {

    const raw = window.localStorage.getItem(TERM_FONT_KEY);

    if (raw != null) {

      const n = parseInt(raw, 10);

      if (Number.isFinite(n)) return clampFontSize(n);

    }

  } catch {

  }

  return window.innerWidth <= 820 ? 11 : 13;

}

export function useTermSocket({

  creds,

  spec,

  visible,

}: UseTermSocketArgs): UseTermSocketReturn {

  const [status, setStatus] = useState<TermStatus>("idle");

  const [sessionName, setSessionName] = useState<string | null>(null);

  const [banner, setBanner] = useState<string | null>(null);

  const [fontSize, setFontSizeState] = useState<number>(() => readPersistedFontSize());

  const fontSizeRef = useRef(fontSize);

  fontSizeRef.current = fontSize;

  const termRef = useRef<Terminal | null>(null);

  const fitRef = useRef<FitAddon | null>(null);

  const wsRef = useRef<WebSocket | null>(null);

  const elRef = useRef<HTMLDivElement | null>(null);

  const visibleRef = useRef(visible);

  const lastSentSize = useRef<{ cols: number; rows: number }>({ cols: 0, rows: 0 });

  const decoder = useRef(new TextDecoder());

  visibleRef.current = visible;

  const fit = useCallback(() => {

    const term = termRef.current;

    const fitAddon = fitRef.current;

    const el = elRef.current;

    const ws = wsRef.current;

    if (!term || !fitAddon || !el) return;

    if (!visibleRef.current) return;

    const rect = el.getBoundingClientRect();

    if (rect.width < 8 || rect.height < 8) return;

    try {

      fitAddon.fit();

    } catch {

      return;

    }

    const cols = term.cols;

    const rows = term.rows;

    if (!cols || !rows) return;

    if (cols === lastSentSize.current.cols && rows === lastSentSize.current.rows) return;

    lastSentSize.current = { cols, rows };

    if (ws && ws.readyState === WebSocket.OPEN) {

      ws.send(JSON.stringify({ t: "resize", cols, rows }));

    }

  }, []);

  const setFontSize = useCallback((n: number) => {

    const clamped = clampFontSize(n);

    try {

      window.localStorage.setItem(TERM_FONT_KEY, String(clamped));

    } catch {

    }

    setFontSizeState(clamped);

    const term = termRef.current;

    if (term) {

      term.options.fontSize = clamped;

      requestAnimationFrame(() => fit());

    }

  }, [fit]);

  const containerRef = useCallback((el: HTMLDivElement | null) => {

    elRef.current = el;

  }, []);

  useEffect(() => {

    if (!creds || !spec) return;

    let disposed = false;

    let term: Terminal | null = null;

    let fitAddon: FitAddon | null = null;

    let ws: WebSocket | null = null;

    let ro: ResizeObserver | null = null;

    let onWinResize: (() => void) | null = null;

    let onVvResize: (() => void) | null = null;

    let onVvScroll: (() => void) | null = null;

    let vp: HTMLElement | null = null;

    let onTouchStart: ((e: TouchEvent) => void) | null = null;

    let onTouchMove: ((e: TouchEvent) => void) | null = null;

    setStatus("connecting");

    setSessionName(null);

    setBanner(null);

    (async () => {

      const [{ Terminal }, { FitAddon }] = await Promise.all([

        import("@xterm/xterm"),

        import("@xterm/addon-fit"),

      ]);

      if (disposed || !elRef.current) return;

      term = new Terminal({

        cursorBlink: true,

        fontFamily: "'JetBrains Mono', 'Fira Code', monospace",

        fontSize: fontSizeRef.current,

        lineHeight: 1.25,

        letterSpacing: 0,

        scrollback: 20000,

        theme: TERM_THEME,

        allowProposedApi: true,

        macOptionIsMeta: true,

        convertEol: false,

      });

      fitAddon = new FitAddon();

      term.loadAddon(fitAddon);

      term.open(elRef.current);

      termRef.current = term;

      fitRef.current = fitAddon;

      (elRef.current as unknown as { __term?: Terminal }).__term = term;

      requestAnimationFrame(() => requestAnimationFrame(() => fit()));

      if (typeof document !== "undefined" && document.fonts && document.fonts.ready) {

        document.fonts.ready.then(() => {

          if (disposed) return;

          fit();

        });

      }

      const url = buildWsUrl(creds, spec);

      ws = new WebSocket(url);

      ws.binaryType = "arraybuffer";

      wsRef.current = ws;

      ws.onopen = () => {

        if (disposed) return;

        setStatus("live");

        requestAnimationFrame(() => fit());

      };

      ws.onmessage = (ev) => {

        if (!termRef.current) return;

        if (typeof ev.data === "string") {

          try {

            const obj = JSON.parse(ev.data);

            if (obj && obj._cockpit === "session" && obj.name) {

              setSessionName(String(obj.name));

              return;

            }

          } catch {

          }

          setBanner((b) => (b ? b : ev.data));

          termRef.current.write(ev.data);

        } else {

          const bytes = new Uint8Array(ev.data as ArrayBuffer);

          termRef.current.write(bytes);

        }

      };

      ws.onclose = () => {

        if (disposed) return;

        setStatus("closed");

        termRef.current?.write("\r\n\x1b[38;2;74;82;94m── session closed ──\x1b[0m\r\n");

      };

      ws.onerror = () => {

        if (disposed) return;

        setStatus("error");

      };

      term.onData((data) => {

        const sock = wsRef.current;

        if (sock && sock.readyState === WebSocket.OPEN) {

          sock.send(new TextEncoder().encode(data));

        }

      });

      vp = elRef.current.querySelector(".xterm-viewport") as HTMLElement | null;

      if (vp) {

        vp.style.overflowY = "auto";

        vp.style.setProperty("-webkit-overflow-scrolling", "touch");

        vp.style.touchAction = "pan-y";

        let startY = 0;

        onTouchStart = (e: TouchEvent) => {

          if (e.touches.length > 0) startY = e.touches[0].clientY;

        };

        onTouchMove = (e: TouchEvent) => {

          const t = termRef.current;

          if (!t || e.touches.length === 0) return;

          const currentY = e.touches[0].clientY;

          const dy = startY - currentY;

          const cellHeight = fontSizeRef.current * 1.25;

          const lineDelta = Math.round(dy / cellHeight);

          if (lineDelta !== 0) {

            t.scrollLines(lineDelta);

            startY = currentY;

          }

        };

        vp.addEventListener("touchstart", onTouchStart, { passive: true });

        vp.addEventListener("touchmove", onTouchMove, { passive: true });

      }

      const scheduleFit = () => requestAnimationFrame(() => fit());

      onWinResize = scheduleFit;

      window.addEventListener("resize", onWinResize, { passive: true });

      const vv = typeof window !== "undefined" ? window.visualViewport : null;

      if (vv) {

        onVvResize = scheduleFit;

        onVvScroll = scheduleFit;

        vv.addEventListener("resize", onVvResize);

        vv.addEventListener("scroll", onVvScroll);

      }

      ro = new ResizeObserver(() => {

        requestAnimationFrame(() => fit());

      });

      if (elRef.current) ro.observe(elRef.current);

    })();

    return () => {

      disposed = true;

      try { ro?.disconnect(); } catch {}

      if (onWinResize) window.removeEventListener("resize", onWinResize);

      const vv = typeof window !== "undefined" ? window.visualViewport : null;

      if (vv) {

        if (onVvResize) vv.removeEventListener("resize", onVvResize);

        if (onVvScroll) vv.removeEventListener("scroll", onVvScroll);

      }

      if (vp) {

        if (onTouchStart) vp.removeEventListener("touchstart", onTouchStart);

        if (onTouchMove) vp.removeEventListener("touchmove", onTouchMove);

      }

      try { ws?.close(); } catch {}

      try { term?.dispose(); } catch {}

      termRef.current = null;

      fitRef.current = null;

      wsRef.current = null;

      lastSentSize.current = { cols: 0, rows: 0 };

    };

  }, [creds, spec?.target, spec?.agent, spec?.mode, spec?.cwd, spec?.session]);

  useEffect(() => {

    if (visible) {

      requestAnimationFrame(() => requestAnimationFrame(() => fit()));

    }

  }, [visible, fit]);

  return { containerRef, status, sessionName, fit, banner, fontSize, setFontSize };

}