// DOM-Element-Referenzen
const navButtons = document.querySelectorAll('.nav-button');
const panels = document.querySelectorAll('.panel');

// Panel-Navigation
navButtons.forEach(button => {
    button.addEventListener('click', () => {
        const panelId = button.getAttribute('data-panel');
        
        // Aktiven Button und Panel wechseln
        navButtons.forEach(btn => btn.classList.remove('active'));
        panels.forEach(panel => panel.classList.remove('active'));
        
        button.classList.add('active');
        document.getElementById(panelId).classList.add('active');
        
        // Lade Panel-Daten, wenn sie noch nicht geladen wurden
        if (panelId === 'system' && document.getElementById('system-container').style.display === 'none') {
            loadSystemInfo();
        } else if (panelId === 'network' && document.getElementById('network-container').style.display === 'none') {
            loadNetworkInfo();
        } else if (panelId === 'services' && document.getElementById('services-container').style.display === 'none') {
            loadServicesInfo();
        }
    });
});

// API-Anfragen
async function fetchData(endpoint) {
    try {
        const response = await fetch(endpoint);
        if (!response.ok) {
            throw new Error(`HTTP-Fehler: ${response.status}`);
        }
        return await response.json();
    } catch (error) {
        console.error(`Fehler beim Abrufen von ${endpoint}:`, error);
        return null;
    }
}

// System-Informationen laden
async function loadSystemInfo() {
    const loader = document.getElementById('system-loader');
    const container = document.getElementById('system-container');
    
    loader.style.display = 'block';
    container.style.display = 'none';
    
    const data = await fetchData('/api/system');
    if (!data) {
        loader.textContent = 'Fehler beim Laden der Systemdaten';
        return;
    }
    
    // Betriebssystem-Info
    document.getElementById('os-info').innerHTML = `
        <p><strong>Plattform:</strong> ${data.os.platform}</p>
        <p><strong>Distribution:</strong> ${data.os.distro}</p>
        <p><strong>Version:</strong> ${data.os.release}</p>
        <p><strong>Architektur:</strong> ${data.os.arch}</p>
        <p><strong>Betriebszeit:</strong> ${data.os.uptime}</p>
    `;
    
    // CPU-Info
    document.getElementById('cpu-info').innerHTML = `
        <p><strong>Hersteller:</strong> ${data.cpu.manufacturer}</p>
        <p><strong>Modell:</strong> ${data.cpu.brand}</p>
        <p><strong>Geschwindigkeit:</strong> ${data.cpu.speed} GHz</p>
        <p><strong>Kerne:</strong> ${data.cpu.cores} (${data.cpu.physicalCores} physisch)</p>
    `;
    
    // Speicher-Info
    document.getElementById('memory-info').innerHTML = `
        <p><strong>Gesamt:</strong> ${data.memory.total}</p>
        <p><strong>Verwendet:</strong> ${data.memory.used} (${data.memory.usedPercent}%)</p>
        <p><strong>Frei:</strong> ${data.memory.free}</p>
    `;
    
    document.getElementById('memory-bar').style.width = `${data.memory.usedPercent}%`;
    document.getElementById('memory-bar').style.backgroundColor = getColorByPercentage(data.memory.usedPercent);
    
    // Festplatten-Info
    let diskHTML = '<table><tr><th>Laufwerk</th><th>Typ</th><th>Größe</th><th>Verwendet</th><th>Verfügbar</th><th>Nutzung</th></tr>';
    
    data.filesystem.forEach(fs => {
        diskHTML += `
            <tr>
                <td>${fs.mount}</td>
                <td>${fs.type}</td>
                <td>${fs.size}</td>
                <td>${fs.used}</td>
                <td>${fs.available}</td>
                <td>
                    <div class="progress-container" style="margin: 0; width: 100%">
                        <div class="progress-bar" style="width: ${fs.usePercent}%; background-color: ${getColorByPercentage(fs.usePercent)}"></div>
                    </div>
                    ${fs.usePercent}%
                </td>
            </tr>
        `;
    });
    
    diskHTML += '</table>';
    document.getElementById('disk-info').innerHTML = diskHTML;
    
    // UI anzeigen
    loader.style.display = 'none';
    container.style.display = 'grid';
}

// Netzwerk-Informationen laden
async function loadNetworkInfo() {
    const loader = document.getElementById('network-loader');
    const container = document.getElementById('network-container');
    
    loader.style.display = 'block';
    container.style.display = 'none';
    
    const data = await fetchData('/api/network');
    if (!data) {
        loader.textContent = 'Fehler beim Laden der Netzwerkdaten';
        return;
    }
    
    // Netzwerkschnittstellen
    let interfacesHTML = '<table><tr><th>Name</th><th>Status</th><th>IPv4</th><th>IPv6</th><th>MAC</th><th>Typ</th><th>DHCP</th></tr>';
    
    data.interfaces.forEach(iface => {
        interfacesHTML += `
            <tr>
                <td>${iface.iface}</td>
                <td><span class="status ${iface.operstate === 'up' ? 'status-online' : 'status-offline'}">${iface.operstate}</span></td>
                <td>${iface.ip4 || '-'}</td>
                <td>${iface.ip6 || '-'}</td>
                <td>${iface.mac || '-'}</td>
                <td>${iface.type || '-'}</td>
                <td>${iface.dhcp ? 'Ja' : 'Nein'}</td>
            </tr>
        `;
    });
    
    interfacesHTML += '</table>';
    document.getElementById('network-interfaces').innerHTML = interfacesHTML;
    
    // DNS-Server
    let dnsHTML = '<ul>';
    data.dns.forEach(server => {
        dnsHTML += `<li>${server}</li>`;
    });
    dnsHTML += '</ul>';
    document.getElementById('dns-servers').innerHTML = dnsHTML;
    
    // Gateway
    document.getElementById('default-gateway').innerHTML = `<p>${data.gateway || 'Nicht verfügbar'}</p>`;
    
    // Netzwerkstatistiken
    let statsHTML = '<table><tr><th>Schnittstelle</th><th>Empfangen</th><th>Gesendet</th><th>Empfangen/s</th><th>Gesendet/s</th></tr>';
    
    data.stats.forEach(stat => {
        statsHTML += `
            <tr>
                <td>${stat.iface}</td>
                <td>${stat.rx_bytes}</td>
                <td>${stat.tx_bytes}</td>
                <td>${stat.rx_sec}</td>
                <td>${stat.tx_sec}</td>
            </tr>
        `;
    });
    
    statsHTML += '</table>';
    document.getElementById('network-stats').innerHTML = statsHTML;
    
    // UI anzeigen
    loader.style.display = 'none';
    container.style.display = 'grid';
}

// Dienst-Informationen laden
async function loadServicesInfo() {
    const loader = document.getElementById('services-loader');
    const container = document.getElementById('services-container');
    
    loader.style.display = 'block';
    container.style.display = 'none';
    
    const data = await fetchData('/api/services');
    if (!data) {
        loader.textContent = 'Fehler beim Laden der Dienstdaten';
        return;
    }
    
    // Frontend-Status
    document.getElementById('frontend-status').innerHTML = `
        <p>Status: <span class="status ${data.frontend.status === 'online' ? 'status-online' : 'status-offline'}">${data.frontend.status}</span></p>
        <p><strong>Name:</strong> ${data.frontend.name}</p>
        <p><strong>Host:</strong> ${data.frontend.host}</p>
        <p><strong>Port:</strong> ${data.frontend.port}</p>
    `;
    
    // Backend-Status
    document.getElementById('backend-status').innerHTML = `
        <p>Status: <span class="status ${data.backend.status === 'online' ? 'status-online' : 'status-offline'}">${data.backend.status}</span></p>
        <p><strong>Name:</strong> ${data.backend.name}</p>
        <p><strong>Host:</strong> ${data.backend.host}</p>
        <p><strong>Port:</strong> ${data.backend.port}</p>
    `;
    
    // Docker-Container
    if (data.docker.containers && data.docker.containers.length > 0) {
        let containersHTML = '<table><tr><th>ID</th><th>Name</th><th>Image</th><th>Status</th><th>Ports</th></tr>';
        
        data.docker.containers.forEach(container => {
            containersHTML += `
                <tr>
                    <td>${container.id}</td>
                    <td>${container.name}</td>
                    <td>${container.image}</td>
                    <td>${container.status}</td>
                    <td>${container.ports}</td>
                </tr>
            `;
        });
        
        containersHTML += '</table>';
        document.getElementById('docker-container-list').innerHTML = containersHTML;
    } else {
        document.getElementById('docker-container-list').innerHTML = '<p>Keine Docker-Container gefunden</p>';
    }
    
    // UI anzeigen
    loader.style.display = 'none';
    container.style.display = 'grid';
}

// Netzwerk-Tools
document.getElementById('ping-button').addEventListener('click', async () => {
    const hostInput = document.getElementById('ping-host');
    const resultBox = document.getElementById('ping-result');
    const host = hostInput.value.trim();
    
    if (!host) {
        resultBox.textContent = 'Bitte geben Sie einen Hostnamen oder eine IP-Adresse ein';
        return;
    }
    
    resultBox.textContent = 'Ping wird ausgeführt...';
    
    const data = await fetchData(`/api/ping/${encodeURIComponent(host)}`);
    if (!data) {
        resultBox.textContent = 'Fehler beim Ausführen des Ping-Befehls';
        return;
    }
    
    resultBox.textContent = data.output || data.error || 'Keine Ausgabe';
});

document.getElementById('traceroute-button').addEventListener('click', async () => {
    const hostInput = document.getElementById('traceroute-host');
    const resultBox = document.getElementById('traceroute-result');
    const host = hostInput.value.trim();
    
    if (!host) {
        resultBox.textContent = 'Bitte geben Sie einen Hostnamen oder eine IP-Adresse ein';
        return;
    }
    
    resultBox.textContent = 'Traceroute wird ausgeführt...';
    
    const data = await fetchData(`/api/traceroute/${encodeURIComponent(host)}`);
    if (!data) {
        resultBox.textContent = 'Fehler beim Ausführen des Traceroute-Befehls';
        return;
    }
    
    resultBox.textContent = data.output || data.error || 'Keine Ausgabe';
});

document.getElementById('nslookup-button').addEventListener('click', async () => {
    const hostInput = document.getElementById('nslookup-host');
    const resultBox = document.getElementById('nslookup-result');
    const host = hostInput.value.trim();
    
    if (!host) {
        resultBox.textContent = 'Bitte geben Sie einen Hostnamen oder eine IP-Adresse ein';
        return;
    }
    
    resultBox.textContent = 'DNS-Abfrage wird ausgeführt...';
    
    const data = await fetchData(`/api/nslookup/${encodeURIComponent(host)}`);
    if (!data) {
        resultBox.textContent = 'Fehler beim Ausführen des NSLookup-Befehls';
        return;
    }
    
    resultBox.textContent = data.output || data.error || 'Keine Ausgabe';
});

// Echtzeit-Monitoring mit WebSockets
const socket = io();

// CPU- und RAM-Statistiken
socket.on('system-stats', data => {
    // CPU-Anzeige aktualisieren
    const cpuPercentage = data.cpu.load;
    document.getElementById('cpu-percentage').textContent = `${cpuPercentage}%`;
    document.getElementById('cpu-gauge').style.height = `${cpuPercentage}%`;
    document.getElementById('cpu-gauge').style.backgroundColor = getColorByPercentage(cpuPercentage);
    
    // CPU-Kerne anzeigen
    const cpuCoresContainer = document.getElementById('cpu-cores-container');
    
    if (cpuCoresContainer.childElementCount === 0) {
        // Erstelle Kern-Anzeigen, falls sie noch nicht existieren
        data.cpu.cores.forEach((load, index) => {
            const coreElement = document.createElement('div');
            coreElement.className = 'cpu-core';
            coreElement.innerHTML = `
                <div class="cpu-core-label">
                    <span>Kern ${index}</span>
                    <span id="cpu-core-${index}-value">${load}%</span>
                </div>
                <div class="cpu-core-bar">
                    <div id="cpu-core-${index}-fill" class="cpu-core-fill" style="width: ${load}%; background-color: ${getColorByPercentage(load)}"></div>
                </div>
            `;
            cpuCoresContainer.appendChild(coreElement);
        });
    } else {
        // Aktualisiere bestehende Kern-Anzeigen
        data.cpu.cores.forEach((load, index) => {
            const valueElement = document.getElementById(`cpu-core-${index}-value`);
            const fillElement = document.getElementById(`cpu-core-${index}-fill`);
            
            if (valueElement && fillElement) {
                valueElement.textContent = `${load}%`;
                fillElement.style.width = `${load}%`;
                fillElement.style.backgroundColor = getColorByPercentage(load);
            }
        });
    }
    
    // RAM-Anzeige aktualisieren
    const memPercentage = data.memory.usedPercent;
    document.getElementById('memory-percentage').textContent = `${memPercentage}%`;
    document.getElementById('memory-gauge').style.height = `${memPercentage}%`;
    document.getElementById('memory-gauge').style.backgroundColor = getColorByPercentage(memPercentage);
    
    document.getElementById('memory-details').innerHTML = `
        <p><strong>Gesamt:</strong> ${formatBytes(data.memory.total)}</p>
        <p><strong>Verwendet:</strong> ${formatBytes(data.memory.used)}</p>
        <p><strong>Frei:</strong> ${formatBytes(data.memory.free)}</p>
    `;
});

// Netzwerkstatistiken
let networkChart;
socket.on('network-stats', data => {
    const networkThroughput = document.getElementById('network-throughput');
    let throughputHTML = '';
    
    data.stats.forEach(stat => {
        throughputHTML += `
            <div class="network-stat">
                <strong>${stat.iface}:</strong> ↓ ${formatBytes(stat.rx_sec)}/s | ↑ ${formatBytes(stat.tx_sec)}/s
            </div>
        `;
    });
    
    networkThroughput.innerHTML = throughputHTML;
    
    // Aktualisiere oder erstelle Netzwerk-Chart
    updateNetworkChart(data.stats);
});

// Netzwerk-Chart initialisieren oder aktualisieren
function updateNetworkChart(stats) {
    const ctx = document.getElementById('network-chart').getContext('2d');
    
    if (!networkChart) {
        // Chart initialisieren, wenn er noch nicht existiert
        const labels = [];
        const rxData = [];
        const txData = [];
        
        // Fülle anfängliche Daten
        for (let i = 0; i < 20; i++) {
            labels.push('');
            rxData.push(0);
            txData.push(0);
        }
        
        networkChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Empfangen (Bytes/s)',
                        data: rxData,
                        borderColor: '#3f51b5',
                        backgroundColor: 'rgba(63, 81, 181, 0.1)',
                        borderWidth: 2,
                        tension: 0.2,
                        fill: true
                    },
                    {
                        label: 'Gesendet (Bytes/s)',
                        data: txData,
                        borderColor: '#f44336',
                        backgroundColor: 'rgba(244, 67, 54, 0.1)',
                        borderWidth: 2,
                        tension: 0.2,
                        fill: true
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return formatBytes(value, 0);
                            }
                        }
                    }
                },
                animation: {
                    duration: 300
                }
            }
        });
    } else {
        // Chart aktualisieren
        let rxTotal = 0;
        let txTotal = 0;
        
        stats.forEach(stat => {
            rxTotal += stat.rx_sec || 0;
            txTotal += stat.tx_sec || 0;
        });
        
        // Füge neue Daten hinzu und entferne alte
        networkChart.data.labels.push('');
        networkChart.data.labels.shift();
        
        networkChart.data.datasets[0].data.push(rxTotal);
        networkChart.data.datasets[0].data.shift();
        
        networkChart.data.datasets[1].data.push(txTotal);
        networkChart.data.datasets[1].data.shift();
        
        networkChart.update();
    }
}

// Hilfsfunktionen
function getColorByPercentage(percent) {
    // Farbverlauf von Grün über Gelb nach Rot
    if (percent < 70) {
        return 'var(--success-color)';
    } else if (percent < 90) {
        return 'var(--warning-color)';
    } else {
        return 'var(--danger-color)';
    }
}

function formatBytes(bytes, decimals = 2) {
    if (bytes === 0) return '0 B';
    
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
    
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + ' ' + sizes[i];
}

// Initialisierung
document.addEventListener('DOMContentLoaded', () => {
    // Zeit aktualisieren
    setInterval(() => {
        document.getElementById('current-time').innerHTML = `<strong>Zeitstempel:</strong> ${new Date().toLocaleString('de-DE')}`;
    }, 1000);
    
    // Lade Systemdaten, wenn das System-Panel aktiv ist
    if (document.getElementById('system').classList.contains('active')) {
        loadSystemInfo();
    }
    
    // Lade Script für Netzwerk-Chart, falls noch nicht geladen
    if (typeof Chart === 'undefined') {
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
        script.onload = () => {
            console.log('Chart.js geladen');
        };
        document.head.appendChild(script);
    }
});