document.addEventListener('DOMContentLoaded', () => {
    const noBtn = document.getElementById('no-btn');
    const yesBtn = document.getElementById('yes-btn');
    const proposalBox = document.getElementById('proposal-box');
    const successBox = document.getElementById('success-message');
    const lockBtn = document.getElementById('lock-btn');
    const resetBtn = document.getElementById('reset-btn');
    const settingsToggle = document.getElementById('settings-toggle');
    const settingsPanel = document.getElementById('settings-panel');
    const bgColorPicker = document.getElementById('bg-color-picker');
    const popupColorPicker = document.getElementById('popup-color-picker');
    const bgImageInput = document.getElementById('bg-image-input');
    const removeBgBtn = document.getElementById('remove-bg-btn');
    
    let yesScale = 1;
    let isLocked = typeof IS_LOCKED !== 'undefined' ? IS_LOCKED : false;

    // Settings Toggle
    if (settingsToggle) {
        settingsToggle.addEventListener('click', () => {
            settingsPanel.style.display = settingsPanel.style.display === 'none' ? 'flex' : 'none';
        });
    }

    // Color Pickers
    if (bgColorPicker) {
        bgColorPicker.addEventListener('input', (e) => {
            document.documentElement.style.setProperty('--bg-color', e.target.value);
        });
        bgColorPicker.addEventListener('change', (e) => {
            const formData = new FormData();
            formData.append('action', 'update_bg_color');
            formData.append('color', e.target.value);
            fetch('api/save_settings.php', { method: 'POST', body: formData });
        });
    }

    if (popupColorPicker) {
        popupColorPicker.addEventListener('input', (e) => {
            document.documentElement.style.setProperty('--popup-bg', e.target.value);
        });
        popupColorPicker.addEventListener('change', (e) => {
            const formData = new FormData();
            formData.append('action', 'update_popup_color');
            formData.append('color', e.target.value);
            fetch('api/save_settings.php', { method: 'POST', body: formData });
        });
    }

    // Background Image Upload
    if (bgImageInput) {
        bgImageInput.addEventListener('change', function() {
            const file = this.files[0];
            if (file) {
                const formData = new FormData();
                formData.append('action', 'upload_bg_image');
                formData.append('image', file);

                fetch('api/save_settings.php', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        document.documentElement.style.setProperty('--bg-image', `url('${data.path}?t=${new Date().getTime()}')`);
                        location.reload(); // Reload to update the "Remove" button visibility
                    } else {
                        alert(data.error || 'Failed to upload background image');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('An error occurred during upload.');
                });
            }
        });
    }

    if (removeBgBtn) {
        removeBgBtn.addEventListener('click', () => {
            const formData = new FormData();
            formData.append('action', 'remove_bg_image');
            fetch('api/save_settings.php', { method: 'POST', body: formData })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    document.documentElement.style.setProperty('--bg-image', 'none');
                    location.reload();
                }
            });
        });
    }

    // 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) {
                location.reload();
            }
        });
    });

    // Reset Experience
    resetBtn.addEventListener('click', () => {
        if (confirm('Reset everything to defaults?')) {
            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 (!noBtn || (successBox && 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 (noBtn) {
        noBtn.addEventListener('click', (e) => {
            e.preventDefault();
            yesScale += 0.15;
            yesBtn.style.transform = `scale(${yesScale})`;
        });
    }

    // "Yes" Click Logic
    if (yesBtn) {
        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);
        });
    }
});