const chartInstances = {};

async function loadPieChart(endpoint, canvasId, legendId) {
    try {
        const res = await fetch(endpoint);
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const json = await res.json();

        const canvas = document.getElementById(canvasId);
        const legend = document.getElementById(legendId);

        if (!json.top || json.top.length === 0) {
            legend.innerHTML = "<p>Geen data ontvangen.</p>";
            return;
        }

        const totalPercent = json.top.reduce((sum, item) => sum + item.percent, 0);
        let topData = [...json.top];
        if (totalPercent < 100) {
            topData.push({ name: "Other", percent: 100 - totalPercent });
        }

        const labels = topData.map(item => item.name);
        const data = topData.map(item => item.percent);
        const colors = labels.map((label, i) =>
            label === "Other" ? "#888888" : `hsl(${i * 57 % 360}, 70%, 60%)`
        );

        if (!chartInstances[canvasId]) {
            const ctx = canvas.getContext("2d");
            chartInstances[canvasId] = new Chart(ctx, {
                type: "pie",
                data: {
                    labels,
                    datasets: [{
                        data,
                        backgroundColor: colors
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: ctx => `${ctx.label}: ${ctx.parsed.toFixed(2)}%`
                            }
                        },
                        legend: { display: false }
                    }
                }
            });
        } else {
            const chart = chartInstances[canvasId];
            chart.data.labels = labels;
            chart.data.datasets[0].data = data;
            chart.data.datasets[0].backgroundColor = colors;
            chart.update();
        }

        legend.innerHTML = "";
        const ul = document.createElement("ul");
        topData.forEach((item, i) => {
            const label = item.name === "Other" ? "Other" : item.name.split(":")[0].trim();
            ul.innerHTML += `<li><span class="alegend-color" style="background:${colors[i]}"></span>${label}</li>`;
        });
        legend.appendChild(ul);

    } catch (err) {
        console.error(err);
        document.getElementById(legendId).innerHTML = `<p style="color:red">Fout bij ophalen van data: ${err.message}</p>`;
    }
}

function loadAllCharts() {
    loadPieChart("/stats/src-as", "pieChart1", "legend1");
    loadPieChart("/stats/src-ports", "pieChart2", "legend2");
    loadPieChart("/stats/protocol", "pieChart3", "legend3");
    loadPieChart("/stats/src-country", "pieChart4", "legend4");
    loadPieChart("/stats/etype", "pieChart5", "legend5");
}

window.addEventListener("DOMContentLoaded", () => {
    loadAllCharts();
    setInterval(loadAllCharts, 60000);
});