<script setup lang="ts">
import { Handle, Position } from '@vue-flow/core'
import { PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons-vue'

interface Parameter {
  id: string
  name: string
  type: string
  defaultValue?: any
  description?: string
  required?: boolean
}

interface Props {
  id: string
  data: {
    label: string
    description?: string
    inputs: Parameter[]
    outputs: Parameter[]
    config?: any
  }
  selected?: boolean
}

const props = defineProps<Props>()
const emit = defineEmits(['add-input', 'add-output', 'remove-input', 'remove-output', 'edit-parameter'])

// 参数类型选项
const paramTypes = [
  { label: 'String', value: 'string', color: '#1890ff' },
  { label: 'Number', value: 'number', color: '#52c41a' },
  { label: 'Boolean', value: 'boolean', color: '#faad14' },
  { label: 'Object', value: 'object', color: '#722ed1' },
  { label: 'Array', value: 'array', color: '#13c2c2' },
  { label: 'Any', value: 'any', color: '#666666' },
  { label: 'File', value: 'file', color: '#f5222d' },
  { label: 'JSON', value: 'json', color: '#eb2f96' }
]

// 获取类型颜色
function getTypeColor(type: string): string {
  return paramTypes.find(t => t.value === type)?.color || '#666666'
}

// 添加输入参数
function addInput() {
  emit('add-input', props.id)
}

// 添加输出参数
function addOutput() {
  emit('add-output', props.id)
}

// 删除参数
function removeInput(paramId: string) {
  emit('remove-input', props.id, paramId)
}

function removeOutput(paramId: string) {
  emit('remove-output', props.id, paramId)
}

// 编辑参数
function editParameter(param: Parameter, isInput: boolean) {
  emit('edit-parameter', props.id, param, isInput)
}
</script>

<template>
  <div class="workflow-node task-node" :class="{ 'node-selected': selected }">
    <!-- 节点头部 -->
    <div class="node-header">
      <div class="node-icon">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
          <rect x="3" y="3" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" fill="currentColor"/>
          <path d="m9 12 2 2 4-4" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <span class="node-title">{{ data.label }}</span>
    </div>
    
    <!-- 节点描述 -->
    <div v-if="data.description" class="node-description">
      {{ data.description }}
    </div>
    
    <!-- 输入参数区域 -->
    <div class="node-section">
      <div class="section-header">
        <span class="section-title">输入参数</span>
        <button class="add-btn" @click="addInput" title="添加输入参数">
          <PlusOutlined :style="{ fontSize: '12px' }" />
        </button>
      </div>
      
      <div class="params-list">
        <div 
          v-for="(input, index) in data.inputs" 
          :key="input.id"
          class="param-item input-param"
        >
          <!-- 连接点 -->
          <Handle 
            :id="input.id"
            :position="Position.Left" 
            type="target" 
            class="param-handle param-handle-input"
            :style="{ 
              top: `${75 + index * 36}px`,
              background: getTypeColor(input.type)
            }"
          />
          
          <!-- 参数信息 -->
          <div class="param-content" @click="editParameter(input, true)">
            <div class="param-main">
              <span class="param-name">{{ input.name }}</span>
              <span class="param-type" :style="{ color: getTypeColor(input.type) }">
                {{ input.type }}
              </span>
            </div>
            <div v-if="input.description" class="param-desc">{{ input.description }}</div>
            <div v-if="input.defaultValue !== undefined" class="param-default">
              默认: {{ input.defaultValue }}
            </div>
          </div>
          
          <!-- 操作按钮 -->
          <div class="param-actions">
            <button class="action-btn edit-btn" @click.stop="editParameter(input, true)" title="编辑">
              <EditOutlined :style="{ fontSize: '10px' }" />
            </button>
            <button class="action-btn delete-btn" @click.stop="removeInput(input.id)" title="删除">
              <DeleteOutlined :style="{ fontSize: '10px' }" />
            </button>
          </div>
        </div>
        
        <div v-if="!data.inputs.length" class="empty-params">
          暂无输入参数
        </div>
      </div>
    </div>
    
    <!-- 输出参数区域 -->
    <div class="node-section">
      <div class="section-header">
        <span class="section-title">输出参数</span>
        <button class="add-btn" @click="addOutput" title="添加输出参数">
          <PlusOutlined :style="{ fontSize: '12px' }" />
        </button>
      </div>
      
      <div class="params-list">
        <div 
          v-for="(output, index) in data.outputs" 
          :key="output.id"
          class="param-item output-param"
        >
          <!-- 参数信息 -->
          <div class="param-content" @click="editParameter(output, false)">
            <div class="param-main">
              <span class="param-name">{{ output.name }}</span>
              <span class="param-type" :style="{ color: getTypeColor(output.type) }">
                {{ output.type }}
              </span>
            </div>
            <div v-if="output.description" class="param-desc">{{ output.description }}</div>
            <div v-if="output.defaultValue !== undefined" class="param-default">
              默认: {{ output.defaultValue }}
            </div>
          </div>
          
          <!-- 操作按钮 -->
          <div class="param-actions">
            <button class="action-btn edit-btn" @click.stop="editParameter(output, false)" title="编辑">
              <EditOutlined :style="{ fontSize: '10px' }" />
            </button>
            <button class="action-btn delete-btn" @click.stop="removeOutput(output.id)" title="删除">
              <DeleteOutlined :style="{ fontSize: '10px' }" />
            </button>
          </div>
          
          <!-- 连接点 -->
          <Handle 
            :id="output.id"
            :position="Position.Right" 
            type="source" 
            class="param-handle param-handle-output"
            :style="{ 
              top: `${75 + index * 36}px`,
              background: getTypeColor(output.type)
            }"
          />
        </div>
        
        <div v-if="!data.outputs.length" class="empty-params">
          暂无输出参数
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.workflow-node {
  background: white;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  min-width: 240px;
  max-width: 320px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  font-size: 12px;
  transition: all 0.2s ease;
}

.node-selected {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.task-node {
  border-color: #1890ff;
}

.task-node .node-header {
  background: linear-gradient(135deg, #1890ff, #0050b3);
  color: white;
}

.node-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 6px 6px 0 0;
}

.node-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
}

.node-title {
  font-weight: 600;
  font-size: 13px;
  flex: 1;
}

.node-description {
  padding: 8px 12px;
  font-size: 11px;
  color: #666;
  border-bottom: 1px solid #f0f0f0;
}

.node-section {
  border-bottom: 1px solid #f0f0f0;
}

.node-section:last-child {
  border-bottom: none;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 4px;
  background: #fafafa;
}

.section-title {
  font-size: 10px;
  color: #666;
  font-weight: 600;
  text-transform: uppercase;
}

.add-btn {
  background: none;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  padding: 2px 4px;
  cursor: pointer;
  color: #666;
  transition: all 0.2s;
}

.add-btn:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.params-list {
  padding: 4px 0;
}

.param-item {
  display: flex;
  align-items: flex-start;
  padding: 6px 12px;
  min-height: 32px;
  position: relative;
  transition: background 0.2s;
}

.param-item:hover {
  background: #f8f9fa;
}

.input-param {
  padding-left: 20px;
}

.output-param {
  padding-right: 20px;
  flex-direction: row-reverse;
}

.param-content {
  flex: 1;
  cursor: pointer;
  min-width: 0;
}

.param-main {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.param-name {
  font-size: 11px;
  font-weight: 500;
  color: #333;
  flex-shrink: 0;
}

.param-type {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(0,0,0,0.05);
  text-transform: uppercase;
}

.param-desc {
  font-size: 10px;
  color: #999;
  line-height: 1.3;
  margin-bottom: 2px;
}

.param-default {
  font-size: 9px;
  color: #52c41a;
  font-family: monospace;
}

.param-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.2s;
}

.param-item:hover .param-actions {
  opacity: 1;
}

.action-btn {
  background: none;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  padding: 2px;
  cursor: pointer;
  color: #666;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.edit-btn:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.delete-btn:hover {
  border-color: #ff4d4f;
  color: #ff4d4f;
}

.param-handle {
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  position: absolute !important;
  transition: all 0.2s;
  cursor: crosshair;
}

.param-handle:hover {
  transform: scale(1.2);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.param-handle-input {
  left: -7px;
}

.param-handle-output {
  right: -7px;
}

.empty-params {
  padding: 12px;
  text-align: center;
  color: #999;
  font-size: 11px;
}
</style>