// =============================================
// Dynamische Navigation
// Je nach Login-Status wird die Kopfzeile für
// alle Seiten mit passendem Markup aufgebaut.
// =============================================

document.addEventListener('DOMContentLoaded', () => {
    const CURRENT_USER_KEY = 'socialCookingCurrentUser';
    const navcontainers = document.querySelectorAll('.nav-tab-links');
    const currentPage = (window.location.pathname.split('/').pop() || 'index.html').toLowerCase();

    // Beendet früh, falls auf einer Seite keine Hauptnavigation vorhanden ist.
    if (!navcontainers.length) {
        return;
    }

    // Liest den aktiven Benutzer robust aus localStorage.
    function getCurrentUser() {
        try {
            const stored = localStorage.getItem(CURRENT_USER_KEY);
            return stored ? JSON.parse(stored) : null;
        } catch (error) {
            console.error('Aktueller Benutzer konnte nicht gelesen werden.', error);
            return null;
        }
    }

    // Logout-Funktion
    window.logout = function() {
        localStorage.removeItem(CURRENT_USER_KEY);
        window.location.href = 'index.html';
    };

    // Baut die Navigation für ausgeloggte Besucher.
    function buildLoggedOutNavigation() {
        const loginIsActive = currentPage === 'login.html';
        const signupIsActive = currentPage === 'signup.html';
        const isIndex = currentPage === 'index.html' || currentPage === '';

        // Auf der Startseite, Login und Signup nur Login anzeigen.
        if (isIndex || loginIsActive || signupIsActive) {
            return `
                <a
                    class="button-small"
                    href="login.html"
                    aria-label="Login"
                >
                    Login
                </a>
            `;
        }

        return `
            <a
                class="button-small auth-nav-button ${loginIsActive ? 'auth-nav-button--active' : 'auth-nav-button--default'}"
                href="login.html"
                aria-label="Login"
                ${loginIsActive ? 'aria-current="page"' : ''}
            >
                Login
            </a>
            <a
                class="button-small auth-nav-button ${signupIsActive ? 'auth-nav-button--active' : 'auth-nav-button--default'}"
                href="signup.html"
                aria-label="Signup"
                ${signupIsActive ? 'aria-current="page"' : ''}
            >
                Signup
            </a>
        `;
    }

    // Baut die Navigation für eingeloggte Benutzer.
    function buildLoggedInNavigation(user) {
        const initial = (user.vorname || 'U').charAt(0).toUpperCase();
        const isEventOverview = currentPage === 'event_overview.html';
        const isEventCreate = currentPage === 'event_create.html';

        return `
            <a
                class="nav-tab${isEventCreate ? ' nav-tab--active' : ''}"
                href="event_create.html"
                ${isEventCreate ? 'aria-current="page"' : ''}
            >
                Event erstellen
            </a>
            <a
                class="nav-tab${isEventOverview ? ' nav-tab--active' : ''}"
                href="event_overview.html"
                ${isEventOverview ? 'aria-current="page"' : ''}
            >
                Event finden
            </a>
            <button
                class="button-small logout-button"
                onclick="logout()"
                aria-label="Logout"
            >
                Logout
            </button>
            <a
                class="profile-pill"
                href="my_profil.html"
                aria-label="Mein Profil"
                title="${user.vorname || 'Profil'}"
            >
                ${initial}
            </a>
        `;
    }

    const currentUser = getCurrentUser();
    const nextMarkup = currentUser ? buildLoggedInNavigation(currentUser) : buildLoggedOutNavigation();

    // Wendet das passende Markup auf alle vorhandenen Kopf-Navigationen an.
    navcontainers.forEach(container => {
        container.innerHTML = nextMarkup;
    });
});