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');
    const lockBtn = document.getElementById('lock-btn');
    const resetBtn = document.getElementById('reset-btn');
    
    let yesScale = 1;
    let isLocked = typeof IS_LOCKED !== 'undefined' ? IS_LOCKED : false;

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

    imageInput.addEventListener('change', function() {
        const file = this.files[0];
        if (file) {
            const formData = new FormData();
            formData.append('action', 'upload_image');
            formData.append('image', file);

            fetch('api/save_settings.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    imagePreview.src = data.path + '?t=' + new Date().getTime();
                    imagePreview.style.display = 'block';
                    placeholderText.style.display = 'none';
                    document.querySelector('.image-preview-container').classList.add('has-image');
                } else {
                    alert(data.error || 'Failed to upload image');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred during upload.');
            });
        }
    });

    // Lock/Unlock Toggle
    lockBtn.addEventListener('click', () => {
        const newLockedState = !isLocked;
        const formData = new FormData();
        formData.append('action', 'toggle_lock');
        formData.append('lock', newLockedState);

        fetch('api/save_settings.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                isLocked = data.locked;
                document.body.classList.toggle('state-locked', isLocked);
                // Update icon (re-fetch or just refresh page is easier, but let's just refresh)
                location.reload();
            }
        });
    });

    // Reset Experience
    resetBtn.addEventListener('click', () => {
        if (confirm('Reset everything? This will clear the image and unlock changes.')) {
            const formData = new FormData();
            formData.append('action', 'reset');

            fetch('api/save_settings.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                }
            });
        }
    });

    // "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
    noBtn.addEventListener('click', (e) => {
        e.preventDefault();
        yesScale += 0.15;
        yesBtn.style.transform = `scale(${yesScale})`;
        // We don't change font-size via style attribute directly to avoid layout jumps if possible, 
        // but it's what was requested ("yes button gets slightly bigger")
    });

    // "Yes" Click Logic
    yesBtn.addEventListener('click', () => {
        proposalBox.style.display = 'none';
        successBox.style.display = 'block';
        
        // Hide controls during celebration
        document.querySelector('.admin-controls').style.display = 'none';

        // 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);
    });
});