/**
 * Dieser Code lädt beim Start der Seite (DOMContentLoaded) Header und Footer dynamisch vom Server
 * (über /header und /footer) und fügt sie in die vorgesehenen Elemente ein.
 * Tritt ein Fehler auf (z.B. Datei nicht vorhanden oder Serverproblem),
 * wird eine Fehlermeldung direkt auf der Webseite angezeigt.
 */

// Warten bis das gesamte DOM geladen ist
document.addEventListener("DOMContentLoaded", () => {
    // Header laden
    const headerTarget = document.getElementById("header");
    if (headerTarget) {
        // Header-Inhalt vom Server anfordern
        fetch("/header")
            .then(response => {
                // Prüfen, ob die Antwort erfolgreich war
                if (!response.ok) throw new Error("Header nicht gefunden");
                return response.text();
            })
            .then(data => {
                // Header-Inhalt in die Seite einfügen
                headerTarget.innerHTML = data;

                // WICHTIG: Jetzt den Warenkorb zählen, nachdem der Header geladen ist!
                zeigeWarenkorbAnzahl();

                // Login Status im UI anzeigen
                zeigeLoginStatus();
            })
            .catch(error => {
                // Fehlerbehandlung: Fehlermeldung im Header-Bereich anzeigen
                headerTarget.innerHTML = `
                    <div style="background: #ffdede; color: #a00; padding: 10px; text-align: center;">
                        Fehler beim Laden des Headers.
                    </div>`;
                console.error(error);
            });
    }

    // Footer laden
    const footerTarget = document.getElementById("footer");
    if (footerTarget) {
        // Footer-Inhalt vom Server anfordern
        fetch("/footer")
            .then(response => {
                // Prüfen, ob die Antwort erfolgreich war
                if (!response.ok) throw new Error("Footer nicht gefunden");
                return response.text();
            })
            .then(data => {
                // Footer-Inhalt in die Seite einfügen
                footerTarget.innerHTML = data;
            })
            .catch(error => {
                // Fehlerbehandlung: Die Fehlermeldung im Footer-Bereich anzeigen
                footerTarget.innerHTML = `
                    <div style="background: #ffdede; color: #a00; padding: 10px; text-align: center;">
                        Fehler beim Laden der Fußzeile.
                    </div>`;
                console.error(error);
            });
    }

    window.zeigeWarenkorbAnzahl = function () {
        const warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || [];
        let anzahl = 0;

        warenkorb.forEach(produkt => {
            anzahl += produkt.quantity;
        });

        const anzahlElement = document.getElementById('cart-count');
        if (anzahlElement) {
            anzahlElement.textContent = anzahl;
        }
        console.log('Warenkorb-Anzahl:', anzahl);
    }

    window.zeigeLoginStatus = function () {
        const userId = sessionStorage.getItem('user_id')
        const loginBtn = document.querySelector('.login-btn')

        if (!loginBtn) return

        if (userId) {
            loginBtn.textContent = 'Logout'
            loginBtn.href = '/'
            loginBtn.addEventListener('click', (e) => {
                e.preventDefault()
                sessionStorage.clear()
                localStorage.clear()
                alert('Sie wurden ausgeloggt.')
                location.reload()
            })
        } else {
            loginBtn.textContent = 'Login'
            loginBtn.href = '/login'
        }
    }
});