/**
 * Renders the Reports page charts with Chart.js (vendored locally — no CDN).
 * Reads chart data from window.yatoonReportsData, localized server-side in
 * admin/views/reports.php. Pure presentation: computes nothing new, only
 * visualizes numbers the PHP side already worked out.
 */
(function () {
    'use strict';

    if (typeof window.Chart === 'undefined' || typeof window.yatoonReportsData === 'undefined') {
        return;
    }

    var data = window.yatoonReportsData;
    var strings = data.strings || {};
    var currency = data.currencySymbol || '$';

    var PURPLE = '#7c3aed';
    var PURPLE_SOFT = 'rgba(124, 58, 237, 0.18)';
    var SLATE = '#94a3b8';

    Chart.defaults.font.size = 12;
    Chart.defaults.color = '#6b7280';

    function money(value) {
        return currency + Number(value || 0).toLocaleString(undefined, { maximumFractionDigits: 0 });
    }

    function initTrendChart() {
        var el = document.getElementById('yr-canvas-trend');
        if (!el || !data.trend || !data.trend.labels || !data.trend.labels.length) {
            return;
        }

        new Chart(el.getContext('2d'), {
            data: {
                labels: data.trend.labels,
                datasets: [
                    {
                        type: 'bar',
                        label: strings.revenue || 'Revenue',
                        data: data.trend.revenue,
                        backgroundColor: PURPLE_SOFT,
                        borderColor: PURPLE,
                        borderWidth: 1,
                        borderRadius: 3,
                        yAxisID: 'yRevenue',
                        order: 2,
                    },
                    {
                        type: 'line',
                        label: strings.bookings || 'Bookings',
                        data: data.trend.bookings,
                        borderColor: SLATE,
                        backgroundColor: SLATE,
                        borderWidth: 2,
                        tension: 0.35,
                        pointRadius: 2,
                        pointHoverRadius: 4,
                        yAxisID: 'yBookings',
                        order: 1,
                    },
                ],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: { mode: 'index', intersect: false },
                plugins: {
                    legend: { position: 'top', align: 'end', labels: { boxWidth: 10, usePointStyle: true } },
                    tooltip: {
                        callbacks: {
                            label: function (ctx) {
                                if (ctx.dataset.yAxisID === 'yRevenue') {
                                    return ' ' + (strings.revenue || 'Revenue') + ': ' + money(ctx.parsed.y);
                                }
                                return ' ' + (strings.bookings || 'Bookings') + ': ' + ctx.parsed.y;
                            },
                        },
                    },
                },
                scales: {
                    x: { grid: { display: false } },
                    yRevenue: {
                        position: 'left',
                        beginAtZero: true,
                        ticks: { callback: function (v) { return money(v); } },
                        grid: { color: '#f3f4f6' },
                    },
                    yBookings: {
                        position: 'right',
                        beginAtZero: true,
                        grid: { display: false },
                        ticks: { precision: 0 },
                    },
                },
            },
        });
    }

    function initBreakdownChart(canvasId, breakdown) {
        var el = document.getElementById(canvasId);
        if (!el || !breakdown || !breakdown.labels || !breakdown.labels.length) {
            return;
        }

        new Chart(el.getContext('2d'), {
            type: 'bar',
            data: {
                labels: breakdown.labels,
                datasets: [{
                    label: strings.revenue || 'Revenue',
                    data: breakdown.values,
                    backgroundColor: PURPLE,
                    borderRadius: 4,
                    maxBarThickness: 22,
                }],
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: function (ctx) { return ' ' + money(ctx.parsed.x); },
                        },
                    },
                },
                scales: {
                    x: {
                        beginAtZero: true,
                        ticks: { callback: function (v) { return money(v); } },
                        grid: { color: '#f3f4f6' },
                    },
                    y: { grid: { display: false } },
                },
            },
        });
    }

    function init() {
        initTrendChart();
        initBreakdownChart('yr-canvas-services', data.services);
        initBreakdownChart('yr-canvas-staff', data.staff);
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();
