document.addEventListener('DOMContentLoaded', function() {
    // Sample data (would be replaced with API call in production)
    const salesData = [
        { date: '1/6/18', region: 'East', manager: 'Martha', salesperson: 'Alexander', item: 'Television', units: 95, price: 1198, amount: 113810 },
        { date: '1/23/18', region: 'Central', manager: 'Hermann', salesperson: 'Shelli', item: 'Home Theater', units: 50, price: 500, amount: 25000 },
        // ... rest of the data from the provided dataset
    ];

    // Populate table
    const tableBody = document.getElementById('salesTableBody');
    salesData.forEach(sale => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${sale.date}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${sale.region}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${sale.manager}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${sale.salesperson}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${sale.item}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${sale.units}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$${sale.price.toLocaleString()}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">$${sale.amount.toLocaleString()}</td>
        `;
        tableBody.appendChild(row);
    });

    // Initialize charts
    initCharts();
});

function initCharts() {
    // Sales Chart
    const salesCtx = document.getElementById('salesChart').getContext('2d');
    new Chart(salesCtx, {
        type: 'line',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            datasets: [{
                label: 'Sales Amount',
                data: [138810, 74203, 67088, 119850, 247136, 137820, 55000, 42832, 13521, 45600, 9491.5, 84595],
                borderColor: '#4F46E5',
                backgroundColor: 'rgba(79, 70, 229, 0.1)',
                tension: 0.3,
                fill: true
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return `$${context.raw.toLocaleString()}`;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return '$' + value.toLocaleString();
                        }
                    }
                }
            }
        }
    });

    // Products Chart
    const productsCtx = document.getElementById('productsChart').getContext('2d');
    new Chart(productsCtx, {
        type: 'doughnut',
        data: {
            labels: ['Television', 'Home Theater', 'Cell Phone', 'Video Games', 'Desk'],
            datasets: [{
                data: [691402, 280500, 62550, 20500.5, 1250],
                backgroundColor: [
                    '#4F46E5',
                    '#10B981',
                    '#F59E0B',
                    '#EF4444',
                    '#8B5CF6'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'right',
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return `$${context.raw.toLocaleString()}`;
                        }
                    }
                }
            }
        }
    });

    // Region Chart
    const regionCtx = document.getElementById('regionChart').getContext('2d');
    new Chart(regionCtx, {
        type: 'bar',
        data: {
            labels: ['East', 'Central', 'West'],
            datasets: [
                {
                    label: 'Total Sales',
                    data: [246601, 678339.5, 131379],
                    backgroundColor: '#4F46E5',
                },
                {
                    label: 'Average Sale',
                    data: [246601/10, 678339.5/20, 131379/5],
                    backgroundColor: '#10B981',
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return `$${context.raw.toLocaleString()}`;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return '$' + value.toLocaleString();
                        }
                    }
                }
            }
        }
    });
}