<template>
  <div class="knowledge-tab">
    <div class="knowledge-tab__section">
      <div class="knowledge-tab__section-title">知识库源</div>

      <div v-if="kbStore.isLoading" class="knowledge-tab__loading">
        <a-spin size="small" />
        <span>加载信息源...</span>
      </div>

      <div v-else-if="kbStore.error" class="knowledge-tab__error">
        <WarningOutlined />
        <span>{{ kbStore.error }}</span>
      </div>

      <div v-else-if="kbStore.sources.length === 0" class="knowledge-tab__empty">
        <BookOutlined />
        <span>暂无信息源</span>
      </div>

      <div v-else class="knowledge-tab__sources">
        <div
          v-for="source in kbStore.sources"
          :key="source.id"
          class="knowledge-tab__source"
        >
          <div class="knowledge-tab__source-header">
            <BookOutlined class="knowledge-tab__source-icon" />
            <span class="knowledge-tab__source-name">{{ source.name }}</span>
            <a-badge
              class="knowledge-tab__source-status"
              :status="source.status === 'active' ? 'success' : 'default'"
              :text="source.status === 'active' ? '正常' : source.status"
            />
          </div>
          <div class="knowledge-tab__source-meta">
            <a-tag size="small">{{ source.type }}</a-tag>
            <span>{{ source.document_count }} 文档</span>
            <span v-if="source.last_synced">· 同步 {{ formatTime(source.last_synced) }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="knowledge-tab__section">
      <div class="knowledge-tab__section-title">检索测试</div>
      <SearchTest />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { BookOutlined, WarningOutlined } from '@ant-design/icons-vue'
import { useKnowledgeStore } from '@/stores/knowledge'
import SearchTest from '@/components/kb/SearchTest.vue'

const kbStore = useKnowledgeStore()

function formatTime(iso: string): string {
  try {
    return new Date(iso).toLocaleString()
  } catch {
    return iso
  }
}

onMounted(() => {
  kbStore.fetchSources()
})
</script>

<style scoped>
.knowledge-tab {
  height: 100%;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
}

.knowledge-tab__section {
  margin-bottom: var(--space-4);
}

.knowledge-tab__section-title {
  font-size: var(--font-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.knowledge-tab__loading,
.knowledge-tab__error,
.knowledge-tab__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6) 0;
  color: var(--text-tertiary);
  font-size: var(--font-sm);
}

.knowledge-tab__error {
  color: var(--color-error);
}

.knowledge-tab__sources {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.knowledge-tab__source {
  padding: var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.knowledge-tab__source-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.knowledge-tab__source-icon {
  color: var(--accent-team);
  font-size: var(--font-sm);
}

.knowledge-tab__source-name {
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.knowledge-tab__source-status {
  margin-left: auto;
}

.knowledge-tab__source-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}
</style>
