let heartInterval;

function createFloatingHearts() {
    const hearts = ['💖', '💕', '💗', '💝', '🌸', '✨', '🦋', '🌺'];
    const heartsContainer = document.getElementById('hearts');
    
    heartInterval = setInterval(() => {
        const heart = document.createElement('div');
        heart.className = 'heart';
        heart.textContent = hearts[Math.floor(Math.random() * hearts.length)];
        heart.style.left = Math.random() * 100 + 'vw';
        heart.style.animationDuration = (Math.random() * 3 + 3) + 's';
        heart.style.fontSize = (Math.random() * 10 + 15) + 'px';
        
        heartsContainer.appendChild(heart);
        
        setTimeout(() => {
            heart.remove();
        }, 6000);
    }, 800);
}

function createSparkle(x, y) {
    const sparkle = document.createElement('div');
    sparkle.className = 'sparkle';
    sparkle.textContent = '✨';
    sparkle.style.left = x + 'px';
    sparkle.style.top = y + 'px';
    document.body.appendChild(sparkle);
    
    setTimeout(() => {
        sparkle.remove();
    }, 2000);
}

function startJourney() {
    const name = document.getElementById('nameInput').value.trim();
    if (!name) {
        alert('¡Por favor escribe tu nombre! 🥺');
        return;
    }
    
    // Verificar que los elementos existen antes de usarlos
    const userNameElement = document.getElementById('userName');
    const personalizedMessageElement = document.getElementById('personalizedMessage');
    
    if (userNameElement) {
        userNameElement.textContent = name;
    }
    if (personalizedMessageElement) {
        personalizedMessageElement.textContent = name;
    }
    // Cambiar las pantallas
    const step1 = document.getElementById('step1');
    const step2 = document.getElementById('step2');
    
    if (step1 && step2) {
        step1.classList.add('hidden');
        step2.classList.remove('hidden');
    }
    
    // Crear efecto de sparkles
    for (let i = 0; i < 5; i++) {
        setTimeout(() => {
            createSparkle(
                Math.random() * window.innerWidth,
                Math.random() * window.innerHeight
            );
        }, i * 200);
    }
}

function revealFeelings() {
    document.getElementById('step2').classList.add('hidden');
    document.getElementById('step3').classList.remove('hidden');
    
    // Animar el medidor de amor
    setTimeout(() => {
        document.getElementById('loveMeter').style.width = '95%';
    }, 500);
    
    // Más sparkles
    for (let i = 0; i < 8; i++) {
        setTimeout(() => {
            createSparkle(
                Math.random() * window.innerWidth,
                Math.random() * window.innerHeight
            );
        }, i * 150);
    }
}

function showFinalMessage() {
    document.getElementById('step3').classList.add('hidden');
    document.getElementById('step4').classList.remove('hidden');
}

function showHappyEnding() {
    document.getElementById('step4').classList.add('hidden');
    document.getElementById('happyEnding').classList.remove('hidden');
    createHeartExplosion();
}

function showFriendshipEnding() {
    document.getElementById('step4').classList.add('hidden');
    document.getElementById('friendshipEnding').classList.remove('hidden');
}

function createHeartExplosion() {
    const hearts = ['💖', '💕', '💗', '💝', '🌸', '✨', '🦋', '🌺', '🌈', '⭐'];
    
    for (let i = 0; i < 20; i++) {
        setTimeout(() => {
            createSparkle(
                Math.random() * window.innerWidth,
                Math.random() * window.innerHeight
            );
        }, i * 100);
    }
    
    // Crear corazones extra temporalmente
    const originalInterval = heartInterval;
    clearInterval(heartInterval);
    
    const explosionInterval = setInterval(() => {
        for (let i = 0; i < 3; i++) {
            const heart = document.createElement('div');
            heart.className = 'heart';
            heart.textContent = hearts[Math.floor(Math.random() * hearts.length)];
            heart.style.left = Math.random() * 100 + 'vw';
            heart.style.animationDuration = (Math.random() * 2 + 2) + 's';
            heart.style.fontSize = (Math.random() * 15 + 20) + 'px';
            
            document.getElementById('hearts').appendChild(heart);
            
            setTimeout(() => {
                heart.remove();
            }, 4000);
        }
    }, 200);
    
    setTimeout(() => {
        clearInterval(explosionInterval);
        createFloatingHearts(); // Volver a la normalidad
    }, 3000);
}

// Inicializar cuando se carga la página
document.addEventListener('DOMContentLoaded', function() {
    console.log('Página cargada correctamente');
    
    // Event listeners para todos los botones
    const startButton = document.getElementById('startButton');
    const revealButton = document.getElementById('revealButton');
    const finalButton = document.getElementById('finalButton');
    const happyButton = document.getElementById('happyButton');
    const friendButton = document.getElementById('friendButton');
    const heartExplosion1 = document.getElementById('heartExplosion1');
    const heartExplosion2 = document.getElementById('heartExplosion2');
    const nameInput = document.getElementById('nameInput');
    
    if (startButton) {
        startButton.addEventListener('click', startJourney);
    }
    
    if (revealButton) {
        revealButton.addEventListener('click', revealFeelings);
    }
    
    if (finalButton) {
        finalButton.addEventListener('click', showFinalMessage);
    }
    
    if (happyButton) {
        happyButton.addEventListener('click', showHappyEnding);
    }
    
    if (friendButton) {
        friendButton.addEventListener('click', showFriendshipEnding);
    }
    
    if (heartExplosion1) {
        heartExplosion1.addEventListener('click', createHeartExplosion);
    }
    
    if (heartExplosion2) {
        heartExplosion2.addEventListener('click', createHeartExplosion);
    }
    
    if (nameInput) {
        console.log('Input del nombre encontrado');
        
        // Enter para continuar en el input
        nameInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                startJourney();
            }
        });
    } else {
        console.error('No se encontró el input del nombre');
    }
    
    createFloatingHearts();
    
    // Agregar evento de click para sparkles
    document.addEventListener('click', function(e) {
        createSparkle(e.clientX - 15, e.clientY - 15);
    });
});