{% extends 'base.html.twig' %}

{% block title %}Server Management - B62a Minecraft{% endblock %}

{% block body %}

<!-- LOADING OVERLAY -->
<div class="loading-overlay" id="loading-overlay">
    <div class="loading-content">
        <div class="spinner"></div>
        <div class="loading-message" id="loading-message">Bitte warten...</div>
        <div class="loading-hint">Dieser Vorgang kann einige Minuten dauern</div>
    </div>
</div>

<!-- TOAST CONTAINER -->
<div class="toast-container" id="toast-container"></div>

<!-- SUDO PASSWORD STICKY BAR -->
<div class="sudo-password-bar">
    <div class="sudo-password-container">
        <label for="global-sudo-password" class="sudo-label">Sudo-Passwort:</label>
        <input type="password" id="global-sudo-password" placeholder="Passwort eingeben..." class="sudo-input">
        <span class="sudo-hint">Wird für alle Aktionen benötigt (wird nicht gespeichert)</span>
    </div>
</div>

<div class="grid-row">
    <!-- SYSTEM INFORMATION (Row 1, Col 1-2) -->
    <div class="card" style="grid-column: span 2;">
        <h2>System Information</h2>
        <div class="info-grid">
            <div class="info-item">
                <span class="info-label">Hostname:</span>
                <span class="info-value" data-info="hostname">{{ system_info.hostname ?? 'N/A' }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">OS Version:</span>
                <span class="info-value" data-info="os_version">{{ system_info.os_version ?? 'N/A' }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">Kernel:</span>
                <span class="info-value" data-info="kernel">{{ system_info.kernel ?? 'N/A' }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">Uptime:</span>
                <span class="info-value" data-info="uptime">{{ system_info.uptime ?? 'N/A' }}</span>
            </div>
        </div>

        <button onclick="refreshSystemInfo()" class="btn bg-accent mt-20">SYSTEM INFO AKTUALISIEREN</button>
    </div>

    <!-- QUICK ACTIONS (Row 1, Col 3) -->
    <div class="card">
        <h2>Quick Actions</h2>
        <div class="actions-grid">
            <button onclick="runAptUpdate()" class="btn bg-accent w-full">APT UPDATE</button>
            <button onclick="runAptUpgrade()" class="btn bg-warning w-full">APT UPGRADE</button>
            <button onclick="checkPlayitStatus()" class="btn bg-accent w-full">PLAYIT STATUS</button>
            <button onclick="rebootSystem()" class="btn btn-danger w-full">SYSTEM REBOOT</button>
        </div>
    </div>

    <!-- SERVICE MANAGEMENT (Row 2, Col 1-2) -->
    <div class="card" style="grid-column: span 2;">
        <h2>Service Management</h2>

        <div class="service-controls">
            <div class="form-group">
                <label for="service-name">Service Name (z.B. playit, ssh, nginx):</label>
                <input type="text" id="service-name" placeholder="playit" class="bg-dark border p-10 rounded">
            </div>

            <div class="service-actions">
                <button onclick="checkServiceStatus()" class="btn bg-accent">STATUS</button>
                <button onclick="controlService('start')" class="btn bg-success">START</button>
                <button onclick="controlService('stop')" class="btn bg-danger">STOP</button>
                <button onclick="controlService('restart')" class="btn bg-warning">RESTART</button>
                <button onclick="controlService('enable')" class="btn bg-accent">ENABLE</button>
                <button onclick="controlService('disable')" class="btn bg-muted">DISABLE</button>
            </div>
        </div>

        <div id="service-output" class="terminal mt-20" style="display:none;"></div>

        <!-- Playit Status Display -->
        <div class="playit-status mt-20">
            <h3>Playit Service Status</h3>
            <div class="status-display-inline">
                <span class="status-dot dot-offline" id="playit-status-dot"></span>
                <span id="playit-status-text">UNBEKANNT (Passwort benötigt)</span>
            </div>
            <div class="mt-10">
                <button onclick="controlSpecificService('playit', 'start')" class="btn bg-success">START PLAYIT</button>
                <button onclick="controlSpecificService('playit', 'stop')" class="btn bg-danger">STOP PLAYIT</button>
                <button onclick="controlSpecificService('playit', 'restart')" class="btn bg-warning">RESTART PLAYIT</button>
            </div>
        </div>
    </div>

    <!-- TERMINAL (Row 2-3, Col 3) -->
    <div class="card" style="grid-row: span 2;">
        <h2>Terminal</h2>
        <p class="text-muted mb-10">Befehle direkt auf dem Server ausführen</p>

        <div class="terminal-controls">
            <div class="form-group">
                <label>
                    <input type="checkbox" id="use-sudo" checked>
                    <span>Mit sudo ausführen</span>
                </label>
            </div>

            <textarea id="command-input" placeholder="Befehl eingeben (z.B. 'ls -la /home/pepe' oder 'systemctl status playit')..."
                      class="bg-dark border p-10 font-mono" rows="3" style="width: 100%;"></textarea>

            <button onclick="executeCommand()" class="btn bg-accent w-full mt-10">BEFEHL AUSFÜHREN</button>
        </div>

        <div id="terminal-output" class="terminal mt-20">
            <span class="text-muted">Output wird hier angezeigt...</span>
        </div>

        <button onclick="clearTerminal()" class="btn bg-muted w-full mt-10">TERMINAL LEEREN</button>
    </div>

    <!-- PACKAGE MANAGEMENT (Row 3, Col 1-2) -->
    <div class="card" style="grid-column: span 2;">
        <h2>Package Management</h2>

        <div class="package-controls">
            <div class="form-group">
                <label for="package-name">Package Name:</label>
                <input type="text" id="package-name" placeholder="htop" class="bg-dark border p-10 rounded">
            </div>

            <div class="package-actions">
                <button onclick="installPackage()" class="btn bg-success">INSTALL</button>
                <button onclick="removePackage()" class="btn bg-danger">REMOVE</button>
            </div>
        </div>

        <div id="package-output" class="terminal mt-20" style="display:none;"></div>
    </div>

    <!-- DISK & MEMORY INFO (Row 4, Col 1-3) -->
    <div class="card" style="grid-column: span 3;">
        <h2>Disk & Memory Information</h2>
        <div class="info-display-row">
            <div class="info-section">
                <h3>Disk Usage</h3>
                <pre class="terminal" data-info="disk_usage">{{ system_info.disk_usage ?? 'N/A' }}</pre>
            </div>
            <div class="info-section">
                <h3>Memory Usage</h3>
                <pre class="terminal" data-info="memory">{{ system_info.memory ?? 'N/A' }}</pre>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block javascripts %}
<script>
    // Get sudo password from input
    function getSudoPassword() {
        const password = document.getElementById('global-sudo-password').value.trim();
        if (!password) {
            alert('Bitte gib zuerst das Sudo-Passwort oben ein!');
            document.getElementById('global-sudo-password').focus();
            return null;
        }
        return password;
    }

    // Refresh System Info
    function refreshSystemInfo() {
        showLoading('Lade System-Informationen...', 'Sammle Daten vom Server...');

        fetch('{{ path('app_system_api_info') }}')
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    document.querySelector('[data-info="hostname"]').textContent = data.data.hostname || 'N/A';
                    document.querySelector('[data-info="os_version"]').textContent = data.data.os_version || 'N/A';
                    document.querySelector('[data-info="kernel"]').textContent = data.data.kernel || 'N/A';
                    document.querySelector('[data-info="uptime"]').textContent = data.data.uptime || 'N/A';
                    document.querySelector('[data-info="disk_usage"]').textContent = data.data.disk_usage || 'N/A';
                    document.querySelector('[data-info="memory"]').textContent = data.data.memory || 'N/A';

                    showSuccess('System-Informationen aktualisiert');
                } else {
                    showError('Fehler beim Laden der System-Informationen');
                }
            })
            .catch(e => showError('Fehler: ' + e.message));
    }

    // Run apt update
    function runAptUpdate() {
        const password = getSudoPassword();
        if (!password) return;

        if (!confirm('Möchtest du "apt update" ausführen?')) return;

        showLoading('Führe apt update aus...', 'Paketlisten werden aktualisiert...');

        fetch('{{ path('app_system_api_apt_update') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: `sudo_password=${encodeURIComponent(password)}`
        })
        .then(r => r.json())
        .then(data => {
            showTerminalOutput('service-output', data.output + (data.error || ''));

            if (data.success) {
                showSuccess('apt update erfolgreich abgeschlossen');
            } else {
                showError('apt update fehlgeschlagen');
            }
        })
        .catch(e => showError('Fehler: ' + e.message));
    }

    // Run apt upgrade
    function runAptUpgrade() {
        const password = getSudoPassword();
        if (!password) return;

        if (!confirm('Möchtest du "apt upgrade" ausführen? Dies kann einige Minuten dauern.')) return;

        showLoading('Führe apt upgrade aus...', 'Bitte warten, dies kann 5-10 Minuten dauern. Fenster nicht schließen!');

        fetch('{{ path('app_system_api_apt_upgrade') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: `sudo_password=${encodeURIComponent(password)}`
        })
        .then(r => r.json())
        .then(data => {
            showTerminalOutput('service-output', data.output + (data.error || ''));

            if (data.success) {
                showSuccess('apt upgrade erfolgreich abgeschlossen');
            } else {
                showError('apt upgrade fehlgeschlagen');
            }
        })
        .catch(e => showError('Fehler: ' + e.message));
    }

    // Check service status
    function checkServiceStatus() {
        const password = getSudoPassword();
        if (!password) return;

        const serviceName = document.getElementById('service-name').value.trim();
        if (!serviceName) {
            showWarning('Bitte einen Service-Namen eingeben');
            return;
        }

        showLoading(`Prüfe Status von ${serviceName}...`, 'Verbinde mit Server...');

        fetch(`{{ path('app_system_api_service_status', {serviceName: '__SERVICE__'}) }}`.replace('__SERVICE__', serviceName), {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: `sudo_password=${encodeURIComponent(password)}`
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                const status = data.data;
                const output = `Service: ${status.service}\n` +
                             `Status: ${status.is_active ? 'RUNNING' : 'STOPPED'}\n` +
                             `Enabled: ${status.is_enabled ? 'YES' : 'NO'}\n\n` +
                             status.status_output;

                showTerminalOutput('service-output', output);
                showSuccess('Status abgerufen');
            } else {
                showError('Fehler beim Abrufen des Status');
            }
        })
        .catch(e => showError('Fehler: ' + e.message));
    }

    // Control service (start/stop/restart/enable/disable)
    function controlService(action) {
        const password = getSudoPassword();
        if (!password) return;

        const serviceName = document.getElementById('service-name').value.trim();
        if (!serviceName) {
            showWarning('Bitte einen Service-Namen eingeben');
            return;
        }

        if (!confirm(`Möchtest du "${action}" für den Service "${serviceName}" ausführen?`)) return;

        showLoading(`Führe ${action} für ${serviceName} aus...`, 'Befehl wird ausgeführt...');

        const url = `{{ path('app_system_api_service_control', {serviceName: '__SERVICE__', action: '__ACTION__'}) }}`
            .replace('__SERVICE__', serviceName)
            .replace('__ACTION__', action);

        fetch(url, {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: `sudo_password=${encodeURIComponent(password)}`
        })
        .then(r => r.json())
        .then(data => {
            showTerminalOutput('service-output', data.output + (data.error || ''));

            if (data.success) {
                showSuccess(data.message);
            } else {
                showError('Aktion fehlgeschlagen: ' + data.message);
            }
        })
        .catch(e => showError('Fehler: ' + e.message));
    }

    // Control specific service (for playit buttons)
    function controlSpecificService(serviceName, action) {
        const password = getSudoPassword();
        if (!password) return;

        if (!confirm(`Möchtest du "${action}" für den Service "${serviceName}" ausführen?`)) return;

        showLoading(`Führe ${action} für ${serviceName} aus...`);

        const url = `{{ path('app_system_api_service_control', {serviceName: '__SERVICE__', action: '__ACTION__'}) }}`
            .replace('__SERVICE__', serviceName)
            .replace('__ACTION__', action);

        fetch(url, {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: `sudo_password=${encodeURIComponent(password)}`
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showSuccess(data.message);
                // Refresh playit status
                setTimeout(checkPlayitStatus, 1000);
            } else {
                showError('Aktion fehlgeschlagen: ' + data.message);
            }
        })
        .catch(e => showError('Fehler: ' + e.message));
    }

    // Check Playit Status
    function checkPlayitStatus() {
        const password = getSudoPassword();
        if (!password) return;

        fetch('{{ path('app_system_api_playit_status') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: `sudo_password=${encodeURIComponent(password)}`
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                const status = data.data;
                const dot = document.getElementById('playit-status-dot');
                const text = document.getElementById('playit-status-text');

                if (status.is_active) {
                    dot.className = 'status-dot dot-online';
                    text.textContent = 'RUNNING';
                } else {
                    dot.className = 'status-dot dot-offline';
                    text.textContent = 'STOPPED';
                }

                showSuccess('Playit Status aktualisiert');
            } else {
                showError('Fehler beim Abrufen des Playit Status: ' + (data.error || ''));
            }
        })
        .catch(e => showError('Fehler: ' + e.message));
    }

    // Execute custom command
    function executeCommand() {
        const command = document.getElementById('command-input').value.trim();
        const useSudo = document.getElementById('use-sudo').checked;

        if (!command) {
            showWarning('Bitte einen Befehl eingeben');
            return;
        }

        let password = null;
        if (useSudo) {
            password = getSudoPassword();
            if (!password) return;
        }

        showLoading('Führe Befehl aus...', 'Befehl wird auf dem Server ausgeführt...');

        const body = `command=${encodeURIComponent(command)}&use_sudo=${useSudo ? '1' : '0'}` +
                    (useSudo ? `&sudo_password=${encodeURIComponent(password)}` : '');

        fetch('{{ path('app_system_api_command_execute') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: body
        })
        .then(r => r.json())
        .then(data => {
            const output = `$ ${useSudo ? 'sudo ' : ''}${command}\n\n` +
                         data.output +
                         (data.error ? '\n\nERROR:\n' + data.error : '') +
                         `\n\nExit Code: ${data.exit_code}`;

            showTerminalOutput('terminal-output', output);

            if (data.success) {
                showSuccess('Befehl erfolgreich ausgeführt');
            } else {
                showError('Befehl fehlgeschlagen (Exit Code: ' + data.exit_code + ')');
            }
        })
        .catch(e => showError('Fehler: ' + e.message));
    }

    // Clear terminal
    function clearTerminal() {
        document.getElementById('terminal-output').innerHTML = '<span class="text-muted">Output wird hier angezeigt...</span>';
    }

    // Install package
    function installPackage() {
        const password = getSudoPassword();
        if (!password) return;

        const packageName = document.getElementById('package-name').value.trim();
        if (!packageName) {
            showWarning('Bitte einen Package-Namen eingeben');
            return;
        }

        if (!confirm(`Möchtest du das Package "${packageName}" installieren?`)) return;

        showLoading(`Installiere ${packageName}...`, 'Download und Installation können einige Minuten dauern');

        fetch('{{ path('app_system_api_package_install') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: `package=${encodeURIComponent(packageName)}&sudo_password=${encodeURIComponent(password)}`
        })
        .then(r => r.json())
        .then(data => {
            showTerminalOutput('package-output', data.output + (data.error || ''));

            if (data.success) {
                showSuccess(`Package "${packageName}" erfolgreich installiert`);
            } else {
                showError('Installation fehlgeschlagen');
            }
        })
        .catch(e => showError('Fehler: ' + e.message));
    }

    // Remove package
    function removePackage() {
        const password = getSudoPassword();
        if (!password) return;

        const packageName = document.getElementById('package-name').value.trim();
        if (!packageName) {
            showWarning('Bitte einen Package-Namen eingeben');
            return;
        }

        if (!confirm(`Möchtest du das Package "${packageName}" WIRKLICH entfernen?`)) return;

        showLoading(`Entferne ${packageName}...`, 'Package wird deinstalliert...');

        fetch('{{ path('app_system_api_package_remove') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: `package=${encodeURIComponent(packageName)}&sudo_password=${encodeURIComponent(password)}`
        })
        .then(r => r.json())
        .then(data => {
            showTerminalOutput('package-output', data.output + (data.error || ''));

            if (data.success) {
                showSuccess(`Package "${packageName}" erfolgreich entfernt`);
            } else {
                showError('Entfernung fehlgeschlagen');
            }
        })
        .catch(e => showError('Fehler: ' + e.message));
    }

    // Reboot system
    function rebootSystem() {
        const password = getSudoPassword();
        if (!password) return;

        if (!confirm('ACHTUNG: Möchtest du das System WIRKLICH neu starten?\n\nAlle Dienste werden beendet und der Server wird neu gestartet.')) return;
        if (!confirm('Letzte Warnung: System wird JETZT neu gestartet!')) return;

        showLoading('System wird neu gestartet...', 'Server startet neu. Dies dauert ca. 2-3 Minuten.');

        fetch('{{ path('app_system_api_reboot') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: `sudo_password=${encodeURIComponent(password)}`
        })
        .then(r => r.json())
        .then(data => {
            showSuccess('Reboot-Befehl gesendet. System startet neu...');
        })
        .catch(e => showError('Fehler: ' + e.message));
    }

    // Utility functions
    function showTerminalOutput(elementId, text) {
        const element = document.getElementById(elementId);
        element.style.display = 'block';
        element.textContent = text;
    }

    function showLoading(message, hint = 'Dieser Vorgang kann einige Minuten dauern') {
        const overlay = document.getElementById('loading-overlay');
        const messageEl = document.getElementById('loading-message');
        const hintEl = overlay.querySelector('.loading-hint');

        messageEl.textContent = message;
        hintEl.textContent = hint;
        overlay.classList.add('active');
    }

    function hideLoading() {
        const overlay = document.getElementById('loading-overlay');
        overlay.classList.remove('active');
    }

    function showToast(message, type = 'success') {
        const container = document.getElementById('toast-container');
        const toast = document.createElement('div');
        toast.className = `toast ${type}`;

        const icons = {
            success: '✓',
            error: '✗',
            warning: '⚠'
        };

        toast.innerHTML = `
            <span class="toast-icon">${icons[type] || '●'}</span>
            <span class="toast-message">${message}</span>
            <button class="toast-close" onclick="this.parentElement.remove()">×</button>
        `;

        container.appendChild(toast);

        // Auto-remove after 5 seconds
        setTimeout(() => {
            toast.style.animation = 'slideIn 0.3s ease-out reverse';
            setTimeout(() => toast.remove(), 300);
        }, 5000);
    }

    function showSuccess(message) {
        hideLoading();
        showToast(message, 'success');
    }

    function showError(message) {
        hideLoading();
        showToast(message, 'error');
    }

    function showWarning(message) {
        hideLoading();
        showToast(message, 'warning');
    }

    // Enter key support for inputs
    document.getElementById('command-input').addEventListener('keypress', function(e) {
        if (e.key === 'Enter' && e.ctrlKey) {
            executeCommand();
        }
    });

    document.getElementById('service-name').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            checkServiceStatus();
        }
    });

    document.getElementById('package-name').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            installPackage();
        }
    });
</script>
{% endblock %}