document.addEventListener('DOMContentLoaded', () => {
    const chatHistory = document.getElementById('chat-history');
    const queryInput = document.getElementById('query-input');
    const sendBtn = document.getElementById('send-btn');

    const appendMessage = (content, isUser, sources = []) => {
        const msgDiv = document.createElement('div');
        msgDiv.className = `message ${isUser ? 'user-message' : 'bot-message'}`;

        // Parse markdown if it's from the bot
        const parsedContent = isUser ? content : marked.parse(content);
        let html = `<div class="content">${parsedContent}</div>`;

        if (!isUser && sources.length > 0) {
            html += '<div class="sources"><strong>Sources:</strong><br>';
            sources.forEach(src => {
                html += `<span class="source-tag">${src}</span>`;
            });
            html += '</div>';
        }

        msgDiv.innerHTML = html;
        chatHistory.appendChild(msgDiv);
        chatHistory.scrollTop = chatHistory.scrollHeight;
    };

    const handleQuery = async (forcedQuery = null) => {
        const query = (forcedQuery || queryInput.value).trim();
        if (!query) return;

        appendMessage(query, true);
        queryInput.value = '';

        // Add loading indicator
        const loadingDiv = document.createElement('div');
        loadingDiv.className = 'message bot-message loading-indicator';
        loadingDiv.innerHTML = '<span class="loading-dots">Thinking</span>';
        chatHistory.appendChild(loadingDiv);
        chatHistory.scrollTop = chatHistory.scrollHeight;

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

            const data = await response.json();

            // Remove loading
            chatHistory.removeChild(loadingDiv);

            if (data.answer) {
                appendMessage(data.answer, false, data.sources);
            } else {
                appendMessage("Sorry, I encountered an error: " + (data.error || "Unknown error"), false);
            }
        } catch (error) {
            chatHistory.removeChild(loadingDiv);
            appendMessage("Connection error. Is the server running?", false);
        }
    };

    // Suggestion chips
    document.querySelectorAll('.chip').forEach(chip => {
        chip.addEventListener('click', () => {
            handleQuery(chip.getAttribute('data-query'));
        });
    });

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