<!--
 * @Date: 2025-03-20 19:55:21
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-20 20:26:17
 * @FilePath: /vue-vite/src/views/Home.vue
 * @Description: 文件描述
-->
<template>
  <AppLayout title="亲子学院" :rightContent="rightContent">
    <div class="pb-16 bg-gradient-to-b from-white via-green-50/10 to-blue-50/10">
      <!-- Header Section with Welcome & Weather -->
      <div class="px-4 pt-3 pb-4">
        <FrostedGlass class="p-4 rounded-xl mb-4">
          <div class="flex justify-between items-center mb-3">
            <div class="flex items-center">
              <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
                <img
                  src="https://cdn.ipadbiz.cn/mlaj/images/user-avatar-2.jpg"
                  alt="王小明"
                  class="w-full h-full object-cover"
                  @error="handleImageError" />
              </div>
              <div>
                <h2 class="text-xl font-bold">欢迎回来，小明！</h2>
                <p class="text-sm text-gray-500">{{ formatToday() }}</p>
              </div>
            </div>
            <div class="flex items-center text-sm">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
              </svg>
              <span class="ml-1 font-medium">23°C</span>
              <span class="ml-1 text-gray-500">晴朗</span>
            </div>
          </div>

          <!-- User Stats -->
          <div class="flex justify-between text-center py-2">
            <div class="border-r border-gray-200 flex-1">
              <div class="text-lg font-bold">3</div>
              <div class="text-xs text-gray-500">连续打卡</div>
            </div>
            <div class="border-r border-gray-200 flex-1">
              <div class="text-lg font-bold">12</div>
              <div class="text-xs text-gray-500">已学课程</div>
            </div>
            <div class="flex-1">
              <div class="text-lg font-bold">25</div>
              <div class="text-xs text-gray-500">积分</div>
            </div>
          </div>
        </FrostedGlass>

        <!-- Daily Check-in -->
        <FrostedGlass class="p-4 rounded-xl">
          <div class="flex justify-between items-center mb-3">
            <h3 class="font-medium">今日打卡</h3>
            <router-link to="/profile" class="text-green-600 text-sm">打卡记录</router-link>
          </div>

          <div v-if="checkInSuccess" class="bg-green-50 border border-green-200 rounded-lg p-4 text-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-green-500 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <h4 class="text-green-700 font-medium mb-1">打卡成功！</h4>
            <p class="text-green-600 text-sm">+5 积分已添加到您的账户</p>
          </div>
          <template v-else>
            <div class="flex space-x-3 overflow-x-auto py-2">
              <button
                v-for="checkInType in checkInTypes"
                :key="checkInType.id"
                :class="[
                  'flex-shrink-0 flex flex-col items-center p-3 rounded-lg transition-colors',
                  selectedCheckIn?.id === checkInType.id
                    ? 'bg-green-100 border border-green-200'
                    : 'bg-white/70 border border-gray-100 hover:bg-white'
                ]"
                @click="handleCheckInSelect(checkInType)"
              >
                <div :class="[
                  'w-12 h-12 rounded-full flex items-center justify-center mb-1 transition-colors',
                  selectedCheckIn?.id === checkInType.id
                    ? 'bg-green-500 text-white'
                    : 'bg-gray-100 text-gray-500'
                ]">
                  <svg v-if="checkInType.id === 'reading'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                  </svg>
                  <svg v-if="checkInType.id === 'exercise'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                  </svg>
                  <svg v-if="checkInType.id === 'study'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path d="M12 14l9-5-9-5-9 5 9 5z" />
                    <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998a12.078 12.078 0 01.665-6.479L12 14z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998a12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
                  </svg>
                  <svg v-if="checkInType.id === 'reflection'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                  </svg>
                </div>
                <span class="text-xs">{{ checkInType.name }}</span>
              </button>
            </div>

            <div v-if="selectedCheckIn" class="mt-3">
              <textarea
                :placeholder="`请输入${selectedCheckIn.name}内容...`"
                v-model="checkInContent"
                class="w-full p-3 border border-gray-200 rounded-lg text-sm resize-none h-24"
              />
              <button
                class="mt-2 w-full bg-gradient-to-r from-green-500 to-green-600 text-white py-2 rounded-lg flex items-center justify-center"
                @click="handleCheckInSubmit"
                :disabled="isCheckingIn"
              >
                <template v-if="isCheckingIn">
                  <div class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
                  提交中...
                </template>
                <template v-else>提交打卡</template>
              </button>
            </div>
          </template>
        </FrostedGlass>
      </div>

      <!-- Summer Camp Promotion -->
      <div class="px-4 mb-6">
        <SummerCampCard />
      </div>

      <!-- Featured Courses Carousel -->
      <div class="mb-6">
        <div class="px-4 mb-2">
          <h3 class="font-medium">精选课程</h3>
        </div>
        <div class="relative">
          <div
            ref="carouselRef"
            class="flex overflow-x-scroll snap-x snap-mandatory"
            style="scrollbar-width: none; -ms-overflow-style: none;"
          >
            <div
              v-for="(course, index) in courses.slice(0, 4)"
              :key="course.id"
              class="flex-shrink-0 w-full snap-center px-4"
            >
              <div class="relative rounded-xl overflow-hidden shadow-lg h-48">
                <img
                  :src="course.imageUrl || 'https://cdn.ipadbiz.cn/mlaj/images/featured-course.jpg'"
                  :alt="course.title"
                  class="w-full h-full object-cover"
                />
                <div class="absolute inset-0 bg-gradient-to-b from-transparent via-black/20 to-black/60 flex flex-col justify-end p-4">
                  <div class="bg-amber-500/90 text-white px-2 py-1 rounded-full text-xs font-medium inline-block w-fit mb-1">
                    {{ course.category }}
                  </div>
                  <h2 class="text-2xl font-bold text-white drop-shadow-md">{{ course.title }}</h2>
                  <p class="text-white/90 text-sm drop-shadow-sm mb-1">{{ course.subtitle }}</p>
                  <div class="flex justify-between items-center">
                    <div class="flex items-center">
                      <div class="flex">
                        <svg
                          v-for="i in 5"
                          :key="i"
                          xmlns="http://www.w3.org/2000/svg"
                          :class="[`h-4 w-4`, i <= course.rating ? 'text-amber-400' : 'text-gray-300']"
                          viewBox="0 0 20 20"
                          fill="currentColor"
                        >
                          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                        </svg>
                      </div>
                      <span class="text-white text-xs ml-1">{{ course.ratingCount }}人评</span>
                    </div>
                    <router-link
                      :to="`/courses/${course.id}`"
                      class="bg-white/90 text-green-600 px-3 py-1 rounded-full text-xs font-medium"
                    >
                      立即学习
                    </router-link>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Carousel Indicators -->
          <div class="flex justify-center mt-4">
            <button
              v-for="(_, index) in courses.slice(0, 4)"
              :key="index"
              @click="scrollToSlide(index)"
              :class="[
                'w-2 h-2 mx-1 rounded-full',
                currentSlide === index ? 'bg-green-600' : 'bg-gray-300'
              ]"
            />
          </div>
        </div>
      </div>

      <!-- Tab Navigation -->
      <div class="px-4 border-b border-gray-200">
        <div class="flex space-x-6">
          <button
            v-for="tab in ['推荐', '直播', '精选']"
            :key="tab"
            @click="activeTab = tab"
            :class="[
              'pb-3 px-1 font-medium',
              activeTab === tab
                ? 'text-green-600 border-b-2 border-green-600'
                : 'text-gray-500'
            ]"
          >
            {{ tab }}
            <span
              v-if="tab === '直播'"
              class="ml-1 px-1.5 py-0.5 bg-red-500 text-white text-xs rounded-full"
            >
              2
            </span>
          </button>
        </div>
      </div>

      <!-- Content Based on Active Tab -->
      <div class="px-4 mt-5">
        <!-- Recommended Content -->
        <div v-if="activeTab === '推荐'">
          <!-- Personalized Recommendations -->
          <section class="mb-7">
            <div class="flex justify-between items-center mb-3">
              <h3 class="font-medium">为您推荐</h3>
              <button class="text-xs text-gray-500 flex items-center">
                换一批
                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                </svg>
              </button>
            </div>
            <div class="grid grid-cols-2 gap-4">
              <FrostedGlass
                v-for="(item, index) in userRecommendations"
                :key="index"
                class="p-3 rounded-xl"
              >
                <div class="flex flex-col h-full">
                  <div class="h-28 mb-2 rounded-lg overflow-hidden">
                    <img
                      :src="item.image"
                      :alt="item.title"
                      class="w-full h-full object-cover"
                      @error="handleImageError"
                    />
                  </div>
                  <h4 class="font-medium text-sm mb-1 line-clamp-1">{{ item.title }}</h4>
                  <p class="text-xs text-gray-500 flex items-center mt-auto">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    {{ item.duration }}
                  </p>
                </div>
              </FrostedGlass>
            </div>
          </section>

          <!-- Recent Activities -->
          <section class="mb-7">
            <div class="flex justify-between items-center mb-3">
              <h3 class="font-medium">最新活动</h3>
              <router-link to="/activities" class="text-xs text-gray-500 flex items-center">
                更多
                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
              </router-link>
            </div>
            <div class="space-y-4">
              <ActivityCard
                v-for="activity in activities.slice(0, 3)"
                :key="activity.id"
                :activity="activity"
              />
            </div>
          </section>

          <!-- Popular Courses -->
          <section>
            <div class="flex justify-between items-center mb-3">
              <h3 class="font-medium">热门课程</h3>
              <router-link to="/courses" class="text-xs text-gray-500 flex items-center">
                更多
                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
              </router-link>
            </div>
            <div class="space-y-4">
              <CourseCard
                v-for="course in courses.slice(0, 3)"
                :key="course.id"
                :course="course"
              />
            </div>
          </section>
        </div>

        <!-- Live Content -->
        <div v-if="activeTab === '直播'">
          <section>
            <div class="flex justify-between items-center mb-3">
              <h3 class="font-medium">正在直播</h3>
              <div class="text-xs text-red-500 flex items-center">
                <div class="w-2 h-2 bg-red-500 rounded-full mr-1 animate-pulse"></div>
                2个直播中
              </div>
            </div>
            <div class="grid grid-cols-2 gap-4 mb-7">
              <LiveStreamCard
                v-for="stream in liveStreams"
                :key="stream.id"
                :stream="stream"
              />
            </div>

            <div class="mb-5">
              <div class="flex justify-between items-center mb-3">
                <h3 class="font-medium">直播日历</h3>
                <router-link to="/live-calendar" class="text-xs text-blue-500">
                  查看日历
                </router-link>
              </div>
              <FrostedGlass class="p-3 rounded-xl">
                <div class="flex space-x-2 overflow-x-auto py-1">
                  <div
                    v-for="(day, i) in ['今天', '明天', '周三', '周四', '周五', '周六', '周日']"
                    :key="day"
                    :class="[
                      'flex-shrink-0 w-10 h-14 flex flex-col items-center justify-center rounded-lg',
                      i === 0 ? 'bg-green-500 text-white' : 'bg-white/50'
                    ]"
                  >
                    <div class="text-xs">{{ day }}</div>
                    <div class="font-bold mt-1">{{ new Date().getDate() + i }}</div>
                  </div>
                </div>
              </FrostedGlass>
            </div>

            <div>
              <h3 class="font-medium mb-3">直播预告</h3>
              <div class="space-y-3">
                <FrostedGlass
                  v-for="(item, index) in [
                    { title: '亲子阅读会第1期', time: '今天 19:30-20:30', image: 'https://cdn.ipadbiz.cn/mlaj/images/live-1.jpg' },
                    { title: '儿童心理健康讲座', time: '明天 20:00-21:00', image: 'https://cdn.ipadbiz.cn/mlaj/images/live-2.jpg' },
                    { title: '家庭教育经验分享', time: '周三 19:00-20:00', image: 'https://cdn.ipadbiz.cn/mlaj/images/live-3.jpg' }
                  ]"
                  :key="index"
                  class="p-3 rounded-xl"
                >
                  <div class="flex justify-between items-center">
                    <div class="flex items-center">
                      <div class="w-12 h-12 bg-green-100 rounded-lg overflow-hidden mr-3 flex-shrink-0">
                        <img
                          :src="item.image"
                          :alt="item.title"
                          class="w-full h-full object-cover"
                          @error="handleImageError"
                        />
                      </div>
                      <div>
                        <h4 class="font-medium text-sm">{{ item.title }}</h4>
                        <p class="text-xs text-gray-500 mt-1">{{ item.time }}</p>
                      </div>
                    </div>
                    <button class="bg-white text-green-600 border border-green-600 px-3 py-1 rounded-full text-xs flex-shrink-0">
                      预约
                    </button>
                  </div>
                </FrostedGlass>
              </div>
            </div>
          </section>
        </div>

        <!-- Featured Content -->
        <div v-if="activeTab === '精选'">
          <section>
            <div class="mb-5">
              <h3 class="font-medium mb-3">精选内容</h3>
              <FrostedGlass class="p-4 rounded-xl">
                <div class="flex flex-col">
                  <div class="inline-block px-2 py-1 bg-blue-100 text-blue-600 text-xs rounded-full mb-2 w-fit">
                    独家专栏
                  </div>
                  <h4 class="font-medium text-lg mb-2">《如何培养孩子的阅读习惯》</h4>
                  <p class="text-gray-600 text-sm mb-4 line-clamp-2">
                    阅读习惯的培养是一个长期过程，本文将分享如何从日常生活点滴培养孩子的阅读兴趣和习惯...
                  </p>
                  <router-link to="/articles/1" class="text-green-600 text-sm font-medium">
                    查看完整文章
                  </router-link>
                </div>
              </FrostedGlass>
            </div>

            <div>
              <h3 class="font-medium mb-3">推荐视频</h3>
              <div class="space-y-4">
                <div
                  v-for="(item, index) in [
                    { title: '亲子沟通的艺术', views: '1.2万', duration: '08:25', image: 'https://cdn.ipadbiz.cn/mlaj/images/video-1.jpg' },
                    { title: '如何做好家庭教育', views: '8千', duration: '12:40', image: 'https://cdn.ipadbiz.cn/mlaj/images/video-2.jpg' },
                    { title: '孩子营养餐制作指南', views: '5千', duration: '15:18', image: 'https://cdn.ipadbiz.cn/mlaj/images/video-3.jpg' }
                  ]"
                  :key="index"
                  class="relative rounded-xl overflow-hidden shadow-md h-48"
                >
                  <img
                    :src="item.image"
                    :alt="item.title"
                    class="w-full h-full object-cover"
                    @error="handleImageError"
                  />
                  <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/70 flex flex-col justify-end p-4">
                    <h4 class="text-white font-medium mb-1">{{ item.title }}</h4>
                    <div class="flex justify-between items-center">
                      <p class="text-white/80 text-xs">{{ item.views }}次播放 · {{ item.duration }}</p>
                      <button class="bg-white/20 backdrop-blur-sm p-2 rounded-full">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" viewBox="0 0 20 20" fill="currentColor">
                          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
                        </svg>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </AppLayout>
</template>

<script setup lang="jsx">
import { ref, onMounted, onUnmounted, defineComponent, h } from 'vue'
import AppLayout from '@/components/layout/AppLayout.vue'
import FrostedGlass from '@/components/ui/FrostedGlass.vue'
import CourseCard from '@/components/ui/CourseCard.vue'
import LiveStreamCard from '@/components/ui/LiveStreamCard.vue'
import ActivityCard from '@/components/ui/ActivityCard.vue'
import SummerCampCard from '@/components/ui/SummerCampCard.vue'
import { courses, liveStreams, activities, checkInTypes, userRecommendations } from '@/utils/mockData'

// 响应式状态
const activeTab = ref('推荐')
const selectedCheckIn = ref(null)
const checkInContent = ref('')
const currentSlide = ref(0)
const isCheckingIn = ref(false)
const checkInSuccess = ref(false)
const carouselRef = ref(null)

// 右侧内容组件
const RightContent = defineComponent({
  setup() {
    return () => (
      <div class="flex items-center">
        <button class="p-2 mr-1">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
        </button>
        <button class="p-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
          </svg>
        </button>
      </div>
    )
  }
})

const rightContent = h(RightContent)

// 图片加载错误处理
const handleImageError = (e) => {
  e.target.onerror = null
  e.target.src = 'https://cdn.ipadbiz.cn/mlaj/images/user-avatar-2.jpg'
}

// 格式化今天的日期
const formatToday = () => {
  const today = new Date()
  const options = { month: 'long', day: 'numeric', weekday: 'long' }
  return today.toLocaleDateString('zh-CN', options)
}

// 轮播图滚动到指定位置
const scrollToSlide = (index) => {
  if (carouselRef.value) {
    const slideWidth = carouselRef.value.offsetWidth
    carouselRef.value.scrollTo({
      left: index * slideWidth,
      behavior: 'smooth'
    })
    currentSlide.value = index
  }
}

// 处理打卡类型选择
const handleCheckInSelect = (checkInType) => {
  selectedCheckIn.value = checkInType
  checkInContent.value = ''
}

// 处理打卡提交
const handleCheckInSubmit = () => {
  if (!checkInContent.value.trim()) return

  isCheckingIn.value = true

  // 模拟API调用
  setTimeout(() => {
    isCheckingIn.value = false
    checkInSuccess.value = true
    selectedCheckIn.value = null
    checkInContent.value = ''

    // 3秒后重置成功提示
    setTimeout(() => {
      checkInSuccess.value = false
    }, 3000)
  }, 1500)
}

// 自动轮播
let carouselInterval
onMounted(() => {
  carouselInterval = setInterval(() => {
    if (carouselRef.value) {
      const nextSlide = (currentSlide.value + 1) % courses.slice(0, 4).length
      scrollToSlide(nextSlide)
    }
  }, 5000)
})

onUnmounted(() => {
  if (carouselInterval) {
    clearInterval(carouselInterval)
  }
})
</script>