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

const props = defineProps({
  data: { type: Object, default: () => ({ label: '智能体', agentName: '' }) }
})

const inputSummary = computed(() => {
  return (props.data?.inputs || []).map(v => v.name).filter(Boolean)
})

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

<template>
  <BaseNode :data="data" color="#F59E0B">
    <template #icon><RocketOutline /></template>
    <template #body>
      <div class="agent-name">{{ data?.agentName || '未选择智能体' }}</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: 'AgentNode' }
</script>

<style scoped>
.agent-name { font-size: 11px; color: var(--text-tertiary, #888); margin-bottom: 4px; }
.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>
