document.addEventListener('DOMContentLoaded', () => {
    const chatForm = document.getElementById('chat-form');
    const chatMessages = document.getElementById('chat-messages');
    const messageInput = document.getElementById('message-input');
    const comicButton = document.getElementById('comic-button');
    const comicStrip = document.getElementById('comic-strip');

    chatForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        const message = messageInput.value;
        chatMessages.innerHTML += `<p><strong>You:</strong> ${message}</p>`;
        messageInput.value = '';

        try {
            const response = await fetch('/chat', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: `message=${encodeURIComponent(message)}`
            });
            const data = await response.json();
            chatMessages.innerHTML += `<p><strong>Krishna:</strong> ${data.reply}</p>`;
            chatMessages.scrollTop = chatMessages.scrollHeight;

            // Auto-trigger comic strip if user asks for a story
            if (message.toLowerCase().includes('story')) {
                fetchComicStrip();
            }
        } catch (error) {
            console.error('Error sending message:', error);
            chatMessages.innerHTML += `<p><strong>Error:</strong> Couldn’t reach Krishna—try again!</p>`;
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }
    });

    comicButton.addEventListener('click', fetchComicStrip);

    async function fetchComicStrip() {
        try {
            const response = await fetch('/comic');
            const data = await response.json();
            comicStrip.innerHTML = data.comic_images.map(url => 
                `<img src="${url}" alt="Krishna Comic Panel">`
            ).join('');
        } catch (error) {
            console.error('Error fetching comic strip:', error);
            comicStrip.innerHTML = `<p>Error loading comic strip—try again!</p>`;
        }
    }
});