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

import { GitBranch } 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 branches = computed(() => {
  return props.data.branches || [];
});
</script>

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

    <div class="space-y-3 pt-1">
      <!-- IF 分支 -->
      <div
        v-for="(branch, index) in branches"
        :key="branch.id"
        class="relative flex h-8 items-center justify-between rounded border border-blue-100 bg-blue-50 px-3 text-xs text-blue-700 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-300"
      >
        <span class="font-medium">IF {{ index + 1 }}</span>
        <span class="text-muted-foreground max-w-[100px] truncate">{{
          branch.name || $t('ai-platform.workflow.nodes.condition.unnamed')
        }}</span>

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

      <!-- ELSE 分支 -->
      <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">ELSE</span>

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