window.dashboardCharts = [];

function initDashboardCharts(monthlyData, statusData) {
    const rootStyle = getComputedStyle(document.documentElement);
    const getVar = (name) => rootStyle.getPropertyValue(name).trim();

    // Chart Options for Dark Mode Compatibility
    const commonOptions = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                labels: {
                    color: getVar('--text-main') || '#64748B',
                    font: { family: 'Sarabun' }
                }
            }
        },
        scales: {
            x: {
                ticks: { color: getVar('--text-muted') || '#94A3B8', font: { family: 'Sarabun' } },
                grid: { color: getVar('--border-color') || '#E2E8F0' }
            },
            y: {
                ticks: { color: getVar('--text-muted') || '#94A3B8', font: { family: 'Sarabun' } },
                grid: { color: getVar('--border-color') || '#E2E8F0' }
            }
        }
    };

    // 1. Line Chart (Monthly Activity)
    const lineCtx = document.getElementById('monthlyChart');
    if (lineCtx) {
        const lineChart = new Chart(lineCtx, {
            type: 'line',
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
                datasets: [{
                    label: 'จำนวนผู้ใช้งาน/การจอง',
                    data: monthlyData || [12, 19, 15, 25, 22, 30, 28, 35],
                    borderColor: '#0F766E', // Primary color
                    backgroundColor: 'rgba(15, 118, 110, 0.1)',
                    borderWidth: 2,
                    tension: 0.4,
                    fill: true
                }]
            },
            options: commonOptions
        });
        window.dashboardCharts.push(lineChart);
    }

    // 2. Doughnut Chart (Status Overview)
    const doughnutCtx = document.getElementById('statusChart');
    if (doughnutCtx) {
        const doughnutChart = new Chart(doughnutCtx, {
            type: 'doughnut',
            data: {
                labels: ['เสร็จสิ้น', 'รอดำเนินการ', 'กำลังใช้งาน', 'ไม่มีข้อมูล'],
                datasets: [{
                    data: statusData || [55, 25, 15, 5],
                    backgroundColor: [
                        '#10B981', // Success (Completed)
                        '#F59E0B', // Warning (Pending)
                        '#0ea5e9', // Info (Active)
                        '#64748B'  // Muted
                    ],
                    borderWidth: 0,
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '75%',
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            color: getVar('--text-main') || '#64748B',
                            padding: 20,
                            font: { family: 'Sarabun' }
                        }
                    }
                }
            }
        });
        window.dashboardCharts.push(doughnutChart);
    }
}

window.updateChartsTheme = function() {
    if (!window.dashboardCharts || window.dashboardCharts.length === 0) return;
    
    const rootStyle = getComputedStyle(document.documentElement);
    const textMain = rootStyle.getPropertyValue('--text-main').trim() || '#64748B';
    const textMuted = rootStyle.getPropertyValue('--text-muted').trim() || '#94A3B8';
    const borderColor = rootStyle.getPropertyValue('--border-color').trim() || '#E2E8F0';

    window.dashboardCharts.forEach(chart => {
        // Update Legend
        if (chart.options.plugins && chart.options.plugins.legend && chart.options.plugins.legend.labels) {
            chart.options.plugins.legend.labels.color = textMain;
        }
        // Update Scales (if exist)
        if (chart.options.scales) {
            if (chart.options.scales.x) {
                if (chart.options.scales.x.ticks) chart.options.scales.x.ticks.color = textMuted;
                if (chart.options.scales.x.grid) chart.options.scales.x.grid.color = borderColor;
            }
            if (chart.options.scales.y) {
                if (chart.options.scales.y.ticks) chart.options.scales.y.ticks.color = textMuted;
                if (chart.options.scales.y.grid) chart.options.scales.y.grid.color = borderColor;
            }
        }
        chart.update();
    });
};