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

// Funktion zum Abrufen und Aktualisieren des Charts
function fetchAndUpdateChart() {
    const startDate = document.getElementById('startDate').value;
    const endDate = document.getElementById('endDate').value;
    const startTime = document.getElementById('startTime').value || '00:00';
    const endTime = document.getElementById('endTime').value || '23:59';

    if (!startDate || !endDate) {
        alert('Bitte sowohl Start- als auch End-Datum auswählen!');
        return;
    }

    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.');
	    }

            console.log('5-Minuten-Daten:', data);

            const labels = data.map(item => item.time_slot);
            const values = data.map(item => item.transmission_count);

            // Farben für Balken (rot für 0-Werte, blau für andere Werte)
            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');

            // Zerstöre den bestehenden Chart, falls vorhanden
            if (fuenfMinutenChart) {
                fuenfMinutenChart.destroy();
            }

            // Erstelle den neuen 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));
}

// Funktion, um Standardwerte für Datum und Zeit zu setzen
function setDefaultDateTime() {
    const now = new Date();
    const yesterday = new Date();
    yesterday.setDate(now.getDate() - 1);

    // Standardwerte für Start- und Enddatum
    document.getElementById('startDate').value = yesterday.toISOString().split('T')[0];
    document.getElementById('endDate').value = now.toISOString().split('T')[0];

    // Standardwerte für Start- und Endzeit
    document.getElementById('startTime').value = '00:00';
    document.getElementById('endTime').value = '23:59';
}

// Eventlistener: Initialer Abruf beim Seitenladen
document.addEventListener('DOMContentLoaded', () => {
    setDefaultDateTime(); // Standardwerte setzen
    fetchAndUpdateChart(); // Standard-Daten laden
});

// Eventlistener: Filteränderung
document.getElementById('timeFilter').addEventListener('change', (event) => {
    const filter = event.target.value;

    // Anpassung der Datumswerte basierend auf dem Filter
    const now = new Date();
    let startDate;
    switch (filter) {
        case '24h':
            startDate = new Date();
            startDate.setDate(now.getDate() - 1);
            break;
        case '7d':
            startDate = new Date();
            startDate.setDate(now.getDate() - 7);
            break;
        case '1m':
            startDate = new Date();
            startDate.setMonth(now.getMonth() - 1);
            break;
        case '1y':
            startDate = new Date();
            startDate.setFullYear(now.getFullYear() - 1);
            break;
        case 'all':
            startDate = null;
            break;
        default:
            startDate = null;
    }

    if (startDate) {
        document.getElementById('startDate').value = startDate.toISOString().split('T')[0];
        document.getElementById('endDate').value = now.toISOString().split('T')[0];
    }

    fetchAndUpdateChart();
});