<template>
  <div class="property-panel">
    <template v-if="nodeData">
      <div class="panel-header">
        <span class="panel-title">节点属性</span>
        <a-button size="small" type="text" danger @click="$emit('delete-node', nodeData)">
          <template #icon><DeleteOutlined /></template>
        </a-button>
      </div>

      <div class="panel-body">
        <!-- Common fields -->
        <a-form layout="vertical" size="small">
          <a-form-item label="节点名称">
            <a-input
              :value="nodeData.label"
              @update:value="updateField('label', $event)"
            />
          </a-form-item>

          <a-form-item label="节点类型">
            <a-tag :color="typeColor">{{ typeLabel }}</a-tag>
          </a-form-item>

          <!-- Skill node fields -->
          <template v-if="nodeData.type === 'skill'">
            <a-form-item label="技能动作">
              <a-input
                :value="nodeData.action"
                @update:value="updateField('action', $event)"
                placeholder="输入技能动作名称"
              />
            </a-form-item>
            <a-form-item label="Agent">
              <a-input
                :value="nodeData.agent"
                @update:value="updateField('agent', $event)"
                placeholder="default"
              />
            </a-form-item>
            <a-form-item label="超时时间(秒)">
              <a-input-number
                :value="nodeData.timeout_seconds"
                @update:value="updateField('timeout_seconds', $event)"
                :min="1"
                :max="86400"
                style="width: 100%"
              />
            </a-form-item>
            <a-form-item label="重试次数">
              <a-input-number
                :value="nodeData.retry_count"
                @update:value="updateField('retry_count', $event)"
                :min="0"
                :max="10"
                style="width: 100%"
              />
            </a-form-item>
          </template>

          <!-- Condition node fields -->
          <template v-if="nodeData.type === 'condition'">
            <a-form-item label="条件表达式">
              <a-textarea
                :value="nodeData.config?.expression || ''"
                @update:value="updateConfig('expression', $event)"
                placeholder="例: status == 'approved'"
                :rows="3"
              />
            </a-form-item>
            <a-form-item label="超时时间(秒)">
              <a-input-number
                :value="nodeData.timeout_seconds"
                @update:value="updateField('timeout_seconds', $event)"
                :min="1"
                :max="3600"
                style="width: 100%"
              />
            </a-form-item>
          </template>

          <!-- Approval node fields -->
          <template v-if="nodeData.type === 'approval'">
            <a-form-item label="审批人">
              <a-input
                :value="nodeData.config?.approver || ''"
                @update:value="updateConfig('approver', $event)"
                placeholder="输入审批人"
              />
            </a-form-item>
            <a-form-item label="审批超时(秒)">
              <a-input-number
                :value="nodeData.config?.timeout || 3600"
                @update:value="updateConfig('timeout', $event)"
                :min="60"
                :max="86400"
                style="width: 100%"
              />
            </a-form-item>
          </template>

          <!-- Parallel node fields -->
          <template v-if="nodeData.type === 'parallel'">
            <a-form-item label="最大并行数">
              <a-input-number
                :value="nodeData.config?.max_parallel || 5"
                @update:value="updateConfig('max_parallel', $event)"
                :min="2"
                :max="20"
                style="width: 100%"
              />
            </a-form-item>
          </template>
        </a-form>
      </div>
    </template>

    <template v-else>
      <div class="panel-empty">
        <a-empty description="选择节点查看属性" />
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { DeleteOutlined } from '@ant-design/icons-vue'
import type { WorkflowNodeData } from '@/utils/workflowSerializer'

const props = defineProps<{
  nodeData: WorkflowNodeData | null
}>()

const emit = defineEmits<{
  'update-field': [field: string, value: unknown]
  'update-config': [key: string, value: unknown]
  'delete-node': [nodeData: WorkflowNodeData]
}>()

const typeLabel = computed(() => {
  const labels: Record<string, string> = {
    skill: '技能节点',
    condition: '条件节点',
    approval: '审批节点',
    parallel: '并行节点',
  }
  return labels[props.nodeData?.type || 'skill'] || '未知'
})

const typeColor = computed(() => {
  const colors: Record<string, string> = {
    skill: 'blue',
    condition: 'orange',
    approval: 'purple',
    parallel: 'green',
  }
  return colors[props.nodeData?.type || 'skill'] || 'default'
})

function updateField(field: string, value: unknown) {
  emit('update-field', field, value)
}

function updateConfig(key: string, value: unknown) {
  emit('update-config', key, value)
}
</script>

<style scoped>
.property-panel {
  width: 300px;
  border-left: 1px solid #f0f0f0;
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.panel-title {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.panel-body {
  padding: 12px 16px;
}

.panel-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
