document.addEventListener('DOMContentLoaded', () => {
    const yesBtn = document.getElementById('yes-btn');
    const noBtn = document.getElementById('no-btn');
    const proposalBox = document.getElementById('proposal-box');
    const successMessage = document.getElementById('success-message');
    const resetBtn = document.getElementById('reset-btn');
    const lockBtn = document.getElementById('lock-btn');
    const settingsToggle = document.getElementById('settings-toggle');
    const settingsPanel = document.getElementById('settings-panel');
    const previewImg = document.getElementById('preview-img');
    const previewSuccessToggle = document.getElementById('preview-success-toggle');

    // Setting inputs
    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');
    const fontFamilySelect = document.getElementById('font-family-select');
    const secondPageTextColorPicker = document.getElementById('second-page-text-color-picker');
    const secondPageBoxPosYInput = document.getElementById('second-page-box-pos-y-input');
    const imageBorderRadiusInput = document.getElementById('image-border-radius-input');
    
    // New setting inputs
    const proposalTextColorPicker = document.getElementById('proposal-text-color-picker');
    const proposalTextSizeInput = document.getElementById('proposal-text-size-input');
    const successText1SizeInput = document.getElementById('success-text-1-size-input');
    const successText2SizeInput = document.getElementById('success-text-2-size-input');
    const proposalTextInput = document.getElementById('proposal-text-input');
    const successText1Input = document.getElementById('success-text-1-input');
    const successText2Input = document.getElementById('success-text-2-input');
    
    // Display elements
    const proposalTextDisplay = document.getElementById('proposal-text-display');
    const successText1Display = document.getElementById('success-text-1-display');
    const successText2Display = document.getElementById('success-text-2-display');

    let noCount = 0;
    const phrases = [
        "No", "Are you sure?", "Really sure?", "Think again!", "Last chance!",
        "Surely not?", "You might regret this!", "Give it another thought!",
        "Are you absolutely sure?", "This could be a mistake!", "Have a heart!",
        "Don't be so cold!", "Change of heart?", "Wouldn't you reconsider?",
        "Is that your final answer?", "You're breaking my heart ;("
    ];

    // No button movement and text change
    noBtn.addEventListener('click', () => {
        noCount++;
        noBtn.innerText = phrases[Math.min(noCount, phrases.length - 1)];
        
        const currentSize = parseFloat(window.getComputedStyle(yesBtn).fontSize);
        yesBtn.style.fontSize = `${currentSize * 1.2}px`;
        yesBtn.style.padding = `${parseFloat(window.getComputedStyle(yesBtn).paddingTop) * 1.2}px ${parseFloat(window.getComputedStyle(yesBtn).paddingLeft) * 1.2}px`;
        
        // Randomly move No button
        const container = document.getElementById('main-container');
        const containerRect = container.getBoundingClientRect();
        const btnRect = noBtn.getBoundingClientRect();
        
        const maxX = containerRect.width - btnRect.width;
        const maxY = containerRect.height - btnRect.height;
        
        const randomX = Math.floor(Math.random() * maxX);
        const randomY = Math.floor(Math.random() * maxY);
        
        noBtn.style.position = 'absolute';
        noBtn.style.left = `${randomX}px`;
        noBtn.style.top = `${randomY}px`;
    });

    // Yes button action
    yesBtn.addEventListener('click', () => {
        if (previewSuccessToggle.checked) return; // Ignore if in preview mode
        
        proposalBox.style.display = 'none';
        successMessage.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({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } });
            confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } });
        }, 250);

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

    // Preview Success Page logic
    previewSuccessToggle.addEventListener('change', (e) => {
        if (e.target.checked) {
            proposalBox.style.display = 'none';
            successMessage.style.display = 'block';
            successMessage.classList.add('preview-mode');
        } else {
            proposalBox.style.display = 'block';
            successMessage.style.display = 'none';
            successMessage.classList.remove('preview-mode');
        }
    });

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

    // Update background color
    bgColorPicker.addEventListener('input', (e) => {
        document.documentElement.style.setProperty('--bg-color', e.target.value);
    });

    bgColorPicker.addEventListener('change', (e) => {
        saveSetting('update_bg_color', { color: e.target.value });
    });

    // Update popup color
    popupColorPicker.addEventListener('input', (e) => {
        document.documentElement.style.setProperty('--popup-bg', e.target.value);
    });

    popupColorPicker.addEventListener('change', (e) => {
        saveSetting('update_popup_color', { color: e.target.value });
    });

    // Update second page text color
    secondPageTextColorPicker.addEventListener('input', (e) => {
        document.documentElement.style.setProperty('--second-page-text-color', e.target.value);
    });

    secondPageTextColorPicker.addEventListener('change', (e) => {
        saveSetting('update_second_page_text_color', { color: e.target.value });
    });
    
    // Update proposal text color
    proposalTextColorPicker.addEventListener('input', (e) => {
        document.documentElement.style.setProperty('--proposal-text-color', e.target.value);
    });

    proposalTextColorPicker.addEventListener('change', (e) => {
        saveSetting('update_proposal_text_color', { color: e.target.value });
    });

    // Update font family
    fontFamilySelect.addEventListener('change', (e) => {
        document.documentElement.style.setProperty('--font-family', e.target.value);
        saveSetting('update_font_family', { font: e.target.value });
    });

    // Update success box Y position
    secondPageBoxPosYInput.addEventListener('input', (e) => {
        document.documentElement.style.setProperty('--second-page-box-pos-y', `${e.target.value}px`);
    });

    secondPageBoxPosYInput.addEventListener('change', (e) => {
        saveSetting('update_second_page_box_pos_y', { pos: e.target.value });
    });

    // Update image border radius
    imageBorderRadiusInput.addEventListener('input', (e) => {
        document.documentElement.style.setProperty('--image-border-radius', `${e.target.value}px`);
    });

    imageBorderRadiusInput.addEventListener('change', (e) => {
        saveSetting('update_image_border_radius', { radius: e.target.value });
    });
    
    // Update proposal text size
    proposalTextSizeInput.addEventListener('input', (e) => {
        document.documentElement.style.setProperty('--proposal-text-size', `${e.target.value}rem`);
    });

    proposalTextSizeInput.addEventListener('change', (e) => {
        saveSetting('update_proposal_text_size', { size: e.target.value });
    });

    // Update success text 1 size
    successText1SizeInput.addEventListener('input', (e) => {
        document.documentElement.style.setProperty('--success-text-1-size', `${e.target.value}rem`);
    });

    successText1SizeInput.addEventListener('change', (e) => {
        saveSetting('update_success_text_1_size', { size: e.target.value });
    });

    // Update success text 2 size
    successText2SizeInput.addEventListener('input', (e) => {
        document.documentElement.style.setProperty('--success-text-2-size', `${e.target.value}rem`);
    });

    successText2SizeInput.addEventListener('change', (e) => {
        saveSetting('update_success_text_2_size', { size: e.target.value });
    });
    
    // Update proposal text content
    proposalTextInput.addEventListener('input', (e) => {
        proposalTextDisplay.innerText = e.target.value;
    });

    proposalTextInput.addEventListener('change', (e) => {
        saveSetting('update_proposal_text', { text: e.target.value });
    });

    // Update success text 1 content
    successText1Input.addEventListener('input', (e) => {
        successText1Display.innerText = e.target.value;
    });

    successText1Input.addEventListener('change', (e) => {
        saveSetting('update_success_text_1', { text: e.target.value });
    });

    // Update success text 2 content
    successText2Input.addEventListener('input', (e) => {
        successText2Display.innerText = e.target.value;
    });

    successText2Input.addEventListener('change', (e) => {
        saveSetting('update_success_text_2', { text: e.target.value });
    });

    // Upload background image
    bgImageInput.addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (!file) return;

        const formData = new FormData();
        formData.append('action', 'upload_bg_image');
        formData.append('image', file);

        fetch('api/save_settings.php', {
            method: 'POST',
            body: formData
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                document.documentElement.style.setProperty('--bg-image', `url('${data.path}?v=${Date.now()}')`);
                location.reload(); // Reload to show remove button and update PHP state
            }
        });
    });

    // Remove background image
    if (removeBgBtn) {
        removeBgBtn.addEventListener('click', () => {
            saveSetting('remove_bg_image', {}).then(() => {
                location.reload();
            });
        });
    }

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

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

    // Reset settings
    resetBtn.addEventListener('click', () => {
        if (confirm('Are you sure you want to reset all settings to defaults?')) {
            saveSetting('reset', {}).then(() => {
                location.reload();
            });
        }
    });

    async function saveSetting(action, data) {
        const formData = new FormData();
        formData.append('action', action);
        for (const key in data) {
            formData.append(key, data[key]);
        }

        try {
            const res = await fetch('api/save_settings.php', {
                method: 'POST',
                body: formData
            });
            return await res.json();
        } catch (err) {
            console.error('Failed to save setting:', err);
        }
    }
});