<!-- pages/course/index.vue -->
<template>
  <!-- 滚动内容区域 -->
  <scroll-view scroll-y="false" class="scroll-container">
    <view class="tab-page">
      <PageHeader title="课程" subtitle="精品团课 · 私教 · 线上课" />

      <!-- 骨架屏 -->
      <view v-if="loading" class="skeleton-container">
        <view class="skeleton-item" v-for="i in 3" :key="i">
          <view class="skeleton-img"></view>
          <view class="skeleton-text"></view>
        </view>
      </view>

      <!-- 真实内容 -->
      <template v-else>
        <RecommendCourses :data="courseData" />
        
        <view class="tab-page__actions">
          <view class="tab-page__btn" hover-class="tab-page__btn--hover" @tap="goCourseList">
            <text class="tab-page__btn-text">预约课程</text>
          </view>
          <view class="tab-page__btn tab-page__btn--ghost" hover-class="tab-page__btn--hover" @tap="goMyCourses">
            <text class="tab-page__btn-text tab-page__btn-text--ghost">我的课程</text>
          </view>
        </view>
      </template>

      <view class="bottom-placeholder"></view>
    </view>
  </scroll-view>
  
  <!-- 固定 TabBar -->
  <view class="tabbar-fixed">
    <TabBar @update:active="handleTabActive" />
  </view>
</template>

<script setup>
	import { ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import RecommendCourses from '@/components/index/RecommendCourses.vue'
import PageHeader from '@/components/index/PageHeader.vue'
import TabBar from '@/components/TabBar.vue'
import { PAGE, navigateToPage } from '@/common/constants/routes.js'
import { getActiveRecommendCourses } from '@/api/groupCourse.js'

const loading = ref(true)
const courseData = ref(null)

// 从缓存加载数据
function loadFromCache() {
  try {
    const cached = uni.getStorageSync('course_cache')
    if (cached && Date.now() - cached.time < 5 * 60 * 1000) {
      console.log('[Course Page] 从缓存加载数据，缓存时间:', new Date(cached.time).toLocaleString())
      courseData.value = cached.data
      loading.value = false
      return true
    }
  } catch (e) {
    console.error('[Course Page] 读取缓存失败', e)
  }
  console.log('[Course Page] 缓存不存在或已过期，准备从网络加载')
  return false
}

// 从网络加载数据
async function loadFromNetwork() {
  loading.value = true
  console.log('[Course Page] 开始从后端获取团课推荐数据...')
  
  try {
    // 获取启用的团课推荐列表（按优先级从高到低排序）
    console.log('[Course Page] 发起 API 请求: GET /groupCourse/recommend/active')
    const res = await getActiveRecommendCourses()
    
    console.log('[Course Page] API 响应数据:', res)
    
    if (res && Array.isArray(res)) {
      console.log('[Course Page] 获取到', res.length, '条团课推荐数据')
      
      // 取优先级最高的5个团课
      const top5Courses = res.slice(0, 5).map(recommend => ({
        id: recommend.groupCourse.id,
        courseName: recommend.groupCourse.courseName,
        courseType: recommend.groupCourse.courseType,
        startTime: recommend.groupCourse.startTime,
        endTime: recommend.groupCourse.endTime,
        maxMembers: recommend.groupCourse.maxMembers,
        currentMembers: recommend.groupCourse.currentMembers,
        status: recommend.groupCourse.status,
        coverImage: recommend.groupCourse.coverImage,
        description: recommend.groupCourse.description,
        recommendTitle: recommend.recommendTitle,
        recommendContent: recommend.recommendContent,
        recommendReason: recommend.recommendReason,
        priority: recommend.priority
      }))
      
      console.log('[Course Page] 筛选出前5个优先级最高的团课:', top5Courses)
      courseData.value = { list: top5Courses }
      
      // 更新缓存
      uni.setStorageSync('course_cache', {
        data: courseData.value,
        time: Date.now()
      })
      console.log('[Course Page] 数据已缓存')
    } else {
      console.log('[Course Page] API 响应为空或格式不正确')
      courseData.value = { list: [] }
    }
  } catch (err) {
    console.error('[Course Page] 加载失败:', err)
    uni.showToast({ title: '加载失败', icon: 'none' })
    courseData.value = { list: [] }
  } finally {
    loading.value = false
    console.log('[Course Page] 数据加载完成，loading:', loading.value)
  }
}

// 页面激活时刷新数据（可选）
function handleTabActive(index) {
  // Tab 切换时后台刷新数据
  if (index === 1 && !loading.value) {
    loadFromNetwork()
  }
}

onLoad(() => {
  // 优先显示缓存
  const hasCache = loadFromCache()
  if (!hasCache) {
    loadFromNetwork()
  } else {
    // 后台静默更新
    setTimeout(() => {
      loadFromNetwork()
    }, 100)
  }
})

onShow(() => {
  // 每次显示时尝试刷新数据（后台静默更新）
  if (!loading.value) {
    loadFromNetwork()
  }
})

function goCourseList() {
  navigateToPage(PAGE.COURSE_LIST)
}

function goMyCourses() {
  navigateToPage(PAGE.MY_COURSES)
}
</script>

<style lang="scss" scoped>
.tab-page {
  min-height: 100vh;
  padding-bottom: 160rpx;
  position: relative;
  z-index: 2;
  background: #F5F7FA;
}



.tab-page__actions {
  display: flex;
  gap: 20rpx;
  padding: 24rpx 32rpx;
}

.tab-page__btn {
  flex: 1;
  height: 80rpx;
  border-radius: $radius-full;
  background: $gradient-orange;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: $shadow-orange-glow;
  transition: all 0.2s ease;
}

.tab-page__btn:active {
  transform: scale(0.97);
  background: $accent-orange-dark;
}

.tab-page__btn--ghost {
  background: $bg-white;
  border: 1px solid $border-light;
  box-shadow: $shadow-sm;
}

.tab-page__btn-text {
  font-size: 28rpx;
  font-weight: $font-weight-bold;
  color: $text-inverse;
}

.tab-page__btn-text--ghost {
  color: $primary-deep;
}

.bottom-placeholder {
  height: 40rpx;
}

/* 骨架屏样式 */
.skeleton-container {
  padding: 24rpx 32rpx;
}

.skeleton-item {
  margin-bottom: 24rpx;
  padding: 20rpx;
  background: $bg-white;
  border-radius: $radius-md;
  box-shadow: $shadow-sm;
}

.skeleton-img {
  width: 100%;
  height: 200rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: $radius-sm;
}

.skeleton-text {
  height: 32rpx;
  margin-top: 16rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 8rpx;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 滚动容器 */
.scroll-container {
  position: relative;
  z-index: 1;
  height: 100vh;
  width: 100%;
}

/* 固定 TabBar */
.tabbar-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: transparent;
}
</style>