/**
 * Stripe Subscription Manager — WP Dashboard Widget Chart
 *
 * Reads chart data from the global strpDashboardWidgetData variable
 * (set via wp_add_inline_script) and renders a mini revenue line chart.
 */
(function() {
    function initStrpWidgetChart() {
        var canvas = document.getElementById('strp-widget-revenue-chart');
        if ( ! canvas || typeof Chart === 'undefined' || typeof strpDashboardWidgetData === 'undefined' ) {
            return;
        }

        var chartData = strpDashboardWidgetData;
        var ctx = canvas.getContext('2d');

        // Purple gradient fill.
        var gradient = ctx.createLinearGradient(0, 0, 0, 150);
        gradient.addColorStop(0, 'rgba(132, 68, 249, 0.3)');
        gradient.addColorStop(1, 'rgba(132, 68, 249, 0.02)');

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: chartData.labels,
                datasets: [{
                    data: chartData.values,
                    borderColor: '#8444F9',
                    backgroundColor: gradient,
                    borderWidth: 2,
                    fill: true,
                    tension: 0.4,
                    pointRadius: 0,
                    pointHoverRadius: 4,
                    pointHoverBackgroundColor: '#8444F9'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        backgroundColor: '#1e293b',
                        titleFont: { size: 12 },
                        bodyFont: { size: 12 },
                        padding: 8,
                        cornerRadius: 6,
                        callbacks: {
                            label: function(context) {
                                return chartData.currencySymbol + context.parsed.y.toFixed(2);
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        display: false
                    },
                    y: {
                        display: false,
                        beginAtZero: true
                    }
                },
                interaction: {
                    mode: 'nearest',
                    axis: 'x',
                    intersect: false
                }
            }
        });
    }

    // Initialize when DOM is ready and Chart.js is loaded.
    if ( document.readyState === 'complete' || document.readyState === 'interactive' ) {
        setTimeout(initStrpWidgetChart, 0);
    } else {
        document.addEventListener('DOMContentLoaded', initStrpWidgetChart);
    }
})();
