import { navLinks } from './data.js';

const renderMessages = () => {
    const messages = [
        {
            type: 'ai',
            icon: 'sparkles',
            color: 'text-warm-orange',
            title: '开开的每周心情总结',
            content: '你好呀！上周我们聊了很多关于"新工作的挑战"，你表现出了很棒的适应能力和积极心态。记得给自己一些放松的时间哦，比如看看你喜欢的电影。',
            timestamp: '2025年7月15日 09:30'
        },
        {
            type: 'system',
            icon: 'bell',
            color: 'text-tech-blue',
            title: '系统通知：欢迎使用日记功能',
            content: '现在，你可以在日记区记录下你的生活点滴，开开会阅读你的日记并给你温暖的回复和鼓励哦。',
            timestamp: '2025年7月14日 18:00'
        },
        {
            type: 'ai',
            icon: 'sparkles',
            color: 'text-warm-orange',
            title: '开开的话题追踪提醒',
            content: '我发现你最近经常提到"学吉他"，我已经为你创建了一个话题追踪卡片，帮你记录学习进度和心得。一起加油吧！',
            timestamp: '2025年7月12日 11:25'
        },
        {
            type: 'system',
            icon: 'award',
            color: 'text-green-500',
            title: '成就解锁：初次见面',
            content: '恭喜你完成了与开开的第一次对话，这是共同成长的第一步。',
            timestamp: '2025年7月10日 20:45'
        }
    ];

    const messageListContainer = document.getElementById('message-list');
    if (messageListContainer) {
        messageListContainer.innerHTML = '';
        messages.forEach((msg, index) => {
            const messageEl = document.createElement('div');
            messageEl.className = 'bg-white p-5 rounded-xl shadow-sm border border-gray-200/80 flex items-start space-x-4 hover:shadow-md hover:border-tech-blue/30 transition-all duration-300 animate-fade-in-up';
            messageEl.style.animationDelay = `${index * 0.1}s`;

            messageEl.innerHTML = `
                <div class="flex-shrink-0 w-10 h-10 rounded-full bg-light-gray flex items-center justify-center border">
                    <i data-lucide="${msg.icon}" class="w-5 h-5 ${msg.color}"></i>
                </div>
                <div class="flex-grow">
                    <div class="flex justify-between items-center">
                        <h3 class="font-bold text-text-dark">${msg.title}</h3>
                        <span class="text-xs text-text-medium whitespace-nowrap">${msg.timestamp}</span>
                    </div>
                    <p class="text-text-medium mt-1 pr-4">${msg.content}</p>
                </div>
                <button class="flex-shrink-0 text-text-medium hover:text-tech-blue self-center">
                    <i data-lucide="chevron-right" class="w-5 h-5"></i>
                </button>
            `;
            messageListContainer.appendChild(messageEl);
        });
        
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    }
};

document.addEventListener('DOMContentLoaded', () => {
    renderMessages();
    
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
});