document.addEventListener('DOMContentLoaded', () => {
    const input = document.getElementById('user-input');
    const sendBtn = document.getElementById('send-btn');
    const chatContainer = document.getElementById('chat-container');
    const loadingIndicator = document.getElementById('loading');

    function addMessage(text, sender) { // sender is 'user' or 'bot'
        const div = document.createElement('div');
        div.classList.add('message', sender + '-message');

        const img = document.createElement('img');
        img.src = `/static/${sender}_icon.png`;
        img.classList.add('avatar', sender + '-avatar');

        const contentDiv = document.createElement('div');
        contentDiv.classList.add('message-content');

        // Allow basic HTML formatting like line breaks if needed, or just text
        contentDiv.innerHTML = text.replace(/\n/g, '<br>');

        div.appendChild(img);
        div.appendChild(contentDiv);

        // Insert before the loading indicator so loading always stays at bottom
        chatContainer.insertBefore(div, loadingIndicator);

        chatContainer.scrollTop = chatContainer.scrollHeight;
    }

    async function sendMessage() {
        const query = input.value.trim();
        if (!query) return;

        addMessage(query, 'user');
        input.value = '';
        input.disabled = true;

        // Show loading
        loadingIndicator.style.display = 'block';
        chatContainer.scrollTop = chatContainer.scrollHeight;

        // Typing Animation
        let dots = '';
        const baseText = "Demogorgon is typing";
        const typingInterval = setInterval(() => {
            dots = dots.length < 3 ? dots + '.' : '';
            loadingIndicator.innerText = baseText + dots;
        }, 500);

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

            const data = await response.json();

            // Hide loading & Stop Animation
            clearInterval(typingInterval);
            loadingIndicator.style.display = 'none';

            addMessage(data.answer, 'bot');

            // Optional: Handle sources if you want to display them
        } catch (error) {
            // Stop animation on error too
            if (typeof typingInterval !== 'undefined') clearInterval(typingInterval);

            loadingIndicator.style.display = 'none';
            addMessage("ERR: CONNECTION LOST WITH UPSIDE DOWN.", 'bot');
            console.error(error);
        } finally {
            input.disabled = false;
            input.focus();
        }
    }

    sendBtn.addEventListener('click', sendMessage);
    input.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') sendMessage();
    });
});