{% extends "base.html" %}
{% block title %}语义搜索{% endblock %}
{% block page_title %}语义搜索{% endblock %}
{% block page_subtitle %}在你的知识库中检索语义相关内容{% endblock %}

{% block content %}
<div x-data="searcher()" x-init="init()">

  <!-- Search controls -->
  <div class="card-panel" style="padding:1.25rem 1.5rem;margin-bottom:1.25rem;">
    <div style="display:flex;gap:0.6rem;align-items:center;flex-wrap:wrap;">
      <!-- Query input -->
      <div style="flex:1;min-width:280px;" class="control has-icons-left">
        <input class="input" type="text" x-model="query"
               placeholder="输入问题或关键词，支持自然语言…"
               @keydown.enter="doSearch()" />
        <span class="icon is-left" style="color:#94a3b8;">
          <svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
        </span>
      </div>
      <!-- Collection picker -->
      <div class="select">
        <select x-model="collection">
          <option value="__all__">全部集合</option>
          <template x-for="c in collections" :key="c.name">
            <option :value="c.name" x-text="c.name"></option>
          </template>
        </select>
      </div>
      <!-- Top K -->
      <div class="select">
        <select x-model="topK">
          <option value="3">Top 3</option>
          <option value="5">Top 5</option>
          <option value="10">Top 10</option>
        </select>
      </div>
      <!-- Search button -->
      <button type="button" class="button is-primary"
              @click="doSearch()"
              :class="loading ? 'is-loading' : ''"
              :disabled="!query.trim() || loading"
              style="font-weight:600;min-width:80px;">
        搜索
      </button>
    </div>
  </div>

  <!-- No results -->
  <template x-if="searched && hits.length === 0">
    <div class="card-panel" style="padding:4rem 2rem;text-align:center;">
      <svg width="42" height="42" fill="none" stroke="#c7d2de" stroke-width="1.2" viewBox="0 0 24 24" style="margin:0 auto 1rem;display:block;"><path stroke-linecap="round" stroke-linejoin="round" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
      <p style="color:#64748b;font-size:14.5px;font-weight:500;">没有找到相关文档</p>
      <p style="color:#94a3b8;font-size:13px;margin-top:4px;">换个搜索词，或先<a href="/datasources" style="color:#111;">添加数据</a></p>
    </div>
  </template>

  <!-- Results -->
  <template x-if="hits.length > 0">
    <div>
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:0.85rem;">
        <p style="font-size:13.5px;color:#64748b;">
          找到 <strong style="color:#1e293b;" x-text="hits.length"></strong> 条结果，关键词：
          <strong style="color:#111;" x-text="'「'+lastQuery+'」'"></strong>
        </p>
        <button type="button" @click="copyAll()"
                style="background:none;border:1px solid #e2e8f0;border-radius:7px;padding:5px 12px;cursor:pointer;font-size:12.5px;color:#111;display:flex;align-items:center;gap:5px;transition:background .12s;"
                onmouseover="this.style.background='#f5f5f5'" onmouseout="this.style.background='none'">
          <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
          复制全部
        </button>
      </div>

      <template x-for="(hit, idx) in hits" :key="hit.chunk_id">
        <div class="card-panel" style="margin-bottom:0.75rem;padding:1.15rem 1.35rem;">
          <!-- Header row -->
          <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px;">
            <div style="display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap;">
              <span style="font-size:12px;font-weight:700;color:#94a3b8;flex-shrink:0;background:#f1f5f9;border-radius:4px;padding:1px 6px;" x-text="'#'+(idx+1)"></span>
              <span style="font-size:14px;font-weight:600;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" x-text="hit.title||'未知文档'"></span>
              <template x-if="hit.collection">
                <span style="font-size:10.5px;color:#64748b;background:#f1f5f9;border-radius:4px;padding:1px 7px;flex-shrink:0;font-family:monospace;" x-text="hit.collection"></span>
              </template>
            </div>
            <div style="display:flex;align-items:center;gap:8px;flex-shrink:0;">
              <span class="tag"
                    :class="hit.score>0.75?'is-success is-light':hit.score>0.5?'is-warning is-light':'is-light'"
                    style="font-weight:600;font-size:12px;"
                    x-text="'相似度 '+(hit.score*100).toFixed(0)+'%'"></span>
              <button type="button" @click="copyHit(hit)"
                      title="复制内容"
                      style="background:none;border:none;cursor:pointer;padding:4px;border-radius:5px;color:#94a3b8;display:flex;transition:color .12s,background .12s;"
                      onmouseover="this.style.color='#111';this.style.background='#f5f5f5'"
                      onmouseout="this.style.color='#94a3b8';this.style.background='none'">
                <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
              </button>
            </div>
          </div>

          <!-- Score bar -->
          <div class="score-bar">
            <div class="score-fill"
                 :style="'width:'+(hit.score*100)+'%;background:'+(hit.score>0.75?'#22c55e':hit.score>0.5?'#f59e0b':'#94a3b8')"></div>
          </div>

          <!-- Content -->
          <p style="font-size:13.5px;color:#334155;line-height:1.7;white-space:pre-wrap;margin:10px 0 0;" x-text="hit.content"></p>
        </div>
      </template>
    </div>
  </template>

  <!-- Initial state (no search yet) -->
  <template x-if="!searched && !loading">
    <div style="text-align:center;padding:4rem 2rem;color:#94a3b8;">
      <svg width="48" height="48" fill="none" stroke="#dde3ed" stroke-width="1.2" viewBox="0 0 24 24" style="margin:0 auto 1rem;display:block;"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
      <p style="font-size:14px;color:#64748b;font-weight:500;">输入关键词开始搜索</p>
      <p style="font-size:13px;margin-top:4px;">支持中英文自然语言描述</p>
    </div>
  </template>

</div>

<script>
function searcher() {
  return {
    query: '', lastQuery: '', collection: '__all__', topK: '5',
    collections: [], hits: [], loading: false, searched: false,

    async init() {
      const data = await fetch('/me/collections').then(r => r.json());
      this.collections = data.collections || [];
    },
    async doSearch() {
      if (!this.query.trim()) return;
      this.loading = true; this.searched = false;
      this.lastQuery = this.query;
      try {
        const isAll = this.collection === '__all__';
        const endpoint = isAll ? '/me/search/all' : '/me/search';
        const body = isAll
          ? { query: this.query, top_k: parseInt(this.topK) }
          : { query: this.query, collection: this.collection, top_k: parseInt(this.topK) };
        const data = await fetch(endpoint, {
          method: 'POST', headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(body),
        }).then(r => r.json());
        this.hits = data.hits || []; this.searched = true;
      } finally { this.loading = false; }
    },
    copyHit(hit) {
      navigator.clipboard.writeText(`[${hit.title}]\n${hit.content}`);
    },
    copyAll() {
      const text = this.hits.map((h,i) => `#${i+1} [${h.title}] (${(h.score*100).toFixed(0)}%)\n${h.content}`).join('\n\n---\n\n');
      navigator.clipboard.writeText(text);
    }
  };
}
</script>
{% endblock %}