// search-placeholder-updater.js
(function() {
    // Function to update search placeholder based on active category
    function updateSearchPlaceholder() {
        const searchInput = document.getElementById('searchInput');
        const activeNav = document.querySelector('.nav-item.active');
        
        if (!searchInput || !activeNav) return;
        
        const category = activeNav.dataset.category;
        let itemCount = 0;
        
        // Count visible items in the active category
        const cards = document.querySelectorAll('.card');
        cards.forEach(card => {
            const isVisible = card.style.display !== 'none';
            const hasCategory = card.classList.contains(category) || category === 'all';
            
            if (isVisible && hasCategory) {
                itemCount++;
            }
        });
        
        // Update placeholder text
        searchInput.placeholder = `SEARCH ${itemCount} ITEMS...`;
    }
    
    // Function to initialize the placeholder updater
    function initPlaceholderUpdater() {
        // Update on page load
        setTimeout(updateSearchPlaceholder, 100);
        
        // Update when nav items are clicked
        const navItems = document.querySelectorAll('.nav-item');
        navItems.forEach(item => {
            // Remove any existing listeners to avoid duplicates
            item.replaceWith(item.cloneNode(true));
        });
        
        // Re-get the nav items and add listeners
        const newNavItems = document.querySelectorAll('.nav-item');
        newNavItems.forEach(item => {
            item.addEventListener('click', function() {
                setTimeout(updateSearchPlaceholder, 200);
            });
        });
        
        // Update when search is performed
        const searchInput = document.getElementById('searchInput');
        if (searchInput) {
            searchInput.addEventListener('input', function() {
                setTimeout(updateSearchPlaceholder, 100);
            });
        }
    }
    
    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initPlaceholderUpdater);
    } else {
        initPlaceholderUpdater();
    }
    
    // Also update when URL hash changes (for stats page)
    window.addEventListener('hashchange', function() {
        setTimeout(updateSearchPlaceholder, 100);
    });
})();