import ReactFlow, { Background, Controls, MiniMap } from 'reactflow'
import 'reactflow/dist/style.css'

/**
 * WorkflowCanvas - React Flow Wrapper Component
 *
 * Kapselt React Flow Setup (Background, Controls, MiniMap).
 * Separation of Concerns: Canvas-Logik getrennt von Editor-Orchestrierung.
 *
 * Props:
 * - nodes: Array of React Flow nodes
 * - edges: Array of React Flow edges
 * - nodeTypes: Object mapping node type to component
 * - onNodesChange: Handler for node changes (drag, delete, etc.)
 * - onEdgesChange: Handler for edge changes
 * - onConnect: Handler for new edge connections
 * - onNodeClick: Handler for node selection
 */
export function WorkflowCanvas({
  nodes,
  edges,
  nodeTypes,
  onNodesChange,
  onEdgesChange,
  onConnect,
  onNodeClick
}) {
  return (
    <div style={{ width: '100%', height: '100%' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        onNodeClick={onNodeClick}
        nodeTypes={nodeTypes}
        fitView
        className="workflow-canvas"
        minZoom={0.2}
        maxZoom={2}
        deleteKeyCode={['Backspace', 'Delete']}
        defaultEdgeOptions={{
          animated: false,
          style: { strokeWidth: 2 },
          deletable: true
        }}
      >
        <Background
          variant="dots"
          gap={16}
          size={1}
          color="var(--border)"
        />
        <Controls
          showZoom={true}
          showFitView={true}
          showInteractive={true}
        />
        <MiniMap
          nodeStrokeWidth={3}
          zoomable
          pannable
          style={{
            backgroundColor: 'var(--surface)',
            border: '1px solid var(--border)'
          }}
        />
      </ReactFlow>
    </div>
  )
}