<script setup lang="ts">
import { computed } from 'vue';

import { Brain } from '@vben/icons';
import { $t } from '@vben/locales';

import { Handle, Position } from '@vue-flow/core';

import BaseNode from './BaseNode.vue';

const props = defineProps(['selected', 'data', 'id']);

// 获取意图列表
const intents = computed(() => {
  return props.data.intents || [];
});
</script>

<template>
  <BaseNode
    :selected="selected"
    :execution-status="data.executionStatus"
    :execution-result="data.executionResult"
    :label="data.label || $t('ai-platform.workflow.nodes.intent.label')"
    :inputs="[{ id: 'target' }]"
    :node-id="id"
    node-type="intent"
  >
    <template #icon><Brain class="size-5" /></template>
    <template #desc>
      {{ $t('ai-platform.workflow.nodes.intent.desc') }}
    </template>

    <div class="space-y-2 pt-1">
      <!-- 意图分支 -->
      <div
        v-for="intent in intents"
        :key="intent.name"
        class="relative flex h-8 items-center justify-between rounded border border-purple-100 bg-purple-50 px-3 text-xs text-purple-700"
      >
        <span class="font-medium">{{ intent.name }}</span>
        <span class="text-muted-foreground max-w-[100px] truncate">{{
          intent.description || ''
        }}</span>

        <!-- Handle -->
        <Handle
          type="source"
          :position="Position.Right"
          :id="intent.branch_id || intent.name"
          class="!h-3 !w-3 !border-2 !border-white !bg-purple-500 transition-transform hover:scale-125"
          style="right: -17px; top: 50%; transform: translateY(-50%)"
        />
      </div>

      <!-- OTHER 分支 -->
      <div
        class="border-border bg-muted text-muted-foreground relative flex h-8 items-center justify-between rounded border px-3 text-xs"
      >
        <span class="font-medium">OTHER</span>
        <span class="text-muted-foreground">{{
          $t('ai-platform.workflow.nodes.intent.noMatch')
        }}</span>

        <!-- Handle -->
        <Handle
          type="source"
          :position="Position.Right"
          id="other"
          class="!h-3 !w-3 !border-2 !border-white !bg-gray-400 transition-transform hover:scale-125"
          style="right: -17px; top: 50%; transform: translateY(-50%)"
        />
      </div>

      <!-- 置信度阈值提示 -->
      <div
        v-if="data.confidence_threshold"
        class="text-muted-foreground text-center text-[10px]"
      >
        {{ $t('ai-platform.workflow.nodes.intent.confidenceThreshold') }}
        {{ data.confidence_threshold }}
      </div>
    </div>
  </BaseNode>
</template>
