// assets/js/main.js

document.addEventListener('DOMContentLoaded', () => {
    const openBtn = document.getElementById('open-invitation-btn');
    const envelopeScreen = document.getElementById('envelope-screen');
    const mainContent = document.getElementById('main-content');
    const audio = document.getElementById('bg-audio');
    const audioController = document.getElementById('audio-controller');
    const toggleAudioBtn = document.getElementById('toggle-audio-btn');
    const iconPlay = document.getElementById('icon-play');
    const iconMusic = document.getElementById('icon-music');

    let isPlaying = false;

    // 1. Envelope Open & Autoplay Music
    if (openBtn) {
        openBtn.addEventListener('click', () => {
            // Hide envelope
            envelopeScreen.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
            envelopeScreen.style.opacity = '0';
            envelopeScreen.style.transform = 'translateY(-200px)';
            
            setTimeout(() => {
                envelopeScreen.style.display = 'none';
                
                // Show main content
                mainContent.classList.remove('hidden');
                mainContent.style.display = 'flex';
                // Trigger reflow
                void mainContent.offsetWidth;
                mainContent.style.opacity = '1';
                
                // Show Audio controller
                audioController.classList.remove('hidden');

                // Play Audio
                audio.play().then(() => {
                    isPlaying = true;
                    updateAudioUI();
                }).catch(err => {
                    console.warn('Autoplay blocked:', err);
                });
            }, 800);
        });
    }

    // 2. Audio Toggle
    if (toggleAudioBtn) {
        toggleAudioBtn.addEventListener('click', () => {
            if (isPlaying) {
                audio.pause();
                isPlaying = false;
            } else {
                audio.play();
                isPlaying = true;
            }
            updateAudioUI();
        });
    }

    function updateAudioUI() {
        if (isPlaying) {
            iconPlay.classList.add('hidden');
            iconMusic.classList.remove('hidden');
            toggleAudioBtn.classList.add('animate-spin-slow', 'text-amber-500');
        } else {
            iconPlay.classList.remove('hidden');
            iconMusic.classList.add('hidden');
            toggleAudioBtn.classList.remove('animate-spin-slow', 'text-amber-500');
        }
    }

    // 3. Countdown Timer
    const timerElement = document.getElementById('countdown-timer');
    if (timerElement) {
        const targetDateStr = timerElement.getAttribute('data-date');
        // Example format needed: "July 25, 2026 18:00:00"
        // In index.php we output it as "Шілде 25, 2026 18:00:00". We need to map month to English for JS Date parser.
        const monthMap = {
            'Қаңтар': 'January', 'Ақпан': 'February', 'Наурыз': 'March', 'Сәуір': 'April',
            'Мамыр': 'May', 'Маусым': 'June', 'Шілде': 'July', 'Тамыз': 'August',
            'Қыркүйек': 'September', 'Қазан': 'October', 'Қараша': 'November', 'Желтоқсан': 'December'
        };
        
        let parsedDateStr = targetDateStr;
        for (const [kz, en] of Object.entries(monthMap)) {
            if (parsedDateStr.includes(kz)) {
                parsedDateStr = parsedDateStr.replace(kz, en);
                break;
            }
        }

        const targetDate = new Date(parsedDateStr).getTime();

        function updateTimer() {
            const now = new Date().getTime();
            const distance = targetDate - now;

            if (distance < 0) {
                return; // timer ended
            }

            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);

            document.getElementById('days').innerText = days.toString().padStart(2, '0');
            document.getElementById('hours').innerText = hours.toString().padStart(2, '0');
            document.getElementById('minutes').innerText = minutes.toString().padStart(2, '0');
            document.getElementById('seconds').innerText = seconds.toString().padStart(2, '0');
        }

        setInterval(updateTimer, 1000);
        updateTimer();
    }

    // 4. RSVP Form Submission
    const rsvpFormWrapper = document.getElementById('rsvp-form-wrapper');
    const rsvpSuccess = document.getElementById('rsvp-success');
    const rsvpForm = document.getElementById('rsvp-form');

    function showSuccess(text) {
        if (rsvpFormWrapper) rsvpFormWrapper.style.display = 'none';
        if (rsvpSuccess) {
            rsvpSuccess.style.display = 'block';
            rsvpSuccess.innerHTML = text;
        }
    }

    // Если уже отвечал — сразу показываем сообщение
    if (localStorage.getItem('rsvp_submitted') === 'true') {
        showSuccess('Сіздің жауабыңыз қабылданған.<br>Рақмет!');
    }

    if (rsvpForm) {
        rsvpForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            const btn = document.getElementById('rsvp-submit-btn');
            btn.disabled = true;
            btn.innerText = 'Жіберілуде...';

            const formData = new FormData(rsvpForm);
            const data = Object.fromEntries(formData.entries());

            try {
                const response = await fetch('api/rsvp.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        name: data.name,
                        willAttend: data.willAttend,
                        guestsCount: parseInt(data.guestsCount || 0),
                        wishes: data.wishes
                    })
                });

                if (response.ok) {
                    localStorage.setItem('rsvp_submitted', 'true');
                    showSuccess('Жауабыңыз қабылданды.<br>Рақмет!');
                } else {
                    alert('Қате пайда болды. Қайта көріңіз.');
                    btn.disabled = false;
                    btn.innerText = 'Жіберу';
                }
            } catch (err) {
                alert('Қате пайда болды. Қайта көріңіз.');
                btn.disabled = false;
                btn.innerText = 'Жіберу';
            }
        });
    }
});