document.addEventListener('DOMContentLoaded', function() {
    const menuButton = document.getElementById('menu-toggle');
    const mainNav = document.getElementById('site-navigation');
    const menuWrapper = mainNav ? mainNav.querySelector('.menu-wrapper') : null;
    const navStrings = window.simpleModernNavigation || {};
    const toggleText = navStrings.toggle || 'Toggle submenu';
    const expandText = navStrings.expand || toggleText;
    const collapseText = navStrings.collapse || toggleText;

    if (!menuButton || !mainNav) {
        return;
    }

    const focusableSelector = 'a, button:not(.submenu-toggle), [tabindex]:not([tabindex="-1"])';

    // Get all focusable elements in the menu
    function getFocusableElements() {
        if (!menuWrapper) return [];
        return menuWrapper.querySelectorAll(focusableSelector);
    }

    menuButton.addEventListener('click', function() {
        const isExpanded = mainNav.classList.contains('toggled');

        mainNav.classList.toggle('toggled');
        menuButton.classList.toggle('toggled');
        document.body.classList.toggle('mobile-menu-open');

        // Update aria-expanded
        menuButton.setAttribute('aria-expanded', !isExpanded);

        if (isExpanded) {
            closeAllSubmenus();
        }

        // Focus management
        if (!isExpanded) {
            // Menu is opening - focus first menu item
            setTimeout(() => {
                const focusableElements = getFocusableElements();
                if (focusableElements.length > 0) {
                    focusableElements[0].focus();
                }
            }, 100);
        } else {
            // Menu is closing - return focus to toggle button
            menuButton.focus();
        }
    });

    // Keyboard navigation for mobile menu
    document.addEventListener('keydown', function(e) {
        if (!mainNav.classList.contains('toggled')) return;

        const focusableElements = getFocusableElements();
        if (focusableElements.length === 0) return;

        const currentIndex = Array.from(focusableElements).indexOf(document.activeElement);

        if (e.key === 'Tab') {
            e.preventDefault();

            if (e.shiftKey) {
                // Shift + Tab - go backwards
                if (currentIndex <= 0) {
                    // Focus on close button (menu toggle)
                    menuButton.focus();
                } else {
                    focusableElements[currentIndex - 1].focus();
                }
            } else {
                // Tab - go forwards
                if (currentIndex >= focusableElements.length - 1) {
                    // Focus on close button (menu toggle)
                    menuButton.focus();
                } else {
                    focusableElements[currentIndex + 1].focus();
                }
            }
        } else if (e.key === 'Escape') {
            // Close menu on Escape
            mainNav.classList.remove('toggled');
            menuButton.classList.remove('toggled');
            document.body.classList.remove('mobile-menu-open');
            menuButton.setAttribute('aria-expanded', 'false');
            menuButton.focus();
        }
    });

    // Handle focus trap when on menu toggle button
    menuButton.addEventListener('keydown', function(e) {
        if (!mainNav.classList.contains('toggled')) return;

        if (e.key === 'Tab') {
            e.preventDefault();
            const focusableElements = getFocusableElements();

            if (e.shiftKey) {
                // Focus last menu item
                if (focusableElements.length > 0) {
                    focusableElements[focusableElements.length - 1].focus();
                }
            } else {
                // Focus first menu item
                if (focusableElements.length > 0) {
                    focusableElements[0].focus();
                }
            }
        }
    });

    // Close menu when clicking outside
    document.addEventListener('click', function(e) {
        if (mainNav.classList.contains('toggled') &&
            !mainNav.contains(e.target) &&
            !menuButton.contains(e.target)) {
            mainNav.classList.remove('toggled');
            menuButton.classList.remove('toggled');
            document.body.classList.remove('mobile-menu-open');
            menuButton.setAttribute('aria-expanded', 'false');
        }
    });

    // Desktop keyboard navigation accessibility
    const menuItemsWithChildren = mainNav.querySelectorAll('.menu-item-has-children');

    function setSubmenuState(item, toggle, expanded) {
        const submenu = item.querySelector(':scope > ul');
        const parentLink = item.querySelector(':scope > a');

        if (!submenu || !toggle) {
            return;
        }

        toggle.setAttribute('aria-expanded', expanded);
        item.classList.toggle('submenu-open', expanded);

        if (parentLink) {
            parentLink.setAttribute('aria-expanded', expanded);
        }

        const labelBase = toggle.dataset.linkLabel || '';
        const ariaLabel = labelBase ? `${labelBase} ${expanded ? collapseText : expandText}` : (expanded ? collapseText : expandText);
        toggle.setAttribute('aria-label', ariaLabel);

        const srText = toggle.querySelector('.screen-reader-text');
        if (srText) {
            srText.textContent = expanded ? collapseText : expandText;
        }
    }

    function closeAllSubmenus() {
        menuItemsWithChildren.forEach(item => {
            const toggle = item.querySelector(':scope > .submenu-toggle');
            if (toggle) {
                setSubmenuState(item, toggle, false);
            }
        });
    }

    menuItemsWithChildren.forEach(item => {
        const link = item.querySelector(':scope > a');
        const submenu = item.querySelector(':scope > ul');

        if (!submenu) {
            return;
        }

        let toggle = item.querySelector(':scope > .submenu-toggle');

        if (!toggle) {
            toggle = document.createElement('button');
            toggle.className = 'submenu-toggle';
            toggle.type = 'button';
            toggle.setAttribute('aria-expanded', 'false');
            toggle.setAttribute('tabindex', '-1');
            const linkText = link ? link.textContent.trim() : '';
            toggle.dataset.linkLabel = linkText;
            toggle.innerHTML = '<span class="submenu-toggle-icon" aria-hidden="true"></span><span class="screen-reader-text"></span>';

            toggle.addEventListener('click', event => {
                event.preventDefault();
                const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
                const nextExpanded = !isExpanded;

                setSubmenuState(item, toggle, nextExpanded);
                item.classList.toggle('submenu-close', !nextExpanded);

                if (nextExpanded) {
                    // Close other open submenus at the same level
                    const siblingItems = item.parentElement ? item.parentElement.querySelectorAll(':scope > .menu-item-has-children') : [];
                    siblingItems.forEach(sibling => {
                        if (sibling !== item) {
                            const siblingToggle = sibling.querySelector(':scope > .submenu-toggle');
                            if (siblingToggle) {
                                setSubmenuState(sibling, siblingToggle, false);
                            }
                        }
                    });

                    // Move focus to first submenu link for keyboard users
                    const firstSubmenuLink = submenu.querySelector('a, button');
                    if (firstSubmenuLink) {
                        firstSubmenuLink.focus();
                    }
                }
            });

            if (link) {
                link.after(toggle);
            } else {
                item.insertBefore(toggle, submenu);
            }

            setSubmenuState(item, toggle, false);
        }

        if (link) {
            link.setAttribute('aria-haspopup', 'true');
            link.setAttribute('aria-expanded', 'false');

            link.addEventListener('keydown', event => {
                const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
                const isSpace = event.key === ' ' || event.key === 'Spacebar';

                if (event.key === 'ArrowDown') {
                    event.preventDefault();
                    if (!isExpanded) {
                        setSubmenuState(item, toggle, true);
                    }

                    const firstSubmenuLink = submenu.querySelector('a, button:not(.submenu-toggle), [tabindex]:not([tabindex="-1"])');
                    if (firstSubmenuLink) {
                        firstSubmenuLink.focus();
                    }
                } else if (isSpace) {
                    event.preventDefault();
                    setSubmenuState(item, toggle, !isExpanded);

                    if (!isExpanded) {
                        const firstSubmenuLink = submenu.querySelector('a, button:not(.submenu-toggle), [tabindex]:not([tabindex="-1"])');
                        if (firstSubmenuLink) {
                            firstSubmenuLink.focus();
                        }
                    }
                } else if (event.key === 'ArrowUp') {
                    if (!isExpanded) {
                        return;
                    }
                    event.preventDefault();
                    const focusable = Array.from(submenu.querySelectorAll('a, button:not(.submenu-toggle), [tabindex]:not([tabindex="-1"])'));
                    if (focusable.length > 0) {
                        focusable[focusable.length - 1].focus();
                    }
                } else if (event.key === 'Escape') {
                    event.preventDefault();
                    setSubmenuState(item, toggle, false);
                }
            });
        }

        // Accessibility handling for focus states
        item.addEventListener('focusin', () => {
            item.classList.add('focus');
        });

        item.addEventListener('focusout', () => {
            setTimeout(() => {
                if (!item.contains(document.activeElement)) {
                    item.classList.remove('focus');
                    setSubmenuState(item, toggle, false);
                }
            }, 10);
        });
    });

    document.addEventListener('click', event => {
        if (!mainNav.contains(event.target)) {
            closeAllSubmenus();
        }
    });

    document.addEventListener('keydown', event => {
        if (event.key === 'Escape' && mainNav.contains(document.activeElement)) {
            closeAllSubmenus();
        }
    });
});