/*
 * FINAL SINGLE THEME TOGGLE - NO DUPLICATES ALLOWED
 * Only creates ONE button at bottom-right
 */

(function() {
    'use strict';
    
    // Prevent multiple initializations
    if (window.singleThemeToggleInitialized) {
        return;
    }
    window.singleThemeToggleInitialized = true;

    document.addEventListener('DOMContentLoaded', function() {
        initializeFinalThemeToggle();
    });

    function initializeFinalThemeToggle() {
        // FORCEFULLY remove ANY existing toggle buttons
        removeAllExistingToggles();
        
        // Wait a bit to ensure other scripts don't interfere
        setTimeout(() => {
            removeAllExistingToggles(); // Double check
            createSingleToggleButton();
            setInitialTheme();
        }, 100);
    }

    function removeAllExistingToggles() {
        // Remove any possible toggle button selectors
        const selectors = [
            '.theme-toggle',
            '.theme-toggle-button', 
            '.dark-mode-toggle',
            '.theme-toggle-btn',
            '.theme-toggle-container',
            '.single-theme-toggle',
            '[data-theme-toggle]',
            '.mode-toggle',
            '.night-mode-toggle'
        ];
        
        selectors.forEach(selector => {
            const elements = document.querySelectorAll(selector);
            elements.forEach(el => {
                el.remove();
                console.log('Removed duplicate toggle:', selector);
            });
        });
    }

    function createSingleToggleButton() {
        // Double check no button exists
        if (document.querySelector('.final-theme-toggle')) {
            return;
        }
        
        const toggleButton = document.createElement('button');
        toggleButton.className = 'final-theme-toggle';
        toggleButton.setAttribute('aria-label', 'Toggle dark/light mode');
        toggleButton.setAttribute('data-theme-toggle', 'true');
        
        // Position at bottom-right with higher z-index
        toggleButton.style.cssText = `
            position: fixed !important;
            bottom: 30px !important;
            right: 30px !important;
            z-index: 99999 !important;
            width: 60px !important;
            height: 60px !important;
            border-radius: 50% !important;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
            color: white !important;
            border: 3px solid rgba(255, 255, 255, 0.2) !important;
            cursor: pointer !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 24px !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
            transition: all 0.3s ease !important;
            transform: translateY(0) !important;
            visibility: visible !important;
            opacity: 1 !important;
        `;
        
        // Set initial icon
        updateToggleIcon(toggleButton);
        
        // Add click event
        toggleButton.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            toggleTheme();
        });
        
        // Add hover effects
        toggleButton.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px) scale(1.1) !important';
            this.style.boxShadow = '0 15px 40px rgba(0, 0, 0, 0.4) !important';
        });
        
        toggleButton.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0) scale(1) !important';
            this.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.3) !important';
        });
        
        document.body.appendChild(toggleButton);
        console.log('✅ Created final single theme toggle');
    }

    function setInitialTheme() {
        let theme = localStorage.getItem('theme');
        
        // If no saved theme, detect system preference
        if (!theme) {
            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                theme = 'dark';
            } else {
                theme = 'light';
            }
        }
        
        applyTheme(theme);
    }

    function getCurrentTheme() {
        return document.documentElement.getAttribute('data-theme') || 'light';
    }

    function toggleTheme() {
        const currentTheme = getCurrentTheme();
        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
        
        // Add smooth transition
        document.body.style.transition = 'background-color 0.4s ease, color 0.4s ease';
        
        applyTheme(newTheme);
        
        // Remove transition after animation
        setTimeout(() => {
            document.body.style.transition = '';
        }, 400);
        
        console.log(`🌓 Theme switched to: ${newTheme}`);
    }

    function applyTheme(theme) {
        // Apply to all necessary elements
        document.documentElement.setAttribute('data-theme', theme);
        document.body.setAttribute('data-theme', theme);
        
        // Also set class for compatibility
        document.body.className = document.body.className.replace(/theme-\w+/g, '');
        document.body.classList.add(`theme-${theme}`);
        
        // Save to localStorage
        localStorage.setItem('theme', theme);
        
        // Update toggle button icon
        const toggleButton = document.querySelector('.final-theme-toggle');
        if (toggleButton) {
            updateToggleIcon(toggleButton);
        }
        
        // Force carousel image visibility in dark mode
        fixCarouselImages(theme);
    }

    function updateToggleIcon(button) {
        const currentTheme = getCurrentTheme();
        
        if (currentTheme === 'dark') {
            button.innerHTML = '<i class="fas fa-sun"></i>';
            button.title = 'Switch to light mode';
            button.style.background = 'linear-gradient(135deg, #f59e0b 0%, #f97316 100%) !important';
        } else {
            button.innerHTML = '<i class="fas fa-moon"></i>';
            button.title = 'Switch to dark mode';
            button.style.background = 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important';
        }
    }

    function fixCarouselImages(theme) {
        // Fix carousel images visibility in dark mode
        const carouselImages = document.querySelectorAll('.carousel img, .owl-carousel img, .header-carousel img');
        
        carouselImages.forEach(img => {
            if (theme === 'dark') {
                img.style.filter = 'brightness(0.9) contrast(1.1) !important';
                img.style.opacity = '1 !important';
                img.style.visibility = 'visible !important';
            } else {
                img.style.filter = 'none !important';
                img.style.opacity = '1 !important';
                img.style.visibility = 'visible !important';
            }
        });
    }

    // Add keyboard support
    document.addEventListener('keydown', function(e) {
        if (e.altKey && e.key === 't') {
            e.preventDefault();
            toggleTheme();
        }
    });

    // Prevent other scripts from creating duplicate toggles
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                if (node.nodeType === 1) { // Element node
                    const duplicateToggles = node.querySelectorAll && node.querySelectorAll('.theme-toggle, .dark-mode-toggle, .theme-toggle-button');
                    if (duplicateToggles) {
                        duplicateToggles.forEach(toggle => {
                            if (!toggle.classList.contains('final-theme-toggle')) {
                                toggle.remove();
                                console.log('🚫 Prevented duplicate toggle creation');
                            }
                        });
                    }
                }
            });
        });
    });
    
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    // Export for external use
    window.finalThemeToggle = {
        toggle: toggleTheme,
        setTheme: applyTheme,
        getCurrentTheme: getCurrentTheme
    };
})();