<script setup>
import { computed } from 'vue'
import { Handle, Position } from '@vue-flow/core'
import { GitBranchOutline } from '@vicons/ionicons5'

const props = defineProps({
  data: { type: Object, default: () => ({ label: '条件分支', conditions: [{ type: 'IF', expression: '' }] }) }
})

const branches = computed(() => {
  const conds = props.data?.conditions || []
  const labels = conds.map(c => c.type === 'IF' ? 'IF' : 'ELIF')
  labels.push('ELSE')
  return labels.map((label, i) => ({
    id: `branch-${i}`,
    label,
    topPercent: ((i + 1) / (labels.length + 1)) * 100
  }))
})

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

<template>
  <div class="condition-node">
    <Handle type="target" :position="Position.Left" class="handle-target" />
    <div class="cond-header">
      <div class="cond-icon"><GitBranchOutline /></div>
      <div class="cond-title-wrap">
        <span v-if="data?.nodeName" class="cond-title-name" :title="data.nodeName">{{ data.nodeName }}</span>
        <span class="cond-title-type">{{ data?.label || '条件分支' }}</span>
      </div>
    </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 class="cond-branches">
      <div v-for="b in branches" :key="b.id" class="branch-row">
        <span class="branch-label">{{ b.label }}</span>
      </div>
    </div>
    <!-- 每个 Handle 使用计算好的 top 百分比定位 -->
    <Handle
      v-for="b in branches"
      :key="'h-' + b.id"
      type="source"
      :position="Position.Right"
      :id="b.id"
      class="handle-branch"
      :style="{ top: `${b.topPercent}%` }"
    />
  </div>
</template>

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

<style scoped>
.condition-node {
  background: var(--bg-card, #1e1e2e);
  border: 2px solid #F97316;
  border-radius: 10px;
  width: 250px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  position: relative;
}

.cond-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cond-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #F97316;
  color: #fff;
  font-size: 13px;
}

.cond-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.cond-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.cond-title-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cond-title-type {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-tertiary, #888);
  white-space: nowrap;
  flex-shrink: 0;
}

.cond-branches {
  padding: 6px 12px;
}

.branch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}

.branch-label {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(249,115,22,0.15);
  color: #F97316;
}

.handle-target {
  width: 10px !important;
  height: 10px !important;
  background: #F97316 !important;
  border: 2px solid #fff !important;
}

.handle-branch {
  width: 10px !important;
  height: 10px !important;
  background: #F97316 !important;
  border: 2px solid #fff !important;
}

.io-summary { display: flex; flex-wrap: wrap; gap: 3px; padding: 0 12px 2px; }
.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; }
</style>
