前端整合：xterm.js 打造完整終端體驗

// socket-client.js
const SocketClient = (function() {
    let socket = null;
    let isConnected = false;

    // 連線到後端
    function connect() {
        if (socket && isConnected) return;

        socket = io(window.location.origin, {
            transports: ['websocket', 'polling'],
            reconnection: true,          // 自動重連
            reconnectionAttempts: 5,     // 重連次數
            reconnectionDelay: 1000      // 重連間隔 (ms)
        });

        socket.on('connect', () => {
            isConnected = true;
            console.log('Socket connected:', socket.id);
        });

        socket.on('disconnect', (reason) => {
            isConnected = false;
            console.log('Socket disconnected:', reason);
        });

        socket.on('connect_error', (error) => {
            console.error('Connection error:', error.message);
        });
    }

    // 發送事件
    function emit(event, data) {
        if (!socket || !isConnected) {
            console.error('Not connected');
            return false;
        }
        socket.emit(event, data);
        return true;
    }

    // 發送事件並等待回應
    function emitWithAck(event, data) {
        return new Promise((resolve, reject) => {
            if (!socket || !isConnected) {
                reject(new Error('Not connected'));
                return;
            }
            // Socket.IO v4 支援 callback 作為 acknowledgement
            socket.emit(event, data, (response) => {
                resolve(response);
            });
        });
    }

    // 監聽事件
    function on(event, handler) {
        if (socket) {
            socket.on(event, handler);
        }
    }

    // 移除監聽
    function off(event, handler) {
        if (socket) {
            socket.off(event, handler);
        }
    }

    return { connect, emit, emitWithAck, on, off };
})();

// terminal-instance.js
class TerminalInstance {
    constructor(containerId) {
        this.containerId = containerId;
        this.sessionId = null;
        this.terminal = null;
        this.fitAddon = null;
        this.resizeObserver = null;
        this.connected = false;
    }

    /**
     * 初始化終端機
     */
    init() {
        const container = document.getElementById(this.containerId);
        if (!container) {
            throw new Error(`Container ${this.containerId} not found`);
        }

        // 建立 xterm 實例
        this.terminal = new Terminal({
            cursorBlink: true,           // 游標閃爍
            cursorStyle: 'block',        // 游標樣式：block/underline/bar
            fontFamily: '"JetBrains Mono", "Fira Code", monospace',
            fontSize: 14,
            lineHeight: 1.2,
            theme: {
                background: '#1e1e2e',   // 背景色
                foreground: '#cdd6f4',   // 前景色
                cursor: '#f5e0dc',       // 游標色
                // ANSI 16 色
                black: '#45475a',
                red: '#f38ba8',
                green: '#a6e3a1',
                yellow: '#f9e2af',
                blue: '#89b4fa',
                magenta: '#f5c2e7',
                cyan: '#94e2d5',
                white: '#bac2de',
                brightBlack: '#585b70',
                brightRed: '#f38ba8',
                brightGreen: '#a6e3a1',
                brightYellow: '#f9e2af',
                brightBlue: '#89b4fa',
                brightMagenta: '#f5c2e7',
                brightCyan: '#94e2d5',
                brightWhite: '#a6adc8'
            }
        });

        // 載入外掛
        this.fitAddon = new FitAddon.FitAddon();
        this.terminal.loadAddon(this.fitAddon);
        this.terminal.loadAddon(new WebLinksAddon.WebLinksAddon());

        // 開啟終端機（渲染到容器）
        this.terminal.open(container);

        // 初始調整大小
        setTimeout(() => this.fit(), 0);

        // 監聽容器大小變化
        this.resizeObserver = new ResizeObserver(() => this.fit());
        this.resizeObserver.observe(container);

        // 監聽使用者輸入
        this.terminal.onData(data => {
            if (this.sessionId && this.connected) {
                SocketClient.emit('terminal:input', {
                    session_id: this.sessionId,
                    data: data
                });
            }
        });

        // 設定 Socket 事件處理
        this.setupSocketHandlers();

        // 建立 PTY session
        this.createSession();
    }

    /**
     * 設定 Socket.IO 事件處理
     */
    setupSocketHandlers() {
        // 接收 PTY 輸出
        SocketClient.on('terminal:output', (data) => {
            if (data.session_id === this.sessionId) {
                this.terminal.write(data.data);
            }
        });

        // 處理錯誤
        SocketClient.on('terminal:error', (data) => {
            if (data.session_id === this.sessionId) {
                // 用紅色顯示錯誤
                this.terminal.write(`\r\n\x1b[31mError: ${data.error}\x1b[0m\r\n`);
            }
        });

        // Session 關閉
        SocketClient.on('terminal:closed', (data) => {
            if (data.session_id === this.sessionId) {
                this.terminal.write('\r\n\x1b[33mSession ended.\x1b[0m\r\n');
                this.connected = false;
            }
        });
    }

    /**
     * 建立 PTY Session
     */
    async createSession() {
        this.terminal.write('Connecting...\r\n');

        try {
            const response = await SocketClient.emitWithAck('terminal:create', {
                cols: this.terminal.cols,
                rows: this.terminal.rows
            });

            if (response.success) {
                this.sessionId = response.session_id;
                this.connected = true;
                console.log('Terminal session created:', this.sessionId);
            } else {
                this.terminal.write(`\x1b[31mFailed: ${response.error}\x1b[0m\r\n`);
            }
        } catch (e) {
            this.terminal.write(`\x1b[31mConnection error: ${e.message}\x1b[0m\r\n`);
        }
    }

    /**
     * 調整終端機大小以填滿容器
     */
    fit() {
        if (!this.fitAddon || !this.terminal) return;

        try {
            this.fitAddon.fit();

            // 通知後端調整 PTY 大小
            if (this.sessionId && this.connected) {
                SocketClient.emit('terminal:resize', {
                    session_id: this.sessionId,
                    cols: this.terminal.cols,
                    rows: this.terminal.rows
                });
            }
        } catch (e) {
            // 初始化時可能會失敗，忽略
        }
    }

    /**
     * 銷毀終端機
     */
    destroy() {
        // 關閉 PTY session
        if (this.sessionId && this.connected) {
            SocketClient.emit('terminal:close', {
                session_id: this.sessionId
            });
        }

        // 清理 ResizeObserver
        if (this.resizeObserver) {
            this.resizeObserver.disconnect();
        }

        // 銷毀 xterm
        if (this.terminal) {
            this.terminal.dispose();
        }
    }
}

/**
 * 從 CSS 變數建立 xterm 主題
 */
function getTerminalTheme() {
    const getCSSVar = (name) =>
        getComputedStyle(document.documentElement)
            .getPropertyValue(name).trim();

    return {
        background: getCSSVar('--terminal-bg'),
        foreground: getCSSVar('--terminal-fg'),
        cursor: getCSSVar('--terminal-cursor'),
        black: getCSSVar('--terminal-black'),
        red: getCSSVar('--terminal-red'),
        green: getCSSVar('--terminal-green'),
        // ... 其他顏色
    };
}

// 使用
this.terminal = new Terminal({
    theme: getTerminalTheme()
});

// 主題切換時更新
document.addEventListener('themeChanged', () => {
    this.terminal.options.theme = getTerminalTheme();
});

/**
 * 檢查可恢復的 sessions
 */
async checkAndConnect() {
    this.terminal.write('檢查連線狀態...\r\n');

    try {
        const response = await SocketClient.emitWithAck('terminal:list', {});
        const sessions = response.sessions || [];

        if (sessions.length > 0) {
            this.showReconnectDialog(sessions);
        } else {
            this.createSession();
        }
    } catch (e) {
        this.createSession();
    }
}

/**
 * 顯示重連對話框
 */
showReconnectDialog(sessions) {
    // 建立 overlay
    const overlay = document.createElement('div');
    overlay.className = 'terminal-reconnect-overlay';
    overlay.innerHTML = `
        <div class="terminal-reconnect-dialog">
            <h3>發現未關閉的終端機</h3>
            <ul class="session-list">
                ${sessions.map(s => `
                    <li data-session-id="${s.session_id}">
                        <code>${s.cwd || '~'}</code>
                        <span>${new Date(s.last_activity).toLocaleTimeString()}</span>
                    </li>
                `).join('')}
            </ul>
            <button class="btn-new">建立新的</button>
        </div>
    `;

    // 處理點擊事件
    overlay.querySelectorAll('li').forEach(li => {
        li.addEventListener('click', () => {
            overlay.remove();
            this.reconnectSession(li.dataset.sessionId);
        });
    });

    overlay.querySelector('.btn-new').addEventListener('click', () => {
        overlay.remove();
        this.createSession();
    });

    this.container.appendChild(overlay);
}

/**
 * 重新連接到現有 session
 */
async reconnectSession(sessionId) {
    this.terminal.write('正在恢復 session...\r\n');

    const response = await SocketClient.emitWithAck('terminal:reconnect', {
        session_id: sessionId
    });

    if (response.success) {
        this.sessionId = response.session_id;
        this.connected = true;
        this.terminal.write('\x1b[32mSession 已恢復！\x1b[0m\r\n');
        this.fit(); // 同步視窗大小
    } else {
        this.terminal.write('\x1b[33mSession 已過期\x1b[0m\r\n');
        this.createSession();
    }
}

// 選取文字時自動複製
this.terminal.onSelectionChange(() => {
    const selection = this.terminal.getSelection();
    if (selection) {
        navigator.clipboard.writeText(selection);
    }
});

// 右鍵貼上
this.terminal.attachCustomKeyEventHandler((event) => {
    // Ctrl+Shift+C 複製
    if (event.ctrlKey && event.shiftKey && event.key === 'C') {
        const selection = this.terminal.getSelection();
        if (selection) {
            navigator.clipboard.writeText(selection);
        }
        return false; // 阻止預設行為
    }

    // Ctrl+Shift+V 貼上
    if (event.ctrlKey && event.shiftKey && event.key === 'V') {
        navigator.clipboard.readText().then(text => {
            if (text && this.connected) {
                SocketClient.emit('terminal:input', {
                    session_id: this.sessionId,
                    data: text
                });
            }
        });
        return false;
    }

    return true; // 其他按鍵正常處理
});

class TerminalInstance {
    constructor() {
        // ...
        this.outputBuffer = '';
        this.renderScheduled = false;
    }

    setupSocketHandlers() {
        SocketClient.on('terminal:output', (data) => {
            if (data.session_id === this.sessionId) {
                // 累積到 buffer
                this.outputBuffer += data.data;
                this.scheduleRender();
            }
        });
    }

    scheduleRender() {
        if (this.renderScheduled) return;

        this.renderScheduled = true;
        requestAnimationFrame(() => {
            if (this.outputBuffer) {
                this.terminal.write(this.outputBuffer);
                this.outputBuffer = '';
            }
            this.renderScheduled = false;
        });
    }
}

/**
 * 更新狀態列
 */
updateStatusBar() {
    const statusDot = document.querySelector('.status-dot');
    const statusText = document.querySelector('.status-text');
    const sizeDisplay = document.querySelector('.terminal-size');

    if (statusDot) {
        statusDot.classList.toggle('connected', this.connected);
    }

    if (statusText) {
        statusText.textContent = this.connected ? '已連線' : '已斷線';
    }

    if (sizeDisplay) {
        sizeDisplay.textContent = `${this.terminal.cols}x${this.terminal.rows}`;
    }
}

// 在 createSession 和 resize 後呼叫