{% extends "base.html" %}
{% block title %}{{ session_id }} - backseat-harness shell{% endblock %}
{% block content %}
<style>
  /* Full-viewport terminal: the header and status bar take their natural
     height and the terminal fills the rest, so no fixed calc() is needed. */
  main.container {
    padding: 0;
    height: 100vh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #terminal-container {
    flex: 1;
    min-height: 0;
  }
  .status-bar {
    flex-shrink: 0;
    height: 24px;
    background: #007acc;
    color: white;
    font-size: 11px;
    display: flex;
    align-items: center;
    padding: 0 12px;
  }
  .status-bar.hidden {
    display: none;
  }
  /* The header's action control: a red Disconnect that tears the session
     down (the back link leaves it running). */
  .chat-continue-form .shell-disconnect {
    background: #f85149;
    border-color: #f85149;
    color: #ffffff;
  }
  .chat-continue-form .shell-disconnect:hover {
    background: #ffa198;
    border-color: #ffa198;
    color: #1c2128;
  }
</style>
<header class="chat-header">
  <div class="chat-header-prompt">
    <a class="chat-header-back" href="{{ back_url }}">← {{ back_label }}</a>
    <strong>{{ title }}</strong>
    <small>{{ session_id }}</small>
  </div>
  <div class="chat-header-actions">
  {% if generate_task %}
  {% include "_generate_task_button.html" %}
  {% endif %}
  <form class="chat-continue-form" method="post" action="/shell/{{ session_id }}/stop">
    <input type="hidden" name="back_url" value="{{ back_url }}">
    <button type="submit" class="btn shell-disconnect">Disconnect</button>
  </form>
  </div>
</header>
{% if generate_task %}
{% include "_generate_task_script.html" %}
{% endif %}
<div id="terminal-container"></div>
<div class="status-bar hidden" id="status-bar">Connected</div>

<!-- xterm.js from CDN -->
<script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-web-links@0.9.0/lib/xterm-addon-web-links.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css" />

<script>
        const sessionId = "{{ session_id }}";
        const wsPath = "{{ ws_path }}";

        const term = new Terminal({
            cursorBlink: true,
            fontSize: 14,
            fontFamily: '"Cascadia Code", "Fira Code", "Consolas", "Monaco", monospace',
            theme: {
                background: '#1e1e1e',
                foreground: '#d4d4d4',
                cursor: '#ffffff',
                selection: '#264f78',
                black: '#1e1e1e',
                red: '#f44747',
                green: '#6a9955',
                yellow: '#dcdcaa',
                blue: '#569cd6',
                magenta: '#c586c0',
                cyan: '#9cdcfe',
                white: '#d4d4d4',
                brightBlack: '#858585',
                brightRed: '#f44747',
                brightGreen: '#6a9955',
                brightYellow: '#dcdcaa',
                brightBlue: '#569cd6',
                brightMagenta: '#c586c0',
                brightCyan: '#9cdcfe',
                brightWhite: '#ffffff',
            },
            convertEol: true,
            scrollback: 10000,
        });

        const fitAddon = new FitAddon.FitAddon();
        term.loadAddon(fitAddon);
        term.loadAddon(new WebLinksAddon.WebLinksAddon());

        term.open(document.getElementById('terminal-container'));

        // Declare the socket up front (the resize handler below runs during
        // the first fit(), before connect()).
        const statusBar = document.getElementById('status-bar');
        let ws = null;
        let reconnectAttempts = 0;
        const maxReconnectAttempts = 5;

        // Register the resize handler BEFORE fit() (plan 3g): fit() fires
        // onResize synchronously, so that first frame carries the real
        // page-width metrics instead of being dropped before any handler
        // existed.
        // Send resize on terminal resize
        term.onResize(({ cols, rows }) => {
            if (ws && ws.readyState === WebSocket.OPEN) {
                ws.send(JSON.stringify({ type: 'resize', cols, rows }));
            }
        });

        fitAddon.fit();

        function connect() {
            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
            const wsUrl = `${protocol}//${window.location.host}${wsPath}`;
            ws = new WebSocket(wsUrl);

            ws.binaryType = 'arraybuffer';

            ws.onopen = () => {
                statusBar.textContent = 'Connected';
                statusBar.classList.remove('hidden');
                // The status bar entering flow shrinks the terminal: refit so
                // the PTY matches the new viewport.
                fitAddon.fit();
                reconnectAttempts = 0;
                // Announce the real terminal size right after connecting
                // (plan 3g): the PTY stops defaulting to 80 columns and the
                // first output renders at page width.
                ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));
            };

            ws.onmessage = (event) => {
                if (event.data instanceof ArrayBuffer) {
                    const decoder = new TextDecoder('utf-8');
                    const text = decoder.decode(event.data);
                    term.write(text);
                } else if (typeof event.data === 'string') {
                    // Handle text frames (pong, etc.)
                    try {
                        const msg = JSON.parse(event.data);
                        if (msg.type === 'pong') {
                            // keepalive response
                        }
                    } catch (e) {
                        term.write(event.data);
                    }
                }
            };

            ws.onclose = () => {
                statusBar.textContent = 'Disconnected';
                if (reconnectAttempts < maxReconnectAttempts) {
                    reconnectAttempts++;
                    statusBar.textContent = `Reconnecting... (attempt ${reconnectAttempts}/${maxReconnectAttempts})`;
                    setTimeout(connect, 1000 * reconnectAttempts);
                } else {
                    statusBar.textContent = 'Connection lost';
                }
            };

            ws.onerror = (err) => {
                statusBar.textContent = 'Connection error';
            };
        }

        // Send input to PTY
        term.onData((data) => {
            if (ws && ws.readyState === WebSocket.OPEN) {
                const b64 = btoa(data);
                ws.send(JSON.stringify({ type: 'input', data: b64 }));
            }
        });

        // Send resize on terminal resize
        term.onResize(({ cols, rows }) => {
            if (ws && ws.readyState === WebSocket.OPEN) {
                ws.send(JSON.stringify({ type: 'resize', cols, rows }));
            }
        });

        // Keepalive ping
        setInterval(() => {
            if (ws && ws.readyState === WebSocket.OPEN) {
                ws.send(JSON.stringify({ type: 'ping' }));
            }
        }, 30000);

        // Handle window resize
        window.addEventListener('resize', () => {
            fitAddon.fit();
            if (ws && ws.readyState === WebSocket.OPEN) {
                const cols = term.cols;
                const rows = term.rows;
                ws.send(JSON.stringify({ type: 'resize', cols, rows }));
            }
        });

        // Initial connect
        connect();
    </script>
{% endblock %}