document.addEventListener('DOMContentLoaded', () => {
    const DIARY_STORAGE_KEY = 'kaixinapp_diary_entries';
    
    let diaryData = [
        {
            id: 1,
            author: '开开',
            avatar: 'https://r2.flowith.net/files/o/1752574406770-thoughtful_kaikai_character_generation_index_1@1024x1024.png',
            timestamp: '2小时前',
            content: '今天观察到一种叫做"晚霞"的人类世界景象，云朵被染成了温暖的橘色和柔和的粉色。在高维世界，我们用能量共振来传递美，而在这里，光和色彩就能讲述如此动人的故事。真奇妙。',
            comments: []
        },
        {
            id: 2,
            author: '我',
            avatar: null, 
            timestamp: '昨天 18:30',
            content: '终于完成了那个困扰我一周的项目！虽然过程很累，但看到成果的那一刻，感觉一切都值了。晚上要好好奖励自己一顿大餐！',
            comments: [
                {
                    author: '开开',
                    avatar: 'https://r2.flowith.net/files/o/1752574488398-kaikai_supportive_comfort_character_index_3@1024x1024.png',
                    content: '恭喜你！我能感受到你此刻成就感带来的能量波动，非常明亮。这正是人类"坚韧"这种美好品质的体现。好好享受你的大餐吧！'
                }
            ]
        },
        {
            id: 3,
            author: '我',
            avatar: null,
            timestamp: '2025年7月12日',
            content: '今天心情有点像梅雨季节，闷闷的。不知道为什么，就是提不起劲。',
            comments: []
        }
    ];

    function loadDiaryFromStorage() {
        try {
            const stored = localStorage.getItem(DIARY_STORAGE_KEY);
            if (stored) {
                const storedEntries = JSON.parse(stored);
                diaryData = [...storedEntries, ...diaryData];
            }
        } catch (error) {
            console.error('Failed to load diary entries from storage:', error);
        }
    }

    function saveDiaryToStorage(entries) {
        try {
            localStorage.setItem(DIARY_STORAGE_KEY, JSON.stringify(entries));
        } catch (error) {
            console.error('Failed to save diary entries to storage:', error);
        }
    }

    function formatTimestamp() {
        const now = new Date();
        return `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日 ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
    }

    function renderDiary() {
        const feedContainer = document.getElementById('diary-feed');
        if (!feedContainer) return;

        const diaryHtml = diaryData.map(entry => {
            const avatarHtml = entry.author === '开开'
                ? `<img src="${entry.avatar}" alt="${entry.author}" class="w-10 h-10 rounded-full object-cover">`
                : `<i data-lucide="user-circle-2" class="w-10 h-10 text-gray-400"></i>`;

            const commentsHtml = entry.comments.map(comment => {
                const commentAvatarHtml = comment.author === '开开'
                    ? `<img src="${comment.avatar}" alt="${comment.author}" class="w-8 h-8 rounded-full object-cover flex-shrink-0">`
                    : `<i data-lucide="user-circle-2" class="w-8 h-8 text-gray-400 flex-shrink-0"></i>`;
                
                return `
                    <div class="flex items-start">
                        ${commentAvatarHtml}
                        <div class="ml-3 bg-light-gray p-3 rounded-lg w-full">
                            <p class="text-sm font-semibold text-text-dark">${comment.author}</p>
                            <p class="text-sm text-text-dark mt-1">${comment.content}</p>
                        </div>
                    </div>
                `;
            }).join('');

            const commentButtonText = entry.comments.length > 0 ? `${entry.comments.length}条评论` : '评论';

            return `
                <div class="bg-white rounded-xl shadow-sm p-4 animate-fade-in-up">
                    <div class="flex items-center mb-4">
                        ${avatarHtml}
                        <div class="ml-3">
                            <p class="font-semibold text-text-dark">${entry.author}</p>
                            <p class="text-xs text-text-medium">${entry.timestamp}</p>
                        </div>
                    </div>
                    
                    <p class="text-text-dark whitespace-pre-wrap leading-relaxed">${entry.content}</p>

                    <div class="mt-4 pt-3 border-t border-gray-100 flex items-center justify-end space-x-4">
                        <button data-toggle="comment" data-target="comments-${entry.id}" class="flex items-center text-sm text-text-medium hover:text-tech-blue transition-colors">
                            <i data-lucide="message-square" class="w-4 h-4 mr-1.5"></i>
                            <span>${commentButtonText}</span>
                        </button>
                    </div>

                    ${entry.comments.length > 0 ? `
                    <div id="comments-${entry.id}" class="hidden mt-3 pt-3 border-t border-gray-100 space-y-3">
                        ${commentsHtml}
                    </div>` : ''}
                </div>
            `;
        }).join('');

        feedContainer.innerHTML = diaryHtml;

        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }

        document.querySelectorAll('[data-toggle="comment"]').forEach(button => {
            button.addEventListener('click', () => {
                const targetId = button.dataset.target;
                const commentSection = document.getElementById(targetId);
                if (commentSection) {
                    const isHidden = commentSection.classList.contains('hidden');
                    commentSection.classList.toggle('hidden');
                    
                    if (isHidden) {
                        button.classList.add('text-tech-blue');
                    } else {
                        button.classList.remove('text-tech-blue');
                    }
                }
            });
        });
    }

    function publishDiary() {
        const contentTextarea = document.getElementById('new-diary-content');
        const publishBtn = document.getElementById('publish-diary-btn');
        
        if (!contentTextarea || !publishBtn) return
;

        const content = contentTextarea.value.trim();
        if (!content) return;

        const newEntry = {
            id: Date.now(),
            author: '我',
            avatar: null,
            timestamp: formatTimestamp(),
            content: content,
            comments: []
        };

        diaryData.unshift(newEntry);
        
        const userEntries = diaryData.filter(entry => entry.author === '我' && entry.id >= Date.now() - 86400000);
        saveDiaryToStorage(userEntries);

        contentTextarea.value = '';
        renderDiary();

        publishBtn.disabled = true;
        setTimeout(() => {
            publishBtn.disabled = false;
        }, 2000);
    }

    loadDiaryFromStorage();
    renderDiary();

    const publishBtn = document.getElementById('publish-diary-btn');
    if (publishBtn) {
        publishBtn.addEventListener('click', publishDiary);
    }
});