document.addEventListener("DOMContentLoaded", () => {
    fetch("/admin/data")
        .then((resp) => resp.json())
        .then((data) => {
            document.querySelector("#backlog").textContent = data.backlog;
            document.querySelector("#reminders").textContent = data.count.reminders;
            document.querySelector("#intervals").textContent = data.count.intervals;

            new Chart(document.getElementById("schedule"), {
                type: "bar",
                data: {
                    labels: [
                        ...data.scheduleShort.once,
                        ...data.scheduleShort.interval,
                    ].map((row) => luxon.DateTime.fromISO(row.time_key)),
                    datasets: [
                        {
                            label: "Reminders",
                            data: data.scheduleShort.once.map((row) => row.count),
                        },
                        {
                            label: "Intervals",
                            data: data.scheduleShort.interval.map((row) => row.count),
                        },
                    ],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            stacked: true,
                            type: "time",
                            time: {
                                unit: "minute",
                            },
                        },
                        y: {
                            stacked: true,
                        },
                    },
                },
            });

            new Chart(document.getElementById("scheduleLong"), {
                type: "bar",
                data: {
                    labels: [
                        ...data.scheduleLong.once,
                        ...data.scheduleLong.interval,
                    ].map((row) => luxon.DateTime.fromISO(row.time_key)),
                    datasets: [
                        {
                            label: "Reminders",
                            data: data.scheduleLong.once.map((row) => row.count),
                        },
                        {
                            label: "Intervals",
                            data: data.scheduleLong.interval.map((row) => row.count),
                        },
                    ],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            stacked: true,
                            type: "time",
                            time: {
                                unit: "day",
                            },
                        },
                        y: {
                            stacked: true,
                        },
                    },
                },
            });
        });
});