document.addEventListener('DOMContentLoaded', function() {
    // Initialize telemetry chart
    const ctx = document.getElementById('telemetryChart').getContext('2d');
    const telemetryChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
            datasets: [
                {
                    label: 'Temperature (°C)',
                    data: [18, 20, 22, 24, 23, 21, 19],
                    borderColor: '#0ea5e9',
                    backgroundColor: 'rgba(14, 165, 233, 0.1)',
                    tension: 0.3,
                    fill: true
                },
                {
                    label: 'Pressure (kPa)',
                    data: [101, 101.2, 101.1, 101.3, 101.2, 101.1, 101],
                    borderColor: '#7e22ce',
                    backgroundColor: 'rgba(126, 34, 206, 0.1)',
                    tension: 0.3,
                    fill: true
                },
                {
                    label: 'Radiation (μSv)',
                    data: [0.8, 0.9, 1.1, 1.3, 1.2, 1.0, 0.9],
                    borderColor: '#10b981',
                    backgroundColor: 'rgba(16, 185, 129, 0.1)',
                    tension: 0.3,
                    fill: true
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                    labels: {
                        color: '#e2e8f0'
                    }
                }
            },
            scales: {
                x: {
                    grid: {
                        color: 'rgba(74, 85, 104, 0.3)'
                    },
                    ticks: {
                        color: '#a0aec0'
                    }
                },
                y: {
                    grid: {
                        color: 'rgba(74, 85, 104, 0.3)'
                    },
                    ticks: {
                        color: '#a0aec0'
                    }
                }
            }
        }
    });

    // Simulate real-time data updates
    setInterval(() => {
        const now = new Date();
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const timeLabel = `${hours}:${minutes}`;
        
        // Add new data point and remove oldest
        telemetryChart.data.labels.push(timeLabel);
        telemetryChart.data.labels.shift();
        
        telemetryChart.data.datasets.forEach(dataset => {
            const lastValue = dataset.data[dataset.data.length - 1];
            const fluctuation = (Math.random() - 0.5) * 2;
            const newValue = Math.max(0, lastValue + fluctuation);
            dataset.data.push(newValue);
            dataset.data.shift();
        });
        
        telemetryChart.update();
    }, 5000);
});