document.addEventListener('DOMContentLoaded', () => {
    const storyInput = document.getElementById('story-input');
    const animateBtn = document.getElementById('animate-btn');
    const loader = document.getElementById('loader');

    // Output elements
    const outputVideo = document.getElementById('output-video');
    const storyExplanationText = document.getElementById('story-explanation-text');
    const explainerAudio = document.getElementById('explainer-audio');
    const codeExplanationText = document.getElementById('code-explanation-text');
    const promptOutput = document.getElementById('prompt-output');

    animateBtn.addEventListener('click', async () => {
        const story = storyInput.value;
        if (!story.trim()) {
            alert('Please write a story first!');
            return;
        }

        // Show loader and disable button
        loader.style.display = 'block';
        animateBtn.disabled = true;
        animateBtn.textContent = 'Generating...';

        try {
            const response = await fetch('/animate', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ story: story }),
            });

            if (!response.ok) {
                throw new Error(`Server error: ${response.statusText}`);
            }

            const data = await response.json();

            // Update the page with the results from the backend
            outputVideo.src = data.video_url;
            outputVideo.load(); // Important to load the new source

            storyExplanationText.textContent = data.story_explanation;
            explainerAudio.src = data.audio_url;
            codeExplanationText.textContent = data.code_explanation;
            promptOutput.textContent = data.prompt;

        } catch (error) {
            console.error('Error:', error);
            alert('An error occurred while creating the animation. See the console for details.');
        } finally {
            // Hide loader and re-enable button
            loader.style.display = 'none';
            animateBtn.disabled = false;
            animateBtn.textContent = '✨ Create Animation';
        }
    });
});