{% extends "base.html" %}
{% from "partials/components.html" import page_header %}
{% from "partials/icons.html" import terminal, save %}
{% block title %}Console - Compose Farm{% endblock %}

{% block content %}
<div class="max-w-6xl">
    {{ page_header("Console", "Terminal and editor access") }}

    <!-- Host Selector -->
    <div class="flex items-center gap-4 mb-4">
        <label class="font-semibold">Host:</label>
        <select id="console-host-select" class="select select-sm select-bordered">
            {% for name in hosts %}
            <option value="{{ name }}">{{ name }}{% if name == local_host %} (local){% endif %}</option>
            {% endfor %}
        </select>
        <button id="console-connect-btn" class="btn btn-sm btn-primary" onclick="connectConsole()">Connect</button>
        <span id="console-status" class="text-sm opacity-60"></span>
    </div>

    <!-- Terminal -->
    <div class="mb-6">
        <div class="flex items-center gap-2 mb-2">
            <h3 class="font-semibold flex items-center gap-2">{{ terminal() }} Terminal</h3>
            <span class="text-xs opacity-50">Full shell access to selected host</span>
        </div>
        <div id="console-terminal" class="w-full bg-base-300 rounded-lg overflow-hidden resize-y" style="height: 384px; min-height: 200px;"></div>
    </div>

    <!-- Editor -->
    <div class="mb-6">
        <div class="flex items-center justify-between mb-2">
            <div class="flex items-center gap-4">
                <h3 class="font-semibold">Editor</h3>
                <input type="text" id="console-file-path" class="input input-sm input-bordered w-96" placeholder="Enter file path (e.g., ~/docker-compose.yaml)" value="{{ config_path }}">
                <button class="btn btn-sm btn-outline" onclick="loadFile()">Open</button>
            </div>
            <div class="flex items-center gap-2">
                <span id="editor-status" class="text-sm opacity-60"></span>
                <button id="console-save-btn" class="btn btn-sm btn-primary" onclick="saveFile()">{{ save() }} Save</button>
            </div>
        </div>
        <div id="console-editor" class="resize-y overflow-hidden rounded-lg" style="height: 512px; min-height: 200px;"></div>
    </div>
</div>

<script>
// Use var to allow re-declaration on HTMX navigation
var consoleTerminal = null;
var consoleWs = null;
var consoleEditor = null;
var currentFilePath = null;
var currentHost = null;

function connectConsole() {
    const hostSelect = document.getElementById('console-host-select');
    const host = hostSelect.value;
    const statusEl = document.getElementById('console-status');
    const terminalEl = document.getElementById('console-terminal');

    if (!host) {
        statusEl.textContent = 'Please select a host';
        return;
    }

    currentHost = host;

    // Clean up existing connection
    if (consoleWs) {
        consoleWs.close();
        consoleWs = null;
    }
    if (consoleTerminal) {
        consoleTerminal.dispose();
        consoleTerminal = null;
    }

    statusEl.textContent = 'Connecting...';

    // Create WebSocket
    consoleWs = createWebSocket(`/ws/shell/${host}`);

    // Resize callback - createTerminal's ResizeObserver calls this on container resize
    const sendSize = (cols, rows) => {
        if (consoleWs && consoleWs.readyState === WebSocket.OPEN) {
            consoleWs.send(JSON.stringify({ type: 'resize', cols, rows }));
        }
    };

    // Create terminal with resize callback
    const { term } = createTerminal(terminalEl, { cursorBlink: true }, sendSize);
    consoleTerminal = term;

    consoleWs.onopen = () => {
        statusEl.textContent = `Connected to ${host}`;
        sendSize(term.cols, term.rows);
        term.focus();
        // Auto-load the default file once editor is ready
        const pathInput = document.getElementById('console-file-path');
        if (pathInput && pathInput.value) {
            const tryLoad = () => {
                if (consoleEditor) {
                    loadFile();
                } else {
                    setTimeout(tryLoad, 100);
                }
            };
            tryLoad();
        }
    };

    consoleWs.onmessage = (event) => term.write(event.data);

    consoleWs.onclose = () => {
        statusEl.textContent = 'Disconnected';
        term.write(`${ANSI.CRLF}${ANSI.DIM}[Connection closed]${ANSI.RESET}${ANSI.CRLF}`);
    };

    consoleWs.onerror = (error) => {
        statusEl.textContent = 'Connection error';
        term.write(`${ANSI.RED}[WebSocket Error]${ANSI.RESET}${ANSI.CRLF}`);
        console.error('Console WebSocket error:', error);
    };

    // Send input to WebSocket
    term.onData((data) => {
        if (consoleWs && consoleWs.readyState === WebSocket.OPEN) {
            consoleWs.send(data);
        }
    });
}

function initConsoleEditor() {
    const editorEl = document.getElementById('console-editor');
    if (!editorEl || consoleEditor) return;

    loadMonaco(() => {
        consoleEditor = createEditor(editorEl, '', 'plaintext', { onSave: saveFile });
    });
}

async function loadFile() {
    const pathInput = document.getElementById('console-file-path');
    const path = pathInput.value.trim();
    const statusEl = document.getElementById('editor-status');

    if (!path) {
        statusEl.textContent = 'Enter a file path';
        return;
    }

    if (!currentHost) {
        statusEl.textContent = 'Connect to a host first';
        return;
    }

    statusEl.textContent = `Loading ${path}...`;

    try {
        const response = await fetch(`/api/console/file?host=${encodeURIComponent(currentHost)}&path=${encodeURIComponent(path)}`);
        const data = await response.json();

        if (!response.ok || !data.success) {
            statusEl.textContent = data.detail || 'Failed to load file';
            return;
        }

        const language = getLanguageFromPath(path);

        if (consoleEditor) {
            consoleEditor.setValue(data.content);
            monaco.editor.setModelLanguage(consoleEditor.getModel(), language);
            currentFilePath = path;  // Only set after content is loaded
            statusEl.textContent = `Loaded: ${path}`;
        } else {
            statusEl.textContent = 'Editor not ready';
        }
    } catch (e) {
        statusEl.textContent = `Error: ${e.message}`;
    }
}

async function saveFile() {
    const statusEl = document.getElementById('editor-status');

    if (!currentFilePath) {
        statusEl.textContent = 'No file loaded';
        return;
    }

    if (!currentHost) {
        statusEl.textContent = 'Not connected to a host';
        return;
    }

    if (!consoleEditor) {
        statusEl.textContent = 'Editor not ready';
        return;
    }

    statusEl.textContent = `Saving ${currentFilePath}...`;

    try {
        const content = consoleEditor.getValue();
        const response = await fetch(`/api/console/file?host=${encodeURIComponent(currentHost)}&path=${encodeURIComponent(currentFilePath)}`, {
            method: 'PUT',
            headers: { 'Content-Type': 'text/plain' },
            body: content
        });
        const data = await response.json();

        if (!response.ok || !data.success) {
            statusEl.textContent = data.detail || 'Failed to save file';
            return;
        }

        statusEl.textContent = `Saved: ${currentFilePath}`;
    } catch (e) {
        statusEl.textContent = `Error: ${e.message}`;
    }
}

// Initialize editor and auto-connect to first host
function init() {
    initConsoleEditor();
    const hostSelect = document.getElementById('console-host-select');
    if (hostSelect && hostSelect.options.length > 0) {
        connectConsole();
    }
}

// On HTMX navigation, dependencies (app.js) are already loaded.
// On hard refresh, this script runs before app.js, so wait for DOMContentLoaded.
if (typeof createTerminal === 'function') {
    init();
} else {
    document.addEventListener('DOMContentLoaded', init);
}
</script>
{% endblock content %}