import accessibleAutocomplete from 'accessible-autocomplete';

/**
 * Initialize search bar component
 */
function initSearchBar() {
    const searchBars = document.querySelectorAll('[data-search-bar]');
    
    searchBars.forEach((searchBar) => {
        const container = searchBar.querySelector('[id$="Container"]');
        const searchId = container?.id.replace('Container', '');
        const clearButton = searchBar.querySelector('[data-search-clear]');
        
        if (!container || !searchId) return;
        
        // Get options from data attribute or use defaults
        // Options can be an array of strings or objects with title and type
        let options = [];
        if (searchBar.dataset.options) {
            options = JSON.parse(searchBar.dataset.options);
        } else {
            // Default options
            options = [
                { title: 'Risultato di ricerca', type: 'Content type' },
                { title: 'Filtri di ricerca', type: 'Content type' },
                { title: 'Servizio 1', type: 'Content type' },
                { title: 'Servizio 2', type: 'Content type' },
                { title: 'Informazione 1', type: 'Content type' },
                { title: 'Informazione 2', type: 'Content type' }
            ];
        }
        
        // Normalize options to always be objects
        const normalizedOptions = options.map(option => {
            if (typeof option === 'string') {
                return { title: option, type: 'Content type' };
            }
            return option;
        });
        
        // Get placeholder from data attribute
        const placeholder = container.dataset.placeholder || 'Search';
        
        // Get all results link configuration
        const allResultsHref = searchBar.dataset.allResultsHref || '#';
        const allResultsLabel = searchBar.dataset.allResultsLabel || 'Tutti i risultati';
        
        // Get icon path - try to find existing icon usage in the page
        const existingIcon = document.querySelector('svg use[href*="icons.svg"]');
        const iconPath = existingIcon ? existingIcon.getAttribute('href').split('#')[0] : '/icons.svg';
        
        // Salva un riferimento a syncResults per poter chiudere il menu programmaticamente
        let syncResultsRef = null;
        
        // Initialize accessible autocomplete
        accessibleAutocomplete({
            element: container,
            id: searchId,
            placeholder: placeholder,
            source: (query, syncResults) => {
                // Salva il riferimento a syncResults
                syncResultsRef = syncResults;
                
                if (query.length === 0) {
                    syncResults([]);
                    return;
                }
                
                // Filter options based on query
                const filtered = normalizedOptions.filter(option => 
                    option.title.toLowerCase().includes(query.toLowerCase())
                );
                
                // Add "All results" option at the end if there are results
                if (filtered.length > 0) {
                    filtered.push({
                        title: allResultsLabel,
                        type: 'all-results',
                        href: allResultsHref,
                        isAllResults: true
                    });
                }
                
                syncResults(filtered);
            },
            showAllValues: false,
            dropdownArrow: () => '', // Hide default arrow
            onConfirm: (option) => {
                if (option) {
                    // If it's the "All results" option, navigate to the link
                    if (option.isAllResults && option.href) {
                        window.location.href = option.href;
                        return;
                    }
                    // Handle selection - option is the full object
                    console.log('Selected:', option);
                }
            },
            templates: {
                inputValue: (result) => {
                    if (!result) return '';
                    // Don't set input value for "All results" option
                    if (result.isAllResults) return '';
                    return typeof result === 'string' ? result : result.title;
                },
                suggestion: (result) => {
                    if (!result) return '';
                    
                    // Check if it's the "All results" option
                    const isAllResults = typeof result === 'object' && result.isAllResults;
                    
                    if (isAllResults) {
                        // Render as footer link
                        return `
                            <div class="rtds-search-bar__autocomplete-suggestion rtds-search-bar__all-results-option">
                                <a href="${result.href}" class="rtds-action-link rtds-action-link--sm rtds-search-bar__all-results-link">
                                    ${result.title}
                                    <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4" aria-hidden="true" focusable="false" role="img">
                                        <use href="${iconPath}#mini--arrow-small-right" />
                                    </svg>
                                </a>
                            </div>
                        `;
                    }
                    
                    // Regular suggestion
                    const title = typeof result === 'string' ? result : result.title;
                    const type = typeof result === 'string' ? 'Content type' : result.type;
                    return `
                        <div class="rtds-search-bar__autocomplete-suggestion">
                            <span class="rtds-search-bar__suggestion-title">${title}</span>
                            <span class="rtds-search-bar__suggestion-type">${type}</span>
                        </div>
                    `;
                }
            }
        });
        
        // Get the actual input element created by accessible-autocomplete
        const autocompleteInput = searchBar.querySelector(`#${searchId}`);
        
        // Handle clicks on "All results" link and add class to option
        if (autocompleteInput) {
            const handleMenuClick = (e) => {
                const link = e.target.closest('.rtds-search-bar__all-results-link');
                if (link) {
                    e.preventDefault();
                    e.stopPropagation();
                    const href = link.getAttribute('href');
                    if (href && href !== '#') {
                        window.location.href = href;
                    }
                }
            };
            
            const addClassToAllResultsOption = () => {
                const menu = searchBar.querySelector('.autocomplete__menu');
                if (menu) {
                    const allResultsOption = menu.querySelector('.autocomplete__option:has(.rtds-search-bar__all-results-option)');
                    if (allResultsOption) {
                        allResultsOption.classList.add('rtds-search-bar__all-results-option-wrapper');
                    }
                }
            };
            
            // Funzione helper per verificare se il menu è visibile
            const isMenuVisible = () => {
                const menu = searchBar.querySelector('.autocomplete__menu');
                if (!menu) return false;
                const style = window.getComputedStyle(menu);
                return style.display !== 'none' && style.visibility !== 'hidden';
            };
            
            // Funzione per chiudere il menu usando syncResults
            const closeMenu = () => {
                // Usa syncResults per svuotare i risultati, questo chiuderà il menu correttamente
                if (syncResultsRef) {
                    syncResultsRef([]);
                }
                // Assicurati che aria-expanded sia false
                autocompleteInput.setAttribute('aria-expanded', 'false');
            };
            
            // Gestione ESC per chiudere il menu e riportare il focus all'input
            const handleEscapeKey = (e) => {
                if (e.key === 'Escape' || e.keyCode === 27) {
                    // Verifica se il menu è visibile
                    if (isMenuVisible()) {
                        // Chiudi il menu usando syncResults
                        closeMenu();
                        // Nascondi il pulsante di cancellazione se l'input è vuoto
                        if (clearButton && autocompleteInput.value.length === 0) {
                            clearButton.classList.add('rtds-hidden');
                        }
                        // Riporta il focus all'input
                        autocompleteInput.focus();
                        // Previeni il comportamento di default e ferma la propagazione
                        // per evitare che l'evento raggiunga il listener della modale
                        e.preventDefault();
                        e.stopPropagation();
                    }
                }
            };
            
            // Aggiungi listener per ESC sull'input
            autocompleteInput.addEventListener('keydown', handleEscapeKey);
            
            // Aggiungi listener anche sul menu quando viene creato per gestire ESC durante la navigazione
            const handleMenuKeydown = (e) => {
                if (e.key === 'Escape' || e.keyCode === 27) {
                    // Chiudi il menu usando syncResults
                    closeMenu();
                    // Nascondi il pulsante di cancellazione se l'input è vuoto
                    if (clearButton && autocompleteInput.value.length === 0) {
                        clearButton.classList.add('rtds-hidden');
                    }
                    // Riporta sempre il focus all'input quando si preme ESC dal menu
                    autocompleteInput.focus();
                    // Previeni il comportamento di default e ferma la propagazione
                    // per evitare che l'evento raggiunga il listener della modale
                    e.preventDefault();
                    e.stopPropagation();
                }
            };
            
            // Listen for menu changes
            const observer = new MutationObserver(() => {
                const menu = searchBar.querySelector('.autocomplete__menu');
                if (menu) {
                    menu.addEventListener('click', handleMenuClick);
                    // Aggiungi listener per ESC sul menu
                    menu.addEventListener('keydown', handleMenuKeydown);
                    // Add class to all results option
                    setTimeout(addClassToAllResultsOption, 0);
                }
            });
            
            observer.observe(searchBar, {
                childList: true,
                subtree: true
            });
            
            // Also check on input events
            autocompleteInput.addEventListener('input', () => {
                setTimeout(addClassToAllResultsOption, 100);
            });
        }
        
        if (autocompleteInput && clearButton) {
            // Show/hide clear button based on input value
            const updateClearButton = () => {
                if (autocompleteInput.value.length > 0) {
                    clearButton.classList.remove('rtds-hidden');
                } else {
                    clearButton.classList.add('rtds-hidden');
                }
            };
            
            // Listen to input events
            autocompleteInput.addEventListener('input', () => {
                updateClearButton();
            });
            
            // Clear button handler
            clearButton.addEventListener('click', () => {
                autocompleteInput.value = '';
                autocompleteInput.focus();
                updateClearButton();
                
                // Trigger input event to update autocomplete
                autocompleteInput.dispatchEvent(new Event('input', { bubbles: true }));
            });
            
            // Initial state
            updateClearButton();
        }
    });
}

// Initialize on DOM ready
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initSearchBar);
} else {
    initSearchBar();
}

/**
 * Initialize mobile search modal
 */
function initMobileSearchModal() {
    const modal = document.querySelector('.rtds-search-bar__modal');
    if (!modal) return;
    
    const modalId = modal.id;
    const triggerId = modal.dataset.triggerId || 'searchModalMobileTrigger';
    const closeButtonId = modal.dataset.closeButtonId || 'closeMobileSearchModal';
    const trigger = document.getElementById(triggerId);
    const closeButton = document.getElementById(closeButtonId);
    
    if (!trigger) return;
    
    // Helper functions
    const getFocusableElements = (container) => {
        const focusableSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable], summary';
        const elements = container.querySelectorAll(focusableSelector);
        return Array.from(elements).filter(el => 
            !el.disabled && 
            el.offsetParent !== null && 
            getComputedStyle(el).visibility !== 'hidden' &&
            !el.getAttribute('aria-hidden')
        );
    };
    
    let focusTrapHandler = null;
    
    const trapFocus = (e) => {
        const modalContent = modal.querySelector('.rtds-flex.rtds-flex-col');
        
        // Se l'elemento che sta ricevendo il focus non è dentro la modale, riporta il focus dentro
        if (modalContent && !modalContent.contains(e.target)) {
            e.preventDefault();
            const focusableElements = getFocusableElements(modalContent);
            if (focusableElements.length > 0) {
                focusableElements[0].focus();
            }
        }
    };
    
    const openMobileSearchModal = (interactionType = 'pointer') => {
        const modalContent = modal.querySelector('.rtds-flex.rtds-flex-col');
        const header = document.querySelector('.rtds-header');
        
        modal.style.display = 'flex';
        modal.classList.add("rtds-z-20");
        modal.setAttribute('aria-hidden', 'false');
        if (header) {
            header.classList.add('has-search-modal-open');
        }
        
        // Aggiorna aria-expanded sul trigger
        if (trigger) {
            trigger.setAttribute('aria-expanded', 'true');
        }
        
        // Aggiungi classe per indicare il tipo di interazione
        modal.classList.remove('is-opened-by-pointer', 'is-opened-by-keyboard');
        if (interactionType === 'keyboard') {
            modal.classList.add('is-opened-by-keyboard');
        } else {
            modal.classList.add('is-opened-by-pointer');
        }
        
        // Attiva il focus trap a livello di document
        focusTrapHandler = trapFocus;
        document.addEventListener('focusin', focusTrapHandler);
        
        // Get all the focusable elements inside the modal content
        const focusableElements = getFocusableElements(modalContent);
        const searchInput = modalContent.querySelector('input[type="search"], input[id*="Search"], .autocomplete__input');
        
        // Focus on search input if available, otherwise first focusable element
        if (searchInput) {
            setTimeout(() => {
                searchInput.focus();
            }, 100);
        } else if (focusableElements.length > 0) {
            focusableElements[0].focus();
        }
        
        if (!document.documentElement.classList.contains('!rtds-overflow-hidden')) {
            document.documentElement.classList.add('!rtds-overflow-hidden');
        }
    };
    
    const closeMobileSearchModal = () => {
        const header = document.querySelector('.rtds-header');
        
        // Rimuovi il focus trap
        if (focusTrapHandler) {
            document.removeEventListener('focusin', focusTrapHandler);
            focusTrapHandler = null;
        }
        
        if (document.documentElement.classList.contains('!rtds-overflow-hidden')) {
            document.documentElement.classList.remove('!rtds-overflow-hidden');
        }
        
        modal.style.display = 'none';
        modal.setAttribute('aria-hidden', 'true');
        modal.classList.remove("rtds-z-20");
        modal.classList.remove('is-opened-by-pointer', 'is-opened-by-keyboard');
        if (header) {
            header.classList.remove('has-search-modal-open');
        }
        
        // Aggiorna aria-expanded sul trigger
        if (trigger) {
            trigger.setAttribute('aria-expanded', 'false');
            trigger.focus();
        }
    };
    
    // Gestione apertura tramite click/touch (pointer)
    trigger.addEventListener('click', (e) => {
        openMobileSearchModal('pointer');
    });
    
    // Gestione apertura tramite tastiera (Enter/Space)
    trigger.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            openMobileSearchModal('keyboard');
        }
    });
    
    // Gestione chiusura
    if (closeButton) {
        closeButton.addEventListener('click', closeMobileSearchModal);
    }
    
    // Funzione helper per verificare se il menu autocomplete è visibile
    const isAutocompleteMenuVisible = () => {
        const autocompleteMenu = modal.querySelector('.autocomplete__menu');
        if (!autocompleteMenu) return false;
        const style = window.getComputedStyle(autocompleteMenu);
        return style.display !== 'none' && style.visibility !== 'hidden';
    };
    
    // Gestione keyboard nella modale
    modal.addEventListener('keydown', function (event) {
        const modalContent = modal.querySelector('.rtds-flex.rtds-flex-col');
        
        // Se l'utente inizia a navigare con la tastiera, rimuovi la classe is-opened-by-pointer
        // per permettere al focus ring di apparire normalmente
        if (modal.classList.contains('is-opened-by-pointer')) {
            // Rimuovi is-opened-by-pointer quando l'utente usa Tab, frecce, o altri tasti di navigazione
            if (event.key === 'Tab' || event.key.startsWith('Arrow') || event.key === 'Home' || event.key === 'End') {
                modal.classList.remove('is-opened-by-pointer');
            }
        }
        
        if (event.key === 'Tab') {
            const focusableElements = getFocusableElements(modalContent);
            
            // Se non ci sono elementi focusabili, previeni la tabulazione
            if (focusableElements.length === 0) {
                event.preventDefault();
                return;
            }
            
            const firstFocusableElement = focusableElements[0];
            const lastFocusableElement = focusableElements[focusableElements.length - 1];
            
            if (event.shiftKey) {
                // Shift + Tab: navigazione all'indietro
                if (document.activeElement === firstFocusableElement) {
                    lastFocusableElement.focus();
                    event.preventDefault();
                }
            } else {
                // Tab: navigazione in avanti
                if (document.activeElement === lastFocusableElement) {
                    firstFocusableElement.focus();
                    event.preventDefault();
                }
            }
        }
        
        if (event.key === 'Escape') {
            // Verifica se il menu autocomplete è aperto
            const menuIsOpen = isAutocompleteMenuVisible();
            
            // Verifica se l'evento proviene dal menu autocomplete (non dall'input)
            const autocompleteMenu = modal.querySelector('.autocomplete__menu');
            const isEventFromAutocompleteMenu = autocompleteMenu && autocompleteMenu.contains(event.target);
            
            // Se il menu autocomplete è aperto E l'evento proviene dal menu stesso,
            // NON chiudere la modale - il listener dell'autocomplete gestirà l'ESC
            if (menuIsOpen && isEventFromAutocompleteMenu) {
                // Ferma la propagazione per evitare che altri listener gestiscano l'evento
                event.stopPropagation();
                return;
            }
            
            // Se il menu autocomplete NON è aperto, chiudi la modale
            // (anche se l'evento proviene dall'input o da altri elementi nella modale)
            if (!menuIsOpen) {
                closeMobileSearchModal();
            }
        }
    });
}

// Initialize mobile search modal on DOM ready
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initMobileSearchModal);
} else {
    initMobileSearchModal();
}

export default initSearchBar;