import { Handle, Position } from 'reactflow'

/**
 * JoinNode - Pfad-Konsolidierung
 *
 * Properties:
 * - data.label: Node-Label
 * - data.join_strategy: 'wait_all' | 'wait_any' | 'best_effort'
 * - data.skip_handling: 'ignore_skipped' | 'use_placeholder' | 'require_minimum'
 * - selected: Boolean
 */
export function JoinNode({ data, selected }) {
  const strategy = data.join_strategy || 'wait_all'
  const skipHandling = data.skip_handling || 'ignore_skipped'

  // Strategy Display Names
  const strategyLabels = {
    'wait_all': 'Alle warten',
    'wait_any': 'Beliebig',
    'best_effort': 'Best Effort'
  }

  const skipLabels = {
    'ignore_skipped': 'Ignorieren',
    'use_placeholder': 'Platzhalter',
    'require_minimum': 'Minimum'
  }

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

      <div className="node-body">
        <div className="strategy">
          <strong>Strategie:</strong> {strategyLabels[strategy] || strategy}
        </div>
        <div className="skip-handling">
          <strong>Skip:</strong> {skipLabels[skipHandling] || skipHandling}
        </div>
      </div>

      {/* Mehrere Target Handles für eingehende Pfade */}
      <Handle
        type="target"
        position={Position.Top}
        id="path_1"
        style={{ left: '25%', background: '#17A2B8' }}
      />
      <Handle
        type="target"
        position={Position.Top}
        id="path_2"
        style={{ left: '50%', background: '#17A2B8' }}
      />
      <Handle
        type="target"
        position={Position.Top}
        id="path_3"
        style={{ left: '75%', background: '#17A2B8' }}
      />

      {/* Ein Source Handle für konsolidierten Ausgang */}
      <Handle
        type="source"
        position={Position.Bottom}
        id="out"
        style={{ background: '#17A2B8' }}
      />
    </div>
  )
}