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);
    });

    // Populate detailed table with sample data
    const detailedData = [
        { id: 'S-001', location: 'Engine Bay', type: 'Temperature', value: '28.5', unit: '°C', min: '10', max: '35', avg: '25.2', status: 'normal', lastCalibration: '2023-05-15', nextCalibration: '2023-08-15' },
        { id: 'S-002', location: 'Hydraulic System', type: 'Pressure', value: '8.2', unit: 'bar', min: '5', max: '10', avg: '7.8', status: 'normal', lastCalibration: '2023-04-20', nextCalibration: '2023-07-20' },
        { id: 'S-003', location: 'Wheel Assembly', type: 'Vibration', value: '0.42', unit: 'mm/s', min: '0.1', max: '0.5', avg: '0.38', status: 'warning', lastCalibration: '2023-03-10', nextCalibration: '2023-06-10' },
        { id: 'S-004', location: 'Cabin', type: 'Humidity', value: '65', unit: '%', min: '30', max: '70', avg: '58', status: 'normal', lastCalibration: '2023-06-01', nextCalibration: '2023-09-01' },
        { id: 'S-005', location: 'Fuel Tank', type: 'Level', value: '78', unit: '%', min: '10', max: '100', avg: '72', status: 'normal', lastCalibration: '2023-05-25', nextCalibration: '2023-08-25' },
        { id: 'S-006', location: 'Brake System', type: 'Temperature', value: '95', unit: '°C', min: '20', max: '80', avg: '65', status: 'critical', lastCalibration: '2023-04-15', nextCalibration: '2023-07-15' },
        { id: 'S-007', location: 'Battery', type: 'Voltage', value: '24.3', unit: 'V', min: '22', max: '26', avg: '24.1', status: 'normal', lastCalibration: '2023-06-05', nextCalibration: '2023-09-05' },
        { id: 'S-008', location: 'Coolant System', type: 'Flow Rate', value: '12.5', unit: 'L/min', min: '10', max: '15', avg: '12.8', status: 'normal', lastCalibration: '2023-05-10', nextCalibration: '2023-08-10' },
        { id: 'S-009', location: 'Exhaust', type: 'Temperature', value: '320', unit: '°C', min: '200', max: '350', avg: '280', status: 'normal', lastCalibration: '2023-04-25', nextCalibration: '2023-07-25' },
        { id: 'S-010', location: 'Air Intake', type: 'Pressure', value: '1.02', unit: 'bar', min: '0.95', max: '1.05', avg: '1.01', status: 'normal', lastCalibration: '2023-06-10', nextCalibration: '2023-09-10' }
    ];
    
    const detailedTableBody = document.getElementById('detailedTable');
    
    detailedData.forEach(item => {
        const row = document.createElement('tr');
        
        let statusClass = 'status-warning';
        let statusText = 'Warning';
        if (item.status === 'normal') {
            statusClass = 'status-normal';
            statusText = 'Normal';
        } else if (item.status === 'critical') {
            statusClass = 'status-critical';
            statusText = 'Critical';
        }
        
        row.innerHTML = `
            <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${item.id}</td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">${item.location}</td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">${item.type}</td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 font-semibold">${item.value}</td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">${item.unit}</td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">${item.min}${item.unit}</td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">${item.max}${item.unit}</td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">${item.avg}${item.unit}</td>
            <td class="px-4 py-4 whitespace-nowrap">
                <span class="${statusClass}">${statusText}</span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">${item.lastCalibration}</td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">${item.nextCalibration}</td>
        `;
        
        detailedTableBody.appendChild(row);
    });
});