import { Handle, Position } from 'reactflow'

/**
 * LogicNode - Bedingungs-Knoten (If-Then-Else)
 *
 * Properties:
 * - data.label: Node-Label
 * - data.condition: Logic Expression Object
 * - selected: Boolean
 */
export function LogicNode({ data, selected }) {
  const hasCondition = !!data.condition && !!data.condition.operator

  // Condition Summary (vereinfacht für Display)
  const getConditionSummary = () => {
    if (!hasCondition) return 'Keine Bedingung'

    const op = data.condition.operator?.toUpperCase()
    const operandCount = data.condition.operands?.length || 0

    if (op === 'AND' || op === 'OR' || op === 'NOT') {
      return `${op} (${operandCount} Bedingungen)`
    }

    // Simple condition (ref, operator, value)
    if (data.condition.ref) {
      return `${data.condition.ref} ${data.condition.operator} ...`
    }

    return 'Bedingung definiert'
  }

  return (
    <div className={`workflow-node logic-node ${selected ? 'selected' : ''}`}>
      <div className="node-header">
        <div className="node-icon">⚡</div>
        <div className="node-label">{data.label || 'Logik'}</div>
      </div>

      <div className="node-body">
        <div className={`condition-summary ${hasCondition ? 'has-condition' : 'no-condition'}`}>
          {getConditionSummary()}
        </div>
      </div>

      <Handle
        type="target"
        position={Position.Top}
        id="in"
        style={{ background: '#FFC107' }}
      />

      {/* Zwei Source Handles für True/False Pfade */}
      <Handle
        type="source"
        position={Position.Bottom}
        id="true"
        style={{ left: '33%', background: '#4CAF50' }}
      />
      <Handle
        type="source"
        position={Position.Bottom}
        id="false"
        style={{ left: '66%', background: '#F44336' }}
      />
    </div>
  )
}
