document.addEventListener('DOMContentLoaded', function() {
    // Initialize chart
    const chartDom = document.getElementById('chartContainer');
    const myChart = echarts.init(chartDom);
    
    // Generate sample data with outliers
    const hours = Array.from({length: 24}, (_, i) => `${i}:00`);
    const temperatureData = Array.from({length: 24}, () => Math.floor(Math.random() * 10) + 20);
    // Add some outliers
    temperatureData[5] = 35;
    temperatureData[12] = 5;
    temperatureData[18] = 38;
    
    const markPoints = [
        { name: 'High Temp', value: '35°C', xAxis: 5, yAxis: 35, itemStyle: { color: '#ef4444' } },
        { name: 'Low Temp', value: '5°C', xAxis: 12, yAxis: 5, itemStyle: { color: '#3b82f6' } },
        { name: 'High Temp', value: '38°C', xAxis: 18, yAxis: 38, itemStyle: { color: '#ef4444' } }
    ];
    
    // Chart configuration
    const option = {
        tooltip: {
            trigger: 'axis',
            formatter: '{b}<br/>{a0}: {c0}°C'
        },
        legend: {
            data: ['Temperature'],
            right: 10,
            top: 0
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: hours,
            axisLine: {
                lineStyle: {
                    color: '#9ca3af'
                }
            },
            axisLabel: {
                color: '#6b7280'
            }
        },
        yAxis: {
            type: 'value',
            name: 'Temperature (°C)',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#9ca3af'
                }
            },
            axisLabel: {
                color: '#6b7280',
                formatter: '{value}°C'
            },
            splitLine: {
                lineStyle: {
                    color: '#e5e7eb'
                }
            }
        },
        series: [
            {
                name: 'Temperature',
                type: 'line',
                data: temperatureData,
                smooth: true,
                lineStyle: {
                    width: 3,
                    color: '#6366f1'
                },
                itemStyle: {
                    color: '#6366f1'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(99, 102, 241, 0.3)' },
                        { offset: 1, color: 'rgba(99, 102, 241, 0.1)' }
                    ])
                },
                markPoint: {
                    data: markPoints,
                    symbol: 'circle',
                    symbolSize: 10,
                    label: {
                        show: true,
                        formatter: '{b}',
                        position: 'top',
                        color: '#fff',
                        backgroundColor: 'rgba(0,0,0,0.7)',
                        padding: [3, 5],
                        borderRadius: 4
                    }
                }
            }
        ]
    };
    
    myChart.setOption(option);
    // Handle window resize
    window.addEventListener('resize', function() {
        myChart.resize();
    });

    // Add event listener for the Apply button
    document.querySelector('.bg-indigo-600').addEventListener('click', function() {
        const trainNumber = document.querySelector('select:first-of-type').value;
        const timeRange = document.querySelector('select:last-of-type').value;
        
        // Here you would typically fetch new data based on the selections
        console.log(`Fetching data for train ${trainNumber} and time range ${timeRange}`);
        
        // For demo purposes, we'll just show an alert
        alert(`Filters applied: Train ${trainNumber}, Time Range ${timeRange}`);
    });
// Populate table with sample data
    const anomalyData = [
        { id: 'S-001', metric: 'Temperature', value: '35°C', threshold: '30°C', timestamp: '2023-06-15 05:12:34', status: 'critical' },
        { id: 'S-002', metric: 'Pressure', value: '12.5 bar', threshold: '10 bar', timestamp: '2023-06-15 08:45:21', status: 'warning' },
        { id: 'S-003', metric: 'Vibration', value: '0.85 mm/s', threshold: '0.5 mm/s', timestamp: '2023-06-15 11:23:56', status: 'warning' },
        { id: 'S-001', metric: 'Temperature', value: '5°C', threshold: '10°C', timestamp: '2023-06-15 12:34:12', status: 'critical' },
        { id: 'S-004', metric: 'Humidity', value: '92%', threshold: '85%', timestamp: '2023-06-15 18:05:43', status: 'warning' }
    ];
    
    const tableBody = document.getElementById('anomalyTable');
    
    anomalyData.forEach(item => {
        const row = document.createElement('tr');
        
        let statusClass = 'status-warning';
        let statusText = 'Warning';
        if (item.status === 'critical') {
            statusClass = 'status-critical';
            statusText = 'Critical';
        }
        
        row.innerHTML = `
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${item.id}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.metric}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-semibold">${item.value}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.threshold}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.timestamp}</td>
            <td class="px-6 py-4 whitespace-nowrap">
                <span class="${statusClass}">${statusText}</span>
            </td>
        `;
        
        tableBody.appendChild(row);
    });
});