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 = '';

        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;

        if (message.toLowerCase().includes('story')) {
            fetchComicStrip();
        }
    });

    comicButton.addEventListener('click', fetchComicStrip);

    async function fetchComicStrip() {
        const response = await fetch('/comic');
        const data = await response.json();
        comicStrip.innerHTML = data.comic_images.map(url => 
            `<img src="${url}" alt="Krishna Comic Panel" style="max-width: 200px; margin: 10px;">`
        ).join('');
    }
});