/**
 * JavaScript для дашбордов с графиками (FR-026)
 */

let charts = {};
let updateInterval = null;

// Инициализация при загрузке страницы
document.addEventListener('DOMContentLoaded', function() {
    loadMetrics();
    
    // Автообновление каждые 30 секунд
    updateInterval = setInterval(loadMetrics, 30000);
});

// Остановка обновления при уходе со страницы
window.addEventListener('beforeunload', function() {
    if (updateInterval) {
        clearInterval(updateInterval);
    }
});

/**
 * Загрузка метрик и обновление графиков
 */
async function loadMetrics() {
    const timeRange = document.getElementById('timeRange').value;
    const selectedMetrics = Array.from(document.getElementById('metricSelect').selectedOptions).map(opt => opt.value);
    
    // Вычисляем временной диапазон
    const endTime = Date.now() / 1000;
    let startTime = endTime - 3600; // По умолчанию 1 час
    
    switch(timeRange) {
        case '1h':
            startTime = endTime - 3600;
            break;
        case '6h':
            startTime = endTime - 21600;
            break;
        case '24h':
            startTime = endTime - 86400;
            break;
        case '7d':
            startTime = endTime - 604800;
            break;
    }
    
    try {
        const response = await fetch(
            `/api/v1/admin/metrics/history?metrics=${selectedMetrics.join(',')}&start_time=${startTime}&end_time=${endTime}`
        );
        const data = await response.json();
        
        if (data.success) {
            updateCharts(data.history);
        } else {
            console.error('Ошибка загрузки метрик:', data.error);
        }
    } catch (error) {
        console.error('Ошибка при загрузке метрик:', error);
    }
}

/**
 * Обновление графиков
 */
function updateCharts(history) {
    // CPU Chart
    if (history.cpu_usage_percent) {
        updateChart('cpuChart', 'CPU Usage (%)', history.cpu_usage_percent, '#3b82f6');
    }
    
    // Memory Chart
    if (history.memory_usage_percent) {
        updateChart('memoryChart', 'Memory Usage (%)', history.memory_usage_percent, '#10b981');
    }
    
    // Throughput Chart
    if (history.request_throughput) {
        updateChart('throughputChart', 'Request Throughput (RPS)', history.request_throughput, '#f59e0b');
    }
    
    // Network Chart
    if (history.network_bytes_sent || history.network_bytes_recv) {
        updateNetworkChart(history.network_bytes_sent, history.network_bytes_recv);
    }
}

/**
 * Обновление графика
 */
function updateChart(canvasId, label, data, color) {
    const canvas = document.getElementById(canvasId);
    if (!canvas) return;
    
    const ctx = canvas.getContext('2d');
    
    const labels = data.map(point => new Date(point.timestamp * 1000).toLocaleTimeString());
    const values = data.map(point => point.value);
    
    if (charts[canvasId]) {
        charts[canvasId].destroy();
    }
    
    charts[canvasId] = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: label,
                data: values,
                borderColor: color,
                backgroundColor: color + '20',
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: true
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

/**
 * Обновление графика сети
 */
function updateNetworkChart(sentData, recvData) {
    const canvas = document.getElementById('networkChart');
    if (!canvas) return;
    
    const ctx = canvas.getContext('2d');
    
    let labels = [];
    let sentValues = [];
    let recvValues = [];
    
    if (sentData && sentData.length > 0) {
        labels = sentData.map(point => new Date(point.timestamp * 1000).toLocaleTimeString());
        sentValues = sentData.map(point => point.value);
    }
    
    if (recvData && recvData.length > 0) {
        if (labels.length === 0) {
            labels = recvData.map(point => new Date(point.timestamp * 1000).toLocaleTimeString());
        }
        recvValues = recvData.map(point => point.value);
    }
    
    if (charts['networkChart']) {
        charts['networkChart'].destroy();
    }
    
    charts['networkChart'] = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [
                {
                    label: 'Отправлено (bytes)',
                    data: sentValues,
                    borderColor: '#3b82f6',
                    backgroundColor: '#3b82f620',
                    tension: 0.4,
                    fill: true
                },
                {
                    label: 'Получено (bytes)',
                    data: recvValues,
                    borderColor: '#10b981',
                    backgroundColor: '#10b98120',
                    tension: 0.4,
                    fill: true
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: true
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

/**
 * Обновление временного диапазона
 */
function updateTimeRange() {
    loadMetrics();
}

/**
 * Экспорт метрик
 */
async function exportMetrics() {
    const timeRange = document.getElementById('timeRange').value;
    const selectedMetrics = Array.from(document.getElementById('metricSelect').selectedOptions).map(opt => opt.value);
    
    const endTime = Date.now() / 1000;
    let startTime = endTime - 3600;
    
    switch(timeRange) {
        case '1h':
            startTime = endTime - 3600;
            break;
        case '6h':
            startTime = endTime - 21600;
            break;
        case '24h':
            startTime = endTime - 86400;
            break;
        case '7d':
            startTime = endTime - 604800;
            break;
    }
    
    const url = `/api/v1/admin/metrics/export?format=csv&metrics=${selectedMetrics.join(',')}&start_time=${startTime}&end_time=${endTime}`;
    window.open(url, '_blank');
}
