<template>
  <div class="personal-dashboard-page">
    <!-- Header -->
    <header class="bg-white shadow-md z-10 flex-shrink-0">
      <div class="container mx-auto px-4 py-3 flex items-center justify-between relative">
        <div class="flex items-center space-x-4">
          <router-link to="/" class="text-text-medium hover:text-tech-blue transition-colors">
            <i data-lucide="home" class="w-6 h-6"></i>
          </router-link>
          <router-link to="/messages" class="text-text-medium hover:text-tech-blue transition-colors">
            <i data-lucide="bell" class="w-6 h-6"></i>
          </router-link>
        </div>
        <h1 class="text-lg font-bold text-text-dark absolute left-1/2 -translate-x-1/2">个人展板</h1>
        <router-link to="/settings" class="text-text-medium hover:text-tech-blue transition-colors">
          <i data-lucide="user" class="w-6 h-6"></i>
        </router-link>
      </div>
    </header>

    <!-- Main Content -->
    <main class="flex-1 overflow-y-auto p-4 lg:p-6 pb-24">
      <div id="dashboard-grid" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        
        <!-- Basic Info Card -->
        <div class="bg-white p-6 rounded-xl shadow-sm">
          <div class="flex justify-between items-center mb-4">
            <h2 class="font-bold text-text-dark text-lg">基础信息</h2>
            <i data-lucide="user-round" class="text-tech-blue"></i>
          </div>
          <div id="basic-info-container" class="grid grid-cols-2 gap-4 text-sm">
            <div class="flex flex-col">
              <span class="text-text-medium">用户名</span>
              <span class="font-semibold text-text-dark">开心用户</span>
            </div>
            <div class="flex flex-col">
              <span class="text-text-medium">注册时间</span>
              <span class="font-semibold text-text-dark">2024年1月</span>
            </div>
            <div class="flex flex-col">
              <span class="text-text-medium">日记数量</span>
              <span class="font-semibold text-text-dark">42篇</span>
            </div>
            <div class="flex flex-col">
              <span class="text-text-medium">连续记录</span>
              <span class="font-semibold text-text-dark">15天</span>
            </div>
          </div>
        </div>

        <!-- Mood Chart Card -->
        <div class="bg-white p-6 rounded-xl shadow-sm">
          <div class="flex justify-between items-center mb-4">
            <h2 class="font-bold text-text-dark text-lg">近期心情统计</h2>
            <i data-lucide="activity" class="text-warm-orange"></i>
          </div>
          <div class="relative h-48">
            <canvas id="moodChart"></canvas>
          </div>
        </div>

        <!-- Interests Card -->
        <div class="bg-white p-6 rounded-xl shadow-sm">
          <div class="flex justify-between items-center mb-4">
            <h2 class="font-bold text-text-dark text-lg">兴趣爱好</h2>
            <button 
              @click="addInterest"
              class="text-text-medium hover:text-tech-blue transition-colors" 
              title="添加兴趣"
            >
              <i data-lucide="plus" class="w-5 h-5"></i>
            </button>
          </div>
          <div id="interests-container" class="flex flex-wrap gap-2 text-sm min-h-[36px]">
            <span class="bg-tech-blue/10 text-tech-blue px-3 py-1 rounded-full">阅读</span>
            <span class="bg-tech-blue/10 text-tech-blue px-3 py-1 rounded-full">音乐</span>
            <span class="bg-tech-blue/10 text-tech-blue px-3 py-1 rounded-full">旅行</span>
            <span class="bg-tech-blue/10 text-tech-blue px-3 py-1 rounded-full">摄影</span>
          </div>
          <div class="mt-4">
            <button 
              @click="exploreInterests"
              class="w-full text-sm bg-tech-blue/10 text-tech-blue font-semibold py-2 px-4 rounded-lg hover:bg-tech-blue/20 transition-colors flex items-center justify-center space-x-2"
            >
              <i data-lucide="sparkles" class="w-4 h-4"></i>
              <span>探索可能发展的爱好</span>
            </button>
          </div>
        </div>

        <!-- Skills Card -->
        <div class="bg-white p-6 rounded-xl shadow-sm">
          <div class="flex justify-between items-center mb-4">
            <h2 class="font-bold text-text-dark text-lg">生活技能</h2>
            <button 
              @click="addSkill"
              class="text-text-medium hover:text-tech-blue transition-colors" 
              title="添加技能"
            >
              <i data-lucide="plus" class="w-5 h-5"></i>
            </button>
          </div>
          <div id="skills-container" class="flex flex-wrap gap-2 text-sm min-h-[36px]">
            <span class="bg-warm-orange/10 text-warm-orange px-3 py-1 rounded-full">烹饪</span>
            <span class="bg-warm-orange/10 text-warm-orange px-3 py-1 rounded-full">绘画</span>
            <span class="bg-warm-orange/10 text-warm-orange px-3 py-1 rounded-full">编程</span>
          </div>
          <div class="mt-4">
            <button 
              @click="exploreSkills"
              class="w-full text-sm bg-tech-blue/10 text-tech-blue font-semibold py-2 px-4 rounded-lg hover:bg-tech-blue/20 transition-colors flex items-center justify-center space-x-2"
            >
              <i data-lucide="flask-conical" class="w-4 h-4"></i>
              <span>探索可能发展的技能</span>
            </button>
          </div>
        </div>
        
        <!-- Personal Quotes Module -->
        <div class="lg:col-span-2 bg-white p-6 rounded-xl shadow-sm">
          <div class="flex justify-between items-center mb-4">
            <h2 class="font-bold text-text-dark text-lg">个人语录</h2>
            <button 
              @click="addQuote"
              class="text-text-medium hover:text-tech-blue transition-colors" 
              title="添加语录"
            >
              <i data-lucide="plus-square" class="w-5 h-5"></i>
            </button>
          </div>
          <div id="quotes-container" class="space-y-4">
            <div class="bg-gray-50 p-4 rounded-lg border-l-4 border-tech-blue">
              <p class="text-text-dark italic">"每一天都是新的开始，每一次尝试都是成长的机会。"</p>
              <p class="text-text-medium text-xs mt-2">2024年1月15日</p>
            </div>
            <div class="bg-gray-50 p-4 rounded-lg border-l-4 border-warm-orange">
              <p class="text-text-dark italic">"困难是成长路上的垫脚石，而不是绊脚石。"</p>
              <p class="text-text-medium text-xs mt-2">2024年1月10日</p>
            </div>
          </div>
        </div>

        <!-- Dynamic modules will be added here -->

      </div>

      <!-- Add custom module button -->
      <div class="mt-6 text-center">
        <button 
          @click="addCustomModule"
          class="bg-warm-orange text-white px-6 py-3 rounded-full font-semibold hover:bg-orange-600 transition-all duration-300 transform hover:scale-105 shadow-lg shadow-orange-500/30 flex items-center justify-center space-x-2 mx-auto"
        >
          <i data-lucide="layout-template" class="w-5 h-5"></i>
          <span>自由添加模块</span>
        </button>
      </div>
      
    </main>
    
    <!-- App Navigation -->
    <BottomNavigation />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import BottomNavigation from '@/components/layout/BottomNavigation.vue'

// 响应式数据
const interests = ref(['阅读', '音乐', '旅行', '摄影'])
const skills = ref(['烹饪', '绘画', '编程'])
const quotes = ref([
  {
    text: '"每一天都是新的开始，每一次尝试都是成长的机会。"',
    date: '2024年1月15日',
    color: 'tech-blue'
  },
  {
    text: '"困难是成长路上的垫脚石，而不是绊脚石。"',
    date: '2024年1月10日',
    color: 'warm-orange'
  }
])

// 添加兴趣
const addInterest = () => {
  // TODO: 实现添加兴趣逻辑
  console.log('添加兴趣')
}

// 探索兴趣
const exploreInterests = () => {
  // TODO: 实现探索兴趣逻辑
  console.log('探索兴趣')
}

// 添加技能
const addSkill = () => {
  // TODO: 实现添加技能逻辑
  console.log('添加技能')
}

// 探索技能
const exploreSkills = () => {
  // TODO: 实现探索技能逻辑
  console.log('探索技能')
}

// 添加语录
const addQuote = () => {
  // TODO: 实现添加语录逻辑
  console.log('添加语录')
}

// 添加自定义模块
const addCustomModule = () => {
  // TODO: 实现添加自定义模块逻辑
  console.log('添加自定义模块')
}

// 生命周期
onMounted(() => {
  // 初始化Lucide图标
  if (window.lucide) {
    window.lucide.createIcons()
  }
  
  // TODO: 初始化心情图表
  // 这里可以集成Chart.js来绘制心情统计图表
})
</script>

<style scoped>
/* 导入原始样式变量 */
:root {
  --tech-blue: #4A90E2;
  --warm-orange: #F5A623;
  --white: #FFFFFF;
  --light-gray: #F7F8FA;
  --text-dark: #333333;
  --text-medium: #888888;
}

/* 应用原始样式类 */
.bg-tech-blue { background-color: var(--tech-blue); }
.bg-warm-orange { background-color: var(--warm-orange); }
.bg-light-gray { background-color: var(--light-gray); }
.text-tech-blue { color: var(--tech-blue); }
.text-text-dark { color: var(--text-dark); }
.text-text-medium { color: var(--text-medium); }
.border-tech-blue { border-color: var(--tech-blue); }

.personal-dashboard-page {
  font-family: 'Noto Sans SC', sans-serif;
  background-color: var(--light-gray);
  color: var(--text-dark);
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* 全局样式 */
body {
  font-family: 'Noto Sans SC', sans-serif;
}
</style> 