<script lang="ts">
  import { onMount, onDestroy } from 'svelte';
  import { Terminal } from '@xterm/xterm';
  import { CanvasAddon } from '@xterm/addon-canvas';
  import { FitAddon } from '@xterm/addon-fit';
  import { ImageAddon } from '@xterm/addon-image';
  import { appRpc } from './rpc.ts';
  import { fontStore } from './font-store.svelte.ts';
  import { themeStore } from './theme-store.svelte.ts';
  import { getXtermTheme } from './themes.ts';

  interface Props {
    sessionId: string;
    /** Working directory to open the shell in. */
    cwd?: string;
  }

  let { sessionId, cwd }: Props = $props();

  let termEl: HTMLDivElement;
  let term: Terminal;
  let fitAddon: FitAddon;
  let unsubFont: (() => void) | null = null;
  let ro: ResizeObserver | null = null;
  let destroyed = false;

  /** Decode a base64 string from the daemon into a Uint8Array. */
  function decodeBase64(b64: string): Uint8Array {
    const binary = atob(b64);
    const bytes = new Uint8Array(binary.length);
    for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
    return bytes;
  }

  onMount(() => {
    const currentTheme = themeStore.currentTheme;
    const termFamily = fontStore.termFontFamily || 'JetBrains Mono, Fira Code, monospace';
    const termSize   = fontStore.termFontSize   || 13;

    term = new Terminal({
      theme: getXtermTheme(currentTheme),
      fontFamily: termFamily,
      fontSize: termSize,
      cursorBlink: true,
      allowProposedApi: true,
      scrollback: 5000,
    });

    fitAddon = new FitAddon();
    term.loadAddon(fitAddon);
    term.loadAddon(new CanvasAddon());

    term.loadAddon(new ImageAddon({
      enableSizeReports: true,
      sixelSupport: true,
      sixelScrolling: true,
      sixelPaletteLimit: 4096,
      showPlaceholder: true,
    }));

    term.open(termEl);
    fitAddon.fit();

    // ── Read cursor/scrollback settings ─────────────────────────────────

    void (async () => {
      try {
        const { settings } = await appRpc.request['settings.getAll']({});
        if (settings['cursor_style']) {
          const style = settings['cursor_style'];
          if (style === 'block' || style === 'underline' || style === 'bar') {
            term.options.cursorStyle = style;
          }
        }
        if (settings['cursor_blink'] === 'false') {
          term.options.cursorBlink = false;
        }
        if (settings['scrollback']) {
          const sb = parseInt(settings['scrollback'], 10);
          if (!isNaN(sb) && sb >= 0) term.options.scrollback = sb;
        }
      } catch { /* non-critical — use defaults */ }
    })();

    // ── Subscribe to terminal font changes ─────────────────────────────────

    unsubFont = fontStore.onTermFontChange((family: string, size: number) => {
      term.options.fontFamily = family || 'JetBrains Mono, Fira Code, monospace';
      term.options.fontSize   = size;
      fitAddon.fit();
      appRpc.request['pty.resize']({ sessionId, cols: term.cols, rows: term.rows }).catch(() => {});
    });

    // ── Connect to PTY daemon (fire-and-forget from onMount) ───────────────

    void (async () => {
      const { cols, rows } = term;
      const result = await appRpc.request['pty.create']({ sessionId, cols, rows, cwd });
      if (!result?.ok) {
        term.writeln(`\x1b[31m[agor] Failed to connect to PTY daemon: ${result?.error ?? 'unknown error'}\x1b[0m`);
        term.writeln('\x1b[33m[agor] Is agor-ptyd running? Start it with: agor-ptyd\x1b[0m');
      }
    })();

    // ── Receive output from daemon ─────────────────────────────────────────

    const outputHandler = ({ sessionId: sid, data }: { sessionId: string; data: string }) => {
      if (destroyed || sid !== sessionId) return;
      term.write(decodeBase64(data));
    };
    appRpc.addMessageListener('pty.output', outputHandler);

    const closedHandler = ({ sessionId: sid, exitCode }: { sessionId: string; exitCode: number | null }) => {
      if (destroyed || sid !== sessionId) return;
      term.writeln(`\r\n\x1b[90m[Process exited${exitCode !== null ? ` with code ${exitCode}` : ''}]\x1b[0m`);
    };
    appRpc.addMessageListener('pty.closed', closedHandler);

    // ── Send user input to daemon ──────────────────────────────────────────

    term.onData((data: string) => {
      appRpc.request['pty.write']({ sessionId, data }).catch((err: unknown) => {
        console.error('[pty.write] error:', err);
      });
    });

    // ── Sync resize events to daemon ───────────────────────────────────────

    term.onResize(({ cols: c, rows: r }) => {
      appRpc.request['pty.resize']({ sessionId, cols: c, rows: r }).catch(() => {});
    });

    ro = new ResizeObserver(() => { fitAddon.fit(); });
    ro.observe(termEl);
  });

  onDestroy(() => {
    destroyed = true;
    unsubFont?.();
    ro?.disconnect();
    // Fix #1: Close the PTY session (not just unsubscribe) to prevent session leak
    appRpc.request['pty.close']({ sessionId }).catch(() => {});
    term?.dispose();
  });
</script>

<div class="terminal-container" bind:this={termEl}></div>

<style>
  .terminal-container {
    width: 100%;
    height: 100%;
    min-height: 10rem;
  }

  :global(.xterm) {
    padding: 0.5rem;
  }
</style>
