<template>
  <view class="search-page">
    <!-- 导航栏 -->
    <nav-bar>
      <template #title>
        <view class="search-box">
          <wd-search
            v-model="keyword"
            hide-cancel
            clearable
            :placeholder="$t('courseSearch.placeholder')"
            @search="handleSearch"
            @clear="handleClear"
          />
        </view>
      </template>
    </nav-bar>

    <!-- 历史搜索区域 -->
    <view v-if="!showResults" class="history-section">
      <view class="history-title">{{ $t('courseSearch.historyTitle') }}</view>
      <view class="history-tags">
        <wd-tag
          v-for="(item, index) in historyList"
          :key="index"
          @click="handleHistoryClick(item)"
        >
          {{ item }}
        </wd-tag>
      </view>
    </view>

    <!-- 搜索结果区域 -->
    <view v-if="showResults" class="search-results">
      <!-- 加载状态 -->
      <view v-if="loading" class="loading-wrapper">
        <wd-loading />
      </view>

      <!-- 课程列表 -->
      <view v-if="!loading && courseList.length > 0" class="course-section">
        <view class="course-list">
          <view
            v-for="(item, index) in courseList"
            :key="index"
            class="course-item"
            @click="goCourseDetail(item.id)"
          >
            <image :src="item.squareImage" class="course-image" mode="aspectFit" />
            <view class="course-info">
              <view class="course-title">{{ item.title }}</view>
              <view class="course-content" v-html="item.content"></view>
              <!-- 课程标签 -->
              <view class="course-tags">
                <wd-tag v-if="item.level && item.level !== 0" type="primary">
                  {{ item.level === 1 ? $t('courseSearch.levelBeginner') : $t('courseSearch.levelAdvanced') }}
                </wd-tag>
                <wd-tag v-if="item.selective === 1" type="warning">
                  {{ $t('courseSearch.required') }}
                </wd-tag>
                <wd-tag v-if="item.selective === 2" type="success">
                  {{ $t('courseSearch.elective') }}
                </wd-tag>
              </view>
            </view>
            <!-- 课程价格 -->
            <view class="course-price">
              <text v-if="item.courseCatalogueEntityList.length === 1">
                {{
                  item.courseCatalogueEntityList[0].halfFee === 0
                    ? $t('courseSearch.free')
                    : `¥${item.courseCatalogueEntityList[0].halfFee}/${item.courseCatalogueEntityList[0].fee}`
                }}
              </text>
              <text v-if="item.courseCatalogueEntityList.length > 1">
                <text v-for="(v, i) in item.courseCatalogueEntityList" :key="i">
                  {{ formatCatalogueTitle(v.title) }}
                  <text v-if="i !== item.courseCatalogueEntityList.length - 1">/</text>
                </text>
                {{
                  item.courseCatalogueEntityList[0].halfFee === 0
                    ? $t('courseSearch.free')
                    : ` ${$t('courseSearch.each')}${item.courseCatalogueEntityList[0].halfFee}/${item.courseCatalogueEntityList[0].fee}`
                }}
              </text>
            </view>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="!loading && isEmpty" class="empty-wrapper">
        <wd-divider :text="$t('courseSearch.noData')" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n'
import { courseApi } from '@/api/modules/course'
import type { ICourse } from '@/types/search'

const { t } = useI18n()

// 状态定义
const keyword = ref<string>('')                    // 搜索关键词
const historyList = ref<string[]>([])              // 历史搜索记录
const courseList = ref<ICourse[]>([])              // 课程列表
const showResults = ref<boolean>(false)            // 是否显示搜索结果
const loading = ref<boolean>(false)                // 加载状态
const isEmpty = ref<boolean>(false)                // 是否为空结果

/**
 * 获取历史搜索记录
 */
const getHistory = () => {
  try {
    let records = uni.getStorageSync('hisRecords') || []
    records = [...new Set(records)]
    if (records.length > 10) {
      records = records.slice(0, 10)
    }
    historyList.value = records
    uni.setStorageSync('hisRecords', records)
  } catch (error) {
    console.error('获取历史记录失败:', error)
    historyList.value = []
  }
}

/**
 * 保存搜索记录
 */
const saveHistory = (kw: string) => {
  try {
    let records = uni.getStorageSync('hisRecords') || []
    records.unshift(kw)
    uni.setStorageSync('hisRecords', records)
  } catch (error) {
    console.error('保存历史记录失败:', error)
  }
}

/**
 * 执行搜索
 */
const handleSearch = async () => {
  if (!keyword.value.trim()) {
    uni.showToast({
      icon: 'none',
      title: t('courseSearch.pleaseInputKeyword')
    })
    return
  }

  loading.value = true
  showResults.value = true
  isEmpty.value = false

  try {
    const res = await courseApi.searchData({
      title: keyword.value.trim()
    })

    if (res.code === 0) {
      courseList.value = res.courseEntities || []
      isEmpty.value = courseList.value.length === 0

      // 保存搜索历史
      saveHistory(keyword.value.trim())
    } else {
      courseList.value = []
      isEmpty.value = true
    }
  } catch (error) {
    console.error('搜索失败:', error)
    uni.showToast({
      icon: 'none',
      title: t('global.networkConnectionError')
    })
    courseList.value = []
    isEmpty.value = true
  } finally {
    loading.value = false
  }
}

/**
 * 点击历史标签搜索
 */
const handleHistoryClick = (item: string) => {
  keyword.value = item
  handleSearch()
}

/**
 * 清空搜索
 */
const handleClear = () => {
  keyword.value = ''
  showResults.value = false
  courseList.value = []
  isEmpty.value = false
  getHistory()
}

/**
 * 跳转到课程详情
 */
const goCourseDetail = (courseId: number) => {
  uni.navigateTo({
    url: `/pages/course/courseDetail?id=${courseId}`
  })
}

/**
 * 格式化课程目录标题
 * 提取"上/中/下"
 */
const formatCatalogueTitle = (title: string): string => {
  const keywords = ['上部', '中部', '下部']
  const result: string[] = []

  keywords.forEach((keyword) => {
    if (title.includes(keyword)) {
      result.push(keyword.substring(0, 1))
    }
  })

  return result.join('')
}

/**
 * 页面挂载
 */
onMounted(() => {
  getHistory()
})

/**
 * 页面显示
 */
onShow(() => {
  getHistory()
})
</script>

<style lang="scss" scoped>
.search-page {
  min-height: 100vh;
  background: #f7faf9;
}

.search-box {
  display: flex;
  height: 100%;
  align-items: center;
  width: 100%;
  --wot-search-padding: 0;
  --wot-search-side-padding: 0;

  :deep(.wd-search) {
    background: transparent;
    width: 100%;
  }
}

// 历史搜索样式
.history-section {
  padding: 40rpx;

  .history-title {
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .history-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
  }
}

// 搜索结果样式
.search-results {
  padding: 20rpx;
}

.loading-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
}

.empty-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
}

.section-title {
  font-size: 40rpx;
  color: #1e40af;
  font-weight: bold;
  letter-spacing: 2rpx;
  margin-bottom: 30rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 122, 255, 0.6);
}

// 商品网格样式
.product-section {
  margin-bottom: 40rpx;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.product-item {
  background: #fff;
  border-radius: 15rpx;
  padding: 14rpx;
  position: relative;
  overflow: hidden;

  .vip-badge {
    position: absolute;
    top: 10rpx;
    left: 10rpx;
    z-index: 10;
    background: #f94f04;
    color: #fff;
    font-size: 22rpx;
    font-weight: bold;
    padding: 4rpx 8rpx;
    border-radius: 4rpx;
  }

  .product-image {
    width: 100%;
    height: 220rpx;
    border-radius: 10rpx;
    background: #f0f0f0;
  }

  .product-name {
    font-size: 24rpx;
    font-weight: bold;
    margin-top: 10rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product-price {
    font-size: 26rpx;
    margin-top: 10rpx;

    .price-vip {
      color: #e97512;
      font-size: 26rpx;
      font-weight: bold;
    }

    .price-original {
      color: #8a8a8a;
      font-size: 22rpx;
      margin-left: 8rpx;
      text-decoration: line-through;
    }

    .price-normal {
      color: #e97512;
      font-size: 26rpx;
      font-weight: bold;
    }
  }
}

// 课程列表样式
.course-section {
  margin-bottom: 40rpx;
}

.course-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.course-item {
  display: flex;
  background: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  position: relative;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

  .course-image {
    width: 250rpx;
    height: 250rpx;
    margin-right: 20rpx;
    border-radius: 10rpx;
    background: #f0f0f0;
    flex-shrink: 0;
  }

  .course-info {
    flex: 1;
    display: flex;
    flex-direction: column;

    .course-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #000;
      margin-bottom: 10rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .course-content {
      font-size: 24rpx;
      color: #9c9c9c;
      line-height: 30rpx;
      height: 60rpx;
      overflow: hidden;
      margin-bottom: 10rpx;
    }

    .course-tags {
      display: flex;
      gap: 10rpx;
      flex-wrap: wrap;
    }
  }

  .course-price {
    position: absolute;
    bottom: 20rpx;
    right: 20rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: red;
  }
}
</style>
