<template>
  <view class="search">
    <view class="search-bar">
      <input class="input" v-model="keyword" placeholder="搜索课程、提示词、文章..." @confirm="doSearch" confirm-type="search" />
      <button class="btn-search" @tap="doSearch">搜索</button>
    </view>
    <view class="tabs" v-if="results.length > 0">
      <text class="tab" :class="{ active: activeTab === 'courses' }" @tap="activeTab = 'courses'">课程</text>
      <text class="tab" :class="{ active: activeTab === 'prompts' }" @tap="activeTab = 'prompts'">提示词</text>
      <text class="tab" :class="{ active: activeTab === 'contents' }" @tap="activeTab = 'contents'">文章</text>
      <text class="tab" :class="{ active: activeTab === 'tools' }" @tap="activeTab = 'tools'">工具</text>
    </view>
    <view class="result-list" v-if="filteredResults.length > 0">
      <view class="result-item" v-for="item in filteredResults" :key="item.id" @tap="goDetail(item)">
        <text class="result-title">{{ item.title }}</text>
        <text class="result-desc">{{ item.description || item.summary || item.content?.slice(0, 80) }}</text>
      </view>
    </view>
    <view class="empty" v-else-if="searched">
      <text>未找到相关结果</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { api } from '../../api/index'

const keyword = ref('')
const results = ref<any[]>([])
const activeTab = ref('courses')
const searched = ref(false)

const filteredResults = computed(() => {
  return results.value.filter((r: any) => {
    if (activeTab.value === 'courses') return r.type === 'course'
    if (activeTab.value === 'prompts') return r.type === 'prompt'
    if (activeTab.value === 'contents') return r.type === 'content'
    if (activeTab.value === 'tools') return r.type === 'tool'
    return true
  })
})

async function doSearch() {
  if (!keyword.value) return
  searched.value = true
  try {
    const res: any = await api.search.query({ q: keyword.value })
    results.value = res.items || []
  } catch (e) {
    uni.showToast({ title: '搜索失败', icon: 'none' })
  }
}

function goDetail(item: any) {
  const type = item.type || 'course'
  const id = item.id
  const pages: Record<string, string> = {
    course: `/pages/course-detail/index?id=${id}`,
    prompt: `/pages/prompt-detail/index?id=${id}`,
    content: `/pages/post-detail/index?id=${id}`,
  }
  const url = pages[type] || `/pages/course-detail/index?id=${id}`
  uni.navigateTo({ url })
}
</script>

<style scoped>
.search { }
.search-bar { display: flex; gap: 16rpx; padding: 20rpx 30rpx; background: var(--card); }
.input { flex: 1; background: var(--muted); border-radius: 12rpx; padding: 16rpx 24rpx; font-size: 28rpx; }
.btn-search { background: var(--brand); color: var(--card); border-radius: 10rpx; padding: 14rpx 28rpx; font-size: 26rpx; border: none; }
.tabs { display: flex; background: var(--card); padding: 16rpx 30rpx; border-bottom: 1rpx solid var(--border); }
.tab { font-size: 26rpx; padding: 8rpx 20rpx; margin-right: 12rpx; color: var(--muted-foreground); }
.tab.active { color: var(--brand); font-weight: bold; border-bottom: 3rpx solid var(--brand); }
.result-list { padding: 20rpx 30rpx; }
.result-item {
  background: var(--card); border-radius: 12rpx; padding: 24rpx; margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.result-title { font-size: 28rpx; font-weight: 500; display: block; margin-bottom: 8rpx; }
.result-desc { font-size: 24rpx; color: var(--muted-foreground); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { text-align: center; padding: 100rpx; font-size: 28rpx; color: var(--muted-foreground); }
</style>
