{% extends "base.html" %}
{% block title %}我的主页{% endblock %}
{% block page_title %}我的主页{% endblock %}
{% block page_subtitle %}管理你的知识库文档{% endblock %}

{% block header_actions %}
  <a href="/datasources" class="button is-primary is-small" style="font-weight:600;gap:6px;">
    <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
    添加数据
  </a>
{% endblock %}

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

  <!-- Stat row -->
  <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:0.875rem;margin-bottom:1.25rem;">
    <div class="stat-card">
      <div style="display:flex;justify-content:space-between;align-items:flex-start;">
        <div class="stat-lbl">文档集合</div>
        <div class="stat-icon" style="background:#f0f0f0;">
          <svg width="18" height="18" fill="none" stroke="#555" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
        </div>
      </div>
      <div class="stat-val" x-text="collections.length">0</div>
    </div>
    <div class="stat-card">
      <div style="display:flex;justify-content:space-between;align-items:flex-start;">
        <div class="stat-lbl">文档总数</div>
        <div class="stat-icon" style="background:#f0f0f0;">
          <svg width="18" height="18" fill="none" stroke="#555" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
        </div>
      </div>
      <div class="stat-val" x-text="totalDocs">0</div>
    </div>
    <div class="stat-card">
      <div style="display:flex;justify-content:space-between;align-items:flex-start;">
        <div class="stat-lbl">向量分块</div>
        <div class="stat-icon" style="background:#f0f0f0;">
          <svg width="18" height="18" fill="none" stroke="#555" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/></svg>
        </div>
      </div>
      <div class="stat-val" x-text="totalChunks">0</div>
    </div>
  </div>

  <!-- Document list -->
  <div class="card-panel" style="margin-bottom:1.25rem;">
    <div class="card-panel-head">
      <p class="card-panel-title">我的集合</p>
      <div style="display:flex;align-items:center;gap:0.6rem;">
        <a :href="'/chunks?collection=' + encodeURIComponent(activeCollection)"
           style="font-size:12.5px;color:#111;text-decoration:none;font-weight:500;display:flex;align-items:center;gap:4px;"
           x-show="activeCollection">
          <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg>
          浏览分块
        </a>
        <div class="select is-small">
          <select x-model="activeCollection" @change="loadDocs()">
            <template x-if="collections.length === 0">
              <option value="">暂无集合</option>
            </template>
            <template x-for="col in collections" :key="col.name">
              <option :value="col.name" x-text="col.name + ' (' + col.count + ' 块)'"></option>
            </template>
          </select>
        </div>
        <button type="button" x-show="activeCollection"
                @click="deleteCollection()"
                title="删除此集合"
                style="display:inline-flex;align-items:center;gap:5px;
                       background:none;border:1px solid #fca5a5;border-radius:6px;
                       padding:4px 10px;cursor:pointer;font-size:12.5px;color:#ef4444;
                       transition:background .1s,border-color .1s;"
                onmouseover="this.style.background='#fef2f2'"
                onmouseout="this.style.background='none'">
          <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round"
                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
          </svg>
          删除集合
        </button>
      </div>
    </div>

    <!-- Loading -->
    <div x-show="docsLoading" style="padding:2.5rem;text-align:center;color:#94a3b8;font-size:13.5px;">
      加载中…
    </div>

    <!-- Empty -->
    <div x-show="!docsLoading && docs.length === 0" style="padding:3.5rem;text-align:center;">
      <svg width="40" height="40" fill="none" stroke="#cbd5e1" stroke-width="1.2" viewBox="0 0 24 24" style="margin:0 auto 0.75rem;display:block;"><path stroke-linecap="round" stroke-linejoin="round" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
      <p style="color:#94a3b8;font-size:13.5px;">暂无文档，<a href="/datasources" style="color:#111;font-weight:500;">立即添加</a></p>
    </div>

    <!-- Doc rows -->
    <template x-for="doc in docs" :key="doc.doc_id">
      <div class="doc-row">
        <div style="display:flex;align-items:center;gap:10px;min-width:0;">
          <div style="width:34px;height:34px;border-radius:8px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
            <svg width="16" height="16" fill="none" stroke="#64748b" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
          </div>
          <div style="min-width:0;">
            <div style="font-size:13.5px;font-weight:500;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" x-text="doc.title"></div>
            <div style="font-size:12px;color:#94a3b8;margin-top:2px;" x-text="doc.total_chunks + ' 个分块 · ' + (doc.source || doc.doc_id)"></div>
          </div>
        </div>
        <button @click="deleteDoc(doc.doc_id)" class="icon-btn" title="删除">
          <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
        </button>
      </div>
    </template>
  </div>

  <!-- Quick search -->
  <div class="card-panel">
    <div class="card-panel-head">
      <p class="card-panel-title">快速搜索</p>
    </div>
    <div style="padding:1.2rem 1.25rem;">
      <div class="field has-addons" style="margin-bottom:0;">
        <div class="control is-expanded has-icons-left">
          <input class="input" type="text" x-model="quickQuery"
                 placeholder="输入关键词，语义检索知识库…"
                 @keydown.enter="quickSearch()" />
          <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>
        <div class="control">
          <button class="button is-primary" @click="quickSearch()" :disabled="!quickQuery" style="font-weight:500;">搜索</button>
        </div>
      </div>

      <template x-if="quickResults.length > 0">
        <div style="margin-top:1rem;display:flex;flex-direction:column;gap:0.6rem;">
          <template x-for="hit in quickResults" :key="hit.chunk_id">
            <div style="border:1px solid #e2e8f0;border-radius:8px;padding:0.9rem 1rem;background:#fafbfc;">
              <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;">
                <span style="font-size:13.5px;font-weight:600;color:#1e293b;" x-text="hit.title||'未知文档'"></span>
                <span class="tag" :class="hit.score>0.7?'is-success is-light':hit.score>0.5?'is-warning is-light':'is-light'"
                      style="font-size:11px;font-weight:600;" x-text="(hit.score*100).toFixed(0)+'%'"></span>
              </div>
              <div class="score-bar"><div class="score-fill" :style="'width:'+(hit.score*100)+'%;background:'+(hit.score>0.7?'#22c55e':hit.score>0.5?'#f59e0b':'#94a3b8')"></div></div>
              <p style="font-size:13px;color:#475569;margin:6px 0 0;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;" x-text="hit.content"></p>
            </div>
          </template>
        </div>
      </template>

      <template x-if="quickSearched && quickResults.length === 0">
        <p style="margin-top:0.75rem;font-size:13px;color:#94a3b8;">没有找到相关内容，换个词试试。</p>
      </template>
    </div>
  </div>

</div>

<script>
function dashboard() {
  return {
    collections: [], activeCollection: '',
    docs: [], docsLoading: false,
    totalDocs: 0, totalChunks: 0,
    quickQuery: '', quickResults: [], quickSearched: false,

    async init() {
      await this.loadCollections();
      if (this.collections.length > 0) {
        this.activeCollection = this.collections[0].name;
        await this.loadDocs();
      }
    },
    async loadCollections() {
      const data = await fetch('/me/collections').then(r => r.json());
      this.collections = data.collections || [];
      this.totalChunks = this.collections.reduce((s, c) => s + c.count, 0);
    },
    async loadDocs() {
      if (!this.activeCollection) return;
      this.docsLoading = true;
      try {
        const data = await fetch(`/me/documents?collection=${this.activeCollection}`).then(r => r.json());
        this.docs = data.documents || [];
        this.totalDocs = this.docs.length;
      } finally { this.docsLoading = false; }
    },
    async deleteDoc(docId) {
      if (!confirm('确认删除此文档及所有分块？')) return;
      await fetch(`/me/documents/${docId}?collection=${this.activeCollection}`, { method: 'DELETE' });
      await this.loadCollections();
      await this.loadDocs();
    },

    async deleteCollection() {
      if (!this.activeCollection) return;
      if (!confirm(`确认删除集合「${this.activeCollection}」？\n集合内所有文档和分块将被永久删除，不可恢复。`)) return;
      const res = await fetch(`/me/collections/${encodeURIComponent(this.activeCollection)}`, { method: 'DELETE' });
      if (!res.ok) { alert('删除失败，请刷新后重试'); return; }
      await this.loadCollections();
      if (this.collections.length > 0) {
        this.activeCollection = this.collections[0].name;
        await this.loadDocs();
      } else {
        this.activeCollection = '';
        this.docs = [];
        this.totalDocs = 0;
      }
    },
    async quickSearch() {
      if (!this.quickQuery) return;
      this.quickSearched = false;
      const data = await fetch('/me/search', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query: this.quickQuery, collection: this.activeCollection, top_k: 3 })
      }).then(r => r.json());
      this.quickResults = data.hits || [];
      this.quickSearched = true;
    }
  };
}
</script>
{% endblock %}