// assets/js/main.js
document.addEventListener('DOMContentLoaded', () => {
    const themeToggle = document.getElementById('theme-toggle');
    const featherSun = document.getElementById('feather-sun');
    const featherMoon = document.getElementById('feather-moon');

    // Function to apply theme based on saved preference or system setting
    const applyTheme = (theme) => {
        if (theme === 'dark') {
            document.body.classList.add('dark-mode');
            if (featherSun) featherSun.style.display = 'block';
            if (featherMoon) featherMoon.style.display = 'none';
        } else {
            document.body.classList.remove('dark-mode');
            if (featherSun) featherSun.style.display = 'none';
            if (featherMoon) featherMoon.style.display = 'block';
        }
    };

    // Check for saved theme in localStorage
    const savedTheme = localStorage.getItem('theme');
    // Check for user's system preference
    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

    // Apply theme on initial load
    if (savedTheme) {
        applyTheme(savedTheme);
    } else if (prefersDark) {
        applyTheme('dark');
    } else {
        applyTheme('light');
    }


    if (themeToggle) {
        themeToggle.addEventListener('click', () => {
            const isDarkMode = document.body.classList.toggle('dark-mode');
            const newTheme = isDarkMode ? 'dark' : 'light';
            localStorage.setItem('theme', newTheme);
            applyTheme(newTheme);
        });
    }

    // Feather icons replacement
    if (typeof feather !== 'undefined') {
        feather.replace();
    }

    // -- CHARTS INITIALIZATION --
    // Check if chartData is defined (it's passed from index.php)
    if (typeof chartData !== 'undefined') {
        const pieCtx = document.getElementById('loadsByStatusChart');
        const barCtx = document.getElementById('monthlyLoadsChart');

        // Define colors that work with the theme
        const chartColors = {
            primary: 'rgba(184, 134, 11, 0.8)', // Golden
            secondary: 'rgba(169, 169, 169, 0.8)', // Gray
            accent: 'rgba(212, 175, 55, 0.8)', // Lighter Gold
            success: 'rgba(40, 167, 69, 0.8)',
            danger: 'rgba(220, 53, 69, 0.8)',
            info: 'rgba(23, 162, 184, 0.8)',
        };

        if (pieCtx) {
            new Chart(pieCtx, {
                type: 'pie',
                data: {
                    labels: chartData.loadsByStatus.labels,
                    datasets: [{
                        label: 'Loads',
                        data: chartData.loadsByStatus.counts,
                        backgroundColor: [
                            chartColors.info, 
                            chartColors.primary, 
                            chartColors.success, 
                            chartColors.danger,
                            chartColors.secondary
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    }
                }
            });
        }

        if (barCtx) {
            new Chart(barCtx, {
                type: 'bar',
                data: {
                    labels: chartData.monthlyLoads.labels,
                    datasets: [{
                        label: 'Loads Created',
                        data: chartData.monthlyLoads.counts,
                        backgroundColor: chartColors.primary,
                        borderColor: chartColors.accent,
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: { // Make sure Y-axis ticks are integers
                                stepSize: 1,
                                callback: function(value) { if (Number.isInteger(value)) { return value; } }
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });
        }
    }
});