document.addEventListener('DOMContentLoaded', () => {
    const noBtn = document.getElementById('no-btn');
    const yesBtn = document.getElementById('yes-btn');
    const imageInput = document.getElementById('image-input');
    const imagePreview = document.getElementById('preview-img');
    const placeholderText = document.querySelector('.placeholder-text');
    const proposalBox = document.getElementById('proposal-box');
    const successBox = document.getElementById('success-message');
    
    let yesScale = 1;

    // Image Upload Logic
    document.querySelector('.image-preview-container').addEventListener('click', () => {
        imageInput.click();
    });

    imageInput.addEventListener('change', function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                imagePreview.src = e.target.result;
                imagePreview.style.display = 'block';
                placeholderText.style.display = 'none';
            }
            reader.readAsDataURL(file);
        }
    });

    // "No" Button Dodging Logic
    const dodgeThreshold = 100; // pixels

    document.addEventListener('mousemove', (e) => {
        if (successBox.style.display === 'block') return;

        const rect = noBtn.getBoundingClientRect();
        const btnCenterX = rect.left + rect.width / 2;
        const btnCenterY = rect.top + rect.height / 2;

        const distance = Math.hypot(e.clientX - btnCenterX, e.clientY - btnCenterY);

        if (distance < dodgeThreshold) {
            const angle = Math.atan2(e.clientY - btnCenterY, e.clientX - btnCenterX);
            const moveDist = dodgeThreshold - distance + 20;

            let newX = rect.left - Math.cos(angle) * moveDist;
            let newY = rect.top - Math.sin(angle) * moveDist;

            // Keep within viewport bounds
            const padding = 20;
            newX = Math.max(padding, Math.min(window.innerWidth - rect.width - padding, newX));
            newY = Math.max(padding, Math.min(window.innerHeight - rect.height - padding, newY));

            noBtn.style.position = 'fixed';
            noBtn.style.left = `${newX}px`;
            noBtn.style.top = `${newY}px`;
            noBtn.style.margin = '0';
        }
    });

    // "No" Click Logic (if they somehow manage to click it)
    noBtn.addEventListener('click', (e) => {
        e.preventDefault();
        yesScale += 0.15;
        yesBtn.style.transform = `scale(${yesScale})`;
        yesBtn.style.fontSize = `${1 * yesScale}rem`;
    });

    // "Yes" Click Logic
    yesBtn.addEventListener('click', () => {
        proposalBox.style.display = 'none';
        successBox.style.display = 'block';
        
        // Confetti effect
        const duration = 15 * 1000;
        const animationEnd = Date.now() + duration;
        const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };

        function randomInRange(min, max) {
            return Math.random() * (max - min) + min;
        }

        const interval = setInterval(function() {
            const timeLeft = animationEnd - Date.now();

            if (timeLeft <= 0) {
                return clearInterval(interval);
            }

            const particleCount = 50 * (timeLeft / duration);
            confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
            confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
        }, 250);

        // Redirect after 15s
        setTimeout(() => {
            window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
        }, 15000);
    });
});