// Bonkers mode functionality
function initBonkersMode() {
    // Check if we're in bonkers mode
    const currentMode = document.documentElement.getAttribute('data-website-mode');

    if (currentMode === 'bonkers') {
        // Apply bonkers mode immediately
        document.body.classList.add('bonkers-mode');

        // Start the fabulous effects
        createExtraSparkles();
        createSlayEffects();

        console.log('🌈✨ Bonkers mode activated! ✨🌈');
    } else {
        // Remove bonkers mode if it was active
        document.body.classList.remove('bonkers-mode');
    }
}

// Function to create extra sparkles during bonkers mode
function createExtraSparkles() {
    const currentMode = document.documentElement.getAttribute('data-website-mode');
    if (currentMode !== 'bonkers') return;

    const extraEmojis = [
        '💃', '🕺',
        '🍑', '💦', '😏', '😈', '👅', '💋', '🥵', '😳', '🤤', '😍', '🥴',
        '💕', '💖', '💗', '💘', '💝', '💞', '💟', '💌', '💏', '💑',
        '🍆', '🥒', '🍌', '💦', '👀', '😉', '😌', '😍', '🥰', '😘',
        '😚', '😋', '😏', '😫', '😩', '🥺', '🥵', '🥴',
        '💖', '💗', '💕', '💞', '💓', '💗', '💖', '💘', '💝',
        '💋', '💏', '💑'
    ];
    const sparkle = document.createElement('div');
    sparkle.className = 'emoji-footprint';
    sparkle.textContent = extraEmojis[Math.floor(Math.random() * extraEmojis.length)];
    sparkle.style.left = Math.random() * window.innerWidth + 'px';
    sparkle.style.top = Math.random() * window.innerHeight + 'px';
    document.body.appendChild(sparkle);

    setTimeout(() => {
        if (sparkle.parentNode) {
            sparkle.remove();
        }
    }, 3000);

    // Continue creating extra sparkles while in bonkers mode
    const newMode = document.documentElement.getAttribute('data-website-mode');
    if (newMode === 'bonkers') {
        setTimeout(() => createExtraSparkles(), 150);
    }
}

// Function to create slay effects
function createSlayEffects() {
    const currentMode = document.documentElement.getAttribute('data-website-mode');
    if (currentMode !== 'bonkers') return;

    // Create floating "SLAY" text effects
    const slayWords = [
        'SLAY', 'QUEEN', 'FABULOUS', 'ICONIC', 'LEGENDARY', 'STUNNING', 'GORGEOUS', 'FLAWLESS',
        'DAZZLING', 'RADIANT', 'BREATHTAKING', 'EXQUISITE', 'DIVINE'
    ];
    const slayElement = document.createElement('div');
    slayElement.className = 'slay-text';
    slayElement.textContent = slayWords[Math.floor(Math.random() * slayWords.length)];
    slayElement.style.left = Math.random() * window.innerWidth + 'px';
    slayElement.style.top = Math.random() * window.innerHeight + 'px';
    document.body.appendChild(slayElement);

    setTimeout(() => {
        if (slayElement.parentNode) {
            slayElement.remove();
        }
    }, 3000);

    // Continue creating slay effects while in bonkers mode
    const newMode = document.documentElement.getAttribute('data-website-mode');
    if (newMode === 'bonkers') {
        setTimeout(() => createSlayEffects(), 800);
    }
}

// Watch for mode changes
function watchModeChanges() {
    // Create a MutationObserver to watch for changes to the data-website-mode attribute
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'data-website-mode') {
                const newMode = document.documentElement.getAttribute('data-website-mode');

                if (newMode === 'bonkers') {
                    document.body.classList.add('bonkers-mode');

                    // Start the fabulous effects
                    createExtraSparkles();
                    createSlayEffects();

                    console.log('🌈✨ Switched to bonkers mode! ✨🌈');
                } else {
                    document.body.classList.remove('bonkers-mode');
                    console.log(`😴 Switched to ${newMode} mode`);
                }
            }
        });
    });

    // Start observing
    observer.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ['data-website-mode']
    });
}

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
    initBonkersMode();
    watchModeChanges();
});

export { initBonkersMode, watchModeChanges };