frontend/src/WorkflowNode.tsx

import { Handle, Position, type NodeProps } from '@xyflow/react'
import { Bot, CircleDot, Flag, GitBranch, Hand, Wrench } from 'lucide-react'
import type { WorkflowNode as WNode } from './types'

const icons = { Input: CircleDot, 'AI Worker': Bot, 'Decision Rules': GitBranch, 'Human Review': Hand, 'Simulated Tool': Wrench, Output: Flag }

export default function WorkflowNode({ data, selected }: NodeProps<WNode>) {
  const Icon = icons[data.mode]
  const receivesFlow = data.mode !== 'Input' && data.mode !== 'Simulated Tool'
  const sendsFlow = data.mode !== 'Output' && data.mode !== 'Simulated Tool'
  return <div className={`flow-node ${data.mode.toLowerCase().replaceAll(' ', '-')} ${selected ? 'selected' : ''}`}>
    {receivesFlow && <Handle id="flow-in" type="target" position={Position.Left} />}
    {data.mode === 'Simulated Tool' && <Handle id="tool-in" className="tool-handle" type="target" position={Position.Top} />}
    <div className="node-icon"><Icon size={16} /></div>
    <div><small>{data.mode}</small><strong>{data.label}</strong></div>
    {sendsFlow && <Handle id="flow-out" type="source" position={Position.Right} />}
    {data.mode === 'AI Worker' && <Handle id="tool-out" className="tool-handle" type="source" position={Position.Bottom} />}
    {data.mode === 'AI Worker' && <span className="tool-port-label">TOOLS</span>}
  </div>
}