document.addEventListener('DOMContentLoaded', () => {
    const chatContainer = document.getElementById('chatContainer');
    const userInput = document.getElementById('userInput');
    const sendButton = document.getElementById('sendButton');

    // Function to add a message to the chat
    function addMessage(text, isUser) {
        const messageDiv = document.createElement('div');
        messageDiv.className = isUser ? 'user-message mb-4' : 'bot-message mb-4';
        
        const messageContent = `
            <div class="flex items-start gap-3 ${isUser ? 'justify-end' : ''}">
                ${!isUser ? `
                <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white">
                    <i data-feather="cpu"></i>
                </div>
                ` : ''}
                <div class="${isUser ? 'bg-purple-600 text-white' : 'bg-purple-100'} rounded-lg p-3 max-w-xs md:max-w-md lg:max-w-lg">
                    <p>${text}</p>
                </div>
                ${isUser ? `
                <div class="w-8 h-8 rounded-full bg-gray-400 flex items-center justify-center text-white">
                    <i data-feather="user"></i>
                </div>
                ` : ''}
            </div>
        `;
        
        messageDiv.innerHTML = messageContent;
        chatContainer.appendChild(messageDiv);
        chatContainer.scrollTop = chatContainer.scrollHeight;
        feather.replace();
    }

    // Function to simulate bot response
    function getBotResponse(userMessage) {
        // Simple response logic (replace with API call in real implementation)
        const responses = [
            "I'm not sure I understand. Could you elaborate?",
            "Interesting point! What else would you like to know?",
            "I can help with that. Here's what I found...",
            "Thanks for sharing that with me!",
            "Let me think about that for a moment..."
        ];
        return responses[Math.floor(Math.random() * responses.length)];
    }
    // Get modal elements
    const modal = document.getElementById('createModal');
    const createBtn = document.getElementById('createBtn');
    const modifyBtn = document.getElementById('modifyBtn');
    const cancelBtn = document.getElementById('cancelBtn');

    // Function to close modal
    function closeModal() {
        modal.style.display = 'none';
    }

    // Modal button event listeners
    createBtn.addEventListener('click', () => {
        addMessage("Creating new content...", false);
        closeModal();
    });

    modifyBtn.addEventListener('click', () => {
        addMessage("Modifying existing content...", false);
        closeModal();
    });

    cancelBtn.addEventListener('click', closeModal);

    // Close modal when clicking outside
    window.addEventListener('click', (e) => {
        if (e.target === modal) {
            closeModal();
        }
    });

    // Send message when button is clicked
    sendButton.addEventListener('click', () => {
        const message = userInput.value.trim();
        if (message) {
            addMessage(message, true);
            userInput.value = '';

            // Show modal if user typed 'create'
            if (message.toLowerCase() === 'create') {
                modal.style.display = 'flex';
                return;
            }
// Simulate typing indicator
            const typingIndicator = document.createElement('div');
            typingIndicator.className = 'bot-message mb-4';
            typingIndicator.innerHTML = `
                <div class="flex items-start gap-3">
                    <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white">
                        <i data-feather="cpu"></i>
                    </div>
                    <div class="bg-purple-100 rounded-lg p-3 w-24">
                        <div class="flex gap-1">
                            <div class="w-2 h-2 rounded-full bg-purple-400 animate-bounce"></div>
                            <div class="w-2 h-2 rounded-full bg-purple-400 animate-bounce" style="animation-delay: 0.2s"></div>
                            <div class="w-2 h-2 rounded-full bg-purple-400 animate-bounce" style="animation-delay: 0.4s"></div>
                        </div>
                    </div>
                </div>
            `;
            chatContainer.appendChild(typingIndicator);
            chatContainer.scrollTop = chatContainer.scrollHeight;
            feather.replace();
            
            // Simulate bot response after delay
            setTimeout(() => {
                chatContainer.removeChild(typingIndicator);
                const botResponse = getBotResponse(message);
                addMessage(botResponse, false);
            }, 1500);
        }
    });

    // Send message when Enter is pressed
    userInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            sendButton.click();
        }
    });
});