{% 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 connected = false;
let commandBuffer = '';

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'));
        term.write('Connecting to ' + username + '@{{ client_id }}...\r\n');
    }

    // For demo purposes, we'll simulate the connection
    connected = true;
    document.getElementById('connectBtn').disabled = true;
    document.getElementById('disconnectBtn').disabled = false;
    document.getElementById('sshUsername').disabled = true;

    setTimeout(() => {
        term.write('Connected successfully!\r\n');
        term.write('Welcome to {{ client_id }}\r\n');
        term.write('$ ');
    }, 1000);

    // Handle input
    term.onData(data => {
        if (!connected) return;
        if (data === '\r' || data === '\n') {
            // Enter pressed, process command
            processCommand(commandBuffer.trim());
            commandBuffer = '';
        } else if (data === '\x7f' || data === '\b') { // Backspace
            if (commandBuffer.length > 0) {
                commandBuffer = commandBuffer.slice(0, -1);
                term.write('\b \b');
            }
        } else {
            commandBuffer += data;
            term.write(data);
        }
    });
}

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

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

function processCommand(command) {
    if (!connected || !term) return;

    term.write('\r\n');

    // Simulate command execution
    setTimeout(() => {
        if (command === 'ls') {
            term.write('Desktop  Documents  Downloads  Music  Pictures  Videos\r\n');
        } else if (command === 'pwd') {
            term.write('/home/' + document.getElementById('sshUsername').value + '\r\n');
        } else if (command === 'whoami') {
            term.write(document.getElementById('sshUsername').value + '\r\n');
        } else if (command === 'exit' || command === 'logout') {
            disconnect();
            return;
        } else if (command === '') {
            // Empty command
        } else {
            term.write('Command not found: ' + command + '\r\n');
        }
        term.write('$ ');
    }, 500);
}

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