document.addEventListener('DOMContentLoaded', () => {
    const ritualSteps = document.querySelectorAll('.ritual-step');
    const nextButtons = document.querySelectorAll('.next-step');
    const progressBar = document.querySelector('.progress-bar-fill');
    const timerElement = document.getElementById('timer');
    const beginButton = document.getElementById('begin-ritual');

    let currentStep = 0;
    let timerInterval;

    function showStep(stepIndex) {
        ritualSteps.forEach((step, index) => {
            step.classList.toggle('active', index === stepIndex);
        });
        const progress = ((stepIndex) / (ritualSteps.length - 2)) * 100;
        if(progressBar) {
            progressBar.style.width = `${progress}%`;
        }
    }

    function startTimer(duration) {
        let timer = duration, minutes, seconds;
        if(!timerElement) return;

        const updateTimer = () => {
            minutes = parseInt(timer / 60, 10);
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            timerElement.textContent = minutes + ":" + seconds;

            if (--timer < 0) {
                clearInterval(timerInterval);
                // Optionally, move to next step automatically
                 if(currentStep < ritualSteps.length - 1) {
                    currentStep++;
                    showStep(currentStep);
                } else {
                    // Handle completion
                }
            }
        };
        updateTimer();
        timerInterval = setInterval(updateTimer, 1000);
    }

    if(beginButton) {
        beginButton.addEventListener('click', () => {
            currentStep = 1; // Move to the first ritual step
            showStep(currentStep);
            startTimer(90); // 90 second timer
        });
    }


    nextButtons.forEach(button => {
        button.addEventListener('click', () => {
            if (currentStep < ritualSteps.length - 1) {
                currentStep++;
                showStep(currentStep);

                // If this is the last step, log progress
                if (currentStep === ritualSteps.length - 1) {
                    const theme = new URLSearchParams(window.location.search).get('theme') || 'gratitude';
                    fetch('log_progress.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({ theme: theme })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (!data.success) {
                            console.error('Failed to log progress.');
                        }
                    })
                    .catch(error => console.error('Error logging progress:', error));
                }
            }
        });
    });

    // Initial setup
    if(ritualSteps.length > 0) {
        showStep(0);
    }
});