admin / Synapse-Cortex

import { Handle, Position, useReactFlow, type NodeProps } from '@xyflow/react'
import type { ConditionNode as ConditionNodeType } from '../types'

export function ConditionNode({ id, data }: NodeProps<ConditionNodeType>) {
  const { updateNodeData, deleteElements } = useReactFlow()

  return (
    <div className="w-64 rounded-md border border-cortex-border bg-cortex-panel shadow-lg">
      <Handle type="target" position={Position.Top} className="!bg-accent-orange !w-2.5 !h-2.5 !border-cortex-bg" />
      <div className="flex items-center justify-between px-3 py-1.5 border-b border-cortex-border bg-cortex-panel2 rounded-t-md">
        <span className="text-[10px] font-display font-bold uppercase tracking-widest text-accent-orange">Condition</span>
        <button
          onClick={() => deleteElements({ nodes: [{ id }] })}
          className="text-cortex-muted hover:text-accent-red text-xs leading-none"
          title="Delete node"
        >
          ×
        </button>
      </div>
      <div className="p-3 space-y-2">
        <input
          value={data.label}
          onChange={(e) => updateNodeData(id, { label: e.target.value })}
          placeholder="Step label"
          className="w-full bg-cortex-panel2 border border-cortex-border rounded px-2 py-1 text-xs focus:outline-none focus:border-accent-orange nodrag"
        />
        <input
          value={data.expression}
          onChange={(e) => updateNodeData(id, { expression: e.target.value })}
          placeholder="Condition (for documentation only)"
          className="w-full bg-cortex-panel2 border border-cortex-border rounded px-2 py-1 text-xs font-mono focus:outline-none focus:border-accent-orange nodrag"
        />
        <div className="text-[9px] text-cortex-muted leading-tight">
          Execution always follows the True branch - the condition is documentation, not evaluated at runtime.
        </div>
      </div>
      <div className="relative flex justify-between px-6 py-1.5 border-t border-cortex-border text-[9px] uppercase tracking-wider">
        <span className="text-accent-green">True</span>
        <span className="text-accent-red">False</span>
      </div>
      <Handle
        type="source"
        position={Position.Bottom}
        id="true"
        style={{ left: '25%' }}
        className="!bg-accent-green !w-2.5 !h-2.5 !border-cortex-bg"
      />
      <Handle
        type="source"
        position={Position.Bottom}
        id="false"
        style={{ left: '75%' }}
        className="!bg-accent-red !w-2.5 !h-2.5 !border-cortex-bg"
      />
    </div>
  )
}