document.addEventListener('DOMContentLoaded', function () {
    const dataEl = document.getElementById('sodino-dashboard-data');
    if (!dataEl) {
        return;
    }

    let dashboardData;
    try {
        dashboardData = JSON.parse(dataEl.textContent || '{}');
    } catch (e) {
        return;
    }

    if (typeof Chart === 'undefined') {
        return;
    }

    const salesChartContext = document.getElementById('sodinoSalesChart');
    const discountChartContext = document.getElementById('sodinoDiscountChart');
    const ruleChartContext = document.getElementById('sodinoRuleChart');

    if (salesChartContext && dashboardData.salesChart) {
        new Chart(salesChartContext.getContext('2d'), {
            type: 'line',
            data: {
                labels: dashboardData.salesChart.labels,
                datasets: [
                    {
                        label: dashboardData.translations.afterApplying,
                        data: dashboardData.salesChart.after,
                        borderColor: '#0ea5e9',
                        backgroundColor: 'rgba(14, 165, 233, 0.15)',
                        fill: true,
                        tension: 0.35,
                        pointRadius: 3,
                    },
                    {
                        label: dashboardData.translations.beforeApplying,
                        data: dashboardData.salesChart.before,
                        borderColor: '#ef4444',
                        backgroundColor: 'rgba(239, 68, 68, 0.15)',
                        fill: true,
                        tension: 0.35,
                        pointRadius: 3,
                    },
                ],
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        labels: {
                            color: '#334155',
                        },
                    },
                },
                scales: {
                    x: {
                        ticks: {
                            color: '#475569',
                        },
                        grid: {
                            color: 'rgba(148, 163, 184, 0.15)',
                        },
                    },
                    y: {
                        ticks: {
                            color: '#475569',
                        },
                        grid: {
                            color: 'rgba(148, 163, 184, 0.15)',
                        },
                    },
                },
            },
        });
    }

    if (discountChartContext && dashboardData.summary) {
        new Chart(discountChartContext.getContext('2d'), {
            type: 'bar',
            data: {
                labels: [dashboardData.translations.totalDiscount, dashboardData.translations.totalRevenue],
                datasets: [
                    {
                        label: dashboardData.translations.discountEffect,
                        data: [dashboardData.summary.total_discount, dashboardData.summary.total_revenue],
                        backgroundColor: ['#fbbf24', '#0ea5e9'],
                        borderRadius: 999,
                        borderSkipped: false,
                    },
                ],
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: false,
                    },
                },
                scales: {
                    x: {
                        ticks: {
                            color: '#475569',
                        },
                        grid: {
                            display: false,
                        },
                    },
                    y: {
                        ticks: {
                            color: '#475569',
                        },
                        grid: {
                            color: 'rgba(148, 163, 184, 0.15)',
                        },
                    },
                },
            },
        });
    }

    if (ruleChartContext && dashboardData.rulePerformance) {
        new Chart(ruleChartContext.getContext('2d'), {
            type: 'bar',
            data: {
                labels: dashboardData.rulePerformance.names,
                datasets: [
                    {
                        label: dashboardData.translations.ruleRevenue,
                        data: dashboardData.rulePerformance.revenue,
                        backgroundColor: '#0ea5e9',
                        borderRadius: 999,
                    },
                    {
                        label: dashboardData.translations.ruleDiscount,
                        data: dashboardData.rulePerformance.discount,
                        backgroundColor: '#f59e0b',
                        borderRadius: 999,
                    },
                ],
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            color: '#475569',
                        },
                    },
                },
                scales: {
                    x: {
                        ticks: {
                            color: '#475569',
                        },
                        grid: {
                            color: 'rgba(148, 163, 184, 0.15)',
                        },
                    },
                    y: {
                        ticks: {
                            color: '#475569',
                        },
                        grid: {
                            display: false,
                        },
                    },
                },
            },
        });
    }
});