document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('quicksearch');
    const searchInput = document.getElementById('story');
    const suggestionsDiv = document.getElementById('suggestions');
    let fullSearchActive = false;
    let searchTimeout;
    let currentPage = 1;
    let currentQuery = '';
    let isLoading = false;
    
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const query = searchInput.value.trim();
        if (query.length > 0) {
            fullSearchActive = true;
            suggestionsDiv.style.display = 'none';
            performFullSearch(query);
        }
    });
    
    searchInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            const query = searchInput.value.trim();
            if (query.length > 0) {
                fullSearchActive = true;
                suggestionsDiv.style.display = 'none';
                performFullSearch(query);
            }
        }
    });
    
    searchInput.addEventListener('input', function() {
        const query = this.value.trim();
        
        clearTimeout(searchTimeout);
        
        if (fullSearchActive) {
            const resultsContainer = document.getElementById('search-results-top');
            if (resultsContainer && resultsContainer.style.display !== 'none') {
                suggestionsDiv.style.display = 'none';
                return;
            }
        }
        
        if (query.length > 0) {
            searchTimeout = setTimeout(() => {
                performLiveSearch(query);
            }, 300);
        } else {
            hideSearchResults();
        }
    });
    
    searchInput.addEventListener('focus', function() {
        if (fullSearchActive) {
            const resultsContainer = document.getElementById('search-results-top');
            if (resultsContainer && resultsContainer.style.display !== 'none') {
                suggestionsDiv.style.display = 'none';
                return;
            }
        }
    });
    
    function performLiveSearch(query) {
        if (query.length < 2) {
            hideSearchResults();
            return;
        }
        
        currentQuery = query;
        currentPage = 1;
        showSearchResults();
        
        let resultsContainer = document.getElementById('search-results-top');
        resultsContainer.innerHTML = '<div style="color: white; text-align: center; padding: 20px;">Recherche en cours...</div>';
        
        fetch('/engine/ajax/search.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'query=' + encodeURIComponent(query) + '&page=1'
        })
        .then(response => response.text())
        .then(data => {
            if (searchInput.value.trim() === query) {
                resultsContainer.innerHTML = `
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; color: white;">
                        <h2 style="margin: 0; color: #41dc9c;"> </h2>
                        <button onclick="closeSearchResults()" style="background: #41dc9c; border: none; color: white; padding: 15px 20px; border-radius: 8px; cursor: pointer; font-size: 20px; font-weight: bold; box-shadow: 0 4px 12px rgba(244, 134, 37, 0.4); transition: all 0.3s ease;" onmouseover="this.style.background='#ff8533'; this.style.transform='scale(1.1)'; this.style.boxShadow='0 6px 20px rgba(244, 134, 37, 0.6)'" onmouseout="this.style.background='#41dc9c'; this.style.transform='scale(1)'; this.style.boxShadow='0 4px 12px rgba(244, 134, 37, 0.4)'">×</button>
                    </div>
                    <div id="search-results-content">${data}</div>
                    <div style="display: flex; justify-content: center; margin-top: 20px; padding: 15px 0; border-top: 1px solid rgba(244, 134, 37, 0.2);">
                        <button onclick="closeSearchResults()" style="background: #41dc9c; border: none; color: white; padding: 15px 30px; border-radius: 8px; cursor: pointer; font-size: 18px; font-weight: bold; box-shadow: 0 4px 12px rgba(244, 134, 37, 0.4); transition: all 0.3s ease;" onmouseover="this.style.background='#ff8533'; this.style.transform='scale(1.05)'; this.style.boxShadow='0 6px 20px rgba(244, 134, 37, 0.6)'" onmouseout="this.style.background='#41dc9c'; this.style.transform='scale(1)'; this.style.boxShadow='0 4px 12px rgba(244, 134, 37, 0.4)'">× Fermer  </button>
                    </div>
                `;
            }
        })
        .catch(error => {
            resultsContainer.innerHTML = '<div style="color: #ff4444; text-align: center; padding: 20px;">Erreur lors de la recherche</div>';
        });
    }
    
    function showSearchResults() {
        let resultsContainer = document.getElementById('search-results-top');
        if (!resultsContainer) {
            resultsContainer = document.createElement('div');
            resultsContainer.id = 'search-results-top';
            resultsContainer.style.cssText = `
                position: relative;
                z-index: 1000;
                 padding: 20px;
                margin: 0;
                border-bottom: 2px solid #41dc9c;
                box-shadow: 0 2px 10px rgba(0,0,0,0.3);
                max-height: 90vh;
                overflow-y: auto;
                overflow-x: hidden;
            `;
            
            const wrapIn = document.querySelector('.wrap-in');
            const headerOuter = document.querySelector('.header-outer');
            
            if (wrapIn) {
                wrapIn.insertBefore(resultsContainer, wrapIn.firstChild);
            } else if (headerOuter) {
                headerOuter.insertAdjacentElement('afterend', resultsContainer);
            } else {
                document.body.insertBefore(resultsContainer, document.body.firstChild);
            }
        }
        
        resultsContainer.style.display = 'block';
        if (window.pageYOffset > 300) {
            resultsContainer.scrollIntoView({ behavior: 'smooth' });
        }
    }
    
    function hideSearchResults() {
        const resultsContainer = document.getElementById('search-results-top');
        if (resultsContainer) {
            resultsContainer.style.display = 'none';
        }
        fullSearchActive = false;
        currentPage = 1;
    }
    
    function performFullSearch(query) {
        suggestionsDiv.style.display = 'none';
        fullSearchActive = true;
        currentQuery = query;
        currentPage = 1;
        
        showSearchResults();
        
        let resultsContainer = document.getElementById('search-results-top');
        resultsContainer.innerHTML = '<div style="color: white; text-align: center; padding: 20px;">Recherche en cours...</div>';
        
        fetch('/engine/ajax/search.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'query=' + encodeURIComponent(query) + '&page=1'
        })
        .then(response => response.text())
        .then(data => {
            resultsContainer.innerHTML = `
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; color: white;">
                    <h2 style="margin: 0; color: #41dc9c;"> </h2>
                    <button onclick="closeSearchResults()" style="background: #41dc9c; border: none; color: white; padding: 15px 20px; border-radius: 8px; cursor: pointer; font-size: 20px; font-weight: bold; box-shadow: 0 4px 12px rgba(244, 134, 37, 0.4); transition: all 0.3s ease;" onmouseover="this.style.background='#ff8533'; this.style.transform='scale(1.1)'; this.style.boxShadow='0 6px 20px rgba(244, 134, 37, 0.6)'" onmouseout="this.style.background='#41dc9c'; this.style.transform='scale(1)'; this.style.boxShadow='0 4px 12px rgba(244, 134, 37, 0.4)'">×</button>
                </div>
                <div id="search-results-content">${data}</div>
                <div style="display: flex; justify-content: center; margin-top: 20px; padding: 15px 0; border-top: 1px solid rgba(244, 134, 37, 0.2);">
                    <button onclick="closeSearchResults()" style="background: #41dc9c; border: none; color: white; padding: 15px 30px; border-radius: 8px; cursor: pointer; font-size: 18px; font-weight: bold; box-shadow: 0 4px 12px rgba(244, 134, 37, 0.4); transition: all 0.3s ease;" onmouseover="this.style.background='#ff8533'; this.style.transform='scale(1.05)'; this.style.boxShadow='0 6px 20px rgba(244, 134, 37, 0.6)'" onmouseout="this.style.background='#41dc9c'; this.style.transform='scale(1)'; this.style.boxShadow='0 4px 12px rgba(244, 134, 37, 0.4)'">× Fermer  </button>
                </div>
            `;
            history.pushState({}, '', '?search=' + encodeURIComponent(query));
        })
        .catch(error => {
            resultsContainer.innerHTML = '<div style="color: #ff4444; text-align: center; padding: 20px;">Erreur lors de la recherche</div>';
        });
    }
    
    function loadMoreResults() {
        if (isLoading || !currentQuery) return;
        
        isLoading = true;
        currentPage++;
        
        const loadMoreBtn = document.getElementById('load-more');
        if (loadMoreBtn) {
            loadMoreBtn.innerHTML = 'Chargement...';
            loadMoreBtn.style.pointerEvents = 'none';
        }
        
        fetch('/engine/ajax/search.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'query=' + encodeURIComponent(currentQuery) + '&page=' + currentPage
        })
        .then(response => response.text())
        .then(data => {
            isLoading = false;
            
            if (data.trim() && !data.includes('Aucun résultat')) {
                if (loadMoreBtn) {
                    loadMoreBtn.remove();
                }
                
                const resultsContent = document.getElementById('search-results-content');
                if (resultsContent) {
                    resultsContent.insertAdjacentHTML('beforeend', data);
                }
            } else {
                if (loadMoreBtn) {
                    loadMoreBtn.style.display = 'none';
                }
            }
        })
        .catch(error => {
            isLoading = false;
            if (loadMoreBtn) {
                loadMoreBtn.innerHTML = 'Erreur - Réessayer';
                loadMoreBtn.style.pointerEvents = 'auto';
            }
        });
    }
    
    window.closeSearchResults = function() {
        hideSearchResults();
    };
    
    window.loadMoreResults = loadMoreResults;
});