(function () {
    'use strict';

    var configs = window.saleReportCharts || [];
    if (!configs.length || typeof Chart === 'undefined') {
        return;
    }

    Chart.defaults.color = '#6b7280';
    Chart.defaults.borderColor = '#e5e7eb';
    Chart.defaults.font.family = 'Inter, sans-serif';
    Chart.defaults.font.size = 11;

    var palette = ['#1f2937', '#4b5563', '#6b7280', '#9ca3af', '#d1d5db', '#374151', '#111827'];

    configs.forEach(function (cfg) {
        var el = document.getElementById(cfg.id);
        if (!el) return;

        var labels = cfg.labels || [];
        var values = cfg.values || [];
        if (!labels.length) {
            labels = ['No data'];
            values = [0];
        }

        if (cfg.type === 'line') {
            new Chart(el, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        data: values,
                        borderColor: '#374151',
                        backgroundColor: 'rgba(55, 65, 81, 0.08)',
                        borderWidth: 2.5,
                        pointBackgroundColor: '#ffffff',
                        pointBorderColor: '#374151',
                        pointBorderWidth: 2,
                        pointRadius: 4,
                        tension: 0.3,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label: function (ctx) {
                                    return Number(ctx.parsed.y).toLocaleString(undefined, {
                                        minimumFractionDigits: 0,
                                        maximumFractionDigits: 2
                                    });
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            grid: { display: false },
                            border: { display: false },
                            ticks: { color: '#9ca3af', maxRotation: 0, autoSkip: true, maxTicksLimit: 8 }
                        },
                        y: {
                            grid: { color: '#f3f4f6' },
                            border: { display: false },
                            beginAtZero: true,
                            ticks: { color: '#9ca3af' }
                        }
                    }
                }
            });
            return;
        }

        if (cfg.type === 'bar') {
            new Chart(el, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        data: values,
                        backgroundColor: '#374151',
                        borderRadius: 4,
                        barPercentage: 0.55,
                        categoryPercentage: 0.7
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label: function (ctx) {
                                    return Number(ctx.parsed.y).toLocaleString(undefined, {
                                        minimumFractionDigits: 0,
                                        maximumFractionDigits: 2
                                    });
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            grid: { display: false },
                            border: { display: false },
                            ticks: {
                                color: '#9ca3af',
                                font: { size: 10 },
                                maxRotation: 45,
                                autoSkip: true,
                                maxTicksLimit: 10
                            }
                        },
                        y: {
                            grid: { color: '#f3f4f6' },
                            border: { display: false },
                            beginAtZero: true,
                            ticks: { color: '#9ca3af' }
                        }
                    }
                }
            });
            return;
        }

        if (cfg.type === 'doughnut') {
            new Chart(el, {
                type: 'doughnut',
                data: {
                    labels: labels,
                    datasets: [{
                        data: values,
                        backgroundColor: labels.map(function (_, i) {
                            return palette[i % palette.length];
                        }),
                        borderWidth: 2,
                        borderColor: '#ffffff'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '62%',
                    plugins: {
                        legend: {
                            position: 'right',
                            labels: {
                                boxWidth: 12,
                                padding: 12,
                                font: { size: 11, weight: '500' },
                                color: '#6b7280'
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function (ctx) {
                                    return ctx.label + ': ' + Number(ctx.parsed).toLocaleString();
                                }
                            }
                        }
                    }
                }
            });
        }
    });
})();
