document.addEventListener('DOMContentLoaded', function() {
    const chatMessages = document.getElementById('chat-messages');
    const userInput = document.getElementById('user-input');
    const sendButton = document.getElementById('send-button');

    function addMessage(role, content) {
        const messageDiv = document.createElement('div');
        messageDiv.className = `message ${role} ${role === 'user' ? 'bg-gray-700 rounded-xl p-4 border-l-4 border-neon-500' : 'bg-gray-700 bg-opacity-50 rounded-xl p-4 border-l-4 border-quantum-500'}`;
        
        const messageContent = `
            <div class="flex items-start space-x-3">
                <div class="flex-shrink-0 w-8 h-8 rounded-full ${role === 'user' ? 'bg-neon-600' : 'bg-quantum-600'} flex items-center justify-center">
                    <i data-feather="${role === 'user' ? 'user' : 'cpu'}" class="text-white w-4 h-4"></i>
                </div>
                <div class="text-neon-100">
                    <p>${content}</p>
                </div>
            </div>
        `;
        
        messageDiv.innerHTML = messageContent;
        chatMessages.appendChild(messageDiv);
        chatMessages.scrollTop = chatMessages.scrollHeight;
        feather.replace();
    }

    function simulateTyping() {
        const typingDiv = document.createElement('div');
        typingDiv.className = 'message bot bg-gray-700 bg-opacity-50 rounded-xl p-4 border-l-4 border-quantum-500';
        
        const typingContent = `
            <div class="flex items-start space-x-3">
                <div class="flex-shrink-0 w-8 h-8 rounded-full bg-quantum-600 flex items-center justify-center">
                    <i data-feather="cpu" class="text-white w-4 h-4"></i>
                </div>
                <div class="text-neon-100">
                    <div class="typing-indicator">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
        `;
        
        typingDiv.innerHTML = typingContent;
        chatMessages.appendChild(typingDiv);
        chatMessages.scrollTop = chatMessages.scrollHeight;
        feather.replace();
        return typingDiv;
    }

    function removeTypingIndicator(typingElement) {
        if (typingElement && typingElement.parentNode) {
            typingElement.remove();
        }
    }

    sendButton.addEventListener('click', function() {
        const message = userInput.value.trim();
        if (message) {
            addMessage('user', message);
            userInput.value = '';
            
            const typingElement = simulateTyping();
            
            // Simulate AI response after a delay
            setTimeout(() => {
                removeTypingIndicator(typingElement);
                
                // Generate a mock response (in a real app, this would be from an API)
                const responses = [
                    "I've processed your quantum query and found interesting patterns in the data.",
                    "The neural network suggests several possible interpretations of your request.",
                    "Analyzing temporal dimensions... your input resonates with 87.3% probability.",
                    "The quantum algorithm has converged on this response after evaluating multiple possibilities.",
                    "Fascinating perspective! My cognitive modules are processing the implications."
                ];
                
                const randomResponse = responses[Math.floor(Math.random() * responses.length)];
                addMessage('bot', randomResponse);
            }, 1500 + Math.random() * 2000);
        }
    });

    userInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            sendButton.click();
        }
    });
});