{% extends "sidebar.html" %}

{% block title %}AstraOS — Konsole: {{ bot.name }}{% endblock %}

{% block head %}
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
<style>
    #console-output {
        font-family: 'Courier New', Courier, monospace;
        background-color: #0d1117;
        color: #c9d1d9;
        height: 60vh;
        overflow-y: auto;
        padding: 1rem;
        border-radius: 0.5rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .log-line { white-space: pre-wrap; word-break: break-all; }
    .log-stdout { color: #c9d1d9; }
    .log-stderr { color: #ff7b72; }
    .log-system { color: #58a6ff; font-style: italic; }
    .log-error { color: #f85149; font-weight: bold; }

    /* Toggle Switch */
    .switch { position: relative; display: inline-block; width: 60px; height: 34px; }
    .switch input { opacity: 0; width: 0; height: 0; }
    .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4a5568; transition: .4s; border-radius: 34px; }
    .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
    input:checked + .slider { background-color: #28a745; }
    input:checked + .slider:before { transform: translateX(26px); }
</style>
{% endblock %}

{% block content %}
<!-- HEADER -->
<header class="flex justify-between items-center mb-6">
    <div>
        <a href="{{ url_for('discord_bots') }}" class="text-sm {% if maintenance_active %}text-yellow-400 hover:text-yellow-300{% else %}text-purple-400 hover:text-purple-300{% endif %}">‹ Zurück zur Übersicht</a>
        <h2 class="text-4xl font-bold tracking-wide {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">Konsole: {{ bot.name }}</h2>
    </div>
    <div class="flex items-center gap-4">
        <span id="status-indicator" class="px-3 py-1 text-sm font-semibold rounded-full
             {% if bot.status == 'running' %}bg-green-500/20 text-green-300{% else %}bg-red-500/20 text-red-300{% endif %}">
            {{ bot.status }}
        </span>
        <label class="switch">
            <input type="checkbox" id="bot-toggle" {% if bot.status == 'running' %}checked{% endif %}>
            <span class="slider"></span>
        </label>
    </div>
</header>

<!-- CONSOLE -->
<div id="console-output">
    <div class="log-line log-system">Initialisiere Konsolenverbindung...</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const socket = io();
    const consoleOutput = document.getElementById('console-output');
    const botToggle = document.getElementById('bot-toggle');
    const statusIndicator = document.getElementById('status-indicator');
    const botId = "{{ bot._id }}";

    function addLog(log) {
        const line = document.createElement('div');
        line.className = `log-line log-${log.type}`;
        line.textContent = log.data;
        consoleOutput.appendChild(line);
        consoleOutput.scrollTop = consoleOutput.scrollHeight;
    }

    socket.on('connect', () => {
        socket.emit('join_console', { bot_id: botId });
    });

    socket.on('console_output', (log) => {
        addLog(log);
    });

    socket.on('status_update', (data) => {
        if (data.bot_id === botId) {
            statusIndicator.textContent = data.status;
            statusIndicator.className = `px-3 py-1 text-sm font-semibold rounded-full ${data.status === 'running' ? 'bg-green-500/20 text-green-300' : 'bg-red-500/20 text-red-300'}`;
            botToggle.checked = data.status === 'running';
        }
    });

    botToggle.addEventListener('change', () => {
        const action = botToggle.checked ? 'start' : 'stop';
        addLog({type: 'system', data: `Sende '${action}' Befehl...`});
        socket.emit('toggle_bot', { bot_id: botId, action: action });
    });

    window.addEventListener('beforeunload', () => {
        socket.emit('leave_console', { bot_id: botId });
        socket.disconnect();
    });
});
</script>
{% endblock %}