<template>
  <div class="search-page page-content">
    <!-- 搜索条件展示区域 -->
    <div class="search-header">
      <div class="search-container">
        <div class="search-info">
          <h1 class="search-title">
            <span v-if="searchParams.keyword">搜索结果</span>
            <span v-else>搜索页面</span>
          </h1>
          <div v-if="searchParams.keyword" class="search-meta">
            <span class="search-keyword">关键词：{{ searchParams.keyword }}</span>
            <span v-if="searchParams.type && searchParams.type !== 'all'" class="search-type">
              类型：{{ getTypeLabel(searchParams.type) }}
            </span>
            <span v-if="!loading && searchResults.length > 0" class="search-count">
              找到 {{ totalResults }} 个结果
            </span>
          </div>
        </div>
        
        
      </div>
    </div>

    <!-- 搜索结果内容区域 -->
    <div class="search-content">
      <div class="search-container">
        <!-- 加载状态 - 复用CourseRecommend的骨架屏 -->
        <div v-if="loading" class="search-results">
          <div 
            v-for="i in 8" 
            :key="`skeleton-${i}`"
            class="result-item skeleton-item"
          >
            <!-- 封面骨架屏 -->
            <div class="result-cover skeleton-cover">
              <el-skeleton-item variant="image" style="width: 100%; height: 240px; border-radius: 0;" />
            </div>
            
            <!-- 内容骨架屏 -->
            <div class="result-info">
              <el-skeleton-item variant="h3" style="width: 80%; height: 18px; margin-bottom: 8px;" />
              <el-skeleton-item variant="text" style="width: 60px; height: 26px; margin-bottom: 8px;" />
              <div class="user-info">
                <div class="user-left">
                  <el-skeleton-item variant="circle" style="width: 28px; height: 28px;" />
                  <el-skeleton-item variant="text" style="width: 60px; height: 12px;" />
                </div>
                <el-skeleton-item variant="text" style="width: 68px; height: 26px; border-radius: 4px;" />
              </div>
            </div>
          </div>
        </div>

        <!-- 搜索结果列表 -->
        <div v-else-if="searchResults.length > 0" class="search-results">
          <!-- 视频课结果 -->
          <div 
            v-for="item in searchResults" 
            :key="item.id"
            class="result-item"
            :class="{ 'workflow-type': item.type === 'workflow' }"
            @click="handleItemClick(item)"
          >
            <!-- 课程样式结果 -->
            <template v-if="item.type === 'course' || item.type === 'video'">
              <div class="course-cover">
                <img :src="item.coverUrl || item.cover" :alt="item.title" />
              </div>
              
              <div class="course-info">
                <h3 class="course-title" v-html="highlightKeyword(item.title)"></h3>
                <!-- VIP标签 -->
                <div class="vip-tag" :class="item.vipType">
                  <img 
                    v-if="item.vipType === 'free'" 
                    src="../../assets/vip_icon/免费.svg" 
                    alt="免费" 
                    class="vip-icon"
                  />
                  <img 
                    v-else-if="item.vipType === 'vip'" 
                    src="../../assets/vip_icon/VIP.svg" 
                    alt="VIP" 
                    class="vip-icon"
                  />
                  <img 
                    v-else-if="item.vipType === 'svip'" 
                    src="../../assets/vip_icon/SVIP.svg" 
                    alt="SVIP" 
                    class="vip-icon"
                  />
                </div>
                <div class="user-info">
                  <div class="user-left">
                    <img 
                      :src="item.creator?.avatarUrl || item.userAvatar" 
                      :alt="item.creator?.username || item.userName" 
                      class="user-avatar" 
                    />
                    <span class="user-name">{{ item.creator?.username || item.userName }}</span>
                  </div>
                  <div class="tag-button">
                    <span>{{ item.category || '课程' }}</span>
                  </div>
                </div>
              </div>
            </template>

            <!-- 工作流样式结果 -->
            <template v-else-if="item.type === 'workflow'">
              <div class="workflow-cover">
                <img :src="item.coverUrl || item.cover" :alt="item.title" />
                <!-- 渐变遮罩层 -->
                <div class="gradient-overlay"></div>
                <!-- VIP标签 - 右上角 -->
                <div class="vip-badge" :class="item.vipType">
                  <img 
                    v-if="item.vipType === 'free'" 
                    src="../../assets/vip_icon/免费.svg" 
                    alt="免费" 
                    class="vip-icon"
                  />
                  <img 
                    v-else-if="item.vipType === 'vip'" 
                    src="../../assets/vip_icon/VIP.svg" 
                    alt="VIP" 
                    class="vip-icon"
                  />
                  <img 
                    v-else-if="item.vipType === 'svip'" 
                    src="../../assets/vip_icon/SVIP.svg" 
                    alt="SVIP" 
                    class="vip-icon"
                  />
                </div>
                <!-- 使用次数已隐藏以保持与WorkflowRecommend组件一致 -->
                <!-- 工作流信息 -->
                <div class="workflow-info">
                  <h3 class="workflow-title" v-html="highlightKeyword(item.title)"></h3>
                  <div class="user-info">
                    <div class="user-left">
                      <img 
                        :src="item.creator?.avatarUrl || item.userAvatar" 
                        :alt="item.creator?.username || item.userName" 
                        class="user-avatar" 
                      />
                      <span class="user-name">{{ item.creator?.username || item.userName }}</span>
                    </div>
                    <div class="tag-button">
                      <span>{{ item.category || '工作流' }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-else-if="!loading && hasSearched" class="empty-state">
          <div class="empty-icon">🔍</div>
          <h3 class="empty-title">未找到相关内容</h3>
          <p class="empty-description">
            <span v-if="searchParams.keyword">没有找到与 "{{ searchParams.keyword }}" 相关的内容</span>
            <span v-else>请输入关键词进行搜索</span>
          </p>
          <div class="empty-suggestions">
            <p>建议您：</p>
            <ul>
              <li>检查搜索词是否正确</li>
              <li>尝试使用其他关键词</li>
              <li>减少筛选条件</li>
              <li>浏览推荐内容</li>
            </ul>
          </div>
        </div>

        <!-- 初始状态（未搜索） -->
        <div v-else-if="!hasSearched" class="initial-state">
          <div class="initial-content">
            <div class="initial-icon">🔍</div>
            <h3 class="initial-title">开始搜索</h3>
            <p class="initial-description">在上方搜索框中输入关键词，发现精彩内容</p>
            
            <!-- 搜索建议 -->
            <div v-if="hotKeywords.length > 0" class="hot-keywords">
              <h4>热门搜索</h4>
              <div class="keyword-tags">
                <button 
                  v-for="keyword in hotKeywords" 
                  :key="keyword"
                  class="keyword-tag"
                  @click="searchByKeyword(keyword)"
                >
                  {{ keyword }}
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 分页 - 复用CourseRecommend的分页样式 -->
        <div v-if="searchResults.length > 0 && totalPages > 1" class="pagination-container">
          <div class="pagination">
            <button 
              v-if="currentPage > 1"
              class="page-button prev-button"
              @click="handlePageChange(currentPage - 1)"
            >
              &lt;
            </button>
            <button 
              v-for="page in getPageNumbers()" 
              :key="page"
              class="page-button"
              :class="{ active: page === currentPage, ellipsis: page === '...' }"
              @click="page !== '...' && handlePageChange(page)"
              :disabled="page === '...'"
            >
              {{ page }}
            </button>
            <button 
              v-if="currentPage < totalPages"
              class="page-button next-button"
              @click="handlePageChange(currentPage + 1)"
            >
              &gt;
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Footer -->
    <Footer />
    
    <!-- 登录弹窗 -->
    <LoginModal 
      v-if="showLoginModal" 
      :visible="showLoginModal" 
      :mode="modalMode"
      @close="handleCloseLoginModal"
      @login="handleLoginSuccess"
    />
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElSkeletonItem } from 'element-plus'
import { searchContent } from '../../api/search.js'
import { isLoggedIn } from '../../utils/auth.js'
import Footer from '../../components/Footer.vue'
import LoginModal from '../../components/LoginModal.vue'

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

// 响应式数据
const loading = ref(false)
const hasSearched = ref(false)
const searchResults = ref([])
const totalResults = ref(0)
const currentPage = ref(1)
const pageSize = ref(12)
const hotKeywords = ref(['AI绘画', 'ChatGPT', '视频剪辑', 'Python基础', 'Excel技巧', 'Coze工作流', '数据分析', '机器学习'])

// 登录弹窗状态
const showLoginModal = ref(false)
const modalMode = ref('login') // 'login' 或 'register'

// 搜索参数
const searchParams = reactive({
  keyword: '',
  type: 'all',
  sort: 'relevance'
})

// 计算属性
const totalPages = computed(() => Math.ceil(totalResults.value / pageSize.value))

// 获取类型标签
const getTypeLabel = (type) => {
  const typeMap = {
    'course': '视频课',
    'workflow': '工作流',
    'video': '视频课', // 兼容处理
    'all': '全部'
  }
  return typeMap[type] || type
}

// 格式化数字
const formatNumber = (num) => {
  if (num >= 10000) {
    return `${(num / 10000).toFixed(1)}万`
  } else if (num >= 1000) {
    return `${(num / 1000).toFixed(1)}k`
  }
  return num.toString()
}

// 高亮关键词
const highlightKeyword = (text) => {
  if (!text || !searchParams.keyword) return text
  const regex = new RegExp(`(${searchParams.keyword})`, 'gi')
  return text.replace(regex, '<mark class="highlight">$1</mark>')
}

// 执行搜索
const performSearch = async () => {
  if (!searchParams.keyword.trim()) {
    hasSearched.value = false
    return
  }

  loading.value = true
  hasSearched.value = true

  try {
    const params = {
      keyword: searchParams.keyword,
      page: currentPage.value,
      pageSize: pageSize.value
    }

    // 添加类型过滤
    if (searchParams.type && searchParams.type !== 'all') {
      params.type = searchParams.type
    }

    // 添加排序
    if (searchParams.sort) {
      params.sort = searchParams.sort
    }

    const response = await searchContent(params)
    
    if (response.code === 200) {
      // 处理搜索结果，统一数据格式
      searchResults.value = (response.data.items || []).map(item => ({
        ...item,
        // 根据内容类型使用不同的VIP类型判断逻辑
        vipType: item.type === 'workflow' ? getWorkflowVipType(item.fullAccessRole, item.isFree) : getVipType(item.level, item.isFree),
        // 统一创建者信息 - API已经返回了creator对象
        creator: item.creator || {
          username: item.userName,
          avatarUrl: item.userAvatar
        },
        // 确保cover字段兼容
        cover: item.coverUrl || item.cover
      }))
      totalResults.value = response.data.total || 0
    } else {
      ElMessage.error(response.message || '搜索失败')
      searchResults.value = []
      totalResults.value = 0
    }
  } catch (error) {
    console.error('搜索失败:', error)
    ElMessage.error('搜索服务暂时不可用，请稍后再试')
    searchResults.value = []
    totalResults.value = 0
  } finally {
    loading.value = false
  }
}

// 根据用户角色和课程level判断vipType
const getVipType = (level, isFree) => {
  if (isFree || level === 0) return 'free'
  if (level === 1) return 'vip'
  if (level === 2) return 'vip'
  if (level === 3) return 'svip'
  return 'free'
}

// 根据工作流的fullAccessRole判断vipType
const getWorkflowVipType = (fullAccessRole, isFree) => {
  if (isFree) return 'free'
  if (fullAccessRole === 2) return 'vip'
  if (fullAccessRole === 3) return 'svip'
  return 'free'
}

// 更新筛选条件
const updateFilter = (filterType, value) => {
  searchParams[filterType] = value
  currentPage.value = 1 // 重置页码
  
  // 更新URL参数
  const query = { ...route.query }
  if (filterType === 'type') {
    if (value === 'all') {
      delete query.type
    } else {
      query.type = value
    }
  }
  router.push({ path: '/search', query })
}

// 分页变化
const handlePageChange = (page) => {
  currentPage.value = page
  performSearch()
  // 滚动到顶部
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

// 获取分页数字
const getPageNumbers = () => {
  const delta = 2
  const range = []
  const rangeWithDots = []

  for (let i = Math.max(2, currentPage.value - delta);
       i <= Math.min(totalPages.value - 1, currentPage.value + delta);
       i++) {
    range.push(i)
  }

  if (currentPage.value - delta > 2) {
    rangeWithDots.push(1, '...')
  } else {
    rangeWithDots.push(1)
  }

  rangeWithDots.push(...range)

  if (currentPage.value + delta < totalPages.value - 1) {
    rangeWithDots.push('...', totalPages.value)
  } else if (totalPages.value > 1) {
    rangeWithDots.push(totalPages.value)
  }

  return rangeWithDots
}

// 点击搜索结果
const handleItemClick = (item) => {
  // 检查用户是否已登录
  if (!isLoggedIn()) {
    // 未登录，触发显示登录弹窗
    handleShowLoginModal('请先登录后查看详情')
    return
  }
  
  // 已登录，跳转到对应详情页
  if (item.type === 'course' || item.type === 'video') {
    router.push(`/course/${item.id}`)
  } else if (item.type === 'workflow') {
    router.push(`/workflow/${item.id}`)
  }
}

// 通过关键词搜索
const searchByKeyword = (keyword) => {
  searchParams.keyword = keyword
  currentPage.value = 1
  router.push({
    path: '/search',
    query: { keyword, type: searchParams.type !== 'all' ? searchParams.type : undefined }
  })
}

// 处理显示登录弹窗
const handleShowLoginModal = (message) => {
  if (message) {
    ElMessage.warning(message)
  }
  showLoginModal.value = true
}

// 处理关闭登录弹窗
const handleCloseLoginModal = () => {
  showLoginModal.value = false
}

// 处理登录成功
const handleLoginSuccess = (data) => {
  showLoginModal.value = false
  ElMessage.success('登录成功')
}

// 监听路由变化
watch(() => route.query, (newQuery) => {
  if (newQuery.keyword) {
    searchParams.keyword = newQuery.keyword
    searchParams.type = newQuery.type || 'all'
    currentPage.value = 1
    performSearch()
  } else {
    hasSearched.value = false
    searchResults.value = []
  }
}, { immediate: true })
</script>

<style scoped>
/* 搜索页面基础样式 */
.search-page {
  min-height: 100vh;
  background-color: #f8f9fa;
}

/* 搜索头部 */
.search-header {
 
  color:black;
  padding: 40px 0;
}

.search-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.search-info {
  margin-bottom: 30px;
}

.search-title {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 12px 0;
}

.search-meta {
  display: flex;
  gap: 20px;
  font-size: 14px;
  opacity: 0.9;
  flex-wrap: wrap;
}

.search-keyword {
  font-weight: 500;
}

/* 搜索筛选器 */
.search-filters {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-label {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.filter-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: white;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 13px;
}

.filter-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.filter-btn.active {
  background: white;
  color: #667eea;
  border-color: white;
}

/* 搜索内容区 */
.search-content {
  padding: 40px 0;
}

/* 搜索结果网格 - 复用WorkflowRecommend样式 */
.search-results {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  justify-content: start;
  margin-bottom: 40px;
  width: 100%;
  box-sizing: border-box;
}

/* 结果项基础样式 */
.result-item {
  width: 100%;
  min-height: 394px;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid #f0f0f0;
}

.result-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* 课程封面样式 */
.course-cover {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
}

.course-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.result-item:hover .course-cover img {
  transform: scale(1.05);
}

/* 课程信息样式 */
.course-info {
  padding: 12px;
}

.course-title {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 21px;
  letter-spacing: 0px;
  color: #333;
  margin: 0 0 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* VIP标签样式 */
.vip-tag {
  display: block;
  margin: 12px 0;
  text-align: left;
}

.vip-icon {
  width: 54px;
  height: 26px;
}

/* 用户信息样式 */
.user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.user-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  max-width: 28px !important;
  max-height: 28px !important;
}

.user-name {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0px;
  color: #333;
}

.tag-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 26px;
  background: #ffffff;
  border: 1px solid rgba(29, 0, 255, 1);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tag-button span {
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0px;
  color: rgba(29, 0, 255, 1);
}

/* 工作流类型样式 */
.workflow-type {
  height: 394px; /* 确保工作流卡片有固定高度 */
}

.workflow-type .workflow-cover {
  position: relative;
  width: 100%;
  height: 100%; /* 占满整个卡片高度 */
  overflow: hidden;
}

.workflow-type .workflow-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.workflow-type:hover .workflow-cover img {
  transform: scale(1.05);
}

.workflow-type .gradient-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.workflow-type .vip-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}

.workflow-type .vip-badge .vip-icon {
  width: 54px;
  height: 26px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.workflow-type .usage-count {
  position: absolute;
  bottom: 90px;
  right: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  z-index: 3;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.workflow-type .workflow-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  z-index: 3;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.3) 100%);
}

.workflow-type .workflow-title {
  font-size: 16px;
  font-weight: 600;
  color: white;
  margin: 0 0 12px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.workflow-type .workflow-info .user-info {
  border-top: none; /* 移除顶部边框 */
  padding-top: 0;
  margin-top: 0;
}

.workflow-type .workflow-info .user-name {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.workflow-type .workflow-info .tag-button {
  background: #ffffff;
  border: 1px solid rgba(29, 0, 255, 1);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 68px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.workflow-type .workflow-info .tag-button:hover {
  background: rgba(29, 0, 255, 0.05);
  border-color: rgba(29, 0, 255, 0.8);
}

.workflow-type .workflow-info .tag-button span {
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0px;
  color: rgba(29, 0, 255, 1);
  font-weight: 400;
  text-align: center;
}

/* 高亮样式 */
.highlight {
  background: transparent !important;
  color: rgb(0, 202, 224) !important;
  font-weight: 600 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* 更具体的选择器确保样式生效 */
mark.highlight {
  background: transparent !important;
  color: rgb(0, 202, 224) !important;
  font-weight: 600 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* 覆盖浏览器默认的mark标签样式 */
.search-results mark {
  background: transparent !important;
  color: rgb(0, 202, 224) !important;
  font-weight: 600 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* 空状态和初始状态 */
.empty-state, .initial-state {
  text-align: center;
  padding: 80px 20px;
}

.empty-icon, .initial-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.empty-title, .initial-title {
  font-size: 24px;
  color: #333;
  margin: 0 0 12px 0;
}

.empty-description, .initial-description {
  font-size: 16px;
  color: #666;
  margin-bottom: 30px;
}

.empty-suggestions {
  max-width: 400px;
  margin: 0 auto;
  text-align: left;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.empty-suggestions p {
  font-weight: 600;
  margin: 0 0 12px 0;
  color: #333;
}

.empty-suggestions ul {
  margin: 0;
  padding-left: 20px;
  color: #666;
}

.empty-suggestions li {
  margin: 6px 0;
}

/* 热门搜索 */
.hot-keywords {
  margin-top: 40px;
}

.hot-keywords h4 {
  font-size: 16px;
  color: #333;
  margin: 0 0 16px 0;
}

.keyword-tags {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.keyword-tag {
  padding: 8px 16px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.keyword-tag:hover {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

/* 分页样式 - 复用CourseRecommend */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.pagination {
  display: flex;
  gap: 8px;
  align-items: center;
}

.page-button {
  padding: 8px 12px;
  border: 1px solid #ddd;
  background: white;
  color: #666;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.page-button:hover:not(:disabled) {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.page-button.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.page-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.page-button.ellipsis {
  border: none;
  background: transparent;
  cursor: default;
}

/* 骨架屏样式 */
.skeleton-item {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
}

.skeleton-cover {
  height: 240px;
}

/* 响应式设计 - 保持与WorkflowRecommend组件一致 */
@media (max-width: 1400px) {
  .search-results {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 1100px) {
  .search-results {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  
  .search-container {
    padding: 0 30px;
  }
}

@media (max-width: 768px) {
  .search-header {
    padding: 24px 0;
  }
  
  .search-title {
    font-size: 22px;
  }
  
  .search-meta {
    flex-direction: column;
    gap: 8px;
  }
  
  .search-filters {
    flex-direction: column;
    gap: 20px;
  }
  
  .filter-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .search-results {
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
  }
  
  .search-container {
    padding: 0 20px;
  }
  
  .result-item {
    height: 320px; /* 响应式下固定高度 */
  }
  
  /* 工作流卡片在移动端的优化 */
  .workflow-type {
    height: 320px;
  }
  
  .user-avatar {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
  }
  
  .empty-state, .initial-state {
    padding: 40px 20px;
  }
  
  .empty-icon, .initial-icon {
    font-size: 48px;
  }
  
  .keyword-tags {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .search-container {
    padding: 0 15px;
  }
  
  .search-content {
    padding: 24px 0;
  }
  
  .search-results {
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
  }
  
  .result-item {
    height: 280px; /* 移动端固定高度 */
  }
  
  .course-info {
    padding: 12px;
  }
  
  /* 移动端工作流卡片优化 - 与WorkflowRecommend保持一致 */
  .workflow-type {
    height: 280px;
  }
  
  .workflow-type .workflow-info {
    padding: 12px;
  }
  
  .workflow-type .workflow-title {
    font-size: 13px;
    line-height: 15px;
    margin-bottom: 8px;
  }
  
  .workflow-type .vip-badge {
    top: 8px;
    right: 8px;
  }
  
  .workflow-type .vip-badge .vip-icon {
    width: 45px;
    height: 22px;
  }
  
  .workflow-type .workflow-info .user-avatar {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
  }
  
  .workflow-type .workflow-info .user-name {
    font-size: 10px;
    max-width: 60px;
  }
  
  .workflow-type .workflow-info .tag-button {
    width: 52px;
    height: 28px;
  }
  
  .workflow-type .workflow-info .tag-button span {
    font-size: 10px;
    line-height: 12px;
  }
  
  .filter-options {
    flex-wrap: wrap;
  }
  
  .filter-btn {
    font-size: 12px;
    padding: 6px 12px;
  }
}
</style>