document.addEventListener('DOMContentLoaded', function() {
    // Theme toggle functionality
    const themeToggle = document.getElementById('theme-toggle');
    const html = document.documentElement;
    
    // Check for saved theme preference or use system preference
    const savedTheme = localStorage.getItem('theme') || 
                      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    html.classList.add(savedTheme);
    
    themeToggle.addEventListener('click', () => {
        html.classList.toggle('dark');
        const theme = html.classList.contains('dark') ? 'dark' : 'light';
        localStorage.setItem('theme', theme);
    });

    // Initialize charts
    const programChartCtx = document.getElementById('programChart').getContext('2d');
    const countyChartCtx = document.getElementById('countyChart').getContext('2d');

    // Program Distribution Pie Chart
    const programChart = new Chart(programChartCtx, {
        type: 'doughnut',
        data: {
            labels: ['Food Assistance', 'Housing Support', 'Job Training', 'Healthcare Access', 'Childcare Support', 'Other'],
            datasets: [{
                data: [3245, 2187, 1876, 2543, 1432, 1562],
                backgroundColor: [
                    'rgba(59, 130, 246, 0.8)',
                    'rgba(124, 58, 237, 0.8)',
                    'rgba(16, 185, 129, 0.8)',
                    'rgba(220, 38, 38, 0.8)',
                    'rgba(234, 179, 8, 0.8)',
                    'rgba(156, 163, 175, 0.8)'
                ],
                borderColor: [
                    'rgba(59, 130, 246, 1)',
                    'rgba(124, 58, 237, 1)',
                    'rgba(16, 185, 129, 1)',
                    'rgba(220, 38, 38, 1)',
                    'rgba(234, 179, 8, 1)',
                    'rgba(156, 163, 175, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right',
                    labels: {
                        color: getComputedStyle(document.documentElement).getPropertyValue('--text-color') || '#6b7280',
                        font: {
                            size: 12
                        }
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const label = context.label || '';
                            const value = context.raw || 0;
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = Math.round((value / total) * 100);
                            return `${label}: ${value} (${percentage}%)`;
                        }
                    }
                }
            }
        }
    });

    // County Breakdown Bar Chart
    const countyChart = new Chart(countyChartCtx, {
        type: 'bar',
        data: {
            labels: ['King', 'Pierce', 'Snohomish', 'Spokane', 'Clark', 'Thurston', 'Kitsap', 'Whatcom'],
            datasets: [{
                label: 'Participants by County',
                data: [3842, 2156, 1873, 1245, 987, 856, 723, 563],
                backgroundColor: 'rgba(59, 130, 246, 0.7)',
                borderColor: 'rgba(59, 130, 246, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        color: getComputedStyle(document.documentElement).getPropertyValue('--text-color') || '#6b7280'
                    },
                    grid: {
                        color: 'rgba(209, 213, 219, 0.2)'
                    }
                },
                x: {
                    ticks: {
                        color: getComputedStyle(document.documentElement).getPropertyValue('--text-color') || '#6b7280'
                    },
                    grid: {
                        display: false
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return `${context.raw} participants`;
                        }
                    }
                }
            }
        }
    });

    // Update chart colors when theme changes
    html.addEventListener('classChange', () => {
        programChart.update();
        countyChart.update();
    });

    // Helper to dispatch class change event
    function dispatchClassChange() {
        const event = new Event('classChange');
        html.dispatchEvent(event);
    }

    // Observe class changes on html element
    const observer = new MutationObserver(dispatchClassChange);
    observer.observe(html, { attributes: true, attributeFilter: ['class'] });
});