document.addEventListener('DOMContentLoaded', () => {
    const eventGrid = document.getElementById('event-grid');
    const filterButtons = document.querySelectorAll('.category-item');
    let allEvents = [];

    // 1. Daten laden aus JSOn file 
    async function fetchEvents() {
        try {
            // Pfad zu JSON File angepasst an lokale Ordnerstruktur
            const response = await fetch('data/events.json');
            allEvents = await response.json();
            renderEvents(allEvents);

            // Beim Laden prüfen, ob ein Filter gespeichert war
            const savedFilter = sessionStorage.getItem('activeFilter') || 'ALLE';
            applyFilter(savedFilter);

        //checked ob Fehler beim Laden oder Parsen der Daten auftreten
        } catch (error) {
            console.error("Fehler:", error);
            eventGrid.innerHTML = "<p>Events konnten nicht geladen werden.</p>";
        }
    }
    // Funktion um Filter anzuwenden und gleichzeitig UI zu aktualisieren
    function applyFilter(category) {

        // UI: Aktiven Button stylen
        filterButtons.forEach(btn => {
            if (btn.getAttribute('data-cat') === category) {
                btn.classList.add('active');
            } else {
                btn.classList.remove('active');
            }
        });

        // Daten filtern
        const filtered = category === 'ALLE' 
            ? allEvents 
            : allEvents.filter(e => e.category === category);
        
        renderEvents(filtered);
        
        //Filter im Browser merken
        sessionStorage.setItem('activeFilter', category);

    }
    // 2. Events rendern + "Empty State" Logik
    function renderEvents(events) {
        eventGrid.innerHTML = ''; 

        // PRÜFUNG: Wenn keine Events vorhanden sind zeigt folgende Nachricht
        if (events.length === 0) {
            eventGrid.innerHTML = `
                <div class="empty-state">
                    <h3>Schade! Aktuell gibt es hier keine Events.</h3>
                    <p>Möchtest du vielleicht selbst Gastgeber sein?</p>
                    <a href="event_create.html" style="text-decoration: none;">
                        <button class="btn-outline">Eigenes Event erstellen</button>
                    </a>
                </div>
            `;
            return;
        }

        // Wenn Events da sind, Karten bauen
        events.forEach(event => {
            const card = document.createElement('article');
            card.className = 'event-card';

            //Klick auf die gesamte Karte leitet zur Detailseite weiter
            card.style.cursor = "pointer";
            card.onclick = () => {
                window.location.href = `event_detail.html?id=${event.id}`;
            };

            //internes HTML im Js zur Styling der Event-Karte (HIER CHECKEN OB SO OK NACH CLEAN CODE)
            card.innerHTML = `
                <div class="event-image" style="background-image: url('${event.image}')"></div>
                <div class="event-content">
                    <small>📍 ${event.location}</small>
                    <h2 style="margin: 5px 0;">${event.title}</h2>
                    <div>
                        <span class="tag">${event.cuisine}</span>
                        <span class="tag">${event.category}</span>
                    </div>
                </div>
                <div class="event-info">
                    <strong>${event.date}</strong><br>
                    <span>🕒 ${event.time}</span>
                </div>
                <div class="event-cta">
                    <div style="font-size: 12px; margin-bottom: 8px;">🥗 ${event.diet}</div>
                    <button class="btn-primary">Anmelden</button>
                    <p style="font-size: 10px; margin-top: 8px;">${event.spots} PLÄTZE FREI</p>
                </div>
                <div style="text-align: center;">❤️</div>
            `;
            eventGrid.appendChild(card);
        });
    }

    // 3. Filter-Logik basic anhand der Kategorien im JSON File
    filterButtons.forEach(button => {
        button.addEventListener('click', () => {
            const selectedCat = button.getAttribute('data-cat');
            applyFilter(selectedCat);
        });
    });

    fetchEvents();
});