// CRITICAL FIX FOR PROJECT FILTERING OVERLAP ISSUES
console.log('OVERLAP FIX LOADED - COMPLETE OVERRIDE MODE');

// CRITICAL: Wait for DOM and then initialize
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(initializeFixedFiltering, 100);
});

function initializeFixedFiltering() {
    console.log('Initializing Complete Override Filtering System');
    
    var portfolioContainer = document.querySelector('.portfolio-container');
    if (!portfolioContainer) {
        console.error('Portfolio container not found!');
        return;
    }
    
    // Get all filter buttons - using correct selector
    var filterButtons = document.querySelectorAll('#portfolio-flters li[data-filter]');
    var portfolioItems = document.querySelectorAll('.portfolio-item');
    
    console.log('Found ' + filterButtons.length + ' filter buttons');
    console.log('Found ' + portfolioItems.length + ' portfolio items');
    
    // CRITICAL: Completely disable any existing isotope behavior
    try {
        if (window.Isotope && portfolioContainer.isotope) {
            portfolioContainer.isotope.destroy();
            console.log('Destroyed existing isotope instance');
        }
    } catch (error) {
        console.log('No isotope to destroy');
    }
    
    // CRITICAL: Remove any existing event listeners and add our own
    filterButtons.forEach(function(button, index) {
        // Clone the button to remove all existing event listeners
        var newButton = button.cloneNode(true);
        button.parentNode.replaceChild(newButton, button);
        
        // Add our custom click handler
        newButton.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            
            var filterValue = this.getAttribute('data-filter');
            console.log('=== FILTER CLICKED:', filterValue, '===');
            
            // Remove active class from all buttons
            var allButtons = document.querySelectorAll('#portfolio-flters li[data-filter]');
            allButtons.forEach(function(btn) {
                btn.classList.remove('active');
            });
            
            // Add active class to clicked button
            this.classList.add('active');
            
            // Store filter value on container
            portfolioContainer.setAttribute('data-filter', filterValue);
            
            // CRITICAL: Force complete manual filtering with delay
            setTimeout(function() {
                forceCompleteFilter(filterValue, portfolioItems);
            }, 10);
            
            return false;
        });
    });
    
    // Initialize with "All" filter
    setTimeout(function() {
        var allButton = document.querySelector('#portfolio-flters li[data-filter="*"]');
        if (allButton) {
            allButton.classList.add('active');
            forceCompleteFilter('*', portfolioItems);
        }
    }, 200);
}

// CRITICAL: Complete manual filtering that works regardless of other scripts
function forceCompleteFilter(filterValue, portfolioItems) {
    console.log('=== FORCE COMPLETE FILTER:', filterValue, '===');
    console.log('Portfolio items found:', portfolioItems.length);
    
    var visibleCount = 0;
    var hiddenCount = 0;
    
    // First pass: Hide ALL items to reset state
    portfolioItems.forEach(function(item) {
        completelyHideItem(item);
    });
    
    console.log('All items hidden, now showing matching items...');
    
    // Second pass: Show only matching items
    portfolioItems.forEach(function(item, index) {
        var itemClasses = item.className;
        console.log('Item ' + index + ' classes:', itemClasses);
        
        if (filterValue === '*') {
            // Show all items
            console.log('Item ' + index + ': SHOWING (show all)');
            completelyShowItem(item);
            visibleCount++;
        } else {
            // Check if item has the required class
            var filterClass = filterValue.replace('.', '');
            console.log('Looking for class "' + filterClass + '" in item ' + index);
            
            if (item.classList.contains(filterClass)) {
                console.log('Item ' + index + ': SHOWING (matches filter)');
                completelyShowItem(item);
                visibleCount++;
            } else {
                console.log('Item ' + index + ': HIDING (does NOT match filter)');
                completelyHideItem(item);
                hiddenCount++;
            }
        }
    });
    
    console.log('=== FILTER COMPLETE ===');
    console.log('Visible items:', visibleCount);
    console.log('Hidden items:', hiddenCount);
    
    // Force container height adjustment
    setTimeout(function() {
        adjustContainerHeight(visibleCount);
    }, 50);
}

// CRITICAL: Completely hide item using every possible method
function completelyHideItem(item) {
    // CSS Display hiding
    item.style.setProperty('display', 'none', 'important');
    item.style.setProperty('visibility', 'hidden', 'important');
    item.style.setProperty('opacity', '0', 'important');
    
    // Position hiding
    item.style.setProperty('position', 'absolute', 'important');
    item.style.setProperty('left', '-9999px', 'important');
    item.style.setProperty('top', '-9999px', 'important');
    item.style.setProperty('z-index', '-999', 'important');
    
    // Size hiding
    item.style.setProperty('width', '0', 'important');
    item.style.setProperty('height', '0', 'important');
    item.style.setProperty('margin', '0', 'important');
    item.style.setProperty('padding', '0', 'important');
    
    // Interaction hiding
    item.style.setProperty('pointer-events', 'none', 'important');
    item.style.setProperty('overflow', 'hidden', 'important');
    
    // CSS classes
    item.classList.add('isotope-hidden', 'force-hidden', 'd-none');
    
    // Hide parent column
    var parentCol = item.closest('.col-lg-3, .col-md-6');
    if (parentCol) {
        parentCol.style.setProperty('display', 'none', 'important');
        parentCol.classList.add('d-none');
    }
}

// CRITICAL: Completely show item using every possible method
function completelyShowItem(item) {
    // CSS Display showing
    item.style.removeProperty('display');
    item.style.removeProperty('visibility');
    item.style.removeProperty('opacity');
    
    // Position showing
    item.style.removeProperty('position');
    item.style.removeProperty('left');
    item.style.removeProperty('top');
    item.style.removeProperty('z-index');
    
    // Size showing
    item.style.removeProperty('width');
    item.style.removeProperty('height');
    item.style.removeProperty('margin');
    item.style.removeProperty('padding');
    
    // Interaction showing
    item.style.removeProperty('pointer-events');
    item.style.removeProperty('overflow');
    
    // Set proper values
    item.style.setProperty('display', 'block', 'important');
    item.style.setProperty('visibility', 'visible', 'important');
    item.style.setProperty('opacity', '1', 'important');
    item.style.setProperty('position', 'relative', 'important');
    
    // CSS classes
    item.classList.remove('isotope-hidden', 'force-hidden', 'd-none');
    
    // Show parent column
    var parentCol = item.closest('.col-lg-3, .col-md-6');
    if (parentCol) {
        parentCol.style.removeProperty('display');
        parentCol.classList.remove('d-none');
        parentCol.style.setProperty('display', 'block', 'important');
    }
}

// Adjust container height after filtering
function adjustContainerHeight(visibleCount) {
    var container = document.querySelector('.portfolio-container');
    if (!container) return;
    
    var itemsPerRow = window.innerWidth > 991 ? 4 : (window.innerWidth > 767 ? 2 : 1);
    var estimatedRows = Math.ceil(visibleCount / itemsPerRow);
    var estimatedHeight = estimatedRows * 400; // Increased height estimate
    
    container.style.setProperty('min-height', Math.max(400, estimatedHeight) + 'px', 'important');
    container.style.setProperty('height', 'auto', 'important');
    
    console.log('Container height adjusted to', estimatedHeight + 'px', 'for', visibleCount, 'visible items');
}

// BACKUP: Initialize if DOMContentLoaded already fired
if (document.readyState === 'loading') {
    // Wait for DOMContentLoaded
} else {
    // DOM already loaded
    setTimeout(initializeFixedFiltering, 50);
}

// BACKUP: Also listen for window load
window.addEventListener('load', function() {
    setTimeout(initializeFixedFiltering, 50);
});

console.log('Overlap fix script loaded and ready');