document.addEventListener("DOMContentLoaded", () => {
    const form = document.getElementById('chat-form');
    const promptInput = document.getElementById('prompt');
    const chatLog = document.getElementById('chat-log');
    const sendBtn = document.getElementById('send-btn');
    const spinner = document.getElementById('spinner');
    const thinkingText = document.getElementById('thinking-text');

    function appendMessage(role, text) {
        const bubble = document.createElement('div');
        bubble.className = `bubble ${role}`;
        bubble.textContent = text;
        chatLog.appendChild(bubble);
        chatLog.scrollTop = chatLog.scrollHeight;
    }

    form.addEventListener('submit', async function (e) {
        e.preventDefault();

        const prompt = promptInput.value.trim();
        if (!prompt) return;

        appendMessage("user", prompt);
        promptInput.value = "";
        sendBtn.disabled = true;
        spinner.style.display = 'block';
        thinkingText.style.display = 'block';

        try {
            const response = await fetch("/chat", {
                method: "POST",
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: new URLSearchParams({ prompt })
            });

            const data = await response.json();
            appendMessage("bot", data.text);
        } catch (error) {
            appendMessage("bot", "❌ Error procesando la respuesta.");
            console.error(error);
        } finally {
            sendBtn.disabled = false;
            spinner.style.display = 'none';
            thinkingText.style.display = 'none';
        }
    });
});