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

const props = defineProps({
  data: { type: Object, default: () => ({ label: '大模型处理', modelId: null }) }
})

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

const outputSummary = computed(() => {
  const list = props.data?.outputs || []
  if (!list.length) return ['result']
  return list.map(v => v.name).filter(Boolean)
})

const modelLabel = computed(() => {
  if (!props.data?.modelId) return '默认模型'
  return props.data?.modelName || `模型 #${props.data.modelId}`
})
</script>

<template>
  <BaseNode :data="data" color="#8B5CF6">
    <template #icon><SparklesOutline /></template>
    <template #body>
      <div class="llm-model">{{ modelLabel }}</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: 'LLMNode' }
</script>

<style scoped>
.llm-model { font-size: 11px; color: var(--text-tertiary, #888); 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>
