<template>
  <view class="course-content-wrapper">
    <view 
      v-if="catalogues.length > 1" 
      :class="['catalogue-list', userVip ? 'vip-style' : '']"
    >
      <view
        v-for="(catalogue, index) in catalogues"
        :key="catalogue.id"
        :class="['catalogue-item', currentCatalogueIndex === index ? 'active' : '']"
        @click="handleSelect(index)"
      >
        <text class="catalogue-title">{{ catalogue.title }}</text>
      </view>
    </view>

    <view class="chapter-list">
      <!-- 目录状态信息 -->
      <view class="catalogue-status">
        <view v-if="currentCatalogue?.isBuy === 1 || userVip" class="purchased-info">
          <view class="info-row">
            <text v-if="userVip">
              VIP畅学权益有效期截止到：{{ userVip.endTime }}
            </text>
            <template v-else>
              <text v-if="!currentCatalogue.startTime">
                当前目录还未开始学习
              </text>
              <text v-else>
                课程有效期截止到：{{ currentCatalogue.endTime }}
              </text>
              <!-- <wd-button 
                v-if="currentCatalogue.startTime"
                size="small"
                @click="handleRenew"
              >
                续费
              </wd-button> -->
            </template>
          </view>
        </view>
        
        <!-- 未购买状态 -->
        <view v-else-if="currentCatalogue?.type === 0" class="free-course">
          <wd-button type="success" @click="handleGetFreeCourse">
            {{ $t('courseDetails.free') }}
          </wd-button>
        </view>
        
        <view v-else class="unpurchased-info">
          <text class="tip-text">
            {{ $t('courseDetails.unpurchasedTip') }}
          </text>
          <view class="action-btns">
            <wd-button size="small" type="warning" @click="handlePurchase">
              {{ $t('courseDetails.purchase') }}
            </wd-button>
            <!-- 如果是复读显示复读按钮 -->
            <wd-button v-if="canRenlearn" size="small" type="success" @click="handleRenlearn">
              {{ $t('courseDetails.relearn') }}
            </wd-button>
            <wd-button size="small" type="primary" @click="goToVip">
              {{ $t('courseDetails.openVip') }}
            </wd-button>
          </view>
        </view>
      </view>

      <view v-if="chapterList.length > 0" class="chapter-content">
        <!-- VIP标识 -->
        <view v-if="userVip" class="vip-badge">
          <text>VIP畅学权益生效中</text>
        </view>
        
        <!-- 章节列表 -->
        <view
          v-for="(chapter, index) in chapterList"
          :key="chapter.id"
          class="chapter-item"
          @click="handleChapterClick(chapter)"
        >
          <view class="chapter-content-wrapper">
            <view :class="['chapter-info', !canAccess(chapter) ? 'locked' : '']">
              <text class="chapter-title">{{ chapter.title }}</text>
              
              <!-- 试听标签 -->
              <wd-tag
                v-if="chapter.isAudition === 1 && !isPurchased && !userVip"
                type="success"
                plain
                size="small"
                custom-class="chapter-tag"
              >
                试听
              </wd-tag>
              
              <!-- 学习状态标签 -->
              <template v-if="isPurchased || userVip">
                <wd-tag
                  v-if="chapter.isLearned === 0"
                  type="primary"
                  plain
                  size="small"
                  custom-class="chapter-tag"
                >
                  未学
                </wd-tag>
                <wd-tag
                  v-else
                  type="success"
                  plain
                  size="small"
                  custom-class="chapter-tag"
                >
                  已学
                </wd-tag>
              </template>
            </view>
            
            <!-- 锁定图标 -->
            <view v-if="!canAccess(chapter) && currentCatalogue.type != 0" class="lock-icon">
              <wd-icon name="lock-on" size="24px" color="#258feb" />
            </view>
          </view>
        </view>
      </view>
      
      <!-- 暂无章节 -->
      <view v-else class="no-chapters">
        <text>暂无章节内容</text>
      </view>
    </view>

    <!-- 商品选择器 -->
    <GoodsSelector
      :show="showGoodsSelector"
      :goods="goodsList"
      @select="handleGoodsSelect"
      @confirm="handleGoodsConfirm"
      @close="closeGoodsSelector"
    />
    
    <!-- 购买协议弹窗 -->
    <Protocol :visible="showProtocol" @confirmPurchase="confirmPurchase" />
  </view>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { courseApi } from '@/api/modules/course'
import GoodsSelector from '@/components/order/GoodsSelector.vue'
import Protocol from './Protocol.vue'
import type { IChapter, ICatalogue, IVipInfo } from '@/types/course'
import type { IGoods } from '@/types/order'

interface Props {
  catalogues: ICatalogue[]
  userVip: IVipInfo | null
}

const props = defineProps<Props>()

const emit = defineEmits<{
  click: [chapter: IChapter],
  change: [index: number],
  toVip: [],
  toDetail: [chapter: IChapter, catalogue: ICatalogue],
  loadPageData: [],
}>()

// 当前目录索引
const currentCatalogueIndex = ref<number>(0)
// 当前目录
const currentCatalogue = computed(() => {
  return props.catalogues[currentCatalogueIndex.value]
})
// 当前目录的章节
const chapterList = ref<IChapter[]>([])

// 当前目录是否是复读
const isRelearn = ref<boolean>(false)
const canRenlearn = ref<boolean>(false)

// 判断目录是否已购买
const isPurchased = computed(() => {
  return currentCatalogue.value.isBuy === 1
})

// 商品选择
const showGoodsSelector = ref(false)
const goodsList = ref<IGoods[]>([])
const selectedGoods = ref<IGoods | null>(null)
const showProtocol = ref(false)

/**
 * 选择目录
 */
const handleSelect = (index: number) => {
  if (index === currentCatalogueIndex.value) return

  currentCatalogueIndex.value = index

  getChapters() // 获取章节列表
  checkRenewPayment() // 检查是否支持复读
}

/**
 * 获取当前目录的章节
 */
const getChapters = async () => {
  const res = await courseApi.getCatalogueChapterList(currentCatalogue.value.id)
  chapterList.value = res.chapterList || []
}

/**
 * 检查目录是否支持复读
 */
const checkRenewPayment = async () => {
  if (currentCatalogue.value.isBuy === 0 && !props.userVip) {
    const renewRes = await courseApi.checkRenewPayment(currentCatalogue.value.id)
    canRenlearn.value = renewRes.canRelearn || false
  } else {
    canRenlearn.value = false
  }
}

/**
 * 监听目录变化
 */
watch(() => props.catalogues, (newVal: ICatalogue[]) => {
  if (newVal.length > 0) {
    currentCatalogueIndex.value = 0
    getChapters()
    checkRenewPayment()
  }
}, { immediate: true, deep: true })

// 购买
const handlePurchase = async () => {
  if (!currentCatalogue.value) return
  
  isRelearn.value = false
  const res = await courseApi.getProductListForCourse(currentCatalogue.value.id)
  if (res.code === 0 && res.productList.length > 0) {
    goodsList.value = res.productList
    showGoodsSelector.value = true
  } else {
    uni.showToast({ title: '此课程暂无购买方式', icon: 'none' })
  }
}

/**
 * 选择商品
 */
const handleGoodsSelect = (goods: IGoods) => {
  selectedGoods.value = goods
}

/**
 * 确认购买
 */
const handleGoodsConfirm = () => {
  showGoodsSelector.value = false
  showProtocol.value = true
}

/**
 * 关闭商品选择器
 */
const closeGoodsSelector = () => {
  showGoodsSelector.value = false
}

/**
 * 确认购买协议
 */
const confirmPurchase = () => {
  showProtocol.value = false
  if (!selectedGoods.value) return
  
  showProtocol.value = false

  if (isRelearn.value) {
    uni.navigateTo({
      url: `/pages/order/goodsConfirm?isRelearn=1`,
      success: () => {
        setTimeout(() => {
          uni.$emit('selectedGoods', selectedGoods.value)
        }, 100)
      }
    })
  } else {
    // 跳转到购买确认订单页
    uni.navigateTo({
      url: `/pages/order/goodsConfirm?goods=${selectedGoods.value.productId}`
    })
  }
}

// 去开通vip
const goToVip = () => {
  emit('toVip')
}

// 续费/复读
const handleRenlearn = async () => {
  if (!currentCatalogue.value) return
  
  isRelearn.value = true
  const res = await courseApi.getRenewProductList(currentCatalogue.value.id)
  if (res.productList.length > 0) {
    goodsList.value = res.productList
    showGoodsSelector.value = true
  } else {
    uni.showToast({ title: '暂无复读方案', icon: 'none' })
  }
}

// 领取免费课程
const handleGetFreeCourse = async () => {
  if (!currentCatalogue.value) return
  
  const res = await courseApi.startStudyForMF(currentCatalogue.value.id)
  if (res.code === 0) {
    uni.showToast({ title: '领取成功', icon: 'success' })
    // 刷新页面数据
    emit('loadPageData')
  } else {
    uni.showToast({ title: res.msg || '领取失败', icon: 'none' })
  }
}

/**
 * 判断章节是否可以访问
 */
const canAccess = (chapter: IChapter): boolean => {
  // VIP用户可以访问所有章节
  if (props.userVip) return true
  
  // 已购买目录可以访问所有章节
  if (isPurchased.value) return true
  
  // 试听章节可以访问
  if (chapter.isAudition === 1) return true
  
  // 免费课程可以访问
  // if (currentCatalogue.value.type === 0) return true
  
  return false
}

/**
 * 点击章节
 */
const handleChapterClick = (chapter: IChapter) => {
  if (!canAccess(chapter)) {
    if (currentCatalogue.value.type === 0) {
      uni.showToast({
        title: '请先领取课程',
        icon: 'none'
      })
    } else {
      uni.showToast({
        title: '请先购买课程',
        icon: 'none'
      })
    }
    return
  }
  
  emit('toDetail', chapter, currentCatalogue.value)
}
</script>

<style lang="scss" scoped>
.course-content-wrapper {
  background: linear-gradient(108deg, #c3e7ff 0%, #59bafe 100%);
}
.catalogue-list {
  display: flex;
  align-items: flex-end;
  padding: 20rpx;
  padding-bottom: 0;
  border-radius: 20rpx 20rpx 0 0;
  margin-top: 20rpx;
  
  &.vip-style {
    background: linear-gradient(90deg, #6429db 0%, #0075ed 100%);
    
    .catalogue-item {
      background-color: rgba(0, 0, 0, 0.4);
      color: #fff;
      border-color: #fff;
      
      &.active {
        background-color: #258feb;
        color: #fff;
      }
    }
  }
  
  .catalogue-item {
    flex: 1;
    text-align: center;
    padding: 16rpx 0;
    margin-right: 10rpx;
    border-radius: 20rpx 20rpx 0 0;
    border: 1px solid #fff;
    border-bottom: none;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    transition: all 0.3s;
    
    &:last-child {
      margin-right: 0;
    }
    
    &.active {
      background-color: #258feb;
      padding: 20rpx 0;
      
      .catalogue-title {
        font-size: 36rpx;
        font-weight: bold;
      }
    }
    
    .catalogue-title {
      font-size: 30rpx;
    }
  }
}

.chapter-list {
  padding: 20rpx;
}

.catalogue-status {
  padding: 20rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  
  .purchased-info {
    .info-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 26rpx;
      line-height: 50rpx;
    }
  }
  
  .free-course {
    text-align: center;
  }
  
  .unpurchased-info {
    .tip-text {
      display: block;
      font-size: 26rpx;
      color: #666;
      margin-bottom: 20rpx;
      line-height: 1.6;
    }
    
    .action-btns {
      display: flex;
      gap: 20rpx;
      justify-content: center;
    }
  }
}

.chapter-content {
  position: relative;
  padding: 20rpx;
  border: 4rpx solid #fffffc;
  background: linear-gradient(52deg, #e8f6ff 0%, #e3f2fe 50%);
  box-shadow: 0px 0px 10px 0px #89c8e9;
  border-top-right-radius: 40rpx;
  border-bottom-left-radius: 40rpx;
  
  .vip-badge {
    display: inline-block;
    font-size: 24rpx;
    background: linear-gradient(90deg, #6429db 0%, #0075ed 100%);
    color: #fff;
    padding: 10rpx 20rpx;
    border-radius: 0 50rpx 50rpx 0;
    z-index: 1;
  }
  
  .chapter-item {
    padding: 20rpx 0;
    border-bottom: 1px solid #fff;
    
    &:last-child {
      border-bottom: none;
    }
    
    .chapter-content-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      
      .chapter-info {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 10rpx;
        
        &.locked {
          opacity: 0.6;
        }
        
        .chapter-title {
          flex: 1;
          font-size: 28rpx;
          color: #1e2f3e;
          line-height: 1.5;
        }
        
        .chapter-tag {
          flex-shrink: 0;
        }
      }
      
      .lock-icon {
        margin-left: 20rpx;
        flex-shrink: 0;
      }
    }
  }
}

.no-chapters {
  text-align: center;
  padding: 80rpx 0;
  color: #999;
  font-size: 28rpx;
}
</style>
