document.addEventListener('DOMContentLoaded', function() {
    // Initialize tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    // Date display
    const dateDisplay = document.getElementById('current-date');
    if (dateDisplay) {
        const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
        dateDisplay.textContent = new Date().toLocaleDateString('en-US', options);
    }

    // Load Chart.js
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
    script.onload = initializeCharts;
    document.head.appendChild(script);
    function initializeCharts() {
        // Check if we're on the demographics page
        if (document.getElementById('programDistributionChart')) {
            // Program Distribution Chart
            const programDistCtx = document.getElementById('programDistributionChart').getContext('2d');
            new Chart(programDistCtx, {
                type: 'pie',
                data: {
                    labels: ['CCS Program', 'SPS Program'],
                    datasets: [{
                        data: [782, 466],
                        backgroundColor: ['#4f46e5', '#7c3aed'],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        },
                        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 Chart
            const countyCtx = document.getElementById('countyBreakdownChart').getContext('2d');
            new Chart(countyCtx, {
                type: 'bar',
                data: {
                    labels: ['Baltimore City', 'Montgomery', 'Prince George\'s', 'Baltimore County', 'Other Counties'],
                    datasets: [
                        {
                            label: 'CCS',
                            data: [245, 187, 156, 98, 96],
                            backgroundColor: '#4f46e5',
                        },
                        {
                            label: 'SPS',
                            data: [132, 98, 112, 64, 60],
                            backgroundColor: '#7c3aed',
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            stacked: true,
                        },
                        y: {
                            stacked: true,
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        // Program Comparison Chart (for index page)
const programCtx = document.getElementById('programComparisonChart').getContext('2d');
        new Chart(programCtx, {
            type: 'pie',
            data: {
                labels: ['CCS Program', 'SPS Program'],
                datasets: [{
                    data: [782, 466],
                    backgroundColor: ['#4f46e5', '#7c3aed'],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'right',
                    },
                    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}%)`;
                            }
                        }
                    }
                }
            }
        });

        // LTSS Eligibility Comparison Chart
        const ltssCtx = document.getElementById('ltssComparisonChart').getContext('2d');
        new Chart(ltssCtx, {
            type: 'pie',
            data: {
                labels: ['Our Programs', 'Other LTSS-Eligible in MD'],
                datasets: [{
                    data: [1248, 3200],
                    backgroundColor: ['#10b981', '#6b7280'],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'right',
                    },
                    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}%)`;
                            }
                        }
                    }
                }
            }
        });
    }
});