<template>
  <div
    class="wf-node"
    :class="{ selected: selected, 'wf-node-dual': hasDualOutlets }"
    :style="{ '--node-color': color }"
  >
    <Handle type="target" :position="Position.Left" class="wf-handle wf-handle-target" />

    <template v-if="hasDualOutlets">
      <div class="wf-node-body">
        <div class="wf-node-head">
          <span class="wf-node-dot" />
          <span class="wf-node-type">{{ typeLabel }}</span>
        </div>
        <div class="wf-node-label">{{ data.label }}</div>
      </div>
      <div class="wf-outlets">
        <div class="wf-outlet-row">
          <span class="wf-port-label wf-port-top">{{ dualOutletLabels.top }}</span>
          <Handle
            v-if="data.type === 'branch'"
            id="success"
            type="source"
            :position="Position.Right"
            class="wf-handle wf-handle-success wf-outlet-handle"
          />
          <Handle
            v-else-if="data.type === 'waitEvent'"
            id="triggered"
            type="source"
            :position="Position.Right"
            class="wf-handle wf-handle-success wf-outlet-handle"
          />
        </div>
        <div class="wf-outlet-row">
          <span class="wf-port-label wf-port-bottom">{{ dualOutletLabels.bottom }}</span>
          <Handle
            v-if="data.type === 'branch'"
            id="fail"
            type="source"
            :position="Position.Right"
            class="wf-handle wf-handle-fail wf-outlet-handle"
          />
          <Handle
            v-else-if="data.type === 'waitEvent'"
            id="timeout"
            type="source"
            :position="Position.Right"
            class="wf-handle wf-handle-fail wf-outlet-handle"
          />
        </div>
      </div>
    </template>

    <template v-else>
      <div class="wf-node-body">
        <div class="wf-node-head">
          <span class="wf-node-dot" />
          <span class="wf-node-type">{{ typeLabel }}</span>
        </div>
        <div class="wf-node-label">{{ data.label }}</div>
      </div>
      <Handle
        v-if="data.type !== 'end'"
        type="source"
        :position="Position.Right"
        class="wf-handle wf-handle-source"
      />
    </template>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Handle, Position } from '@vue-flow/core'
import { NODE_CATALOG_MAP } from '@/workflow/nodeCatalog'
import { WAIT_EVENT_HANDLE_LABELS } from '@/workflow/waitEventParams'

const props = defineProps<{
  id: string
  data: { type: string; label: string; params: Record<string, unknown> }
  selected?: boolean
}>()

const typeLabel = computed(() => NODE_CATALOG_MAP.get(props.data.type)?.label ?? props.data.type)
const color = computed(() => NODE_CATALOG_MAP.get(props.data.type)?.color ?? '#409eff')

const hasDualOutlets = computed(() => props.data.type === 'branch' || props.data.type === 'waitEvent')

const dualOutletLabels = computed(() => {
  if (props.data.type === 'waitEvent') {
    return {
      top: WAIT_EVENT_HANDLE_LABELS.triggered,
      bottom: WAIT_EVENT_HANDLE_LABELS.timeout
    }
  }
  if (props.data.type === 'branch') {
    return { top: '成立', bottom: '不成立' }
  }
  return { top: '', bottom: '' }
})
</script>

<style scoped>
.wf-node {
  min-width: 140px;
  padding: 8px 0 8px 12px;
  border-radius: 8px;
  border: 2px solid var(--node-color, #409eff);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  font-size: 12px;
  position: relative;
}
.wf-node-dual {
  display: flex;
  flex-direction: column;
  min-height: 88px;
  padding-right: 0;
}
.wf-node.selected {
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.35), 0 4px 12px rgba(0, 0, 0, 0.12);
}
.wf-node-body {
  flex: 1;
  padding-right: 8px;
}
.wf-node-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.wf-node-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--node-color);
}
.wf-node-type {
  color: #909399;
  font-size: 11px;
}
.wf-node-label {
  font-weight: 600;
  color: #303133;
  line-height: 1.4;
}
.wf-outlets {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  margin-top: 4px;
  padding-right: 0;
}
.wf-outlet-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-height: 22px;
  padding-right: 0;
}
.wf-port-label {
  font-size: 10px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
}
.wf-port-top {
  color: #529b2e;
  background: #f0f9eb;
}
.wf-port-bottom {
  color: #c45656;
  background: #fef0f0;
}
:deep(.wf-handle) {
  width: 10px;
  height: 10px;
  background: var(--node-color, #409eff);
  border: 2px solid #fff;
}
:deep(.wf-handle-target) {
  left: -5px !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}
:deep(.wf-handle-source) {
  right: -5px !important;
  top: 50% !important;
  transform: translate(50%, -50%) !important;
}
:deep(.wf-outlet-handle) {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  flex-shrink: 0;
  margin-right: -5px;
}
:deep(.wf-handle-success) {
  background: #67c23a;
}
:deep(.wf-handle-fail) {
  background: #f56c6c;
}
</style>
