document.addEventListener('DOMContentLoaded', () => {

    const TOPICS_STORAGE_KEY = 'kaixinapp_user_topics_v4';
    let nextUserTopicId = 1;

    let aiTopics = [{
        id: "ai-1",
        date: "2025年7月14日",
        title: "关于职业发展的思考",
        summary: "近期你在日记和聊天中多次提到对目前工作的倦怠感，并探索学习新技能（如编程、设计）的可能性。",
        keywords: ["职业倦怠", "新技能", "转行", "自我提升"],
        timeline: [
            { 
                stage_name: "探索阶段 (前期)",
                stage_icon: "search",
                items: [
                    { id: 2, date: '2025-07-10', content: '搜索了在线编程课程，感觉眼花缭乱。' },
                    { id: 3, date: '2025-07-12', content: '在日记里写下了对目前工作的厌烦，感觉陷入了瓶颈。' }
                ]
            },
            { 
                stage_name: "调研阶段 (当前)",
                stage_icon: "clipboard-list",
                items: [
                    { id: 1, date: '2025-07-14', content: '和开开聊了关于转行做设计师的可能性，开开给了一些建议。' }
                ]
            }
        ],
        next_suggestion: '尝试接触一些免费的设计工具（如Figma、Canva），完成一个名片设计或海报制作的小项目。这能帮你评估自己对设计工作的实际兴趣和基本感觉。'
    }, {
        id: "ai-2",
        date: "2025年7月10日",
        title: "周末出游计划",
        summary: "你似乎在计划一个短途旅行，多次查询关于海边城市的天气和美食推荐。",
        keywords: ["旅行", "海边", "美食", "放松"],
        timeline: [
            {
                stage_name: "萌芽阶段 (前期)",
                stage_icon: "sprout",
                items: [
                     { id: 2, date: '2025-07-09', content: '天气好热，突然想去海边玩。' }
                ]
            },
            {
                stage_name: "计划阶段 (当前)",
                stage_icon: "map",
                items: [
                    { id: 1, date: '2025-07-10', content: '问开开哪个海边城市人少又好玩，它推荐了几个小众地点。' },
                ]
            }
        ],
        next_suggestion: '可以开始查看交通和住宿了，早点预定选择更多哦！如果需要，开开可以帮你对比价格。'
    }];

    let userTopics = [];

    const aiSummaryContainer = document.getElementById('ai-summary-list');
    const userTopicsListContainer = document.getElementById('user-topics-list');
    const newTopicForm = document.getElementById('new-topic-form');

    const modal = document.getElementById('topic-detail-modal');
    const modalTitle = document.getElementById('modal-topic-title');
    const modalDate = document.getElementById('modal-topic-date');
    const closeModalBtn = document.getElementById('close-modal-btn');
    const addEntryForm = document.getElementById('add-entry-form');
    let activeTopicId = null;

    function loadTopicsFromStorage() {
        const stored = localStorage.getItem(TOPICS_STORAGE_KEY);
        if (stored) {
            userTopics = JSON.parse(stored);
            const maxId = userTopics.reduce((max, t) => Math.max(max, parseInt(t.id.split('-')[1])), 0);
            nextUserTopicId = maxId + 1;
        } else {
             userTopics = [{
                id: `user-${nextUserTopicId++}`,
                title: "暑期健身计划",
                date: "2025年7月15日",
                keywords: ["健康", "运动", "自律"],
                timeline: [{
                    stage_name: "启动阶段 (当前)",
                    stage_icon: "rocket",
                    items: [
                        { id: 1, date: '2025-07-15', content: "今天制定了计划：每周至少三次有氧运动，两次力量训练。记录每日饮食，控制热量摄入。" }
                    ]
                }],
                next_suggestion: '找一个伙伴一起监督，或者使用App记录进程，增加成就感。'
            }];
        }
    }

    function saveTopicsToStorage() {
        localStorage.setItem(TOPICS_STORAGE_KEY, JSON.stringify(userTopics));
    }

    function renderAiTopics() {
        if (!aiSummaryContainer) return;
        aiSummaryContainer.innerHTML = aiTopics.map(topic => `
            <div data-topic-id="${topic.id}" class="bg-white p-6 rounded-xl shadow-md border border-gray-200/80 cursor-pointer hover:shadow-lg hover:border-tech-blue/50 transition-all duration-300">
                <p class="text-sm text-text-medium mb-2">${topic.date}</p>
                <h3 class="text-xl font-bold text-text-dark mb-3">${topic.title}</h3>
                <p class="text-text-medium mb-4 text-sm">${topic.summary}</p>
                <div class="flex flex-wrap gap-2">
                    ${topic.keywords.map(k => `<span class="inline-block bg-tech-blue/10 text-tech-blue text-xs font-medium px-2.5 py-0.5 rounded-full">${k}</span>`).join('')}
                </div>
            </div>`).join('');
        aiSummaryContainer.querySelectorAll('[data-topic-id]').forEach(el => el.addEventListener('click', () => openModal(el.dataset.topicId)));
    }

    function renderUserTopics() {
        if (!userTopicsListContainer) return;
        const getLastEntryContent = (topic) => {
            if (!topic.timeline || topic.timeline.length === 0) return "暂无内容";
            const lastStage = topic.timeline[topic.timeline.length - 1];
            if (!lastStage.items || lastStage.items.length === 0) return "暂无内容";
            return lastStage.items[lastStage.items.length - 1].content;
        };
        
        userTopicsListContainer.innerHTML = userTopics.length === 0 ? `<p class="text-text-medium text-center italic text-sm py-4">还没有创建话题哦</p>` : 
            userTopics.map(topic => `
            <div class="bg-light-gray p-4 rounded-lg group transition-colors duration-200 hover:bg-gray-200/60">
                <div class="flex justify-between items-start">
                    <div data-topic-id="${topic.id}" class="cursor-pointer flex-1 min-w-0 pr-2">
                        <h4 class="font-semibold text-text-dark group-hover:text-tech-blue transition-colors truncate">${topic.title}</h4>
                        <p class="text-sm text-text-medium mt-1 truncate">${getLastEntryContent(topic)}</p>
                    </div>
                    <button data-delete-id="${topic.id}" class="text-gray-400 hover:text-red-500 transition-colors opacity-0 group-hover:opacity-100 flex-shrink-0" title="删除话题">
                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                    </button>
                </div>
            </div>`).join('');
        
        userTopicsListContainer.querySelectorAll('[data-topic-id]').forEach(el => el.addEventListener('click', () => openModal(el.dataset.topicId)));
        userTopicsListContainer.querySelectorAll('[data-delete-id]').forEach(el => el.addEventListener('click', (e) => {
            e.stopPropagation();
            if(confirm('确定要删除这个话题吗？此操作无法撤销。')) {
                 deleteTopic(el.dataset.deleteId);
            }
        }));
        if (typeof lucide !== 'undefined') lucide.createIcons();
    }
    
    function deleteTopic(topicId) {
        userTopics = userTopics.filter(t => t.id !== topicId);
        saveTopicsToStorage();
        renderUserTopics();
    }

    function openModal(topicId) {
        const topic = [...aiTopics, ...userTopics].find(t => t.id === topicId);
        if (!topic) return;
        activeTopicId = topicId;

        const isUserTopic = activeTopicId.startsWith('user-');
        document.getElementById('add-entry-form').style.display = isUserTopic ? 'flex' : 'none';
        document.querySelector('#add-entry-form').previousElementSibling.style.display = isUserTopic ? 'block' : 'none';

        modalTitle.textContent = topic.title;
        modalDate.textContent = `创建于 ${topic.date}`;
        
        renderTopicTimeline(topic);
        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }
    
    function renderTopicTimeline(topic){
        const timelineContainer = document.getElementById('modal-timeline-container');
        const suggestionContainer = document.getElementById('modal-suggestion-container');
        timelineContainer.innerHTML = '';
        suggestionContainer.innerHTML = '';
        
        const isUserTopic = topic.id.startsWith('user-');
    
        if(topic.timeline && topic.timeline.length > 0) {
            topic.timeline.forEach((stage, stageIndex) => {
                const isCurrentStage = stageIndex === topic.timeline.length - 1;
                const stageHtml = `
                    <div class="stage-group">
                        <div class="flex items-center space-x-3 mb-4">
                            <div class="w-10 h-10 ${isCurrentStage ? 'bg-tech-blue/20' : 'bg-gray-200'} rounded-full flex items-center justify-center flex-shrink-0">
                                <i data-lucide="${stage.stage_icon || 'flag'}" class="w-5 h-5 ${isCurrentStage ? 'text-tech-blue' : 'text-gray-600'}"></i>
                            </div>
                            <h3 class="text-xl font-bold ${isCurrentStage ? 'text-text-dark' : 'text-gray-500'}">${stage.stage_name}</h3>
                            ${isCurrentStage ? '<span class="text-xs bg-tech-blue text-white font-bold py-0.5 px-2 rounded-full">当前</span>' : ''}
                        </div>
                        <div class="relative border-l-2 ${isCurrentStage ? 'border-tech-blue/30' : 'border-gray-300'} ml-5 pl-10 space-y-6">
                            ${stage.items.sort((a,b) => new Date(b.date) - new Date(a.date)).map(entry => `
                                <div class="relative group">
                                    <div class="absolute -left-[45px] top-1.5 w-4 h-4 bg-white border-2 ${isCurrentStage ? 'border-tech-blue' : 'border-gray-400'} rounded-full"></div>
                                    <div class="bg-white p-4 rounded-xl shadow-sm border">
                                        <div class="flex justify-between items-center">
                                             <p class="text-sm text-text-medium mb-1 font-medium">${new Date(entry.date).toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
                                             ${isUserTopic ? `<button data-delete-entry-id="${entry.id}" class="text-gray-400 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity p-1 -mr-1" title="删除此条目"><i data-lucide="x" class="w-4 h-4"></i></button>` : ''}
                                        </div>
                                        <p class="text-text-dark text-sm">${entry.content.replace(/\\n/g, '<br>')}</p>
                                    </div>
                                </div>
                            `).join('')}
                        </div>
                    </div>
                `;
                timelineContainer.innerHTML += stageHtml;
            });
        }
        
        if (topic.next_suggestion) {
            suggestionContainer.innerHTML = `
                <div class="flex items-start bg-amber-50 p-4 rounded-lg border border-amber-200">
                    <i data-lucide="lightbulb" class="w-6 h-6 text-amber-500 mr-3 mt-1 flex-shrink-0"></i>
                    <div>
                        <h4 class="font-bold text-amber-800">开开的下一步建议</h4>
                        <p class="text-sm text-amber-700 mt-1">${topic.next_suggestion}</p>
                    </div>
                </div>`;
        }
    
        timelineContainer.querySelectorAll('[data-delete-entry-id]').forEach(btn => {
            btn.addEventListener('click', () => deleteTopicEntry(btn.dataset.deleteEntryId));
        });
        if (typeof lucide !== 'undefined') lucide.createIcons();
    }
    
    function deleteTopicEntry(entryId) {
        const topic = userTopics.find(t => t.id === activeTopicId);
        if (!topic) return;

        const totalEntries = topic.timeline.reduce((acc, stage) => acc + stage.items.length, 0);
        if (totalEntries <= 1) {
            alert('每个话题至少需要一条记录。如不需此话题，可直接删除整个话题卡片。');
            return;
        }

        topic.timeline.forEach(stage => {
            stage.items = stage.items.filter(entry => entry.id.toString() !== entryId.toString());
        });
        topic.timeline = topic.timeline.filter(stage => stage.items.length > 0);

        saveTopicsToStorage();
        renderTopicTimeline(topic);
    }

    function closeModal() {
        activeTopicId = null;
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }

    newTopicForm.addEventListener('submit', (e) => {
        e.preventDefault();
        const title = e.target.elements.title.value.trim();
        const content = e.target.elements.content.value.trim();
        if (title && content) {
            const newTopic = {
                id: `user-${nextUserTopicId++}`,
                title: title,
                date: new Date().toLocaleDateString('zh-CN'),
                keywords: ["自定义"],
                timeline: [{
                    stage_name: "启动阶段 (当前)",
                    stage_icon: "rocket",
                    items: [{ id: 1, date: new Date().toISOString().split('T')[0], content: content }]
                }],
                next_suggestion: '将大目标分解成几个可执行的小步骤吧！'
            };
            userTopics.unshift(newTopic);
            saveTopicsToStorage();
            renderUserTopics();
            e.target.reset();
        }
    });
    
    addEntryForm.addEventListener('submit', (e) => {
        e.preventDefault();
        const contentEl = e.target.elements['new-entry-content'];
        const content = contentEl.value.trim();
        if (!content || !activeTopicId) return;
        
        const topic = userTopics.find(t => t.id === activeTopicId);
        if(!topic) return;
        
        let maxId = 0;
        topic.timeline.forEach(stage => {
            maxId = Math.max(maxId, ...stage.items.map(item => item.id));
        });
        
        const newEntry = {
            id: maxId + 1,
            date: new Date().toISOString().split('T')[0],
            content: content
        };
        
        if (topic.timeline.length > 0) {
             topic.timeline[topic.timeline.length - 1].items.push(newEntry);
        } else {
            topic.timeline.push({
                stage_name: "新进展 (当前)",
                stage_icon: "plus",
                items: [newEntry]
            })
        }
       
        saveTopicsToStorage();
        renderTopicTimeline(topic);
        contentEl.value = '';
    });

    closeModalBtn.addEventListener('click', closeModal);
    modal.addEventListener('click', (e) => {
        if (e.target === modal) closeModal();
    });

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