/**
 * 自定义节点类型定义
 */
import { defineComponent, h } from 'vue'
import { Handle, Position } from '@vue-flow/core'

// 开始节点（只有输出）
export const StartNode = defineComponent({
  name: 'StartNode',
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props, { attrs }) {
    const nodeClass = (attrs.class as string) || ''
    const executionClass = props.data?.executionClass || ''
    const allClasses = ['custom-node', 'start-node', nodeClass, executionClass].filter(Boolean).join(' ')
    return () => {
      // 根据执行状态动态设置样式
      const isExecuting = allClasses.includes('executing')
      const isExecuted = allClasses.includes('executed')
      const isFailed = allClasses.includes('failed')
      
      const baseStyle: any = {
        padding: '8px 16px',
        borderRadius: '6px',
        background: '#67c23a',
        color: 'white',
        textAlign: 'center',
        minWidth: '100px',
        fontSize: '13px',
        fontWeight: '500',
        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
        position: 'relative',
        border: '2px solid transparent',
        transition: 'all 0.3s ease-in-out'
      }
      
      // 执行状态样式（覆盖基础样式）
      if (isExecuting) {
        baseStyle.border = '3px solid #409eff'
        baseStyle.boxShadow = '0 0 0 3px rgba(64, 158, 255, 0.5), 0 0 20px rgba(64, 158, 255, 0.8)'
        baseStyle.transform = 'scale(1.05)'
      } else if (isExecuted) {
        baseStyle.border = '3px solid #67c23a'
        baseStyle.boxShadow = '0 0 0 3px rgba(103, 194, 58, 0.5), 0 2px 8px rgba(103, 194, 58, 0.3)'
      } else if (isFailed) {
        baseStyle.border = '3px solid #f56c6c'
        baseStyle.boxShadow = '0 0 0 3px rgba(245, 108, 108, 0.5), 0 2px 8px rgba(245, 108, 108, 0.3)'
      }
      
      const errorMessage = props.data?.errorMessage
      
      return h('div', {
        class: allClasses,
        style: baseStyle,
        title: isFailed && errorMessage ? errorMessage : undefined
      }, [
        h(Handle, {
          type: 'source',
          position: Position.Bottom,
          id: 'bottom',
          style: {
            background: '#67c23a',
            width: '8px',
            height: '8px'
          }
        }),
        h(Handle, {
          type: 'source',
          position: Position.Right,
          id: 'right',
          style: {
            background: '#67c23a',
            width: '8px',
            height: '8px'
          }
        }),
        // 状态指示器（右上角）
        isExecuting ? h('div', {
          style: {
            position: 'absolute',
            top: '-8px',
            right: '-8px',
            width: '20px',
            height: '20px',
            background: '#409eff',
            borderRadius: '50%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: '0 2px 8px rgba(64, 158, 255, 0.6)',
            zIndex: 3001, // 确保在模态框之上（Element Plus 模态框 z-index 通常是 2000-2100）
          }
        }, [
          h('div', {
            class: 'node-loading-spinner',
            style: {
              width: '12px',
              height: '12px',
              border: '2px solid rgba(255, 255, 255, 0.3)',
              borderTop: '2px solid white',
              borderRadius: '50%',
              animation: 'spin 0.8s linear infinite'
            }
          })
        ]) : null,
        isExecuted ? h('div', {
          style: {
            position: 'absolute',
            top: '-8px',
            right: '-8px',
            width: '20px',
            height: '20px',
            background: '#67c23a',
            borderRadius: '50%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: '0 2px 8px rgba(103, 194, 58, 0.6)',
            zIndex: 3001, // 确保在模态框之上（Element Plus 模态框 z-index 通常是 2000-2100）
            fontSize: '12px',
            color: 'white'
          }
        }, '✓') : null,
        isFailed ? h('div', {
          style: {
            position: 'absolute',
            top: '-8px',
            right: '-8px',
            width: '20px',
            height: '20px',
            background: '#f56c6c',
            borderRadius: '50%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: '0 2px 8px rgba(245, 108, 108, 0.6)',
            zIndex: 3001, // 确保在模态框之上（Element Plus 模态框 z-index 通常是 2000-2100）
            fontSize: '12px',
            color: 'white'
          }
        }, '✕') : null,
        h('div', {
          style: {
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: '4px',
            position: 'relative',
            zIndex: 1
          }
        }, [
          props.data.label || '开始'
        ])
      ])
    }
  }
})

// LLM节点（有输入和输出）
export const LLMNode = defineComponent({
  name: 'LLMNode',
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props, { attrs }) {
    const nodeClass = (attrs.class as string) || ''
    const executionClass = props.data?.executionClass || ''
    const allClasses = ['custom-node', 'llm-node', nodeClass, executionClass].filter(Boolean).join(' ')
    return () => {
      // 根据执行状态动态设置样式
      const isExecuting = allClasses.includes('executing')
      const isExecuted = allClasses.includes('executed')
      const isFailed = allClasses.includes('failed')
      
      const baseStyle: any = {
        padding: '8px 16px',
        borderRadius: '6px',
        background: '#409eff',
        color: 'white',
        textAlign: 'center',
        minWidth: '100px',
        fontSize: '13px',
        fontWeight: '500',
        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
        position: 'relative',
        border: '2px solid transparent',
        transition: 'all 0.3s ease-in-out'
      }
      
      // 执行状态样式（覆盖基础样式）
      if (isExecuting) {
        baseStyle.border = '3px solid #409eff'
        baseStyle.boxShadow = '0 0 0 3px rgba(64, 158, 255, 0.5), 0 0 20px rgba(64, 158, 255, 0.8)'
        baseStyle.transform = 'scale(1.05)'
        baseStyle.animation = 'pulse-blue 1.5s infinite'
      } else if (isExecuted) {
        baseStyle.border = '3px solid #67c23a'
        baseStyle.boxShadow = '0 0 0 3px rgba(103, 194, 58, 0.5), 0 2px 8px rgba(103, 194, 58, 0.3)'
      } else if (isFailed) {
        baseStyle.border = '3px solid #f56c6c'
        baseStyle.boxShadow = '0 0 0 3px rgba(245, 108, 108, 0.5), 0 2px 8px rgba(245, 108, 108, 0.3)'
      }
      
      return h('div', {
        class: allClasses,
        style: baseStyle
      }, [
        h(Handle, {
          type: 'target',
          position: Position.Top,
          id: 'top',
          style: {
            background: '#409eff',
            width: '8px',
            height: '8px'
          }
        }),
        h(Handle, {
          type: 'target',
          position: Position.Left,
          id: 'left',
          style: {
            background: '#409eff',
            width: '8px',
            height: '8px'
          }
        }),
        // 状态指示器（右上角）
        isExecuting ? h('div', {
          style: {
            position: 'absolute',
            top: '-8px',
            right: '-8px',
            width: '20px',
            height: '20px',
            background: '#409eff',
            borderRadius: '50%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: '0 2px 8px rgba(64, 158, 255, 0.6)',
            zIndex: 3001, // 确保在模态框之上（Element Plus 模态框 z-index 通常是 2000-2100）
          }
        }, [
          h('div', {
            class: 'node-loading-spinner',
            style: {
              width: '12px',
              height: '12px',
              border: '2px solid rgba(255, 255, 255, 0.3)',
              borderTop: '2px solid white',
              borderRadius: '50%',
              animation: 'spin 0.8s linear infinite'
            }
          })
        ]) : null,
        isExecuted ? h('div', {
          style: {
            position: 'absolute',
            top: '-8px',
            right: '-8px',
            width: '20px',
            height: '20px',
            background: '#67c23a',
            borderRadius: '50%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: '0 2px 8px rgba(103, 194, 58, 0.6)',
            zIndex: 3001, // 确保在模态框之上（Element Plus 模态框 z-index 通常是 2000-2100）
            fontSize: '12px',
            color: 'white'
          }
        }, '✓') : null,
        isFailed ? h('div', {
          style: {
            position: 'absolute',
            top: '-8px',
            right: '-8px',
            width: '20px',
            height: '20px',
            background: '#f56c6c',
            borderRadius: '50%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: '0 2px 8px rgba(245, 108, 108, 0.6)',
            zIndex: 3001, // 确保在模态框之上（Element Plus 模态框 z-index 通常是 2000-2100）
            fontSize: '12px',
            color: 'white'
          }
        }, '✕') : null,
        h('div', {
          style: {
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: '4px',
            position: 'relative',
            zIndex: 1
          }
        }, [
          props.data.label || 'LLM'
        ]),
        h(Handle, {
          type: 'source',
          position: Position.Bottom,
          id: 'bottom',
          style: {
            background: '#409eff',
            width: '8px',
            height: '8px'
          }
        }),
        h(Handle, {
          type: 'source',
          position: Position.Right,
          id: 'right',
          style: {
            background: '#409eff',
            width: '8px',
            height: '8px'
          }
        })
      ])
    }
  }
})

// 条件节点（有输入和两个输出：true/false）
export const ConditionNode = defineComponent({
  name: 'ConditionNode',
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props, { attrs }) {
    const nodeClass = (attrs.class as string) || ''
    const executionClass = props.data?.executionClass || ''
    const allClasses = ['custom-node', 'condition-node', nodeClass, executionClass].filter(Boolean).join(' ')
    return () => {
      const isExecuting = allClasses.includes('executing')
      const isExecuted = allClasses.includes('executed')
      const isFailed = allClasses.includes('failed')
      
      const baseStyle: any = {
        padding: '8px 16px',
        borderRadius: '6px',
        background: '#e6a23c',
        color: 'white',
        textAlign: 'center',
        minWidth: '100px',
        fontSize: '13px',
        fontWeight: '500',
        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
        position: 'relative',
        border: '2px solid transparent',
        transition: 'all 0.3s ease-in-out'
      }
      
      if (isExecuting) {
        baseStyle.border = '3px solid #409eff'
        baseStyle.boxShadow = '0 0 0 3px rgba(64, 158, 255, 0.5), 0 0 20px rgba(64, 158, 255, 0.8)'
        baseStyle.transform = 'scale(1.05)'
        baseStyle.animation = 'pulse-blue 1.5s infinite'
      } else if (isExecuted) {
        baseStyle.border = '3px solid #67c23a'
        baseStyle.boxShadow = '0 0 0 3px rgba(103, 194, 58, 0.5), 0 2px 8px rgba(103, 194, 58, 0.3)'
      } else if (isFailed) {
        baseStyle.border = '3px solid #f56c6c'
        baseStyle.boxShadow = '0 0 0 3px rgba(245, 108, 108, 0.5), 0 2px 8px rgba(245, 108, 108, 0.3)'
      }
      
      return h('div', {
        class: allClasses,
        style: baseStyle
      }, [
        h(Handle, {
          type: 'target',
          position: Position.Top,
          id: 'top',
          style: {
            background: '#e6a23c',
            width: '8px',
            height: '8px'
          }
        }),
        h(Handle, {
          type: 'target',
          position: Position.Left,
          id: 'left',
          style: {
            background: '#e6a23c',
            width: '8px',
            height: '8px'
          }
        }),
        // 状态指示器（右上角）
        isExecuting ? h('div', {
          style: {
            position: 'absolute',
            top: '-8px',
            right: '-8px',
            width: '20px',
            height: '20px',
            background: '#409eff',
            borderRadius: '50%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: '0 2px 8px rgba(64, 158, 255, 0.6)',
            zIndex: 3001, // 确保在模态框之上（Element Plus 模态框 z-index 通常是 2000-2100）
          }
        }, [
          h('div', {
            class: 'node-loading-spinner',
            style: {
              width: '12px',
              height: '12px',
              border: '2px solid rgba(255, 255, 255, 0.3)',
              borderTop: '2px solid white',
              borderRadius: '50%',
              animation: 'spin 0.8s linear infinite'
            }
          })
        ]) : null,
        isExecuted ? h('div', {
          style: {
            position: 'absolute',
            top: '-8px',
            right: '-8px',
            width: '20px',
            height: '20px',
            background: '#67c23a',
            borderRadius: '50%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: '0 2px 8px rgba(103, 194, 58, 0.6)',
            zIndex: 3001, // 确保在模态框之上（Element Plus 模态框 z-index 通常是 2000-2100）
            fontSize: '12px',
            color: 'white'
          }
        }, '✓') : null,
        isFailed ? h('div', {
          style: {
            position: 'absolute',
            top: '-8px',
            right: '-8px',
            width: '20px',
            height: '20px',
            background: '#f56c6c',
            borderRadius: '50%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: '0 2px 8px rgba(245, 108, 108, 0.6)',
            zIndex: 3001, // 确保在模态框之上（Element Plus 模态框 z-index 通常是 2000-2100）
            fontSize: '12px',
            color: 'white'
          }
        }, '✕') : null,
        h('div', {
          style: {
            position: 'relative',
            zIndex: 1
          }
        }, props.data.label || '条件'),
        h(Handle, {
          type: 'source',
          position: Position.Bottom,
          id: 'true',
          style: {
            background: '#67c23a',
            width: '8px',
            height: '8px',
            left: '30%'
          }
        }),
        h(Handle, {
          type: 'source',
          position: Position.Bottom,
          id: 'false',
          style: {
            background: '#f56c6c',
            width: '8px',
            height: '8px',
            right: '30%'
          }
        }),
        h(Handle, {
          type: 'source',
          position: Position.Right,
          id: 'right',
          style: {
            background: '#e6a23c',
            width: '8px',
            height: '8px'
          }
        })
      ])
    }
  }
})

// 结束节点（只有输入）
export const EndNode = defineComponent({
  name: 'EndNode',
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props, { attrs }) {
    const nodeClass = (attrs.class as string) || ''
    const executionClass = props.data?.executionClass || ''
    const allClasses = ['custom-node', 'end-node', nodeClass, executionClass].filter(Boolean).join(' ')
    return () => {
      const isExecuting = allClasses.includes('executing')
      const isExecuted = allClasses.includes('executed')
      const isFailed = allClasses.includes('failed')
      
      const baseStyle: any = {
        padding: '8px 16px',
        borderRadius: '6px',
        background: '#f56c6c',
        color: 'white',
        textAlign: 'center',
        minWidth: '100px',
        fontSize: '13px',
        fontWeight: '500',
        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
        position: 'relative',
        border: '2px solid transparent',
        transition: 'all 0.3s ease-in-out'
      }
      
      if (isExecuting) {
        baseStyle.border = '3px solid #409eff'
        baseStyle.boxShadow = '0 0 0 3px rgba(64, 158, 255, 0.5), 0 0 20px rgba(64, 158, 255, 0.8)'
        baseStyle.transform = 'scale(1.05)'
        baseStyle.animation = 'pulse-blue 1.5s infinite'
      } else if (isExecuted) {
        baseStyle.border = '3px solid #67c23a'
        baseStyle.boxShadow = '0 0 0 3px rgba(103, 194, 58, 0.5), 0 2px 8px rgba(103, 194, 58, 0.3)'
      } else if (isFailed) {
        baseStyle.border = '3px solid #f56c6c'
        baseStyle.boxShadow = '0 0 0 3px rgba(245, 108, 108, 0.5), 0 2px 8px rgba(245, 108, 108, 0.3)'
      }
      
      return h('div', {
        class: allClasses,
        style: baseStyle
      }, [
        h(Handle, {
          type: 'target',
          position: Position.Top,
          id: 'top',
          style: {
            background: '#f56c6c',
            width: '8px',
            height: '8px'
          }
        }),
        h(Handle, {
          type: 'target',
          position: Position.Left,
          id: 'left',
          style: {
            background: '#f56c6c',
            width: '8px',
            height: '8px'
          }
        }),
        // 状态指示器（右上角）
        isExecuting ? h('div', {
          style: {
            position: 'absolute',
            top: '-8px',
            right: '-8px',
            width: '20px',
            height: '20px',
            background: '#409eff',
            borderRadius: '50%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: '0 2px 8px rgba(64, 158, 255, 0.6)',
            zIndex: 3001, // 确保在模态框之上（Element Plus 模态框 z-index 通常是 2000-2100）
          }
        }, [
          h('div', {
            class: 'node-loading-spinner',
            style: {
              width: '12px',
              height: '12px',
              border: '2px solid rgba(255, 255, 255, 0.3)',
              borderTop: '2px solid white',
              borderRadius: '50%',
              animation: 'spin 0.8s linear infinite'
            }
          })
        ]) : null,
        isExecuted ? h('div', {
          style: {
            position: 'absolute',
            top: '-8px',
            right: '-8px',
            width: '20px',
            height: '20px',
            background: '#67c23a',
            borderRadius: '50%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: '0 2px 8px rgba(103, 194, 58, 0.6)',
            zIndex: 3001, // 确保在模态框之上（Element Plus 模态框 z-index 通常是 2000-2100）
            fontSize: '12px',
            color: 'white'
          }
        }, '✓') : null,
        isFailed ? h('div', {
          style: {
            position: 'absolute',
            top: '-8px',
            right: '-8px',
            width: '20px',
            height: '20px',
            background: '#f56c6c',
            borderRadius: '50%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: '0 2px 8px rgba(245, 108, 108, 0.6)',
            zIndex: 3001, // 确保在模态框之上（Element Plus 模态框 z-index 通常是 2000-2100）
            fontSize: '12px',
            color: 'white'
          }
        }, '✕') : null,
        h('div', {
          style: {
            position: 'relative',
            zIndex: 1
          }
        }, props.data.label || '结束')
      ])
    }
  }
})

// 默认节点（有输入和输出）
export const DefaultNode = defineComponent({
  name: 'DefaultNode',
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props, { attrs }) {
    const nodeClass = (attrs.class as string) || ''
    const executionClass = props.data?.executionClass || ''
    const allClasses = ['custom-node', 'default-node', nodeClass, executionClass].filter(Boolean).join(' ')
    return () => {
      const isExecuting = allClasses.includes('executing')
      const isExecuted = allClasses.includes('executed')
      const isFailed = allClasses.includes('failed')
      
      const baseStyle: any = {
        padding: '8px 16px',
        borderRadius: '6px',
        background: '#909399',
        color: 'white',
        textAlign: 'center',
        minWidth: '100px',
        fontSize: '13px',
        fontWeight: '500',
        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
        position: 'relative',
        border: '2px solid transparent',
        transition: 'all 0.3s ease-in-out'
      }
      
      if (isExecuting) {
        baseStyle.border = '3px solid #409eff'
        baseStyle.boxShadow = '0 0 0 3px rgba(64, 158, 255, 0.5), 0 0 20px rgba(64, 158, 255, 0.8)'
        baseStyle.transform = 'scale(1.05)'
        baseStyle.animation = 'pulse-blue 1.5s infinite'
      } else if (isExecuted) {
        baseStyle.border = '3px solid #67c23a'
        baseStyle.boxShadow = '0 0 0 3px rgba(103, 194, 58, 0.5), 0 2px 8px rgba(103, 194, 58, 0.3)'
      } else if (isFailed) {
        baseStyle.border = '3px solid #f56c6c'
        baseStyle.boxShadow = '0 0 0 3px rgba(245, 108, 108, 0.5), 0 2px 8px rgba(245, 108, 108, 0.3)'
      }
      
      return h('div', {
        class: allClasses,
        style: baseStyle
      }, [
        h(Handle, {
          type: 'target',
          position: Position.Top,
          id: 'top',
          style: {
            background: '#909399',
            width: '8px',
            height: '8px'
          }
        }),
        h(Handle, {
          type: 'target',
          position: Position.Left,
          id: 'left',
          style: {
            background: '#909399',
            width: '8px',
            height: '8px'
          }
        }),
        // 状态指示器（右上角）
        isExecuting ? h('div', {
          style: {
            position: 'absolute',
            top: '-8px',
            right: '-8px',
            width: '20px',
            height: '20px',
            background: '#409eff',
            borderRadius: '50%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: '0 2px 8px rgba(64, 158, 255, 0.6)',
            zIndex: 3001, // 确保在模态框之上（Element Plus 模态框 z-index 通常是 2000-2100）
          }
        }, [
          h('div', {
            class: 'node-loading-spinner',
            style: {
              width: '12px',
              height: '12px',
              border: '2px solid rgba(255, 255, 255, 0.3)',
              borderTop: '2px solid white',
              borderRadius: '50%',
              animation: 'spin 0.8s linear infinite'
            }
          })
        ]) : null,
        isExecuted ? h('div', {
          style: {
            position: 'absolute',
            top: '-8px',
            right: '-8px',
            width: '20px',
            height: '20px',
            background: '#67c23a',
            borderRadius: '50%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: '0 2px 8px rgba(103, 194, 58, 0.6)',
            zIndex: 3001, // 确保在模态框之上（Element Plus 模态框 z-index 通常是 2000-2100）
            fontSize: '12px',
            color: 'white'
          }
        }, '✓') : null,
        isFailed ? h('div', {
          style: {
            position: 'absolute',
            top: '-8px',
            right: '-8px',
            width: '20px',
            height: '20px',
            background: '#f56c6c',
            borderRadius: '50%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            boxShadow: '0 2px 8px rgba(245, 108, 108, 0.6)',
            zIndex: 3001, // 确保在模态框之上（Element Plus 模态框 z-index 通常是 2000-2100）
            fontSize: '12px',
            color: 'white'
          }
        }, '✕') : null,
        h('div', {
          style: {
            position: 'relative',
            zIndex: 1
          }
        }, props.data.label || '节点'),
        h(Handle, {
          type: 'source',
          position: Position.Bottom,
          id: 'bottom',
          style: {
            background: '#909399',
            width: '8px',
            height: '8px'
          }
        }),
        h(Handle, {
          type: 'source',
          position: Position.Right,
          id: 'right',
          style: {
            background: '#909399',
            width: '8px',
            height: '8px'
          }
        })
      ])
    }
  }
})
