{{-- Renders a report chart with Chart.js (window.Chart). Data comes from ReportRunner::chart() (capped server side). --}}
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    const cfg = @json($chart);
    const canvas = document.getElementById(@json($canvas));
    if (!canvas || !window.Chart) return;

    // Validated categorical palette (fixed order, never cycled) — light / dark steps.
    const PALETTE = {
        light: ['#2a78d6', '#eb6834', '#1baf7a', '#eda100', '#e87ba4', '#008300', '#4a3aa7', '#e34948'],
        dark: ['#3987e5', '#d95926', '#199e70', '#c98500', '#d55181', '#008300', '#9085e9', '#e66767'],
    };
    let chart = null;

    const render = () => {
        const dark = document.documentElement.classList.contains('dark');
        const colors = dark ? PALETTE.dark : PALETTE.light;
        const surface = dark ? '#0f172a' : '#ffffff';
        const text = dark ? '#cbd5e1' : '#475569';
        const grid = dark ? 'rgba(148,163,184,0.12)' : 'rgba(15,23,42,0.06)';
        const t = cfg.type;
        const circular = t === 'pie' || t === 'donut';
        const horizontal = t === 'bar' || t === 'funnel';
        const multi = cfg.datasets.length > 1;
        const fmt = (v) => Number(v).toLocaleString(undefined, { maximumFractionDigits: 2 });

        const datasets = cfg.datasets.map((ds, i) => {
            const color = colors[i % colors.length];
            if (circular) {
                return { ...ds, backgroundColor: cfg.labels.map((_, j) => colors[j % colors.length]), borderColor: surface, borderWidth: 2, hoverOffset: 6 };
            }
            if (t === 'line' || t === 'area') {
                return { ...ds, borderColor: color, backgroundColor: color + '26', fill: t === 'area', tension: 0.3, borderWidth: 2, pointRadius: cfg.labels.length > 30 ? 0 : 4, pointHoverRadius: 6, pointBackgroundColor: color, pointBorderColor: surface, pointBorderWidth: 2 };
            }
            return { ...ds, backgroundColor: multi ? color : colors[0], borderColor: surface, borderWidth: multi ? { top: 0, bottom: 0, left: 0, right: 0 } : 0, borderRadius: 4, borderSkipped: 'start', maxBarThickness: 44 };
        });

        if (chart) chart.destroy();
        chart = new window.Chart(canvas, {
            type: circular ? (t === 'donut' ? 'doughnut' : 'pie') : (t === 'line' || t === 'area' ? 'line' : 'bar'),
            data: { labels: cfg.labels, datasets },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: horizontal ? 'y' : 'x',
                cutout: t === 'donut' ? '62%' : undefined,
                interaction: { mode: circular ? 'nearest' : 'index', intersect: circular },
                plugins: {
                    legend: { display: multi || circular, position: circular ? 'right' : 'top', labels: { color: text, usePointStyle: true, boxWidth: 8, padding: 14 } },
                    tooltip: { callbacks: { label: (ctx) => `${ctx.dataset.label && !circular ? ctx.dataset.label + ': ' : (circular ? ctx.label + ': ' : '')}${fmt(ctx.parsed?.y ?? ctx.parsed?.x ?? ctx.parsed)}` } },
                },
                scales: circular ? {} : {
                    x: { stacked: multi && t !== 'line', ticks: { color: text, maxRotation: 45, autoSkip: true }, grid: { display: horizontal, color: grid }, border: { display: false },
                         title: { display: true, text: horizontal ? cfg.y_label : cfg.x_label, color: text } },
                    y: { stacked: multi && t !== 'line', beginAtZero: true, ticks: { color: text, callback: horizontal ? undefined : (v) => fmt(v) }, grid: { display: !horizontal, color: grid }, border: { display: false },
                         title: { display: true, text: horizontal ? cfg.x_label : cfg.y_label, color: text } },
                },
            },
        });
    };

    render();
    new MutationObserver(render).observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
});
</script>
@endpush