const userData = {
    basicInfo: {
        "MBTI": "INFP",
        "星座": "双鱼座",
    },
    moods: {
        labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        data: [5, 7, 6, 8, 9, 7, 6],
        events: ['感觉效率很高', '和开开聊了很久', '看了一部好电影', '工作有点累', '完成了一个小目标', '周末去徒步了', '为新的一周做准备']
    },
    interests: ["阅读", "电影", "编程", "徒步"],
    skills: ["Python", "JavaScript", "写作", "烹饪"],
    quotes: [
        { text: "愿你走出半生，归来仍是少年。", source: "与开开的对话" },
        { text: "重要的东西用眼睛是看不见的。", source: "小王子" },
    ]
};

function renderBasicInfo() {
    const container = document.getElementById('basic-info-container');
    if (!container) return;
    container.innerHTML = '';
    for (const [key, value] of Object.entries(userData.basicInfo)) {
        const infoItem = document.createElement('div');
        infoItem.innerHTML = `
            <p class="text-text-medium">${key}</p>
            <p class="font-semibold text-text-dark">${value}</p>
        `;
        container.appendChild(infoItem);
    }
}

function renderQuotes() {
    const container = document.getElementById('quotes-container');
    if (!container) return;
    container.innerHTML = '';
    userData.quotes.forEach(quote => {
        const quoteCard = document.createElement('div');
        quoteCard.className = 'bg-light-gray p-4 rounded-lg';
        quoteCard.innerHTML = `
            <p class="text-text-dark">“${quote.text}”</p>
            <p class="text-right text-text-medium text-sm mt-2">- ${quote.source}</p>
        `;
        container.appendChild(quoteCard);
    });
}

function renderTagList(containerId, dataArray, onAdd, onDelete) {
    const container = document.getElementById(containerId);
    if (!container) return;
    container.innerHTML = '';
    dataArray.forEach((item, index) => {
        const tag = document.createElement('div');
        tag.className = 'flex items-center bg-blue-100 text-blue-800 text-sm font-medium px-2.5 py-1.5 rounded-full animate-fade-in-up';
        tag.innerHTML = `
            <span>${item}</span>
            <button class="ml-1.5 text-blue-600 hover:text-blue-800" data-index="${index}">
                <i data-lucide="x" class="w-3.5 h-3.5"></i>
            </button>
        `;
        tag.querySelector('button').addEventListener('click', () => onDelete(index));
        container.appendChild(tag);
    });
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
}

function renderMoodChart() {
    const ctx = document.getElementById('moodChart');
    if (!ctx) return;
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: userData.moods.labels,
            datasets: [{
                label: '心情指数',
                data: userData.moods.data,
                borderColor: 'rgba(245, 166, 35, 0.8)',
                backgroundColor: 'rgba(245, 166, 35, 0.2)',
                fill: true,
                tension: 0.4,
                pointBackgroundColor: '#fff',
                pointBorderColor: 'rgba(245, 166, 35, 1)',
                pointHoverBackgroundColor: 'rgba(245, 166, 35, 1)',
                pointHoverBorderColor: '#fff',
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            onClick: (event, elements) => {
                if (elements.length > 0) {
                    const elementIndex = elements[0].index;
                    const day = userData.moods.labels[elementIndex];
                    const moodScore = userData.moods.data[elementIndex];
                    const eventText = userData.moods.events[elementIndex] || '暂无记录';
                    alert(`日期: ${day}\n心情指数: ${moodScore}\n相关事件/记录: ${eventText}`);
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    max: 10,
                    grid: {
                        drawBorder: false,
                    },
                    ticks: {
                       stepSize: 2
                    }
                },
                x: {
                    grid: {
                        display: false
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return ` 心情指数: ${context.formattedValue} (点击查看详情)`;
                        }
                    }
                }
            }
        }
    });
}

function showExploreModal(type) {
    const modalOverlay = document.createElement('div');
    modalOverlay.className = 'fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 animate-fade-in-up';
    
    const title = type === 'interest' ? '探索新爱好' : '探索新技能';
    const question = type === 'interest' ? '最近对什么新事物感到好奇？' : '有什么想要学习或掌握的新本领吗？';
    const placeholder = type === 'interest' ? '例如：天体物理、陶艺、古典音乐...' : '例如：视频剪辑、理财规划、一种新语言...';

    modalOverlay.innerHTML = `
        <div class="bg-white rounded-xl shadow-2xl p-6 w-full max-w-md transform animate-fade-in-up" style="animation-delay: 0.1s;">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-bold text-text-dark">${title}</h3>
                <button id="close-explore-modal" class="text-text-medium hover:text-tech-blue"><i data-lucide="x" class="w-5 h-5"></i></button>
            </div>
            <div>
                <p class="text-sm text-text-medium mb-1 flex items-center"><i data-lucide="sparkles" class="w-4 h-4 mr-2 text-warm-orange"></i>AI 引导提问</p>
                <p class="bg-light-gray p-3 rounded-lg text-text-dark mb-4">${question}</p>
                <textarea id="explore-input" rows="3" class="w-full border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-tech-blue focus:border-transparent outline-none transition" placeholder="${placeholder}"></textarea>
                <button id="submit-explore" class="w-full mt-4 bg-tech-blue text-white px-5 py-2.5 rounded-lg font-semibold hover:bg-blue-600 transition-all">获取智能推荐</button>
            </div>
        </div>
    `;

    document.body.appendChild(modalOverlay);
    lucide.createIcons();

    const closeModal = () => modalOverlay.remove();
    
    modalOverlay.querySelector('#close-explore-modal').addEventListener('click', closeModal);
    modalOverlay.addEventListener('click', (e) => {
        if (e.target === modalOverlay) closeModal();
    });

    modalOverlay.querySelector('#submit-explore').addEventListener('click', () => {
        const input = modalOverlay.querySelector('#explore-input').value;
        if (input.trim()) {
            alert(`AI正在根据 "${input}" 为您生成推荐... (此为演示功能)`);
            closeModal();
        } else {
            alert('请输入一些内容，AI才能更好地帮助你哦！');
        }
    });
}

function showAddModuleModal() {
    const modalOverlay = document.createElement('div');
    modalOverlay.className = 'fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 animate-fade-in-up';

    modalOverlay.innerHTML = `
        <div class="bg-white rounded-xl shadow-2xl p-6 w-full max-w-md transform animate-fade-in-up" style="animation-delay: 0.1s;">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-bold text-text-dark">自由添加模块</h3>
                <button id="close-add-module-modal" class="text-text-medium hover:text-tech-blue"><i data-lucide="x" class="w-5 h-5"></i></button>
            </div>
            <div>
                <p class="text-sm text-text-medium mb-3">请选择一个分类，或随意填写你想记录的内容：</p>
                <div id="module-categories" class="flex flex-wrap gap-2 mb-4">
                    <button class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1.5 rounded-full hover:bg-blue-200 transition">工作行业</button>
                    <button class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1.5 rounded-full hover:bg-blue-200 transition">学习背景</button>
                    <button class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1.5 rounded-full hover:bg-blue-200 transition">我的梦想</button>
                </div>
                <div class="flex items-center gap-2">
                    <input id="custom-module-input" type="text" class="flex-grow border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-warm-orange focus:border-transparent outline-none transition" placeholder="或输入自定义模块名称">
                    <button id="submit-custom-module" class="bg-warm-orange text-white px-4 py-2 rounded-lg font-semibold hover:bg-orange-600 transition-all">添加</button>
                </div>
            </div>
        </div>
    `;

    document.body.appendChild(modalOverlay);
    lucide.createIcons();
    
    const closeModal = () => modalOverlay.remove();
    
    modalOverlay.querySelector('#close-add-module-modal').addEventListener('click', closeModal);
    modalOverlay.addEventListener('click', (e) => {
        if (e.target === modalOverlay) closeModal();
    });
    
    const addModule = (title) => {
         if (title && title.trim() !== '') {
            createCustomModule(title.trim());
            closeModal();
        } else {
            alert('模块名称不能为空！');
        }
    };

    modalOverlay.querySelector('#module-categories').addEventListener('click', (e) => {
        if (e.target.tagName === 'BUTTON') {
            addModule(e.target.textContent);
        }
    });

    modalOverlay.querySelector('#submit-custom-module').addEventListener('click', () => {
        const input = modalOverlay.querySelector('#custom-module-input').value;
        addModule(input);
    });
}


function setupEventListeners() {
    document.getElementById('add-interest-btn')?.addEventListener('click', () => {
        const newInterest = prompt("请输入新的兴趣爱好：");
        if (newInterest && newInterest.trim() !== '') {
            userData.interests.push(newInterest.trim());
            renderTagList('interests-container', userData.interests, null, deleteInterest);
        }
    });

    document.getElementById('add-skill-btn')?.addEventListener('click', () => {
        const newSkill = prompt("请输入新的生活技能：");
        if (newSkill && newSkill.trim() !== '') {
            userData.skills.push(newSkill.trim());
            renderTagList('skills-container', userData.skills, null, deleteSkill);
        }
    });
    
    document.getElementById('explore-interests-btn')?.addEventListener('click', () => {
        showExploreModal('interest');
    });
    
    document.getElementById('explore-skills-btn')?.addEventListener('click', () => {
        showExploreModal('skill');
    });

    document.getElementById('add-custom-module-btn')?.addEventListener('click', () => {
        showAddModuleModal();
    });
}

function deleteInterest(index) {
    userData.interests.splice(index, 1);
    renderTagList('interests-container', userData.interests, null, deleteInterest);
}

function deleteSkill(index) {
    userData.skills.splice(index, 1);
    renderTagList('skills-container', userData.skills, null, deleteSkill);
}

function createCustomModule(title) {
    const grid = document.getElementById('dashboard-grid');
    if(!grid) return;
    
    const moduleEl = document.createElement('div');
    moduleEl.className = 'bg-white p-6 rounded-xl shadow-sm lg:col-span-2 animate-fade-in-up';
    moduleEl.innerHTML = `
        <div class="flex justify-between items-center mb-4">
            <h2 class="font-bold text-text-dark text-lg">${title}</h2>
            <div class="flex items-center space-x-2">
                <button class="text-text-medium hover:text-tech-blue" title="编辑"><i data-lucide="edit-3" class="w-5 h-5"></i></button>
            </div>
        </div>
        <div>
            <p class="text-sm text-text-medium italic">AI正在根据您的信息自动生成摘要... 您也可以点击右上角编辑按钮手动填写。</p>
        </div>
    `;
    grid.appendChild(moduleEl);
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
}

document.addEventListener('DOMContentLoaded', () => {
    renderBasicInfo();
    renderQuotes();
    renderTagList('interests-container', userData.interests, null, deleteInterest);
    renderTagList('skills-container', userData.skills, null, deleteSkill);
    renderMoodChart();
    setupEventListeners();

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