// Globale Variable für den Chart
let fuenfMinutenChart;

// Funktion zum Abrufen und Aktualisieren des Charts
function fetchAndUpdateChart(filter = null) {
    const startDateInput = document.getElementById('startDate');
    const endDateInput = document.getElementById('endDate');
    const startTimeInput = document.getElementById('startTime');
    const endTimeInput = document.getElementById('endTime');

    // Abrufen von Start- und Enddaten mit Standardwerten
    let startDate = startDateInput.value || getDefaultDate(-1); // Standardwert: Gestern
    let endDate = endDateInput.value || getDefaultDate(0); // Standardwert: Heute
    let startTime = startTimeInput.value || '00:00';
    let endTime = endTimeInput.value || '23:59';

    // Überschreiben mit Zeitraumfilter, falls angegeben
    if (filter) {
        const now = new Date();
        if (filter === '24h') {
            startDate = getDefaultDate(-1);
            endDate = getDefaultDate(0);
        } else if (filter === '7d') {
            startDate = getDefaultDate(-7);
            endDate = getDefaultDate(0);
        } else if (filter === '1m') {
            startDate = getDefaultDate(-30);
            endDate = getDefaultDate(0);
        } else if (filter === '1y') {
            startDate = getDefaultDate(-365);
            endDate = getDefaultDate(0);
        }
    }

    // API-Aufruf
    fetch(`/fuenf_minuten?start_date=${startDate}&end_date=${endDate}&start_time=${startTime}&end_time=${endTime}`)
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (!Array.isArray(data)) {
                throw new Error('Ungültige Daten vom Server.');
            }

            // Labels und Werte für den Chart
            const labels = data.map(item => item.time_slot);
            const values = data.map(item => item.transmission_count);

            // Farben für Balken
            const backgroundColors = values.map(value => value === 0 ? 'rgba(255, 99, 132, 0.5)' : 'rgba(54, 162, 235, 0.5)');
            const borderColors = values.map(value => value === 0 ? 'rgba(255, 99, 132, 1)' : 'rgba(54, 162, 235, 1)');

            const ctx = document.getElementById('fuenfMinutenChart').getContext('2d');

            // Alten Chart zerstören, falls vorhanden
            if (fuenfMinutenChart) {
                fuenfMinutenChart.destroy();
            }

            // Neuer Chart
            fuenfMinutenChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Übertragungen',
                        data: values,
                        backgroundColor: backgroundColors,
                        borderColor: borderColors,
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: 'Zeit'
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: 'Anzahl'
                            },
                            beginAtZero: true
                        }
                    }
                }
            });
        })
        .catch(err => {
            console.error('Fehler bei der 5-Minuten-Datenabfrage:', err.message);
            alert(`Fehler bei der 5-Minuten-Datenabfrage: ${err.message}`);
        });
}

// Funktion zur Berechnung von Standarddaten
function getDefaultDate(offsetDays) {
    const date = new Date();
    date.setDate(date.getDate() + offsetDays);
    return date.toISOString().split('T')[0];
}

// Event Listener für Zeitfilter
document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('timeFilter').addEventListener('change', (event) => {
        fetchAndUpdateChart(event.target.value);
    });

    // Listener für Datumsauswahl
    document.getElementById('startDate').addEventListener('change', () => fetchAndUpdateChart());
    document.getElementById('endDate').addEventListener('change', () => fetchAndUpdateChart());
    document.getElementById('startTime').addEventListener('change', () => fetchAndUpdateChart());
    document.getElementById('endTime').addEventListener('change', () => fetchAndUpdateChart());

    // Initiales Laden mit Standardwerten
    fetchAndUpdateChart('24h');
});