import { memo } from 'react';
import { Handle, Position, NodeProps } from '@xyflow/react';
import { Plus } from 'lucide-react';
import { WorkflowReactFlowNode as WorkflowNodeType } from '../types/reactflow';

/**
 * AddStepNode - A ReactFlow node that renders the "Add Step" button
 * This node transforms with zoom/pan since it's part of the canvas
 */
const AddStepNode = memo(({ id, data }: NodeProps<WorkflowNodeType>) => {
  const handleClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    // Trigger the onSelectApp callback to open the app selector
    if (data.onSelectApp) {
      data.onSelectApp(id);
    }
  };

  return (
    <>
      {/* Target handle (top - receives connection from last node) */}
      <Handle
        type="target"
        position={Position.Top}
        className="!w-2 !h-2 !bg-[var(--wf-neutral-300)] !border-2 !border-white"
      />

      {/* Modern minimal add button - centered within node width */}
      <div className="w-[300px] flex items-center justify-center">
        <button
          onClick={handleClick}
          className="w-5 h-5 rounded-full bg-white border border-[var(--wf-neutral-200)] text-[var(--wf-neutral-400)] hover:text-[var(--wf-neutral-600)] shadow-[var(--wf-shadow-xs)] hover:shadow-[var(--wf-shadow-sm)] hover:border-[var(--wf-neutral-300)] flex items-center justify-center transition-all duration-150 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-[var(--wf-action)]/20 focus:ring-offset-1"
          title="Add a step"
          aria-label="Add a new step to the workflow"
        >
          <Plus className="w-3 h-3" strokeWidth={2} />
        </button>
      </div>
    </>
  );
});

AddStepNode.displayName = 'AddStepNode';

export default AddStepNode;