{% extends 'base.html' %}

{% block head %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css" />
<script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header bg-dark text-white">
                    SSH Console
                </div>
                <div class="card-body p-0">
                    <div id="terminal" style="height: 500px;"></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-3">
                <div class="card-header bg-info text-white">
                    Conexión SSH
                </div>
                <div class="card-body">
                    <form id="ssh-form">
                        <div class="mb-2">
                            <label>Host</label>
                            <input type="text" class="form-control" id="host" value="localhost">
                        </div>
                        <div class="mb-2">
                            <label>Port</label>
                            <input type="number" class="form-control" id="port" value="22">
                        </div>
                        <div class="mb-2">
                            <label>Username</label>
                            <input type="text" class="form-control" id="username" placeholder="root">
                        </div>
                        <div class="mb-2">
                            <label>Password</label>
                            <input type="password" class="form-control" id="password">
                        </div>
                        <button type="submit" class="btn btn-primary w-100">Conectar</button>
                    </form>
                    <div id="status" class="mt-2"></div>
                </div>
            </div>
            
            <div class="card">
                <div class="card-header bg-warning">
                    Credenciales
                </div>
                <div class="card-body">
                    <h2>IP: 167.99.161.63</h2>
                    <h6>Credenciales SSH</h6>
                    <p><strong>User:</strong> root<br>
                    <strong>Pass:</strong>solarEn2026EsTodo</p>
                    
                    <hr>
                    <h6>Credenciales PostgreSQL</h6>
                    <p><strong>User:</strong> postgres<br>
                    <strong>Pass:</strong>solarEn2026EsTodo</p>

                    <hr>
                    <h6>Comandos PostgreSQL</h6>
                    <ul class="list-unstyled">
                        <li><code>psql -U postgres -h localhost -d solarcalc</code> - Conectar a DB</li>
                        <li><code>\dt</code> - Listar tablas (dentro de psql)</li>
                        <li><code>select * from casas;</code> - Ver casas</li>
                        <li><code>systemctl status postgresql</code> - Estado del servicio</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const socket = io('/ssh');
    const term = new Terminal({
        cursorBlink: true,
        theme: {
            background: '#1e1e1e'
        }
    });
    const fitAddon = new FitAddon.FitAddon();
    term.loadAddon(fitAddon);
    term.open(document.getElementById('terminal'));
    fitAddon.fit();
    
    window.addEventListener('resize', () => fitAddon.fit());

    term.onData(data => {
        socket.emit('ssh_input', {data: data});
    });

    socket.on('ssh_output', function(msg) {
        term.write(msg.data);
    });
    
    socket.on('ssh_status', function(msg) {
        const statusDiv = document.getElementById('status');
        if (msg.status === 'connected') {
            statusDiv.innerHTML = '<span class="text-success">Conectado</span>';
            term.focus();
        } else {
            statusDiv.innerHTML = '<span class="text-danger">Error: ' + msg.message + '</span>';
        }
    });

    document.getElementById('ssh-form').addEventListener('submit', function(e) {
        e.preventDefault();
        const host = document.getElementById('host').value;
        const port = document.getElementById('port').value;
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        
        document.getElementById('status').innerHTML = '<span class="text-warning">Conectando...</span>';
        term.clear();
        
        socket.emit('start_ssh', {
            host: host,
            port: port,
            username: username,
            password: password
        });
    });
</script>
{% endblock %}