/*
 * CAROUSEL IMAGE DEBUG & FIX
 * This script will ensure carousel images are always visible
 */

document.addEventListener('DOMContentLoaded', function() {
    console.log('🔍 Debugging carousel images...');
    
    // Wait a bit for all stylesheets to load
    setTimeout(function() {
        fixCarouselImages();
        
        // Set up theme change listener
        document.addEventListener('themeChanged', fixCarouselImages);
        
        // Also fix on theme toggle
        const themeToggle = document.querySelector('.single-theme-toggle');
        if (themeToggle) {
            themeToggle.addEventListener('click', function() {
                setTimeout(fixCarouselImages, 100);
            });
        }
    }, 500);
});

function fixCarouselImages() {
    console.log('🖼️ Fixing carousel images...');
    
    // Find all carousel images
    const carouselImages = document.querySelectorAll([
        '.owl-carousel img',
        '.owl-carousel-item img', 
        '.header-carousel img',
        '.carousel img',
        '.carousel-item img',
        'img[src*="carousel"]'
    ].join(', '));
    
    console.log(`Found ${carouselImages.length} carousel images`);
    
    carouselImages.forEach((img, index) => {
        // Force visibility
        img.style.opacity = '1';
        img.style.visibility = 'visible';
        img.style.display = 'block';
        img.style.maxWidth = '100%';
        img.style.height = 'auto';
        
        // Check if image is actually loading
        if (img.complete && img.naturalHeight !== 0) {
            console.log(`✅ Image ${index + 1} (${img.src}) loaded successfully`);
        } else {
            console.warn(`⚠️ Image ${index + 1} (${img.src}) may have loading issues`);
            
            // Try to reload the image
            const originalSrc = img.src;
            img.src = '';
            img.src = originalSrc;
        }
        
        // Apply theme-appropriate styling
        const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
        if (currentTheme === 'dark') {
            img.style.filter = 'brightness(0.95)';
        } else {
            img.style.filter = 'none';
        }
    });
    
    // Force owl carousel refresh if it exists
    if (window.jQuery && window.jQuery('.owl-carousel').length > 0) {
        try {
            window.jQuery('.owl-carousel').trigger('refresh.owl.carousel');
            console.log('🦉 Owl carousel refreshed');
        } catch (e) {
            console.log('ℹ️ Owl carousel refresh not needed');
        }
    }
    
    // Check for any hidden carousel containers
    const carouselContainers = document.querySelectorAll([
        '.owl-carousel',
        '.header-carousel', 
        '.carousel'
    ].join(', '));
    
    carouselContainers.forEach(container => {
        if (container.style.display === 'none' || container.style.visibility === 'hidden') {
            console.warn('⚠️ Carousel container was hidden, making visible');
            container.style.display = 'block';
            container.style.visibility = 'visible';
            container.style.opacity = '1';
        }
    });
}

// Export for external use
window.carouselImageDebug = {
    fix: fixCarouselImages,
    debug: function() {
        console.log('🔍 Current carousel images:');
        const images = document.querySelectorAll('.owl-carousel img, .carousel img');
        images.forEach((img, i) => {
            console.log(`${i + 1}. ${img.src} - Visible: ${img.style.display !== 'none'}, Opacity: ${img.style.opacity || 1}`);
        });
    }
};

// Auto-fix images every 2 seconds for the first 10 seconds (in case of delayed loading)
let autoFixCount = 0;
const autoFixer = setInterval(() => {
    autoFixCount++;
    fixCarouselImages();
    
    if (autoFixCount >= 5) {
        clearInterval(autoFixer);
        console.log('✅ Auto-fix complete');
    }
}, 2000);