/**
 * 🔍 知识库搜索测试（支持多种检索模式）
 */
import { ref } from 'vue'
import { searchDocuments } from '../js/api.js'
import { toast } from '../js/utils.js'

export default {
  template: `
    <div class="card">
      <h2>知识库搜索测试</h2>
      <p style="color:var(--sub);font-size:13px;margin-bottom:12px;">输入查询语句，测试知识库检索效果（支持向量、关键词、混合检索三种模式）</p>
      <div class="input-row">
        <input class="input" v-model="query" placeholder="输入查询，如：Spring Boot 是什么？" @keydown.enter="search">
        <label class="input-field-sm">
          <span>检索模式</span>
          <select class="input input-sm" v-model="searchMode">
            <option value="VECTOR">向量检索</option>
            <option value="KEYWORD">关键词检索</option>
            <option value="HYBRID">混合检索</option>
          </select>
        </label>
        <label class="input-field-sm">
          <span>返回条数</span>
          <input class="input input-sm" v-model.number="topK" type="number" min="1" max="20">
        </label>
        <label v-if="searchMode !== 'KEYWORD'" class="input-field-sm">
          <span>相似度阈值</span>
          <input class="input input-sm" v-model.number="threshold" type="number" min="0" max="1" step="0.1">
        </label>
        <button class="btn btn-primary" @click="search" :disabled="isSearching">{{ isSearching ? '搜索中...' : '搜索' }}</button>
      </div>

      <div v-if="isSearching" style="text-align:center;padding:20px;color:var(--sub);">搜索中...</div>

      <div v-else-if="searched && results.length === 0" style="text-align:center;padding:20px;color:var(--sub);">未找到相关结果</div>

      <div v-else-if="searched && errorMsg" style="color:var(--danger);">搜索失败：{{ errorMsg }}</div>

      <div v-else>
        <div v-for="(r, i) in results" :key="i" class="search-result">
          <div class="score">
            <span style="display:inline-block;padding:1px 6px;border-radius:3px;font-size:11px;margin-right:6px;"
                  :style="{background: modeColor(r.searchMode), color: '#fff'}">{{ modeLabel(r.searchMode) }}</span>
            得分: {{ formatScore(r) }} | {{ r.title || '无标题' }} | {{ r.sourceName || '无来源' }}
          </div>
          <div class="content">{{ r.content || '' }}</div>
        </div>
      </div>
    </div>
  `,
  setup() {
    const query = ref('')
    const topK = ref(5)
    const threshold = ref(0.5)
    const searchMode = ref('VECTOR')
    const results = ref([])
    const isSearching = ref(false)
    const searched = ref(false)
    const errorMsg = ref('')

    async function search() {
      if (!query.value.trim()) {
        toast('请输入查询内容', 'error')
        return
      }
      isSearching.value = true
      searched.value = false
      errorMsg.value = ''
      try {
        const json = await searchDocuments(query.value, topK.value, threshold.value, null, null, searchMode.value)
        if (!json.success) {
          errorMsg.value = json.message
          results.value = []
        } else {
          results.value = json.data || []
        }
        searched.value = true
      } catch (e) {
        errorMsg.value = e.message
        results.value = []
        searched.value = true
      } finally {
        isSearching.value = false
      }
    }

    function formatScore(r) {
      if (r.searchMode === 'KEYWORD' || r.searchMode === 'HYBRID') {
        return r.score != null ? r.score.toFixed(4) : '-'
      }
      return r.score != null ? (1 - r.score).toFixed(4) : '-'
    }

    function modeLabel(m) {
      return { VECTOR: '向量', KEYWORD: '关键词', HYBRID: '混合' }[m] || m || '向量'
    }

    function modeColor(m) {
      return { VECTOR: '#007bff', KEYWORD: '#28a745', HYBRID: '#6f42c1' }[m] || '#6c757d'
    }

    return { query, topK, threshold, searchMode, results, isSearching, searched, errorMsg, search, formatScore, modeLabel, modeColor }
  }
}