// public/assets/js/header.js

document.addEventListener('DOMContentLoaded', function () {
    // -------------------------
    // Avatar-Menü ein-/ausblenden
    // -------------------------
    const avatarBtn = document.getElementById('userAvatar');
    const userMenu  = document.getElementById('userMenu');

    if (avatarBtn && userMenu) {
        avatarBtn.addEventListener('click', function (event) {
            event.stopPropagation();
            userMenu.classList.toggle('hidden');

            const expanded = avatarBtn.getAttribute('aria-expanded') === 'true';
            avatarBtn.setAttribute('aria-expanded', expanded ? 'false' : 'true');
        });

        // Klick außerhalb schließt Menü
        document.addEventListener('click', function (event) {
            if (!userMenu.classList.contains('hidden')) {
                const clickedInsideMenu   = userMenu.contains(event.target);
                const clickedAvatarButton = avatarBtn.contains(event.target);

                if (!clickedInsideMenu && !clickedAvatarButton) {
                    userMenu.classList.add('hidden');
                    avatarBtn.setAttribute('aria-expanded', 'false');
                }
            }
        });
    }

    // -------------------------
    // Logout-Modal
    // -------------------------
    const logoutButtons = document.querySelectorAll('[data-logout-link="true"]');
    const backdrop      = document.getElementById('logoutModalBackdrop');
    const btnConfirm    = document.getElementById('logoutConfirm');
    const btnCancel     = document.getElementById('logoutCancel');

    let logoutTarget = null;

    function showLogoutModal(targetHref) {
        logoutTarget = targetHref || null;
        if (!backdrop) return;

        backdrop.classList.remove('hidden');
        // kleine Fokushilfe: Escape schließt, Klick auf Hintergrund auch
        document.body.classList.add('overflow-hidden');
    }

    function hideLogoutModal() {
        if (!backdrop) return;
        backdrop.classList.add('hidden');
        document.body.classList.remove('overflow-hidden');
        logoutTarget = null;
    }

    // Logout-Link(s) abfangen
    if (logoutButtons.length && backdrop && btnConfirm && btnCancel) {
        logoutButtons.forEach(function (btn) {
            btn.addEventListener('click', function (event) {
                event.preventDefault();
                event.stopPropagation();

                const href = btn.getAttribute('data-logout-href') || btn.getAttribute('href') || '/auth/logout';
                showLogoutModal(href);

                // Avatar-Menü beim Öffnen des Modals schließen
                if (userMenu && !userMenu.classList.contains('hidden')) {
                    userMenu.classList.add('hidden');
                    if (avatarBtn) {
                        avatarBtn.setAttribute('aria-expanded', 'false');
                    }
                }
            });
        });

        // Bestätigen → weiter zur Logout-URL
        btnConfirm.addEventListener('click', function () {
            if (logoutTarget) {
                window.location.href = logoutTarget;
            } else {
                window.location.href = '/auth/logout';
            }
        });

        // Abbrechen → Modal schließen
        btnCancel.addEventListener('click', function () {
            hideLogoutModal();
        });

        // Klick auf Hintergrund (außerhalb der Card) schließt ebenfalls
        backdrop.addEventListener('click', function (event) {
            const card = backdrop.querySelector('div.w-full.max-w-sm');
            if (card && !card.contains(event.target)) {
                hideLogoutModal();
            }
        });

        // ESC-Taste schließt Modal
        document.addEventListener('keydown', function (event) {
            if (event.key === 'Escape' && !backdrop.classList.contains('hidden')) {
                hideLogoutModal();
            }
        });
    }
});