<template>
  <div class="topic-tracker-page antialiased flex flex-col min-h-screen">
    <!-- 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 class="flex-grow pt-8 pb-28">
      <div class="container mx-auto px-6">
        <div class="text-center mb-12 animate-fade-in-up">
          <h1 class="text-3xl md:text-4xl font-bold text-text-dark">洞察你的思绪，整理你的生活</h1>
          <p class="text-base text-text-medium mt-3 max-w-2xl mx-auto">开开会自动梳理你最近关心的事，你也可以手动创建任何想追踪的话题，见证自己的思考与成长。</p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-5 gap-12">
          <div class="lg:col-span-3 animate-fade-in-up" style="animation-delay: 0.2s;">
            <div class="flex items-center mb-6 space-x-3">
              <i data-lucide="brain-circuit" class="w-8 h-8 text-tech-blue"></i>
              <h2 class="text-2xl font-bold text-text-dark">AI 自动总结</h2>
            </div>
            <div id="ai-summary-list" class="space-y-6">
              <!-- AI总结的话题将在这里显示 -->
              <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-200/50">
                <div class="flex items-start justify-between mb-4">
                  <div class="flex items-center space-x-3">
                    <div class="w-3 h-3 bg-tech-blue rounded-full"></div>
                    <h3 class="text-lg font-semibold text-text-dark">工作计划</h3>
                  </div>
                  <span class="text-xs text-text-medium bg-gray-100 px-2 py-1 rounded-full">AI 总结</span>
                </div>
                <p class="text-text-medium text-sm mb-4">基于你最近的对话，开开发现你在关注工作效率和时间管理相关的话题。</p>
                <div class="space-y-3">
                  <div class="border-l-2 border-tech-blue pl-4">
                    <p class="text-sm text-text-dark">讨论了新项目的时间安排</p>
                    <span class="text-xs text-text-medium">3天前</span>
                  </div>
                  <div class="border-l-2 border-tech-blue pl-4">
                    <p class="text-sm text-text-dark">分享了提高工作效率的方法</p>
                    <span class="text-xs text-text-medium">1周前</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="lg:col-span-2 animate-fade-in-up" style="animation-delay: 0.4s;">
            <div class="bg-white p-6 sm:p-8 rounded-2xl shadow-lg border border-gray-200/50 scroll-mt-24">
              <div class="flex items-center mb-6 space-x-3">
                <i data-lucide="plus-circle" class="w-8 h-8 text-warm-orange"></i>
                <h2 class="text-2xl font-bold text-text-dark">我的话题</h2>
              </div>
              <form @submit.prevent="createTopic" class="space-y-4">
                <div>
                  <label for="topic-title" class="block text-sm font-medium text-text-medium mb-1">话题标题</label>
                  <input
                    type="text"
                    id="topic-title"
                    v-model="newTopic.title"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-tech-blue focus:border-transparent transition"
                    placeholder="例如：暑期健身计划"
                    required
                  >
                </div>
                <div>
                  <label for="topic-content" class="block text-sm font-medium text-text-medium mb-1">初始内容</label>
                  <textarea
                    id="topic-content"
                    v-model="newTopic.content"
                    rows="4"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-tech-blue focus:border-transparent transition"
                    placeholder="写下你的计划、想法或任何琐事..."
                    required
                  ></textarea>
                </div>
                <button
                  type="submit"
                  class="w-full bg-warm-orange text-white px-5 py-3 rounded-lg font-semibold hover:bg-orange-600 transition-all duration-300 transform hover:scale-105 shadow-lg shadow-orange-500/30"
                >
                  创建新话题
                </button>
              </form>

              <div class="mt-8 border-t border-gray-200 pt-6">
                <div class="flex items-center mb-4 space-x-3">
                  <i data-lucide="list" class="w-6 h-6 text-text-medium"></i>
                  <h3 class="text-xl font-semibold text-text-dark">已创建的话题</h3>
                </div>
                <div class="space-y-4 max-h-96 overflow-y-auto pr-2">
                  <!-- 用户创建的话题列表 -->
                  <div
                    v-for="topic in userTopics"
                    :key="topic.id"
                    @click="openTopicDetail(topic)"
                    class="p-4 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors"
                  >
                    <h4 class="font-semibold text-text-dark text-sm">{{ topic.title }}</h4>
                    <p class="text-xs text-text-medium mt-1">{{ topic.date }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- App Navigation -->
    <BottomNavigation />

    <!-- Topic Detail Modal -->
    <div
      v-if="showTopicModal"
      class="fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm z-50 flex items-center justify-center p-4"
      @click="closeTopicModal"
    >
      <div
        class="bg-light-gray rounded-2xl shadow-xl w-full max-w-2xl max-h-[90vh] flex flex-col"
        @click.stop
      >
        <div class="p-5 border-b bg-white rounded-t-2xl flex justify-between items-start">
          <div>
            <h2 class="text-2xl font-bold text-text-dark">{{ selectedTopic?.title }}</h2>
            <p class="text-sm text-text-medium">{{ selectedTopic?.date }}</p>
          </div>
          <button
            @click="closeTopicModal"
            class="text-text-medium hover:text-tech-blue transition-colors p-1"
          >
            <i data-lucide="x" class="w-7 h-7"></i>
          </button>
        </div>
        <div class="p-6 overflow-y-auto flex-1">
          <div class="space-y-8">
            <div class="border-l-2 border-tech-blue pl-4">
              <p class="text-sm text-text-dark">{{ selectedTopic?.content }}</p>
              <span class="text-xs text-text-medium">{{ selectedTopic?.date }}</span>
            </div>
          </div>
        </div>
        <div class="p-6 border-t bg-white rounded-b-2xl">
          <h3 class="text-base font-semibold text-text-dark mb-2">添加新进展</h3>
          <form @submit.prevent="addTopicEntry" class="flex items-start space-x-3">
            <textarea
              v-model="newEntry"
              rows="2"
              class="flex-1 w-full bg-white border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-tech-blue transition-shadow text-sm"
              placeholder="为这个话题添加新进展..."
            ></textarea>
            <button
              type="submit"
              class="bg-tech-blue text-white rounded-lg px-4 py-2 h-full font-semibold hover:bg-blue-600 transition-colors flex-shrink-0"
            >
              <i data-lucide="plus" class="w-5 h-5"></i>
            </button>
          </form>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <BottomNavigation />
  </div>
</template>

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

// 响应式数据
const newTopic = ref({
  title: '',
  content: ''
})

const userTopics = ref([
  {
    id: 1,
    title: '暑期健身计划',
    content: '制定了详细的健身计划，包括每周的运动安排和饮食控制。',
    date: '2024年1月15日'
  },
  {
    id: 2,
    title: '学习新技能',
    content: '开始学习Vue.js和TypeScript，希望能在3个月内掌握基础知识。',
    date: '2024年1月10日'
  }
])

const showTopicModal = ref(false)
const selectedTopic = ref(null)
const newEntry = ref('')

// 创建新话题
const createTopic = () => {
  if (newTopic.value.title.trim() && newTopic.value.content.trim()) {
    const topic = {
      id: Date.now(),
      title: newTopic.value.title,
      content: newTopic.value.content,
      date: new Date().toLocaleDateString('zh-CN')
    }
    userTopics.value.unshift(topic)
    newTopic.value = { title: '', content: '' }
    console.log('创建新话题:', topic)
  }
}

// 打开话题详情
const openTopicDetail = (topic: any) => {
  selectedTopic.value = topic
  showTopicModal.value = true
}

// 关闭话题详情
const closeTopicModal = () => {
  showTopicModal.value = false
  selectedTopic.value = null
  newEntry.value = ''
}

// 添加话题进展
const addTopicEntry = () => {
  if (newEntry.value.trim()) {
    // TODO: 实现添加话题进展逻辑
    console.log('添加话题进展:', newEntry.value)
    newEntry.value = ''
  }
}

// 生命周期
onMounted(() => {
  // 初始化Lucide图标
  if (window.lucide) {
    window.lucide.createIcons()
  }
})
</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); }

.topic-tracker-page {
  font-family: 'Noto Sans SC', sans-serif;
  background-color: var(--light-gray);
  color: var(--text-dark);
}

.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>