/**
 * Navigation und dynamisches Laden von Einzelseiten (Single Page App Verhalten).
 * Dieses Skript reagiert auf Klicks im Menü/Sidebar, lädt die gewünschte HTML-Teilseite
 * per Fetch-API nach und führt die jeweilige Seite-Initialisierungsfunktion aus.
 */
document.addEventListener("DOMContentLoaded", () => {
    
    /**
     * Setzt die "active"-Klasse im Menü für die ausgewählte Seite,
     * damit der Benutzer sieht, in welchem Bereich er sich befindet.
     * @param {string} id - Die ID des Menü-Links (z.B. "nav-home").
     */
    function setActiveMenu(id) {
        // Alle Sidebar-Links zurücksetzen
        document.querySelectorAll("#sidebar .nav-link").forEach(link => link.classList.remove("active"));
        // Alle Navbar-Links zurücksetzen
        document.querySelectorAll(".navbar-nav .nav-link").forEach(link => link.classList.remove("active"));
        
        // Aktiven Link anhand seiner ID suchen und hervorheben
        const activeLink = document.getElementById(id);
        if (activeLink) activeLink.classList.add("active");
    }

    /**
     * Lädt eine Teilseite (.html) dynamisch aus dem "pages/"-Ordner in den Hauptbereich.
     * Nach dem Laden werden die DOM-Elemente initialisiert (z.B. Event-Listener gebunden),
     * indem die entsprechende globale "init..."-Funktion aufgerufen wird.
     * @param {string} page - Der Name der HTML-Datei (ohne Endung, z.B. "play").
     * @param {string} menuId - Die ID des zugehörigen Menüpunkts zur visuellen Aktivierung.
     */
    window.loadPage = function loadPage(page, menuId) {
        // fetch lädt das HTML-Snippet. cache: "no-store" verhindert veraltete Stände im Browser-Cache.
        fetch("pages/" + page + ".html", { cache: "no-store" })
            .then(response => {
                if (!response.ok) {
                    throw new Error("HTTP-Fehler " + response.status);
                }
                return response.text();
            })
            .then(data => {
                // Das geladene HTML-Fragment in den Haupt-Container rendern
                document.getElementById("main-content").innerHTML = data;
                
                // Aktiven Menüpunkt visuell kennzeichnen
                setActiveMenu(menuId);
                
                // Da das DOM nun neu aufgebaut wurde, müssen wir die Event-Handler
                // für die jeweilige Seite neu registrieren (Init-Funktionen).
                if (page === "login" && typeof window.initLoginPage === "function") {
                    window.initLoginPage();
                }
                if (page === "leaderboard" && typeof window.initLeaderboardPage === "function") {
                    window.initLeaderboardPage();
                }
                if (page === "scores" && typeof window.initScoresPage === "function") {
                    window.initScoresPage();
                }
                if (page === "play" && typeof window.initPlayPage === "function") {
                    window.initPlayPage();
                }
                if (page === "messages" && typeof window.initMessagesPage === "function") {
                    window.initMessagesPage();
                }
            })
            .catch(error => {
                console.error("Fehler beim Laden von " + page + ":", error);
                // Fehlermeldung für den Benutzer in den Hauptbereich einbetten
                document.getElementById("main-content").innerHTML = "<div class='alert alert-danger'>Fehler beim Laden der Seite: " + error.message + "</div>";
            });
    };

    // --- Menü-Verkabelung ---
    // Alle Navigations-Elemente aus dem DOM abrufen
    const navHome = document.getElementById("nav-home");
    const navPlay = document.getElementById("nav-play");
    const navMyScores = document.getElementById("nav-my-scores");
    const navLeaderboard = document.getElementById("nav-leaderboard");
    const navbarLogin = document.getElementById("navbar-login");
    const navbarMessages = document.getElementById("navbar-messages");

    // Standard-Verhalten der Links (Seiten-Reload) verhindern und loadPage() aufrufen
    if (navHome) navHome.onclick = (e) => { e.preventDefault(); loadPage("home", "nav-home"); };
    if (navPlay) navPlay.onclick = (e) => { e.preventDefault(); loadPage("play", "nav-play"); };
    if (navMyScores) navMyScores.onclick = (e) => { e.preventDefault(); loadPage("scores", "nav-my-scores"); };
    if (navLeaderboard) navLeaderboard.onclick = (e) => { e.preventDefault(); loadPage("leaderboard", "nav-leaderboard"); };
    if (navbarLogin) navbarLogin.onclick = (e) => { e.preventDefault(); loadPage("login", "navbar-login"); };
    if (navbarMessages) navbarMessages.onclick = (e) => { e.preventDefault(); loadPage("messages", "navbar-messages"); };
    
    // Prüfen, ob neue ungelesene Nachrichten vorliegen, um den Nachrichten-Link rot zu markieren
    if (typeof window.updateMessagesNavState === "function") window.updateMessagesNavState();

    // Beim allerersten Aufruf der App die Startseite ("home") laden
    loadPage("home", "nav-home");
});