document.addEventListener('DOMContentLoaded', function() {
    // Data from the table
    const data = [
        { hour: 1, search: 2400000, demand: 90000, bid: 1.5, budgetSpent: 3600000, percentage: '2%' },
        { hour: 2, search: 1100000, demand: 80000, bid: 1.6, budgetSpent: 1760000, percentage: '4%' },
        { hour: 3, search: 600000, demand: 80000, bid: 1.6, budgetSpent: 960000, percentage: '4%' },
        { hour: 4, search: 400000, demand: 80000, bid: 1.6, budgetSpent: 640000, percentage: '5%' },
        { hour: 5, search: 300000, demand: 90000, bid: 1.6, budgetSpent: 480000, percentage: '5%' },
        { hour: 6, search: 300000, demand: 100000, bid: 1.7, budgetSpent: 510000, percentage: '5%' },
        { hour: 7, search: 800000, demand: 100000, bid: 1.8, budgetSpent: 1440000, percentage: '6%' },
        { hour: 8, search: 1700000, demand: 100000, bid: 1.9, budgetSpent: 3230000, percentage: '9%' },
        { hour: 9, search: 2800000, demand: 100000, bid: 2.0, budgetSpent: 5600000, percentage: '12%' },
        { hour: 10, search: 4300000, demand: 100000, bid: 2.0, budgetSpent: 8600000, percentage: '18%' },
        { hour: 11, search: 5300000, demand: 90000, bid: 2.0, budgetSpent: 10600000, percentage: '25%' },
        { hour: 12, search: 5800000, demand: 80000, bid: 2.0, budgetSpent: 11600000, percentage: '33%' },
        { hour: 13, search: 5700000, demand: 70000, bid: 1.9, budgetSpent: 10830000, percentage: '40%' },
        { hour: 14, search: 5900000, demand: 60000, bid: 1.8, budgetSpent: 10620000, percentage: '48%' },
        { hour: 15, search: 5800000, demand: 50000, bid: 1.7, budgetSpent: 9860000, percentage: '54%' },
        { hour: 16, search: 5800000, demand: 40000, bid: 1.6, budgetSpent: 9280000, percentage: '60%' },
        { hour: 17, search: 6000000, demand: 30000, bid: 1.5, budgetSpent: 9000000, percentage: '67%' },
        { hour: 18, search: 5700000, demand: 30000, bid: 1.4, budgetSpent: 7980000, percentage: '72%' },
        { hour: 19, search: 5800000, demand: 30000, bid: 1.3, budgetSpent: 7540000, percentage: '77%' },
        { hour: 20, search: 6600000, demand: 30000, bid: 1.2, budgetSpent: 7920000, percentage: '82%' },
        { hour: 21, search: 7500000, demand: 25000, bid: 1.1, budgetSpent: 8250000, percentage: '88%' },
        { hour: 22, search: 7900000, demand: 20000, bid: 1.0, budgetSpent: 7900000, percentage: '93%' },
        { hour: 23, search: 6800000, demand: 20000, bid: 0.9, budgetSpent: 6120000, percentage: '97%' },
        { hour: 24, search: 4800000, demand: 20000, bid: 0.8, budgetSpent: 3840000, percentage: '100%' }
    ];

    // Populate table
    const tableBody = document.getElementById('dataTableBody');
    data.forEach(item => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${item.hour}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.search.toLocaleString()}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.demand.toLocaleString()}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.bid}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.budgetSpent.toLocaleString()}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.percentage}</td>
        `;
        tableBody.appendChild(row);
    });

    // Initialize charts
    initializeCharts(data);
});

function initializeCharts(data) {
    // Budget Chart
    const budgetCtx = document.getElementById('budgetChart').getContext('2d');
    new Chart(budgetCtx, {
        type: 'line',
        data: {
            labels: data.map(item => `Hour ${item.hour}`),
            datasets: [
                {
                    label: 'Budget Spent',
                    data: data.map(item => item.budgetSpent),
                    borderColor: 'rgb(99, 102, 241)',
                    backgroundColor: 'rgba(99, 102, 241, 0.1)',
                    tension: 0.3,
                    fill: true
                },
                {
                    label: 'Percentage of Budget',
                    data: data.map(item => parseFloat(item.percentage.replace('%', '')) * 100000),
                    borderColor: 'rgb(236, 72, 153)',
                    backgroundColor: 'rgba(236, 72, 153, 0.1)',
                    tension: 0.3,
                    fill: true
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return value >= 1000000 ? (value / 1000000) + 'M' : value;
                        }
                    }
                }
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            let label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.datasetIndex === 1) {
                                const hour = context.dataIndex + 1;
                                const percentage = data.find(item => item.hour === hour).percentage;
                                label += percentage;
                            } else {
                                label += context.parsed.y.toLocaleString();
                            }
                            return label;
                        }
                    }
                }
            }
        }
    });

    // Bid vs Demand Chart
    const bidDemandCtx = document.getElementById('bidDemandChart').getContext('2d');
    new Chart(bidDemandCtx, {
        type: 'bar',
        data: {
            labels: data.map(item => `Hour ${item.hour}`),
            datasets: [
                {
                    label: 'Bid',
                    data: data.map(item => item.bid),
                    backgroundColor: 'rgba(16{"ok":false,"message":"terminated"}