// Simple, Reliable Blog Search System - FIXED VERSION
console.log('🎸 Blog JavaScript loading...');

// Simple global search function that ALWAYS works
window.blogSearch = function(searchTerm) {
    console.log('=== 🔍 BLOG SEARCH STARTED ===');
    console.log('Search term:', searchTerm);
    
    const articles = document.querySelectorAll('.blog-article');
    const searchLower = (searchTerm || '').toLowerCase().trim();
    let visibleCount = 0;
    
    console.log('Found', articles.length, 'articles to search through');
    
    // Show all articles if no search term
    if (!searchLower) {
        console.log('No search term - showing all articles');
        articles.forEach(function(article) {
            article.style.display = 'block';
            visibleCount++;
        });
    } else {
        // Search through articles
        articles.forEach(function(article, index) {
            const title = (article.getAttribute('data-title') || '').toLowerCase();
            const author = (article.getAttribute('data-author') || '').toLowerCase();
            const category = (article.getAttribute('data-category') || '').toLowerCase();
            
            const matches = title.includes(searchLower) || 
                          author.includes(searchLower) || 
                          category.includes(searchLower);
                
            console.log(`Article ${index}: "${title}" | Category: "${category}" | Author: "${author}" | Matches: ${matches}`);
            
            if (matches) {
                article.style.display = 'block';
                visibleCount++;
                console.log('✅ SHOWING article:', title);
            } else {
                article.style.display = 'none';
                console.log('❌ HIDING article:', title);
            }
        });
    }
    
    console.log('=== ✅ SEARCH COMPLETE ===');
    console.log('Visible articles:', visibleCount);
    
    // Update search button icon
    const searchButton = document.getElementById('search-button');
    if (searchButton) {
        if (searchLower) {
            searchButton.innerHTML = '<i class="fas fa-times"></i>';
            console.log('Button changed to X (clear)');
        } else {
            searchButton.innerHTML = '<i class="fas fa-search"></i>';
            console.log('Button changed to search icon');
        }
    }
    
    // Handle no results message
    const noResults = document.getElementById('no-results');
    if (noResults) {
        if (visibleCount === 0 && searchLower) {
            noResults.classList.remove('hidden');
            console.log('Showing no results message');
        } else {
            noResults.classList.add('hidden');
            console.log('Hiding no results message');
        }
    }
    
    return visibleCount;
};

// Category filter function
window.categoryFilter = function(category) {
    console.log('=== 📂 CATEGORY FILTER ===');
    console.log('Category:', category);
    
    const articles = document.querySelectorAll('.blog-article');
    let visibleCount = 0;
    
    articles.forEach(function(article, index) {
        const articleCategory = (article.getAttribute('data-category') || '').toLowerCase();
        const matches = category === 'all' || articleCategory.includes(category.toLowerCase());
        
        console.log(`Article ${index}: Category "${articleCategory}" | Show: ${matches}`);
        
        if (matches) {
            article.style.display = 'block';
            visibleCount++;
        } else {
            article.style.display = 'none';
        }
    });
    
    console.log('Category filter complete. Visible:', visibleCount);
    return visibleCount;
};

// Clear search function
window.clearBlogSearch = function() {
    console.log('🧹 Clearing search...');
    const searchInput = document.getElementById('article-search');
    if (searchInput) {
        searchInput.value = '';
        console.log('Search input cleared');
    }
    window.blogSearch('');
};

function init() {
    console.log('=== 🚀 BLOG INIT STARTING ===');
    
    // Get elements
    const searchInput = document.getElementById('article-search');
    const searchButton = document.getElementById('search-button');
    const articles = document.querySelectorAll('.blog-article');
    const categoryButtons = document.querySelectorAll('.category-filter-btn');
    
    console.log('Elements found:', {
        searchInput: !!searchInput,
        searchInputExists: searchInput ? 'YES' : 'NO',
        searchButton: !!searchButton,
        searchButtonExists: searchButton ? 'YES' : 'NO',
        articles: articles.length,
        categoryButtons: categoryButtons.length
    });
    
    // CRITICAL: Set up search input with detailed logging
    if (searchInput) {
        console.log('✅ Setting up search input...');
        
        // Real-time search as user types
        searchInput.addEventListener('input', function(e) {
            console.log('📝 INPUT EVENT:', e.target.value);
            window.blogSearch(e.target.value);
        });
        
        // Enter key search  
        searchInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                console.log('⌨️ ENTER KEY PRESSED:', e.target.value);
                window.blogSearch(e.target.value);
            }
        });
        
        console.log('✅ Search input listeners added successfully!');
    } else {
        console.error('❌ CRITICAL ERROR: Search input element not found! ID: article-search');
    }
    
    // Set up search button
    if (searchButton) {
        console.log('✅ Setting up search button...');
        searchButton.addEventListener('click', function(e) {
            e.preventDefault();
            console.log('🔘 SEARCH BUTTON CLICKED');
            if (searchInput) {
                const currentValue = searchInput.value;
                if (currentValue.trim()) {
                    console.log('Button search for:', currentValue);
                    window.blogSearch(currentValue);
                } else {
                    console.log('Button clear search');
                    window.clearBlogSearch();
                }
            }
        });
        console.log('✅ Search button listener added successfully!');
    } else {
        console.error('❌ CRITICAL ERROR: Search button not found! ID: search-button');
    }
    
    // Set up category buttons
    console.log('Setting up', categoryButtons.length, 'category buttons...');
    categoryButtons.forEach(function(button, index) {
        const category = button.getAttribute('data-category');
        console.log(`Category button ${index}: "${category}"`);
        
        button.addEventListener('click', function(e) {
            e.preventDefault();
            console.log('📂 Category clicked:', category);
            
            // Update button styles
            categoryButtons.forEach(function(btn) {
                btn.classList.remove('active', 'bg-green-500', 'text-white');
                btn.classList.add('bg-white/80', 'text-gray-700');
            });
            
            this.classList.add('active', 'bg-green-500', 'text-white');
            this.classList.remove('bg-white/80', 'text-gray-700');
            
            // Filter by category
            window.categoryFilter(category);
        });
    });
    
    // Set up article click handlers
    console.log('Setting up', articles.length, 'article click handlers...');
    articles.forEach(function(article, index) {
        const title = article.getAttribute('data-title');
        console.log(`Article ${index}: "${title}"`);
        
        article.style.cursor = 'pointer';
        
        article.addEventListener('click', function(e) {
            // Don't open modal if clicking buttons
            if (e.target.tagName === 'BUTTON' || e.target.closest('button')) {
                return;
            }
            
            const title = this.getAttribute('data-title') || 'Article';
            const author = this.getAttribute('data-author') || 'Author';
            const category = this.getAttribute('data-category') || 'General';
            const description = this.querySelector('p') ? this.querySelector('p').textContent : 'Article content';
            
            console.log('Opening modal for:', title);
            window.openArticleModal(title, author, category, description);
        });
    });
    
    // Article modal function
    window.openArticleModal = function(title, author, category, description) {
        console.log('📖 Opening modal for:', title);
        const modal = document.createElement('div');
        modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4';
        modal.innerHTML = 
            '<div class="bg-white rounded-2xl p-8 max-w-4xl w-full max-h-96 overflow-y-auto shadow-2xl">' +
                '<div class="flex justify-between items-start mb-6">' +
                    '<div>' +
                        '<h2 class="text-3xl font-bold text-gray-800 mb-2">' + title + '</h2>' +
                        '<p class="text-green-600 font-medium mb-1">By ' + author + '</p>' +
                        '<p class="text-gray-600 text-sm">Category: ' + category + '</p>' +
                    '</div>' +
                    '<button class="text-gray-500 hover:text-gray-700 text-2xl" onclick="this.closest(\'.fixed\').remove()">' +
                        '<i class="fas fa-times"></i>' +
                    '</button>' +
                '</div>' +
                '<div class="prose prose-green max-w-none">' +
                    '<p class="text-lg text-gray-700 mb-6 leading-relaxed">' + description + '</p>' +
                    '<div class="text-gray-700 leading-relaxed">' +
                        '<h3 class="text-xl font-bold mb-4">Full Article Content</h3>' +
                        '<p class="mb-4">This comprehensive guide provides detailed information about ' + title.toLowerCase() + '. Perfect for guitar learners over 50 who want practical, easy-to-follow advice.</p>' +
                        '<h4 class="font-bold mb-2">What You\\'ll Learn:</h4>' +
                        '<ul class="list-disc ml-6 mb-4">' +
                            '<li>Step-by-step instructions tailored for mature learners</li>' +
                            '<li>Common challenges and how to overcome them</li>' +
                            '<li>Practice tips that fit into busy schedules</li>' +
                            '<li>Progress tracking and motivation techniques</li>' +
                        '</ul>' +
                        '<p class="mb-4">Remember, learning guitar at any age is a rewarding journey. Take your time, be patient with yourself, and celebrate every small victory along the way.</p>' +
                    '</div>' +
                '</div>' +
                '<div class="mt-8 pt-6 border-t border-gray-200 text-center">' +
                    '<button class="bg-green-500 hover:bg-green-600 text-white px-8 py-3 rounded-full font-medium transition-all mr-4" onclick="this.closest(\'.fixed\').remove()">' +
                        'Close Article' +
                    '</button>' +
                    '<button class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-8 py-3 rounded-full font-medium transition-all" onclick="alert(\\'Article bookmarked!\\')">' +
                        '<i class="fas fa-bookmark mr-2"></i>Save for Later' +
                    '</button>' +
                '</div>' +
            '</div>';
        
        modal.addEventListener('click', function(e) {
            if (e.target === modal) {
                modal.remove();
            }
        });
        
        document.body.appendChild(modal);
    };
    
    // Clear search button
    const clearBtn = document.getElementById('clear-search-btn');
    if (clearBtn) {
        console.log('✅ Setting up clear search button...');
        clearBtn.addEventListener('click', function() {
            window.clearBlogSearch();
            
            // Reset category to "all"
            categoryButtons.forEach(function(btn) {
                btn.classList.remove('active', 'bg-green-500', 'text-white');
                btn.classList.add('bg-white/80', 'text-gray-700');
            });
            
            const allButton = document.getElementById('category-all');
            if (allButton) {
                allButton.classList.add('active', 'bg-green-500', 'text-white');
                allButton.classList.remove('bg-white/80', 'text-gray-700');
            }
            
            window.categoryFilter('all');
        });
    }
    
    // Show all articles initially
    console.log('📄 Showing all articles initially...');
    window.blogSearch('');
    
    console.log('=== ✅ BLOG INIT COMPLETE ===');
    console.log('🎸 Search system is ready! Try typing in the search box.');
    
    // Add global test function for debugging
    window.testBlogSearch = function(term) {
        console.log('=== 🧪 TEST SEARCH ===');
        const searchInput = document.getElementById('article-search');
        if (searchInput) {
            searchInput.value = term;
            console.log('Set search input to:', term);
        }
        return window.blogSearch(term);
    };
    
    // Test if search is working immediately
    setTimeout(function() {
        console.log('🧪 Running immediate test...');
        const testResult = window.testBlogSearch('beginner');
        console.log('Test result:', testResult, 'articles found');
        // Clear the test
        setTimeout(function() {
            console.log('🧹 Clearing test search...');
            window.testBlogSearch('');
        }, 2000);
    }, 1000);
}

function teardown() {
    console.log('🧹 Blog teardown called');
}

module.exports = { init, teardown };
console.log('🎸 Blog JavaScript loaded and ready!');