{% extends "base.html" %}

{% block title %}Console - {{ hub_name }}{% endblock %}

{% block head %}
<style>
    .console-container {
        background-color: #1e1e1e;
        border-radius: 6px;
        padding: 1rem;
        min-height: 500px;
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    }
    
    .console-output {
        color: #d4d4d4;
        font-size: 13px;
        line-height: 1.6;
        max-height: 450px;
        overflow-y: auto;
        padding: 0.5rem;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    
    .console-output .output-line {
        margin-bottom: 0.25rem;
    }
    
    .console-output .cmd-input {
        color: #4ec9b0;
    }
    
    .console-output .cmd-output {
        color: #ce9178;
    }
    
    .console-output .cmd-error {
        color: #f14c4c;
    }
    
    .console-output .cmd-success {
        color: #89d185;
    }
    
    .console-output .cmd-info {
        color: #9cdcfe;
    }
    
    .console-output .timestamp {
        color: #6a9955;
        font-size: 11px;
    }
    
    .console-input-wrapper {
        display: flex;
        align-items: center;
        background-color: #252526;
        border-radius: 4px;
        padding: 0.5rem;
        margin-top: 0.5rem;
    }
    
    .console-prompt {
        color: #4ec9b0;
        margin-right: 0.5rem;
        user-select: none;
    }
    
    .console-input {
        flex: 1;
        background: transparent;
        border: none;
        color: #d4d4d4;
        font-family: inherit;
        font-size: 13px;
        outline: none;
    }
    
    .console-input::placeholder {
        color: #6a6a6a;
    }
    
    .command-history {
        max-height: 200px;
        overflow-y: auto;
    }
    
    .history-item {
        cursor: pointer;
        padding: 0.5rem;
        border-radius: 4px;
        font-family: monospace;
        font-size: 12px;
    }
    
    .history-item:hover {
        background-color: #f5f5f5;
    }
    
    .quick-cmd-btn {
        font-family: monospace;
        font-size: 12px;
    }
</style>
{% endblock %}

{% block content %}
<!-- Console Header -->
<div class="level">
    <div class="level-left">
        <div class="level-item">
            <h1 class="title is-4">
                <i class="fas fa-terminal mr-2"></i>
                Hub Console
            </h1>
        </div>
    </div>
    <div class="level-right">
        <div class="level-item">
            <span class="tag is-medium" id="console-hub-status">
                <i class="fas fa-circle mr-1" style="font-size: 8px;"></i>
                <span id="console-status-text">Connecting...</span>
            </span>
        </div>
    </div>
</div>

<div class="columns">
    <!-- Main Console -->
    <div class="column is-8">
        <div class="box p-0">
            <div class="console-container">
                <div class="console-output" id="console-output">
                    <div class="output-line">
                        <span class="cmd-info">Verlihub Console v1.0</span>
                    </div>
                    <div class="output-line">
                        <span class="cmd-info">Connected to: {{ hub_name }}</span>
                    </div>
                    <div class="output-line">
                        <span class="cmd-info">Type "!help" for available commands</span>
                    </div>
                    <div class="output-line">&nbsp;</div>
                </div>
                
                <div class="console-input-wrapper">
                    <span class="console-prompt">$</span>
                    <input type="text" 
                           class="console-input" 
                           id="console-input" 
                           placeholder="Enter command..." 
                           autocomplete="off"
                           autofocus>
                </div>
            </div>
        </div>
        
        <!-- Console Controls -->
        <div class="buttons mt-3">
            <button class="button is-small" onclick="clearConsole()">
                <i class="fas fa-eraser mr-1"></i> Clear
            </button>
            <button class="button is-small" onclick="scrollToBottom()">
                <i class="fas fa-arrow-down mr-1"></i> Scroll to Bottom
            </button>
            <button class="button is-small" onclick="copyOutput()">
                <i class="fas fa-copy mr-1"></i> Copy Output
            </button>
        </div>
    </div>
    
    <!-- Sidebar -->
    <div class="column is-4">
        <!-- Quick Commands -->
        <div class="box">
            <h3 class="title is-6">
                <i class="fas fa-bolt mr-2"></i>
                Quick Commands
            </h3>
            
            <div class="buttons are-small">
                <button class="button quick-cmd-btn is-info is-light" onclick="runCommand('!help')">
                    !help
                </button>
                <button class="button quick-cmd-btn is-info is-light" onclick="runCommand('!hubinfo')">
                    !hubinfo
                </button>
                <button class="button quick-cmd-btn is-info is-light" onclick="runCommand('!lstplug')">
                    !lstplug
                </button>
                <button class="button quick-cmd-btn is-info is-light" onclick="runCommand('!ul')">
                    !ul
                </button>
                <button class="button quick-cmd-btn is-info is-light" onclick="runCommand('!banlist')">
                    !banlist
                </button>
                <button class="button quick-cmd-btn is-info is-light" onclick="runCommand('!reglist')">
                    !reglist
                </button>
                <button class="button quick-cmd-btn is-warning is-light" onclick="runCommand('!mc Hello from dashboard!')">
                    Broadcast
                </button>
            </div>
        </div>
        
        <!-- Command History -->
        <div class="box">
            <h3 class="title is-6">
                <i class="fas fa-history mr-2"></i>
                Command History
            </h3>
            
            <div class="command-history" id="command-history">
                <p class="has-text-grey is-size-7">No commands yet</p>
            </div>
            
            <button class="button is-small is-light mt-3" onclick="clearHistory()">
                <i class="fas fa-trash mr-1"></i> Clear History
            </button>
        </div>
        
        <!-- Command Reference -->
        <div class="box">
            <h3 class="title is-6">
                <i class="fas fa-book mr-2"></i>
                Command Reference
            </h3>
            
            <div class="content is-small">
                <table class="table is-narrow is-fullwidth">
                    <tbody>
                        <tr>
                            <td><code>!help</code></td>
                            <td>Show help</td>
                        </tr>
                        <tr>
                            <td><code>!hubinfo</code></td>
                            <td>Hub information</td>
                        </tr>
                        <tr>
                            <td><code>!ul</code></td>
                            <td>User list</td>
                        </tr>
                        <tr>
                            <td><code>!reglist</code></td>
                            <td>Registered users</td>
                        </tr>
                        <tr>
                            <td><code>!banlist</code></td>
                            <td>Active bans</td>
                        </tr>
                        <tr>
                            <td><code>+reguser</code></td>
                            <td>Register user</td>
                        </tr>
                        <tr>
                            <td><code>!mc &lt;msg&gt;</code></td>
                            <td>Broadcast message</td>
                        </tr>
                        <tr>
                            <td><code>!kick</code></td>
                            <td>Kick user</td>
                        </tr>
                        <tr>
                            <td><code>!ban</code></td>
                            <td>Ban user</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    const consoleOutput = document.getElementById('console-output');
    const consoleInput = document.getElementById('console-input');
    const commandHistoryEl = document.getElementById('command-history');
    const authToken = '{{ auth_token }}';
    
    let commandHistory = JSON.parse(localStorage.getItem('consoleHistory') || '[]');
    let historyIndex = -1;
    
    // Initialize
    document.addEventListener('DOMContentLoaded', function() {
        updateHistoryDisplay();
        consoleInput.focus();
    });
    
    // Handle input events
    consoleInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && this.value.trim()) {
            executeCommand(this.value.trim());
            this.value = '';
            historyIndex = -1;
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            navigateHistory(-1);
        } else if (e.key === 'ArrowDown') {
            e.preventDefault();
            navigateHistory(1);
        }
    });
    
    function navigateHistory(direction) {
        if (commandHistory.length === 0) return;
        
        if (direction < 0) {
            // Up - older commands
            if (historyIndex < commandHistory.length - 1) {
                historyIndex++;
            }
        } else {
            // Down - newer commands
            if (historyIndex > 0) {
                historyIndex--;
            } else if (historyIndex === 0) {
                historyIndex = -1;
                consoleInput.value = '';
                return;
            }
        }
        
        if (historyIndex >= 0 && historyIndex < commandHistory.length) {
            consoleInput.value = commandHistory[historyIndex];
        }
    }
    
    function executeCommand(cmd) {
        // Add to history
        commandHistory.unshift(cmd);
        if (commandHistory.length > 50) {
            commandHistory.pop();
        }
        localStorage.setItem('consoleHistory', JSON.stringify(commandHistory));
        updateHistoryDisplay();
        
        // Show command in output
        const timestamp = new Date().toLocaleTimeString();
        appendOutput(`<span class="timestamp">[${timestamp}]</span> <span class="cmd-input">$ ${escapeHtml(cmd)}</span>`);
        
        // Send to API
        fetch('/api/v1/console/execute', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + authToken
            },
            body: JSON.stringify({ command: cmd })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                if (data.output) {
                    appendOutput(`<span class="cmd-output">${escapeHtml(data.output)}</span>`);
                }
                if (data.message) {
                    appendOutput(`<span class="cmd-success">${escapeHtml(data.message)}</span>`);
                }
            } else {
                appendOutput(`<span class="cmd-error">Error: ${escapeHtml(data.detail || 'Command failed')}</span>`);
            }
        })
        .catch(error => {
            appendOutput(`<span class="cmd-error">Error: ${escapeHtml(error.message)}</span>`);
        });
    }
    
    function runCommand(cmd) {
        consoleInput.value = cmd;
        executeCommand(cmd);
        consoleInput.value = '';
    }
    
    function appendOutput(html) {
        const line = document.createElement('div');
        line.className = 'output-line';
        line.innerHTML = html;
        consoleOutput.appendChild(line);
        scrollToBottom();
    }
    
    function clearConsole() {
        consoleOutput.innerHTML = `
            <div class="output-line">
                <span class="cmd-info">Console cleared</span>
            </div>
            <div class="output-line">&nbsp;</div>
        `;
    }
    
    function scrollToBottom() {
        consoleOutput.scrollTop = consoleOutput.scrollHeight;
    }
    
    function copyOutput() {
        const text = consoleOutput.innerText;
        navigator.clipboard.writeText(text).then(() => {
            // Show notification
            const notification = document.createElement('div');
            notification.className = 'notification is-success is-light';
            notification.innerHTML = '<button class="delete"></button>Output copied to clipboard';
            notification.style.position = 'fixed';
            notification.style.top = '10px';
            notification.style.right = '10px';
            notification.style.zIndex = '9999';
            document.body.appendChild(notification);
            
            notification.querySelector('.delete').addEventListener('click', () => {
                notification.remove();
            });
            
            setTimeout(() => notification.remove(), 3000);
        });
    }
    
    function updateHistoryDisplay() {
        if (commandHistory.length === 0) {
            commandHistoryEl.innerHTML = '<p class="has-text-grey is-size-7">No commands yet</p>';
            return;
        }
        
        const html = commandHistory.slice(0, 10).map(cmd => 
            `<div class="history-item" onclick="runCommand('${escapeHtml(cmd)}')">${escapeHtml(cmd)}</div>`
        ).join('');
        
        commandHistoryEl.innerHTML = html;
    }
    
    function clearHistory() {
        commandHistory = [];
        localStorage.removeItem('consoleHistory');
        updateHistoryDisplay();
    }
    
    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    // WebSocket real-time status for console page
    function updateConsoleStatus(connected, hubRunning) {
        const badge = document.getElementById('console-hub-status');
        const text = document.getElementById('console-status-text');
        if (connected && hubRunning) {
            badge.className = 'tag is-success is-medium';
            text.textContent = 'Connected';
        } else if (connected) {
            badge.className = 'tag is-success is-medium';
            text.textContent = 'Connected';
        } else {
            badge.className = 'tag is-danger is-medium';
            text.textContent = 'Disconnected';
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        VHWebSocket.on('ws_connected', s => updateConsoleStatus(true, s.hub_running));
        VHWebSocket.on('ws_disconnected', () => updateConsoleStatus(false, false));
        VHWebSocket.on('stats', msg => updateConsoleStatus(true, msg.hub_running !== false));
        VHWebSocket.on('connected', msg => updateConsoleStatus(true, msg.hub_running !== false));
        // Set initial state from WH global
        const s = VHWebSocket.getState();
        updateConsoleStatus(s.connected, s.hub_running);
    });
</script>
{% endblock %}