document.addEventListener('DOMContentLoaded', () => {
    const chatContainer = document.getElementById('chat-container');
    const userInput = document.getElementById('user-input');
    const sendButton = document.getElementById('send-button');
    
    // Function to add a message to the chat
    function addMessage(content, isUser = false) {
        const messageDiv = document.createElement('div');
        messageDiv.className = `chat-message ${isUser ? 'user-message' : 'bot-message'} p-4 rounded-lg ${isUser ? 'bg-blue-500 text-white ml-8' : 'bg-blue-50 text-gray-700 mr-8'}`;
        
        const messageContent = `
            <div class="flex items-start">
                <div class="flex-shrink-0 h-10 w-10 rounded-full ${isUser ? 'bg-blue-600' : 'bg-blue-100'} flex items-center justify-center">
                    <i data-feather="${isUser ? 'user' : 'cpu'}" class="${isUser ? 'text-white' : 'text-blue-500'}"></i>
                </div>
                <div class="ml-3">
                    <p class="font-medium">${isUser ? 'You' : 'RAG Bot'}</p>
                    <p class="text-sm mt-1">${content}</p>
                </div>
            </div>
        `;
        
        messageDiv.innerHTML = messageContent;
        chatContainer.appendChild(messageDiv);
        chatContainer.scrollTop = chatContainer.scrollHeight;
        feather.replace();
    }
    
    // Function to show typing indicator
    function showTypingIndicator() {
        const typingDiv = document.createElement('div');
        typingDiv.className = 'chat-message bot-message p-4 rounded-lg bg-blue-50 text-gray-700 mr-8';
        typingDiv.innerHTML = `
            <div class="flex items-start">
                <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
                    <i data-feather="cpu" class="text-blue-500"></i>
                </div>
                <div class="ml-3">
                    <p class="font-medium">RAG Bot</p>
                    <div class="typing-indicator mt-1">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
        `;
        chatContainer.appendChild(typingDiv);
        chatContainer.scrollTop = chatContainer.scrollHeight;
        return typingDiv;
    }
    
    // Function to simulate RAG response (in a real app, this would call an API)
    function getRAGResponse(userMessage) {
        return new Promise((resolve) => {
            setTimeout(() => {
                // Simulate different responses based on input
                const responses = [
                    "I found some information about that. According to my knowledge...",
                    "That's an interesting question. Here's what I know...",
                    "I've retrieved some relevant documents that mention...",
                    "Based on the data I have access to...",
                    "I'm not entirely sure about that, but here's what I found..."
                ];
                const randomResponse = responses[Math.floor(Math.random() * responses.length)];
                resolve(randomResponse);
            }, 1500 + Math.random() * 2000); // Random delay between 1.5-3.5 seconds
        });
    }
    
    // Handle send button click
    sendButton.addEventListener('click', async () => {
        const message = userInput.value.trim();
        if (message) {
            addMessage(message, true);
            userInput.value = '';
            
            const typingIndicator = showTypingIndicator();
            const response = await getRAGResponse(message);
            
            // Remove typing indicator and show actual response
            chatContainer.removeChild(typingIndicator);
            addMessage(response);
        }
    });
    
    // Handle Enter key press
    userInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            sendButton.click();
        }
    });
});