<template>
  <div class="bg-light-gray font-sans text-text-dark">
    <div id="app-container" class="antialiased">
      <!-- App Header -->
      <header class="fixed top-0 left-0 right-0 z-40 bg-white/90 backdrop-blur-md border-b border-gray-200/80">
        <div class="container mx-auto px-4 h-16 flex items-center justify-between relative">
          <button @click="goBack" class="text-text-medium hover:text-tech-blue transition-colors">
            <i data-lucide="chevron-left" class="w-6 h-6"></i>
          </button>
          <h1 class="text-lg font-semibold text-text-dark absolute left-1/2 -translate-x-1/2">消息中心</h1>
          <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>
        </div>
      </header>

      <main class="pt-20 pb-8 bg-light-gray min-h-screen">
        <div class="container mx-auto px-6">
          <div id="message-list" class="max-w-3xl mx-auto space-y-4">
            <div
              v-for="(msg, index) in messages"
              :key="index"
              class="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"
              :style="{ animationDelay: `${index * 0.1}s` }"
            >
              <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" :class="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>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 消息数据
const messages = ref([
  {
    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 goBack = () => {
  router.back()
}

// 生命周期
onMounted(() => {
  // 初始化Lucide图标
  if (window.lucide) {
    window.lucide.createIcons()
  }

  // 延迟初始化图标
  setTimeout(() => {
    if (window.lucide) {
      window.lucide.createIcons()
    }
  }, 100)
})
</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-warm-orange { color: var(--warm-orange); }
.text-text-dark { color: var(--text-dark); }
.text-text-medium { color: var(--text-medium); }
.border-tech-blue { border-color: var(--tech-blue); }

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out forwards;
  opacity: 0;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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