/* 
 * Debug-Charts.js
 * JavaScript-Funktionen für das Rendering von Diagrammen und Visualisierungen
 * im MYP Debug-Server.
 */

// Globale Variablen für Charts
let cpuUsageChart = null;
let memoryUsageChart = null;
let networkTrafficChart = null;
let diskUsageChart = null;
let containerStatusChart = null;

// Hilfsfunktion zum Formatieren von Bytes
function formatBytes(bytes, decimals = 2) {
    if (bytes === 0) return '0 Bytes';
    
    const k = 1024;
    const dm = decimals < 0 ? 0 : decimals;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
    
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    
    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}

// Aktualisiere Systemdiagramme
function updateSystemCharts() {
    fetch('/api/system/metrics')
        .then(response => response.json())
        .then(data => {
            // CPU-Nutzung aktualisieren
            if (cpuUsageChart) {
                cpuUsageChart.data.labels.push(new Date().toLocaleTimeString());
                cpuUsageChart.data.datasets[0].data.push(data.cpu_percent);
                
                // Behalte nur die letzten 30 Datenpunkte
                if (cpuUsageChart.data.labels.length > 30) {
                    cpuUsageChart.data.labels.shift();
                    cpuUsageChart.data.datasets[0].data.shift();
                }
                
                cpuUsageChart.update();
            }
            
            // Speichernutzung aktualisieren
            if (memoryUsageChart) {
                memoryUsageChart.data.datasets[0].data = [
                    data.memory.used,
                    data.memory.available
                ];
                memoryUsageChart.update();
                
                // Aktualisiere die Speicherinfo-Texte
                document.getElementById('memory-used').textContent = formatBytes(data.memory.used);
                document.getElementById('memory-available').textContent = formatBytes(data.memory.available);
                document.getElementById('memory-total').textContent = formatBytes(data.memory.total);
            }
            
            // Festplattennutzung aktualisieren
            if (diskUsageChart && data.disk_usage) {
                const diskLabels = [];
                const diskUsed = [];
                const diskFree = [];
                
                for (const disk of data.disk_usage) {
                    diskLabels.push(disk.mountpoint);
                    diskUsed.push(disk.used);
                    diskFree.push(disk.free);
                }
                
                diskUsageChart.data.labels = diskLabels;
                diskUsageChart.data.datasets[0].data = diskUsed;
                diskUsageChart.data.datasets[1].data = diskFree;
                diskUsageChart.update();
            }
        })
        .catch(error => console.error('Fehler beim Abrufen der Systemmetriken:', error));
}

// Initialisiere CPU-Nutzungsdiagramm
function initCpuUsageChart() {
    const ctx = document.getElementById('cpu-usage-chart').getContext('2d');
    
    cpuUsageChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                label: 'CPU-Auslastung (%)',
                data: [],
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.1,
                fill: true,
                backgroundColor: 'rgba(75, 192, 192, 0.2)'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100,
                    title: {
                        display: true,
                        text: 'Auslastung (%)'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Zeit'
                    }
                }
            },
            plugins: {
                title: {
                    display: true,
                    text: 'CPU-Auslastung',
                    font: {
                        size: 16
                    }
                }
            }
        }
    });
}

// Initialisiere Speichernutzungsdiagramm
function initMemoryUsageChart() {
    const ctx = document.getElementById('memory-usage-chart').getContext('2d');
    
    memoryUsageChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['Verwendet', 'Verfügbar'],
            datasets: [{
                data: [0, 0],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.7)',
                    'rgba(75, 192, 192, 0.7)'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                title: {
                    display: true,
                    text: 'Speichernutzung',
                    font: {
                        size: 16
                    }
                }
            }
        }
    });
}

// Initialisiere Festplattennutzungsdiagramm
function initDiskUsageChart() {
    const ctx = document.getElementById('disk-usage-chart').getContext('2d');
    
    diskUsageChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [],
            datasets: [
                {
                    label: 'Belegt',
                    data: [],
                    backgroundColor: 'rgba(255, 99, 132, 0.7)'
                },
                {
                    label: 'Frei',
                    data: [],
                    backgroundColor: 'rgba(75, 192, 192, 0.7)'
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                x: {
                    stacked: true,
                    title: {
                        display: true,
                        text: 'Laufwerk'
                    }
                },
                y: {
                    stacked: true,
                    title: {
                        display: true,
                        text: 'Speicherplatz (Bytes)'
                    },
                    ticks: {
                        callback: function(value) {
                            return formatBytes(value);
                        }
                    }
                }
            },
            plugins: {
                title: {
                    display: true,
                    text: 'Festplattennutzung',
                    font: {
                        size: 16
                    }
                }
            }
        }
    });
}

// Aktualisiere Docker-Container-Status
function updateContainerStatus() {
    fetch('/api/docker/status')
        .then(response => response.json())
        .then(data => {
            const containerTable = document.getElementById('container-table');
            if (!containerTable) return;
            
            // Tabelle leeren
            containerTable.innerHTML = '';
            
            // Überschriftenzeile
            const headerRow = document.createElement('tr');
            ['Name', 'Status', 'CPU', 'Speicher', 'Netzwerk', 'Aktionen'].forEach(header => {
                const th = document.createElement('th');
                th.textContent = header;
                headerRow.appendChild(th);
            });
            containerTable.appendChild(headerRow);
            
            // Containerdaten
            data.containers.forEach(container => {
                const row = document.createElement('tr');
                
                // Name
                const nameCell = document.createElement('td');
                nameCell.textContent = container.name;
                row.appendChild(nameCell);
                
                // Status
                const statusCell = document.createElement('td');
                const statusBadge = document.createElement('span');
                statusBadge.textContent = container.status;
                statusBadge.className = container.running ? 'status-badge running' : 'status-badge stopped';
                statusCell.appendChild(statusBadge);
                row.appendChild(statusCell);
                
                // CPU
                const cpuCell = document.createElement('td');
                cpuCell.textContent = container.cpu_percent ? `${container.cpu_percent.toFixed(2)}%` : 'N/A';
                row.appendChild(cpuCell);
                
                // Speicher
                const memoryCell = document.createElement('td');
                memoryCell.textContent = container.memory_usage ? formatBytes(container.memory_usage) : 'N/A';
                row.appendChild(memoryCell);
                
                // Netzwerk
                const networkCell = document.createElement('td');
                if (container.network_io) {
                    networkCell.innerHTML = `↓ ${formatBytes(container.network_io.rx_bytes)}<br>↑ ${formatBytes(container.network_io.tx_bytes)}`;
                } else {
                    networkCell.textContent = 'N/A';
                }
                row.appendChild(networkCell);
                
                // Aktionen
                const actionsCell = document.createElement('td');
                const actionsDiv = document.createElement('div');
                actionsDiv.className = 'container-actions';
                
                // Restart-Button
                const restartBtn = document.createElement('button');
                restartBtn.className = 'btn btn-warning btn-sm';
                restartBtn.innerHTML = '<i class="fas fa-sync"></i>';
                restartBtn.title = 'Container neustarten';
                restartBtn.onclick = () => restartContainer(container.id);
                actionsDiv.appendChild(restartBtn);
                
                // Logs-Button
                const logsBtn = document.createElement('button');
                logsBtn.className = 'btn btn-info btn-sm';
                logsBtn.innerHTML = '<i class="fas fa-list-alt"></i>';
                logsBtn.title = 'Container-Logs anzeigen';
                logsBtn.onclick = () => showContainerLogs(container.id);
                actionsDiv.appendChild(logsBtn);
                
                actionsCell.appendChild(actionsDiv);
                row.appendChild(actionsCell);
                
                containerTable.appendChild(row);
            });
            
            // Container-Status-Diagramm aktualisieren
            updateContainerStatusChart(data.containers);
        })
        .catch(error => console.error('Fehler beim Abrufen der Docker-Informationen:', error));
}

// Initialisiere Container-Status-Diagramm
function initContainerStatusChart() {
    const ctx = document.getElementById('container-status-chart').getContext('2d');
    
    containerStatusChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ['Aktiv', 'Inaktiv'],
            datasets: [{
                data: [0, 0],
                backgroundColor: [
                    'rgba(75, 192, 192, 0.7)',
                    'rgba(255, 99, 132, 0.7)'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                title: {
                    display: true,
                    text: 'Container-Status',
                    font: {
                        size: 16
                    }
                }
            }
        }
    });
}

// Aktualisiere Container-Status-Diagramm
function updateContainerStatusChart(containers) {
    if (!containerStatusChart) return;
    
    const running = containers.filter(c => c.running).length;
    const stopped = containers.filter(c => !c.running).length;
    
    containerStatusChart.data.datasets[0].data = [running, stopped];
    containerStatusChart.update();
}

// Container neustarten
function restartContainer(containerId) {
    fetch(`/api/docker/restart/${containerId}`, {
        method: 'POST'
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showMessage('Container wird neugestartet...', false);
            // Nach kurzer Verzögerung aktualisieren
            setTimeout(updateContainerStatus, 2000);
        } else {
            showMessage('Fehler beim Neustarten des Containers: ' + data.message, true);
        }
    })
    .catch(error => {
        showMessage('Fehler beim Neustarten des Containers', true);
        console.error('Fehler beim Neustarten des Containers:', error);
    });
}

// Container-Logs anzeigen
function showContainerLogs(containerId) {
    fetch(`/api/docker/logs/${containerId}`)
        .then(response => response.json())
        .then(data => {
            if (data.logs) {
                // Modal erstellen und anzeigen
                const modal = document.createElement('div');
                modal.className = 'modal';
                modal.innerHTML = `
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3>Container-Logs: ${data.container_name}</h3>
                            <span class="close">&times;</span>
                        </div>
                        <div class="modal-body">
                            <pre>${data.logs}</pre>
                        </div>
                    </div>
                `;
                
                document.body.appendChild(modal);
                
                // Modal schließen, wenn auf X geklickt wird
                modal.querySelector('.close').onclick = function() {
                    document.body.removeChild(modal);
                };
                
                // Modal schließen, wenn außerhalb geklickt wird
                window.onclick = function(event) {
                    if (event.target === modal) {
                        document.body.removeChild(modal);
                    }
                };
                
                // Modal anzeigen
                modal.style.display = 'block';
            } else {
                showMessage('Keine Logs verfügbar', true);
            }
        })
        .catch(error => {
            showMessage('Fehler beim Abrufen der Container-Logs', true);
            console.error('Fehler beim Abrufen der Container-Logs:', error);
        });
}

// Zeige Fehlermeldung oder Erfolgsmeldung
function showMessage(message, isError = false) {
    const messageEl = document.getElementById('message');
    if (messageEl) {
        messageEl.textContent = message;
        messageEl.className = isError ? 'message message-error' : 'message message-success';
        messageEl.style.display = 'block';
        
        // Verstecke Nachricht nach 5 Sekunden
        setTimeout(() => {
            messageEl.style.display = 'none';
        }, 5000);
    }
}

// Initialisiere alle Diagramme
function initAllCharts() {
    // Überprüfe, ob Chart.js geladen ist
    if (typeof Chart !== 'undefined') {
        if (document.getElementById('cpu-usage-chart')) {
            initCpuUsageChart();
        }
        
        if (document.getElementById('memory-usage-chart')) {
            initMemoryUsageChart();
        }
        
        if (document.getElementById('disk-usage-chart')) {
            initDiskUsageChart();
        }
        
        if (document.getElementById('container-status-chart')) {
            initContainerStatusChart();
        }
        
        // Initialen Datenabruf starten
        updateSystemCharts();
        updateContainerStatus();
        
        // Regelmäßige Aktualisierung der Diagramme
        setInterval(updateSystemCharts, 5000);  // Alle 5 Sekunden aktualisieren
        setInterval(updateContainerStatus, 10000);  // Alle 10 Sekunden aktualisieren
    } else {
        console.error('Chart.js konnte nicht geladen werden.');
    }
}

// Automatischer Start beim Laden der Seite
document.addEventListener('DOMContentLoaded', function() {
    initAllCharts();
});