export class Nav {
    constructor() {
        this.init();
    }

    init() {
        const navToggle = document.querySelector('.nav-toggle');
        const headerCenter = document.querySelector('.header-center');
        const overlay = document.querySelector('.mobile-menu-overlay');
        const loginBtn = document.querySelector('#js-nav-login');

        // Click Event for Activation (Frontend Logic)
        document.addEventListener('click', (e) => {
            // 1. Handle Level 2 Links (Dropdown items)
            const subLink = e.target.closest('.nav-dropdown__item');
            if (subLink) {
                // Remove active class from all dropdown items
                document.querySelectorAll('.nav-dropdown__item').forEach(el => el.classList.remove('active'));
                subLink.classList.add('active');

                // Activate parent Level 1 item
                const parentItem = subLink.closest('.nav-menu__item');
                if (parentItem) {
                    // Remove active from all Level 1 items
                    document.querySelectorAll('.nav-menu__item').forEach(item => item.classList.remove('nav-menu__item--active'));
                    parentItem.classList.add('nav-menu__item--active');
                }
                return;
            }

            // 2. Handle Level 1 Links
            // Note: We check if it is an Anchor tag to avoid activating on "More" span click which is just a toggle
            const link = e.target.closest('.nav-menu__link');
            if (link && link.tagName === 'A') {
                const item = link.closest('.nav-menu__item');
                if (item) {
                    // Remove active from all Level 1 items
                    document.querySelectorAll('.nav-menu__item').forEach(el => el.classList.remove('nav-menu__item--active'));
                    item.classList.add('nav-menu__item--active');

                    // Clear any Level 2 active states as we moved to a Level 1 page
                    document.querySelectorAll('.nav-dropdown__item').forEach(el => el.classList.remove('active'));
                }
            }
        });

        // Mobile Menu Toggle
        if (navToggle) {
            if (!navToggle.dataset.navBound) {
                navToggle.addEventListener('click', (e) => {
                    e.stopPropagation();
                    const isOpen = headerCenter.classList.contains('is-open');
                    this.toggleMenu(!isOpen, headerCenter, navToggle, overlay);
                });
                navToggle.dataset.navBound = "true";
            }
        }        

        if (overlay && !overlay.dataset.navBound) {
            overlay.addEventListener('click', () => this.toggleMenu(false, headerCenter, navToggle, overlay));
            overlay.dataset.navBound = "true";
        }

        // Global keydown (Escape) - bind only once
        if (!document.body.dataset.navKeyBound) {
            document.addEventListener('keydown', (e) => {
                const center = document.querySelector('.header-center');
                if (e.key === 'Escape' && center?.classList.contains('is-open')) {
                    // Find current elements again as closure might be stale
                    const toggle = document.querySelector('.nav-toggle');
                    const ov = document.querySelector('.mobile-menu-overlay');
                    this.toggleMenu(false, center, toggle, ov);
                }
            });
            document.body.dataset.navKeyBound = "true";
        }

        // Mobile Submenu Toggle - Event Delegation
        // Bind to headerCenter instead of individual links to handle dynamic changes
        if (headerCenter && !headerCenter.dataset.navSubBound) {
            headerCenter.addEventListener('click', (e) => {
                // Check if we are in mobile mode
                if (window.innerWidth > 900) return;

                const link = e.target.closest('.nav-menu__link');
                if (!link) return;

                const parent = link.closest('.nav-menu__item--has-sub');
                if (parent && parent.contains(link)) {
                    // It is a submenu toggle
                    e.preventDefault();
                    e.stopPropagation(); // Stop bubbling to prevent immediate closing issues
                    parent.classList.toggle('nav-menu__item--expanded');
                }
            });
            headerCenter.dataset.navSubBound = "true";
        }

        // Login Handling
        if (loginBtn && !loginBtn.dataset.navBound) {
            loginBtn.addEventListener('click', () => {
                const currentUrl = window.location.href;
                window.location.href = `/connect/oidc?fromUrl=${encodeURIComponent(currentUrl)}`;
            });
            loginBtn.dataset.navBound = "true";
        }
    }

    closeMobileMenu() {
        const headerCenter = document.querySelector('.header-center');
        const navToggle = document.querySelector('.nav-toggle');
        const overlay = document.querySelector('.mobile-menu-overlay');
        this.toggleMenu(false, headerCenter, navToggle, overlay);
    }

    toggleMenu(show, menu, toggle, overlay) {
        if (!menu) return;
        const action = show ? 'add' : 'remove';
        menu.classList[action]('is-open');
        if (toggle) {
            toggle.classList[action]('nav-toggle--active');
            toggle.setAttribute('aria-expanded', show);
        }
        if (overlay) overlay.classList[action]('is-open');
        document.body.style.overflow = show ? 'hidden' : '';
    }
}