<template>
  <AppLayout :rightContent="rightContent">
    <div class="pb-24">
      <!-- Course Header -->
      <div class="px-4">
        <div class="bg-gradient-to-b from-red-500 to-red-600 p-4 mb-4 rounded-b-3xl shadow-lg">
          <div v-if="course?.group_type_title" class="bg-white/10 backdrop-blur-sm rounded-lg p-3 mb-3 inline-block">
            <div class="text-white font-semibold">{{ course?.group_type_title }}</div>
          </div>
          <h1 class="text-2xl text-white font-bold mb-1">{{ course?.title }}</h1>
          <h2 class="text-lg text-white/90">{{ course?.subtitle }}</h2>
          <div class="mt-4 flex justify-between items-center">
            <div class="text-orange-300 font-bold text-2xl">¥{{ course?.price }}</div>
            <div class="bg-orange-500/30 text-orange-100 text-xs px-3 py-1 rounded-full">
              限时优惠
            </div>
          </div>
          <div class="flex justify-between text-xs text-white/80 mt-3">
            <div>已更新{{ course?.count }}期</div>
            <div>{{ course?.buy_count }}人订阅</div>
          </div>
          <div v-if="course?.expireDate" class="text-xs text-white/80 mt-1">
            有效期: {{ course?.expireDate || '没有字段' }}
          </div>
        </div>
      </div>

      <!-- Course Main Content -->
      <div class="px-4">
        <!-- Course Details -->
        <FrostedGlass class="mb-4 p-4 rounded-xl">
          <h3 class="text-lg font-bold text-gray-800 mb-3">本课程介绍</h3>
          <p v-html="course?.introduce" class="text-gray-700 whitespace-pre-line"></p>
        </FrostedGlass>

        <!-- Course Image -->
        <div class="mb-6">
          <img :src="course?.cover || 'https://cdn.ipadbiz.cn/mlaj/images/default_block.png'" :alt="course?.title"
            class="w-full h-auto rounded-xl shadow-md" />
        </div>

        <!-- Tab Navigation -->
        <FrostedGlass class="mb-6 rounded-xl overflow-hidden">
          <div class="border-b border-gray-200">
            <div class="flex">
              <button v-for="(item, index) in curriculumItems" :key="index" @click="activeTab = item.title" :class="[
                'flex-1 py-3 font-medium text-center',
                activeTab === item.title
                  ? 'text-green-600 border-b-2 border-green-600 bg-green-50/50'
                  : 'text-gray-500'
              ]">
                {{ item.title }}
              </button>
            </div>
          </div>

          <!-- Tab Content -->
          <div class="p-4">
            <div v-if="activeTab === '课程特色'">
              <!-- <ul class="list-disc pl-5 space-y-2 text-gray-700">
                <li>小班授课，更多关注</li>
                <li>名师授课，经验丰富</li>
                <li>随堂练习，巩固知识</li>
                <li>及时反馈，调整教学</li>
              </ul> -->
              <div v-html="course?.feature || 'N/A'"></div>
            </div>

            <div v-if="activeTab === '课程大纲'">
              <div class="space-y-4">
                <div v-for="(item, index) in displayedSchedule" :key="index" class="border-l-2 border-green-500 pl-3">
                  <h4 class="font-medium text-gray-800">{{ item.title }}</h4>
                  <p class="text-sm text-gray-600 mt-1">{{ item.duration }}分钟 · {{ item.schedule_time || 'N/A' }}个小节</p>
                </div>
                <div v-if="course?.schedule?.length > 4" class="flex justify-center mt-4">
                  <button @click="toggleSchedule"
                    class="p-2 rounded-full hover:bg-green-50 text-green-600 hover:text-green-700 transition-all duration-300">
                    <van-icon :name="isScheduleExpanded ? 'arrow-up' : 'arrow-down'"
                      class="text-xl transform transition-transform duration-300" />
                  </button>
                </div>
              </div>
            </div>

            <div v-if="activeTab === '课程亮点'">
              <div class="space-y-3 text-gray-700">
                <div v-html="course?.highlights || 'N/A'"></div>
              </div>
            </div>

            <div v-if="activeTab === '学习目标'">
              <div class="space-y-3 text-gray-700">
                <div v-html="course?.learning_goal || 'N/A'"></div>
              </div>
            </div>
          </div>
        </FrostedGlass>

        <!-- Teacher Introduction -->
        <FrostedGlass class="mb-6 p-4 rounded-xl">
          <h3 class="text-lg font-bold text-gray-800 mb-3">主讲老师</h3>
          <div class="flex items-center">
            <div class="w-16 h-16 rounded-full overflow-hidden mr-4">
              <img :src="teacher?.avatar || 'https://cdn.ipadbiz.cn/mlaj/images/default_block.png'" alt="Teacher"
                class="w-full h-full object-cover" @error="handleImageError" />
            </div>
            <div>
              <h4 class="font-bold text-gray-900">{{ teacher?.name || '没字段' }}</h4>
              <p class="text-sm text-gray-600">{{ teacher?.position || '没字段' }}</p>
              <p class="text-xs text-gray-500 mt-1">{{ teacher?.description || '没字段' }}</p>
            </div>
          </div>
        </FrostedGlass>

        <!-- Student Reviews -->
        <FrostedGlass class="mb-6 p-4 rounded-xl">
          <h3 class="text-lg font-bold text-gray-800 mb-3">学员评价</h3>
          <div class="flex items-center mb-3">
            <div class="flex items-center mr-2">
              <van-rate v-model="commentScore" readonly allow-half color="#facc15" void-color="#e5e7eb" size="20" />
            </div>
            <div class="text-gray-700">{{ commentScore }} ({{ commentTotal }}条评论)</div>
          </div>

          <div class="space-y-4">
            <div v-for="(item, index) in commentList" :key="index" class="border-b border-gray-100 pb-3">
              <div class="flex justify-between">
                <div class="font-medium text-gray-800">{{ item.name }}</div>
                <div class="text-xs text-gray-500">{{ formatDate(item.created_time) }}</div>
              </div>
              <p class="text-sm text-gray-600 mt-1">
                {{ item.note }}
              </p>
            </div>
          </div>
          <button @click="router.push(`/courses/${course?.id}/reviews`)"
            class="w-full text-center text-green-600 mt-3 text-sm">
            查看全部评价
          </button>
        </FrostedGlass>
      </div>

      <!-- Bottom Action Bar -->
      <div class="fixed bottom-16 left-0 right-0 bg-white shadow-lg p-3 flex justify-between items-center">
        <div class="flex space-x-4">
          <!-- <button class="flex flex-col items-center text-gray-500 text-xs">
            <svg
              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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
              />
            </svg>
            咨询
          </button> -->
          <!-- <button class="flex flex-col items-center text-gray-500 text-xs">
            <svg
              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="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
              />
            </svg>
            分享
          </button> -->
          <button class="flex flex-col items-center text-gray-500 text-xs transition-transform duration-300"
            @click="toggleFavorite" :class="{ 'animate-favorite': isFavorite }">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transition-transform duration-300"
              :fill="isFavorite ? 'red' : 'none'" viewBox="0 0 24 24" :stroke="isFavorite ? 'red' : 'currentColor'">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M4.318 6.318 a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682 a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318 a4.5 4.5 0 00-6.364 0z" />
            </svg>
            收藏
          </button>
        </div>
        <div class="flex items-center">
          <div class="mr-2">
            <div class="text-red-500 font-bold">¥{{ course?.price || 0 }}</div>
            <div class="text-xs text-gray-400 line-through">
              ¥{{ Math.round((course?.price || 0) * 1.2) }}
            </div>
          </div>
          <van-button v-if="!isPurchased" @click="handlePurchase" round block
            color="linear-gradient(to right, #22c55e, #16a34a)" class="shadow-md">
            立即购买
          </van-button>
          <van-button v-else-if="!isReviewed" @click="showReviewPopup = true" round block
            color="linear-gradient(to right, #3b82f6, #2563eb)" class="shadow-md">
            立即评论
          </van-button>
          <van-button v-else @click="router.push(`/courses/${course?.id}/reviews`)" round block
            color="linear-gradient(to right, #6b7280, #4b5563)" class="shadow-md">
            查看评论
          </van-button>
        </div>
      </div>
    </div>

    <!-- Review Popup -->
    <ReviewPopup v-model:show="showReviewPopup" title="立即评价" @submit="handleReviewSubmit" />
  </AppLayout>
</template>

<script setup lang="jsx">
import { ref, onMounted, defineComponent, h } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useCart } from '@/contexts/cart'
import { useTitle } from '@vueuse/core';
import { showToast } from 'vant';
import { formatDate } from '@/utils/tools'

import AppLayout from '@/components/layout/AppLayout.vue'
import FrostedGlass from '@/components/ui/FrostedGlass.vue'

// 导入接口
import { getCourseDetailAPI, getGroupCommentListAPI, addGroupCommentAPI } from "@/api/course";
import { addFavoriteAPI, cancelFavoriteAPI } from "@/api/favorite";

const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const route = useRoute()
const router = useRouter()

const course = ref(null)
const teacher = ref(null)
const activeTab = ref('课程特色')
// 是否收藏状态
const isFavorite = ref(false)
// 是否已购买状态
const isPurchased = ref(false)
// 是否已评论状态
const isReviewed = ref(false)
const showReviewPopup = ref(false)

const { addToCart, proceedToCheckout } = useCart()

// Handle favorite toggle
// 收藏/取消收藏操作
const toggleFavorite = async () => {
  if (isFavorite.value) {
    const { code, msg } = await cancelFavoriteAPI({
      group_id: course.value.id
    })
    if (code) {
      isFavorite.value = !isFavorite.value
      showToast('取消收藏')
    }
  } else {
    const { code, msg } = await addFavoriteAPI({
      group_id: course.value.id
    })
    if (code) {
      isFavorite.value = !isFavorite.value
      showToast('收藏成功')
    }
  }
}

// Curriculum items
const curriculumItems = [
  { title: '课程特色', active: true },
  { title: '课程大纲', active: false },
  { title: '课程亮点', active: false },
  { title: '学习目标', active: false },
]

// Handle image error
const handleImageError = (e) => {
  e.target.src = ''
}

// Right content component
const RightContent = defineComponent({
  setup() {
    return () => (
      <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="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
          />
        </svg>
      </button>
    )
  },
})

const rightContent = h(RightContent)

// 立即购买操作
const handlePurchase = () => {
  if (course.value) {
    addToCart({
      id: course.value.id,
      type: 'course',
      title: course.value.title,
      price: course.value.price,
      imageUrl: course.value.imageUrl
    })
    proceedToCheckout()
  }
}

// 提交评论操作
const handleReviewSubmit = async (review) => {
  const { code, msg } = await addGroupCommentAPI({
    group_id: course.value?.id,
    note: review.content,
    score: review.rating
  })
  if (code) {
    showToast('评论提交成功')
    isReviewed.value = true
    await fetchCommentList()
  }
}

const commentList = ref([])
const commentScore = ref(0)
const commentTotal = ref(0)

// 获取评论列表
const fetchCommentList = async () => {
  const { code, data } = await getGroupCommentListAPI({
    group_id: course.value?.id,
    page: 0,
    limit: 5
  })
  if (code) {
    commentList.value = data.comment_list
    commentScore.value = data.comment_score || 0
    commentTotal.value = data.comment_count || 0
  }
}

// 初始化
onMounted(async () => {
  const id = route.params.id
  // 调用接口获取课程详情
  const { code, data } = await getCourseDetailAPI({ i: id });
  if (code) {
    const foundCourse = data;
    if (foundCourse) {
      course.value = foundCourse;
      teacher.value = {
        name: '',
        avatar: '',
        position: '',
        description: '',
      }
      isFavorite.value = foundCourse.is_favorite;
      isPurchased.value = foundCourse.is_buy;
      isReviewed.value = foundCourse.is_comment;
      // 获取评论列表
      await fetchCommentList()
    } else {
      // 课程不存在，跳转到课程主页面
      showToast('课程不存在')
      router.push('/courses')
    }
  }
})


const isScheduleExpanded = ref(false)

// 计算显示的课程大纲列表
const displayedSchedule = computed(() => {
  if (!course.value?.schedule) return []
  return isScheduleExpanded.value || course.value.schedule.length <= 4
    ? course.value.schedule
    : course.value.schedule.slice(0, 4)
})

// 切换课程大纲展开/收起状态
const toggleSchedule = () => {
  isScheduleExpanded.value = !isScheduleExpanded.value
}
</script>

<style scoped>
.animate-favorite {
  animation: favorite-animation 0.5s ease;
}

@keyframes favorite-animation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}
</style>