// retoor <retoor@molodetz.nl>

const CHART_COLORS = [
    "#b73f1e",
    "#8f3b71",
    "#34d399",
    "#3a4b70",
    "#ffab00",
    "#f87171",
    "#61477c",
    "#af3050",
];

export class StatisticsCharts {
    constructor() {
        this.instances = [];
    }

    destroy() {
        for (const chart of this.instances) {
            try {
                chart.destroy();
            } catch {
            }
        }
        this.instances = [];
    }

    render(container, seriesList) {
        this.destroy();
        if (!container || !window.Chart || !Array.isArray(seriesList)) return;
        const panels = [];
        for (const series of seriesList) {
            const panel = document.createElement("div");
            panel.className = "statistics-chart-panel";
            const title = document.createElement("h4");
            title.textContent = series.label || series.key || "Series";
            panel.appendChild(title);
            const wrap = document.createElement("div");
            wrap.className = "statistics-chart-wrap";
            const canvas = document.createElement("canvas");
            canvas.setAttribute("role", "img");
            canvas.setAttribute("aria-label", `${series.label || "Chart"} over time`);
            wrap.appendChild(canvas);
            panel.appendChild(wrap);
            container.appendChild(panel);
            panels.push({ canvas, series });
        }
        for (let index = 0; index < panels.length; index += 1) {
            const { canvas, series } = panels[index];
            const labels = (series.points || []).map((point) => point.t);
            const values = (series.points || []).map((point) => Number(point.v || 0));
            const color = CHART_COLORS[index % CHART_COLORS.length];
            const chart = new window.Chart(canvas, {
                type: "line",
                data: {
                    labels,
                    datasets: [
                        {
                            label: series.label || series.key,
                            data: values,
                            borderColor: color,
                            backgroundColor: `${color}22`,
                            fill: true,
                            tension: 0.25,
                            pointRadius: labels.length > 40 ? 0 : 2,
                            pointHoverRadius: 4,
                        },
                    ],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: { mode: "index", intersect: false },
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label(context) {
                                    const value = context.parsed.y;
                                    return `${series.label}: ${Number(value).toLocaleString("en-GB")}`;
                                },
                            },
                        },
                    },
                    scales: {
                        x: {
                            ticks: {
                                maxRotation: 0,
                                autoSkip: true,
                                maxTicksLimit: 8,
                            },
                            grid: { color: "rgba(255, 255, 255, 0.08)" },
                            ticks: { color: "#7a6a90" },
                        },
                        y: {
                            beginAtZero: true,
                            ticks: {
                                precision: 0,
                                color: "#7a6a90",
                            },
                            grid: { color: "rgba(255, 255, 255, 0.08)" },
                        },
                    },
                },
            });
            this.instances.push(chart);
        }
    }
}