<script setup>
import { computed } from 'vue'
import BaseNode from './BaseNode.vue'
import { LibraryOutline } from '@vicons/ionicons5'

const props = defineProps({
  data: { type: Object, default: () => ({ label: '知识库检索', source: 'document' }) }
})

const SOURCE_LABELS = {
  document: '文档数据库',
  structured: '结构化数据库',
  graph: '知识图谱库',
  hybrid: '混合检索'
}

const sourceLabel = computed(() => SOURCE_LABELS[props.data?.source] || '文档数据库')

const querySummary = computed(() => {
  const q = props.data?.query || ''
  if (!q) return '未填写检索语句'
  return q.length > 30 ? q.slice(0, 30) + '…' : q
})

const inputSummary = computed(() => (props.data?.inputs || []).map(v => v.name).filter(Boolean))
const outputSummary = computed(() => (props.data?.outputs || []).map(v => v.name).filter(Boolean))
</script>

<template>
  <BaseNode :data="data" color="#6366F1">
    <template #icon><LibraryOutline /></template>
    <template #body>
      <div class="kr-source">{{ sourceLabel }}</div>
      <div class="kr-query">{{ querySummary }}</div>
      <div v-if="inputSummary.length" class="io-summary">
        <span class="io-tag io-in" v-for="name in inputSummary" :key="name">{{ name }}</span>
      </div>
      <div v-if="outputSummary.length" class="io-summary">
        <span class="io-tag io-out" v-for="name in outputSummary" :key="name">{{ name }}</span>
      </div>
    </template>
  </BaseNode>
</template>

<script>
export default { name: 'KnowledgeRetrievalNode' }
</script>

<style scoped>
.kr-source { font-size: 11px; color: var(--text-tertiary, #888); margin-bottom: 2px; }
.kr-query {
  font-size: 11px;
  color: var(--text-secondary, #aaa);
  margin-bottom: 4px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.io-summary { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.io-tag {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'Cascadia Code', 'Fira Code', monospace;
}
.io-in { background: rgba(99,102,241,0.15); color: #818cf8; }
.io-out { background: rgba(34,197,94,0.15); color: #4ade80; }
</style>
