// keyboard-navigation.js
class KeyboardNavigation {
    constructor() {
        this.initMenuKeyboardNav();
        this.initModalKeyboardNav();
        this.initTabsKeyboardNav();
        this.initSkipLinks();
    }
    
    initMenuKeyboardNav() {
        const menu = document.querySelector('.main-navigation');
        if (!menu) return;
        
        const menuItems = menu.querySelectorAll('a, button');
        
        menuItems.forEach((item, index) => {
            item.addEventListener('keydown', (e) => {
                let nextIndex;
                
                switch(e.key) {
                    case 'ArrowRight':
                    case 'ArrowDown':
                        e.preventDefault();
                        nextIndex = (index + 1) % menuItems.length;
                        menuItems[nextIndex].focus();
                        break;
                        
                    case 'ArrowLeft':
                    case 'ArrowUp':
                        e.preventDefault();
                        nextIndex = (index - 1 + menuItems.length) % menuItems.length;
                        menuItems[nextIndex].focus();
                        break;
                        
                    case 'Home':
                        e.preventDefault();
                        menuItems[0].focus();
                        break;
                        
                    case 'End':
                        e.preventDefault();
                        menuItems[menuItems.length - 1].focus();
                        break;
                        
                    case 'Escape':
                        if (item.getAttribute('aria-expanded') === 'true') {
                            this.closeSubmenu(item);
                        }
                        break;
                }
            });
        });
    }
    
    initModalKeyboardNav() {
        const modals = document.querySelectorAll('[role="dialog"]');
        
        modals.forEach(modal => {
            // Trap focus within modal
            const focusableElements = modal.querySelectorAll(
                'a[href], button, textarea, input[type="text"], input[type="radio"], ' +
                'input[type="checkbox"], input[type="email"], select, [tabindex]:not([tabindex="-1"])'
            );
            
            const firstFocusable = focusableElements[0];
            const lastFocusable = focusableElements[focusableElements.length - 1];
            
            modal.addEventListener('keydown', (e) => {
                if (e.key === 'Tab') {
                    if (e.shiftKey) { // Shift + Tab
                        if (document.activeElement === firstFocusable) {
                            e.preventDefault();
                            lastFocusable.focus();
                        }
                    } else { // Tab
                        if (document.activeElement === lastFocusable) {
                            e.preventDefault();
                            firstFocusable.focus();
                        }
                    }
                }
                
                if (e.key === 'Escape') {
                    this.closeModal(modal);
                }
            });
        });
    }
    
    initTabsKeyboardNav() {
        const tabLists = document.querySelectorAll('[role="tablist"]');
        
        tabLists.forEach(tabList => {
            const tabs = tabList.querySelectorAll('[role="tab"]');
            
            tabs.forEach((tab, index) => {
                tab.addEventListener('keydown', (e) => {
                    let newIndex;
                    
                    switch(e.key) {
                        case 'ArrowRight':
                            newIndex = (index + 1) % tabs.length;
                            this.activateTab(tabs[newIndex], tabs);
                            break;
                            
                        case 'ArrowLeft':
                            newIndex = (index - 1 + tabs.length) % tabs.length;
                            this.activateTab(tabs[newIndex], tabs);
                            break;
                            
                        case 'Home':
                            this.activateTab(tabs[0], tabs);
                            break;
                            
                        case 'End':
                            this.activateTab(tabs[tabs.length - 1], tabs);
                            break;
                    }
                });
            });
        });
    }
    
    initSkipLinks() {
        // Ensure skip links are focusable
        const skipLinks = document.querySelectorAll('.skip-link');
        
        skipLinks.forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                const target = document.querySelector(link.getAttribute('href'));
                if (target) {
                    target.setAttribute('tabindex', '-1');
                    target.focus();
                }
            });
        });
    }
    
    activateTab(newTab, allTabs) {
        // Deactivate all tabs
        allTabs.forEach(tab => {
            tab.setAttribute('aria-selected', 'false');
            tab.setAttribute('tabindex', '-1');
            const panel = document.getElementById(tab.getAttribute('aria-controls'));
            if (panel) panel.hidden = true;
        });
        
        // Activate new tab
        newTab.setAttribute('aria-selected', 'true');
        newTab.setAttribute('tabindex', '0');
        newTab.focus();
        const panel = document.getElementById(newTab.getAttribute('aria-controls'));
        if (panel) panel.hidden = false;
    }
    
    closeSubmenu(button) {
        button.setAttribute('aria-expanded', 'false');
        const submenu = document.getElementById(button.getAttribute('aria-controls'));
        if (submenu) submenu.hidden = true;
    }
    
    closeModal(modal) {
        modal.hidden = true;
        // Return focus to trigger element
        const trigger = document.querySelector(`[aria-controls="${modal.id}"]`);
        if (trigger) trigger.focus();
    }
}

// Initialize
document.addEventListener('DOMContentLoaded', () => {
    new KeyboardNavigation();
});