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

{% block title %}Dashboard - B62a Minecraft{% endblock %}

{% block body %}

    <div class="grid-row">
        <!-- ... (Players and Status cards) ... -->
        <!-- PLAYERS (Row 1 & 2, Col 1) -->
        <div class="card card-players">
            <h2>Spieler</h2>
            <div class="players-list-container">
                {% if known_players|length > 0 %}
                    {% for player in known_players %}
                    <div class="user-card">
                        <img src="https://minotar.net/avatar/{{ player.name }}/40" class="user-avatar" alt="Skin">
                        <div class="user-info">
                            <b>{{ player.name }}</b>
                            <div class="user-info-details">
                                {% if player.last_seen %}
                                    <span>Letzter Login: {{ player.last_seen }}</span>
                                {% endif %}
                                {% if not player.is_online and player.last_logout %}
                                    <span>Letzter Logout: {{ player.last_logout }}</span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="user-badges">
                             {% if is_granted('ROLE_MODERATOR') %}
                                 {% if player.is_op %}
                                    <span class="badge badge-admin text-sm cursor-pointer"
                                          onclick="togglePlayerOp('{{ player.name }}', false)"
                                          title="Klicken um OP-Rechte zu entziehen">ADMINISTRATOR</span>
                                 {% else %}
                                    <span class="badge badge-player text-sm cursor-pointer"
                                          onclick="togglePlayerOp('{{ player.name }}', true)"
                                          title="Klicken um OP-Rechte zu erteilen">SPIELER</span>
                                 {% endif %}
                             {% else %}
                                 {% if player.is_op %}
                                    <span class="badge badge-admin text-sm">ADMINISTRATOR</span>
                                 {% else %}
                                    <span class="badge badge-player text-sm">SPIELER</span>
                                 {% endif %}
                             {% endif %}

                             {% if player.is_online %}
                                <span class="badge badge-online text-sm">ONLINE</span>
                             {% else %}
                                <span class="badge badge-offline text-sm">OFFLINE</span>
                             {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                    <div class="empty-state">Keine bekannten Spieler</div>
                {% endif %}
            </div>
        </div>

        <!-- SERVER STATUS & PERFORMANCE (Row 1, Col 2 & 3) -->
        <div class="card card-status-perf">
            <div class="status-perf-grid">
                <!-- LEFT: STATUS -->
                <div>
                    <h2>Server Status</h2>
                    <div class="status-display">
                        {% if server_status.running %}
                            <div class="status-dot dot-online status-dot-large"></div>
                            <div class="status-title status-title-online">ONLINE</div>
                            <div class="status-info">
                                <span>Uptime: <span id="server-uptime" class="text-primary">{{ server_status.uptime ?? 'Unbekannt' }}</span></span>
                                <span class="opacity-30">|</span>
                                <span>Uhrzeit: <span id="current-time" class="text-primary">--:--:--</span></span>
                                <button onclick="refreshAllData()" id="refresh-btn" class="refresh-btn" title="Alle Daten neu laden">REFRESH SERVER DATA</button>
                            </div>
                        {% else %}
                            <div class="status-dot dot-offline status-dot-large"></div>
                            <div class="status-title status-title-offline">OFFLINE</div>
                            <div class="status-info">
                                <span>Uhrzeit: <span id="current-time" class="text-primary">--:--:--</span></span>
                                <button onclick="refreshAllData()" id="refresh-btn" class="refresh-btn" title="Alle Daten neu laden">🔄 </button>
                            </div>
                        {% endif %}
                    </div>

                    <div class="connection-rows">
                        <div class="connection-row">
                            <span class="connection-label" title="Zugang von Extern"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#8C1AF6"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q20 0 40 2.5t40 4.5v82q-20-2-40-4.5t-40-2.5q-26 36-45 75.5T404-640h116v80H386q-3 20-4.5 40t-1.5 40q0 20 1.5 40t4.5 40h188q3-20 4.5-40t1.5-40q0-20-1.5-40t-4.5-40h80q3 20 4.5 40t1.5 40q0 20-1.5 40t-4.5 40h136q5-20 7.5-40t2.5-40q0-20-2.5-40t-7.5-40h82q4 20 6 40t2 40q0 83-31.5 156T763-197q-54 54-127 85.5T480-80ZM170-400h136q-3-20-4.5-40t-1.5-40q0-20 1.5-40t4.5-40H170q-5 20-7.5 40t-2.5 40q0 20 2.5 40t7.5 40Zm206 222q-18-34-31.5-69.5T322-320H204q29 51 73 87.5t99 54.5ZM204-640h118q9-37 22.5-72.5T376-782q-55 18-99 54.5T204-640Zm276 478q26-36 45-75.5t31-82.5H404q12 43 31 82.5t45 75.5Zm104-16q55-18 99-54.5t73-87.5H638q-9 37-22.5 72.5T584-178Zm56-462v-240h240v240H640Zm120-120h80v-80h-80v80Z"/></svg></span>
                            <div class="connection-value">
                                <code class="font-mono">unsercraft.playit.love</code>
                                <span onclick="copyToClipboard(this, 'unsercraft.playit.love')" class="badge badge-player copy-badge">KOPIEREN</span>
                            </div>
                        </div>
                        <div class="connection-row">
                            <span class="connection-label" title="Zugang aus unserem WLAN"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#8C1AF6"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/></svg></span>
                            <div class="connection-value">
                                <code class="font-mono">{{ connection_info.local }}</code>
                                <span onclick="copyToClipboard(this, '{{ connection_info.local }}')" class="badge badge-player copy-badge">KOPIEREN</span>
                            </div>
                        </div>
                    </div>
                    <div class="divider">
                        <div class="res-row mb-0" data-backup-stats>
                            <div class="res-label"><span>Letztes Backup</span><span>{{ backup_stats.newest ? backup_stats.newest|date('d.m. H:i') : 'Keines' }}</span></div>
                            <div class="text-base text-muted text-right">{{ backup_stats.count }} Stk. ({{ backup_stats.total_size_mb }} MB)</div>
                        </div>
                    </div>
                </div>

                <!-- RIGHT: PERFORMANCE -->
                <div class="performance-section">
                    <h2>Performance</h2>

                    {% if metrics.cpu_load %}
                    <div class="res-row" data-metric="cpu">
                        <div class="res-label"><span>CPU Last</span><span>{{ metrics.cpu_load['1min']|number_format(2) }}</span></div>
                        {% set cpuPercent = (metrics.cpu_load['1min'] / 4 * 100)|round %}
                        {% set cpuColor = cpuPercent > 80 ? 'var(--danger)' : (cpuPercent > 50 ? 'var(--warning)' : 'var(--accent)') %}
                        <div class="bar-bg"><div class="bar-fill" style="width:{{ cpuPercent > 100 ? 100 : cpuPercent }}%; background:{{ cpuColor }};"></div></div>
                        <div class="text-base text-muted text-right mt-2">
                            5min: {{ metrics.cpu_load['5min']|number_format(2) }} · 15min: {{ metrics.cpu_load['15min']|number_format(2) }}
                        </div>
                    </div>
                    {% endif %}

                    {% if metrics.temperature %}
                        {% set temp = metrics.temperature|first %}
                        <div class="res-row" data-metric="temp">
                            <div class="res-label"><span>Temperatur</span><span>{{ temp.celsius|number_format(1) }}°C</span></div>
                            {% set tempPercent = ((temp.celsius - 20) / 60 * 100)|round %}
                            {% set tempColor = temp.celsius > 70 ? 'var(--danger)' : (temp.celsius > 55 ? 'var(--warning)' : 'var(--accent)') %}
                            <div class="bar-bg"><div class="bar-fill" style="width:{{ tempPercent > 100 ? 100 : (tempPercent < 0 ? 0 : tempPercent) }}%; background:{{ tempColor }};"></div></div>
                        </div>
                    {% endif %}

                    <div class="res-row" data-metric="ram">
                        <div class="res-label"><span>RAM Nutzung</span><span>{{ metrics.ram.percentage|number_format(1) }}%</span></div>
                        <div class="bar-bg"><div class="bar-fill" style="width:{{ metrics.ram.percentage|default(0) }}%; background:var(--accent);"></div></div>
                        <div class="text-base text-muted text-right mt-2">
                            {{ metrics.ram.used }} MB / {{ metrics.ram.total }} MB
                        </div>
                    </div>

                    <div class="res-row" data-metric="tps">
                        <div class="res-label">
                            <span>TPS (Ticks)</span>
                            <span>{{ metrics.tps|default(20)|number_format(1) }}</span>
                        </div>

                        {% set tps = metrics.tps|default(20) %}
                        {% set color = 'var(--accent)' %}
                        {% if tps < 15 %}
                            {% set color = 'var(--danger)' %}
                        {% elseif tps < 19 %}
                            {% set color = 'var(--warning)' %}
                        {% endif %}

                        <div class="bar-bg">
                            <div class="bar-fill"
                                style="width: {{ (tps / 20 * 100)|round(1) }}%; background: {{ color }};">
                            </div>
                        </div>
                    </div>

                    {% if metrics.disk %}
                    <div class="res-row" data-metric="disk">
                        <div class="res-label">
                            <span>Disk</span>
                            <span>{{ metrics.disk.percentage }}%</span>
                        </div>

                        {% set color = 'var(--accent)' %}
                        {% if metrics.disk.percentage > 80 %}
                            {% set color = 'var(--danger)' %}
                        {% elseif metrics.disk.percentage > 50 %}
                            {% set color = 'var(--warning)' %}
                        {% endif %}

                        <div class="bar-bg">
                            <div class="bar-fill"
                                style="width: {{ metrics.disk.percentage }}%; background: {{ color }};">
                            </div>
                        </div>
                    </div>
                    {% endif %}


                    <form action="{{ path('app_dashboard_server_restart') }}" method="post" onsubmit="return confirm('Server wirklich neu starten? Ein Backup wird automatisch erstellt.');" class="mt-20">
                        <button type="submit" class="btn btn-danger w-full mt-0 p-12 text-lg font-bold">RESTART SERVER & BACKUP</button>
                    </form>
                </div>
            </div>
        </div>

        <!-- NOTES & CONTROL (Row 2, Col 2 & 3) -->
        <div class="card card-management">
            <h2>Server-Management</h2>
            <div class="management-section">
                <!-- SCHWARZES BRETT -->
                <div>
                    <h3 class="section-title">Schwarzes Brett</h3>
                    <form action="{{ path('app_dashboard_notes_save') }}" method="post" class="management-form">
                        <textarea name="notes_text" class="bg-dark border min-h-50 resize-vertical mb-0 p-10">{{ notes }}</textarea>
                        <button type="submit" class="btn bg-accent text-md p-10">SPEICHERN</button>
                    </form>
                </div>

                <!-- BROADCAST -->
                <div>
                    <h3 class="section-title">Nachricht an alle Spieler im Spiel</h3>
                    <form action="{{ path('app_dashboard_server_broadcast') }}" method="post" class="management-form">
                        <input type="text" name="broadcast_message" placeholder="Nachricht..." class="mb-0 bg-dark border p-10 rounded text-lg">
                        <button type="submit" class="btn bg-accent text-md p-10">SENDEN</button>
                    </form>
                </div>

                <!-- MOTD -->
                <div>
                    <h3 class="section-title">MOTD (Server-Beschreibung)</h3>
                    <form action="{{ path('app_dashboard_server_motd') }}" method="post" class="management-form">
                        <input type="text" name="motd_text" value="{{ motd }}" class="mb-0 bg-dark border p-10 rounded text-lg">
                        <button type="submit" class="btn bg-accent text-md p-10">SPEICHERN</button>
                    </form>
                </div>
            </div>
        </div>

        <!-- TERMINAL / CONSOLE (Row 3, Col 1-3) -->
        <div class="card card-console mt-0">
            <h2>Server Konsole (Live)</h2>
            <div id="log-terminal" class="terminal">
                <span class="text-muted">Verbinde mit Log-Stream...</span>
            </div>

            {% if is_granted('ROLE_MODERATOR') %}
            <div class="console-controls">
                 <input type="text" id="command-input" placeholder="Befehl eingeben (z.B. 'list', 'say Hallo')..." class="mb-0 font-mono">
                 <button onclick="sendCommand()" class="btn w-auto mt-0 p-0-30">SENDEN</button>
            </div>
            {% endif %}
        </div>
    </div>

{% endblock %}

{% block javascripts %}
<script>
    let autoRefresh = true;

    function copyToClipboard(element, text) {
        const showSuccess = () => {
            const badge = element;
            const originalText = badge.textContent;
            const originalBg = badge.style.background;
            const originalColor = badge.style.color;

            badge.textContent = 'KOPIERT!';
            badge.style.background = 'var(--accent)';
            badge.style.color = '#fff';

            setTimeout(() => {
                badge.textContent = originalText;
                badge.style.background = originalBg;
                badge.style.color = originalColor;
            }, 1500);
        };

        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text)
                .then(showSuccess)
                .catch(() => fallbackCopy(text));
        } else {
            fallbackCopy(text);
        }

        function fallbackCopy(text) {
            const textArea = document.createElement("textarea");
            textArea.value = text;
            textArea.style.position = "fixed";
            textArea.style.left = "-9999px";
            textArea.style.top = "0";
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();

            try {
                const successful = document.execCommand('copy');
                if (successful) {
                    showSuccess();
                } else {
                    alert('Kopieren fehlgeschlagen');
                }
            } catch (err) {
                console.error('Fallback copy failed', err);
                alert('Kopieren fehlgeschlagen');
            }

            document.body.removeChild(textArea);
        }
    }

    // Update logs only
    function updateLog() {
        fetch('{{ path('app_dashboard_api_logs') }}?lines=100')
            .then(r => r.json())
            .then(data => {
                const terminal = document.getElementById('log-terminal');
                const wasAtBottom = terminal.scrollHeight - terminal.clientHeight <= terminal.scrollTop + 50;

                terminal.textContent = data.log || 'Keine Logs verfügbar';

                if (wasAtBottom) {
                    terminal.scrollTop = terminal.scrollHeight;
                }
            })
            .catch(e => console.error('Failed to update log:', e));
    }

    // Update logs and uptime (called every 60s)
    function updateLogsAndStatus() {
        updateLog();

        fetch('{{ path('app_dashboard_api_status') }}')
            .then(r => r.json())
            .then(data => {
                const uptimeEl = document.getElementById('server-uptime');
                if (uptimeEl && data.status.uptime) {
                    uptimeEl.textContent = data.status.uptime;
                }
            })
            .catch(e => console.error('Failed to update status:', e));
    }

    // Update all dashboard data (metrics, players, backups)
    function updateDashboardData() {
        fetch('{{ path('app_dashboard_api_all') }}')
            .then(r => r.json())
            .then(data => {
                // Update metrics if elements exist
                updateMetricsDisplay(data.metrics);
                updateBackupStats(data.backup_stats);
                updatePlayersList(data.known_players);
            })
            .catch(e => console.error('Failed to update dashboard:', e));
    }

    function updateMetricsDisplay(metrics) {
        if (!metrics) return;

        // Update CPU Load
        if (metrics.cpu_load && document.querySelector('[data-metric="cpu"]')) {
            const cpuValue = document.querySelector('[data-metric="cpu"] .res-label span:last-child');
            const cpuBar = document.querySelector('[data-metric="cpu"] .bar-fill');
            if (cpuValue) cpuValue.textContent = metrics.cpu_load['1min'].toFixed(2);
            if (cpuBar) {
                const cpuPercent = Math.min(100, (metrics.cpu_load['1min'] / 4 * 100).toFixed(0));
                cpuBar.style.width = cpuPercent + '%';
            }
            const cpuDetails = document.querySelector('[data-metric="cpu"] .res-row > div:last-child');
            if (cpuDetails) {
                cpuDetails.textContent = `5min: ${metrics.cpu_load['5min'].toFixed(2)} · 15min: ${metrics.cpu_load['15min'].toFixed(2)}`;
            }
        }

        // Update Temperature
        if (metrics.temperature && document.querySelector('[data-metric="temp"]')) {
            const temp = Object.values(metrics.temperature)[0];
            const tempValue = document.querySelector('[data-metric="temp"] .res-label span:last-child');
            const tempBar = document.querySelector('[data-metric="temp"] .bar-fill');
            if (tempValue && temp) tempValue.textContent = temp.celsius.toFixed(1) + '°C';
            if (tempBar && temp) {
                const tempPercent = Math.min(100, Math.max(0, ((temp.celsius - 20) / 60 * 100).toFixed(0)));
                tempBar.style.width = tempPercent + '%';
            }
        }

        // Update RAM
        if (metrics.ram && document.querySelector('[data-metric="ram"]')) {
            const ramValue = document.querySelector('[data-metric="ram"] .res-label span:last-child');
            const ramBar = document.querySelector('[data-metric="ram"] .bar-fill');
            const ramDetails = document.querySelector('[data-metric="ram"] .res-row > div:last-child');
            if (ramValue) ramValue.textContent = metrics.ram.percentage.toFixed(1) + '%';
            if (ramBar) ramBar.style.width = metrics.ram.percentage + '%';
            if (ramDetails) ramDetails.textContent = `${metrics.ram.used} MB / ${metrics.ram.total} MB`;
        }

        // Update TPS
        if (metrics.tps !== null && document.querySelector('[data-metric="tps"]')) {
            const tpsValue = document.querySelector('[data-metric="tps"] .res-label span:last-child');
            const tpsBar = document.querySelector('[data-metric="tps"] .bar-fill');
            if (tpsValue) tpsValue.textContent = metrics.tps.toFixed(1);
            if (tpsBar) tpsBar.style.width = ((metrics.tps / 20 * 100).toFixed(1)) + '%';
        }

        // Update Disk
        if (metrics.disk && document.querySelector('[data-metric="disk"]')) {
            const diskValue = document.querySelector('[data-metric="disk"] .res-label span:last-child');
            const diskBar = document.querySelector('[data-metric="disk"] .bar-fill');
            if (diskValue) diskValue.textContent = metrics.disk.percentage + '%';
            if (diskBar) diskBar.style.width = metrics.disk.percentage + '%';
        }
    }

    function updateBackupStats(stats) {
        if (!stats) return;

        const backupEl = document.querySelector('[data-backup-stats]');
        if (backupEl) {
            const dateSpan = backupEl.querySelector('.res-label span:last-child');
            const detailsDiv = backupEl.querySelector('.res-row > div:last-child');

            if (dateSpan && stats.newest) {
                const date = new Date(stats.newest.replace(' ', 'T'));
                dateSpan.textContent = date.toLocaleDateString('de-DE', {day: '2-digit', month: '2-digit'}) + ' ' +
                                       date.toLocaleTimeString('de-DE', {hour: '2-digit', minute: '2-digit'});
            } else if (dateSpan) {
                dateSpan.textContent = 'Keines';
            }

            if (detailsDiv) {
                detailsDiv.textContent = `${stats.count} Stk. (${stats.total_size_mb} MB)`;
            }
        }
    }

    function updatePlayersList(players) {
        // Note: Updating the full players list would require re-rendering HTML
        // For now, we skip this or do a light refresh
        // Could be implemented later if needed
    }

    // Client-side clock (no server calls)
    function updateClock() {
        const now = new Date();
        const timeStr = now.getHours().toString().padStart(2, '0') + ':' +
                        now.getMinutes().toString().padStart(2, '0') + ':' +
                        now.getSeconds().toString().padStart(2, '0');
        const clockEl = document.getElementById('current-time');
        if (clockEl) clockEl.textContent = timeStr;
    }

    // Manual refresh button
    function refreshAllData() {
        const btn = document.getElementById('refresh-btn');
        if (btn) {
            btn.textContent = '⏳ LÄDT...';
            btn.disabled = true;
        }

        Promise.all([
            updateLogsAndStatus(),
            updateDashboardData()
        ]).finally(() => {
            if (btn) {
                btn.textContent = '🔄 REFRESH';
                btn.disabled = false;
            }
        });
    }

    function sendCommand() {
        const input = document.getElementById('command-input');
        const command = input.value.trim();

        if (!command) return;

        fetch('{{ path('app_dashboard_server_command') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'command=' + encodeURIComponent(command)
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                input.value = '';
                setTimeout(updateLog, 1000);
            } else {
                alert('Fehler: ' + data.message);
            }
        })
        .catch(e => alert('Fehler beim Senden des Befehls'));
    }

    function togglePlayerOp(username, makeOp) {
        if (!confirm(`Möchtest du ${username} wirklich ${makeOp ? 'OP-Rechte erteilen' : 'OP-Rechte entziehen'}?`)) {
            return;
        }

        const url = '{{ path('app_dashboard_player_toggle_op', {username: '__USERNAME__'}) }}'.replace('__USERNAME__', encodeURIComponent(username));

        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ makeOp: makeOp })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                // Wait 2 seconds for Minecraft server to update ops.json, then reload
                setTimeout(() => {
                    location.reload();
                }, 2000);
            } else {
                alert('Fehler: ' + data.message);
            }
        })
        .catch(e => {
            console.error('OP Toggle Error:', e);
            alert('Fehler beim Ändern der OP-Rechte');
        });
    }

    document.getElementById('command-input')?.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            sendCommand();
        }
    });

    // Initial load
    updateLogsAndStatus();
    updateClock();

    // Intervals (Optimized for live status)
    setInterval(() => {
        if (autoRefresh) {
            updateLogsAndStatus(); // Logs & Uptime: 60 seconds
        }
    }, 60000);

    setInterval(() => {
        if (autoRefresh) {
            updateDashboardData(); // Metrics & Players: 60 seconds (for live online status)
        }
    }, 60000);

    setInterval(updateClock, 1000); // Clock: every second (client-side)

    console.log('🔄 Auto-refresh intervals: Logs/Uptime: 60s | Metrics/Players: 60s | Player Cache: 30s');
</script>
{% endblock %}