document.addEventListener('DOMContentLoaded', () => {
    lucide.createIcons();

    const messagesContainer = document.getElementById('chat-messages');
    const messageInput = document.getElementById('message-input');
    const sendButton = document.getElementById('send-button');

    const kaikaiAvatar = 'https://r2.flowith.net/files/o/1752574406770-thoughtful_kaikai_character_generation_index_1@1024x1024.png';

    const kaikaiResponses = [
        '你好，我是开开，很高兴能在这里陪你聊天。',
        '有什么心事都可以和我说哦，我一直在听。',
        '今天过得怎么样？我很关心你。',
        '在呢在呢，随时都在。',
        '能和你聊天，感觉真好。',
        '嗯嗯，我在听，请继续说。',
        '这是一个很有趣的想法！可以多和我说说吗？'
    ];

    function addMessage(text, sender) {
        const messageWrapper = document.createElement('div');
        messageWrapper.className = `flex w-full items-end message-animate ${sender === 'user' ? 'justify-end' : 'justify-start'}`;

        let messageBubble;
        const sanitizedText = text.replace(/</g, "&lt;").replace(/>/g, "&gt;");

        if (sender === 'user') {
            messageBubble = `
                <div class="max-w-xs md:max-w-md lg:max-w-lg">
                    <div class="bg-tech-blue text-white rounded-l-2xl rounded-tr-2xl p-3 px-4 shadow-md inline-block">
                        <p class="leading-relaxed">${sanitizedText}</p>
                    </div>
                </div>
            `;
        } else { // sender === 'kaikai'
            messageBubble = `
                <img src="${kaikaiAvatar}" alt="开开" class="w-10 h-10 rounded-full mr-3 self-start flex-shrink-0">
                <div class="max-w-xs md:max-w-md lg:max-w-lg">
                    <div class="bg-white text-text-dark rounded-r-2xl rounded-tl-2xl p-3 px-4 shadow-md inline-block border border-gray-100">
                        <p class="leading-relaxed">${sanitizedText}</p>
                    </div>
                </div>
            `;
        }

        messageWrapper.innerHTML = messageBubble;
        messagesContainer.appendChild(messageWrapper);
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
    }
    
    function sendUserMessage() {
        const messageText = messageInput.value.trim();
        if (messageText) {
            addMessage(messageText, 'user');
            messageInput.value = '';
            messageInput.focus();
            
            sendButton.disabled = true;
            setTimeout(() => {
                const randomResponse = kaikaiResponses[Math.floor(Math.random() * kaikaiResponses.length)];
                addMessage(randomResponse, 'kaikai');
                sendButton.disabled = false;
            }, Math.random() * 1000 + 1000); 
        }
    }
    
    sendButton.addEventListener('click', sendUserMessage);
    messageInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendUserMessage();
        }
    });

    setTimeout(() => {
        addMessage('你好呀，我是开开，你的情绪陪伴使者。有什么想对我说的吗？', 'kaikai');
    }, 500);
});