<nav class="navbar">
    <a href="/" class="logo" id="logo-home" style="text-decoration: none; color: inherit;">EAGLE's IMAX</a>
    <ul class="nav-links">
        <li><a href="/movies" id="link-filme">Aktuelle Filme</a></li>
        <li><a href="/snacks" id="link-snacks">Snacks & Getränke</a></li>
        <li><a href="/about" id="link-about">Über uns</a></li>
        <li><a href="/account" id="link-account">Mein Konto</a></li>
        <li>
            <a href="/cart" id="link-cart" style="position: relative; display: flex; align-items: center; gap: 5px;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
                Warenkorb
                <span id="cart-badge" class="badge">0</span>
            </a>
        </li>
        <li class="theme-toggle-item">
            <button id="theme-toggle" class="theme-toggle-btn" type="button" aria-label="Theme wechseln">
                <span class="theme-icon theme-icon-sun">☀</span>
                <span class="theme-icon theme-icon-moon">☾</span>
            </button>
        </li>
    </ul>
</nav>

<script>
    import { cart } from "../scripts/bigConstants";

    const themeToggle = document.getElementById("theme-toggle");
    const cartBadge = document.getElementById("cart-badge");

    const updateCartBadge = () => {
        if (!cartBadge) return;
        const totalItems = cart.length;
        cartBadge.textContent = totalItems.toString();
        cartBadge.style.display = totalItems > 0 ? "flex" : "none";
    };

    const initThemeToggle = () => {
        if (!themeToggle) return;
        const THEME_KEY = "eagleTheme";

        const applyTheme = (theme: string) => {
            const isLight = theme === "light";
            document.body.classList.toggle("theme-light", isLight);
            document.body.classList.toggle("theme-dark", !isLight);
            themeToggle.classList.toggle("is-light", isLight);
            localStorage.setItem(THEME_KEY, isLight ? "light" : "dark");
        };

        const storedTheme = localStorage.getItem(THEME_KEY);
        applyTheme(storedTheme === "light" ? "light" : "dark");

        themeToggle.addEventListener("click", () => {
            const nextTheme = document.body.classList.contains("theme-light") ? "dark" : "light";
            applyTheme(nextTheme);
        });
    };

    initThemeToggle();
    updateCartBadge();
    
    window.addEventListener("cart-updated", updateCartBadge);
</script>
