{% extends "base.html" %}

{% block title %}Terminal - {{ client_id }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3 class="card-title mb-0">
                    <i class="fas fa-terminal"></i> SSH Terminal - {{ client_id }}
                </h3>
                <div>
                    <input type="text" id="sshUsername" class="form-control form-control-sm d-inline-block w-auto me-2" placeholder="Username" value="root">
                    <button id="connectBtn" class="btn btn-success btn-sm">
                        <i class="fas fa-play"></i> Connect
                    </button>
                    <button id="disconnectBtn" class="btn btn-danger btn-sm" disabled>
                        <i class="fas fa-stop"></i> Disconnect
                    </button>
                </div>
            </div>
            <div class="card-body p-0">
                <div id="terminal" class="terminal-container"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let term = null;
let socket = null;
let connected = false;
let requestId = null;

document.getElementById('connectBtn').addEventListener('click', connect);
document.getElementById('disconnectBtn').addEventListener('click', disconnect);

function connect() {
    const username = document.getElementById('sshUsername').value;
    if (!username) {
        alert('Please enter a username');
        return;
    }

    // Initialize xterm
    if (!term) {
        term = new Terminal();
        term.open(document.getElementById('terminal'));
    }

    // Initialize socket
    if (!socket) {
        socket = io();
    }

    term.write('Connecting to ' + username + '@{{ client_id }}...\r\n');

    connected = true;
    document.getElementById('connectBtn').disabled = true;
    document.getElementById('disconnectBtn').disabled = false;
    document.getElementById('sshUsername').disabled = true;

    // Send connect_terminal
    socket.emit('connect_terminal', {client_id: '{{ client_id }}', username: username});

    // Handle terminal_connected
    socket.on('terminal_connected', function(data) {
        requestId = data.request_id;
        term.write('Connected successfully!\r\n');
        term.write('$ ');
    });

    // Handle terminal_data
    socket.on('terminal_data', function(data) {
        term.write(data.data);
    });

    // Handle terminal_error
    socket.on('terminal_error', function(data) {
        term.write('Error: ' + data.error + '\r\n');
        disconnect();
    });

    // Handle terminal_closed
    socket.on('terminal_closed', function(data) {
        term.write('\r\nTerminal closed.\r\n');
        disconnect();
    });

    // Handle input
    term.onData(data => {
        if (!connected || !requestId) return;
        socket.emit('terminal_data', {request_id: requestId, data: data});
    });
}

function disconnect() {
    connected = false;
    document.getElementById('connectBtn').disabled = false;
    document.getElementById('disconnectBtn').disabled = true;
    document.getElementById('sshUsername').disabled = false;

    if (requestId) {
        socket.emit('disconnect_terminal', {request_id: requestId});
        requestId = null;
    }

    if (term) {
        term.write('\r\nDisconnected.\r\n');
    }
}

// Focus on terminal when connected
document.addEventListener('keydown', function(e) {
    if (connected && term) {
        term.focus();
    }
});
</script>
{% endblock %}