jQuery(document).ready(function ($) {
    function initTheme() {
        const mode = wtc_dashboard_params.theme_mode;
        const body = $('body');
        if (mode === 'dark') {
            body.attr('data-wtc-theme', 'dark');
        } else if (mode === 'light') {
            body.attr('data-wtc-theme', 'light');
        } else {
            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                body.attr('data-wtc-theme', 'dark');
            } else {
                body.attr('data-wtc-theme', 'light');
            }
        }
    }
    initTheme();
    function filterOrders(page = 1) {
        const status = $('.wtc-tab.active').data('status');
        const dateRange = $('#wtc-date-filter').val();
        const container = $('#wtc-orders-container');
        container.css('opacity', '0.5');
        $.ajax({
            url: wtc_dashboard_params.ajax_url,
            type: 'POST',
            data: {
                action: 'wtc_filter_orders',
                nonce: wtc_dashboard_params.nonce,
                status: status,
                date_range: dateRange,
                paged: page
            },
            success: function (response) {
                if (response.success) {
                    container.html(response.data.html);
                }
                container.css('opacity', '1');
            }
        });
    }
    $('.wtc-tab').on('click', function (e) {
        e.preventDefault();
        $('.wtc-tab').removeClass('active');
        $(this).addClass('active');
        filterOrders(1);
    });
    $('#wtc-date-filter').on('change', function () {
        filterOrders(1);
    });
    $(document).on('click', '.wtc-page-link', function (e) {
        e.preventDefault();
        const page = $(this).data('page');
        filterOrders(page);
    });
    if (wtc_dashboard_params.chart_enabled === '1' && $('#wtcSpendingChart').length > 0) {
        const ctx = document.getElementById('wtcSpendingChart').getContext('2d');
        const gradient = ctx.createLinearGradient(0, 0, 0, 180);
        gradient.addColorStop(0, 'rgba(52, 152, 219, 0.3)');
        gradient.addColorStop(1, 'rgba(52, 152, 219, 0)');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: wtc_dashboard_params.chart_labels,
                datasets: [{
                    data: wtc_dashboard_params.chart_values,
                    borderColor: '#3498db',
                    borderWidth: 2,
                    fill: true,
                    backgroundColor: gradient,
                    tension: 0.4,
                    pointRadius: 4,
                    pointBackgroundColor: '#3498db',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    pointHoverRadius: 6,
                    pointHoverBackgroundColor: '#3498db',
                    pointHoverBorderColor: '#fff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                animation: {
                    duration: 2000,
                    easing: 'easeOutQuart'
                },
                animations: {
                    y: {
                        duration: 2000,
                        easing: 'easeOutQuart',
                        from: (ctx) => ctx.chart.scales.y.getPixelForValue(0)
                    }
                },
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        enabled: true,
                        intersect: false,
                        mode: 'index',
                        callbacks: {
                            label: function (context) {
                                return ' ' + context.parsed.y.toLocaleString('tr-TR', { minimumFractionDigits: 2 }) + ' TL';
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        display: true,
                        ticks: { font: { size: 10 }, color: '#94a3b8' },
                        grid: { display: false }
                    },
                    y: {
                        display: true,
                        beginAtZero: true,
                        ticks: {
                            font: { size: 10 },
                            color: '#94a3b8',
                            callback: function (val) { return val.toLocaleString('tr-TR') + ' TL'; }
                        },
                        grid: { color: 'rgba(148, 163, 184, 0.1)' }
                    }
                }
            }
        });
    }
});