NodeFlowEditor<T>({
  Key? key,
  required NodeFlowController<T> controller,
  required Widget Function(BuildContext, Node<T>) nodeBuilder,
  required NodeFlowTheme theme,
  NodeShape? Function(BuildContext, Node<T>)? nodeShapeBuilder,
  Widget Function(BuildContext, Node<T>, Widget)? nodeContainerBuilder,
  PortBuilder<T>? portBuilder,
  LabelBuilder? labelBuilder,
  ConnectionStyleOverrides? Function(Connection)? connectionStyleResolver,
  NodeFlowEvents<T>? events,
  NodeFlowBehavior behavior = NodeFlowBehavior.design,
  bool scrollToZoom = true,
  bool showAnnotations = true,
})

required NodeFlowController<T> controller

late final NodeFlowController<MyData> controller;

@override
void initState() {
  super.initState();
  controller = NodeFlowController<MyData>(
    config: NodeFlowConfig(
      snapToGrid: true,
      gridSize: 20.0,
      autoPan: AutoPanConfig.normal,
    ),
  );
}

@override
void dispose() {
  controller.dispose();
  super.dispose();
}

required Widget Function(BuildContext, Node<T>) nodeBuilder

nodeBuilder: (context, node) {
  return Container(
    padding: EdgeInsets.all(12),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(8),
      border: Border.all(color: Colors.blue),
    ),
    child: Text(node.data.label),
  );
}

required NodeFlowTheme theme

theme: NodeFlowTheme.light
// or
theme: NodeFlowTheme.dark
// or custom theme
theme: NodeFlowTheme(
  nodeTheme: NodeTheme(...),
  connectionTheme: ConnectionTheme(...),
  portTheme: PortTheme(...),
  backgroundColor: Colors.grey[50]!,
)

NodeShape? Function(BuildContext, Node<T>)? nodeShapeBuilder

nodeShapeBuilder: (context, node) {
  switch (node.type) {
    case 'Terminal':
      return CircleShape(
        fillColor: Colors.green,
        strokeColor: Colors.darkGreen,
        strokeWidth: 2.0,
      );
    case 'Decision':
      return DiamondShape(
        fillColor: Colors.yellow,
        strokeColor: Colors.black,
      );
    default:
      return null; // Rectangular node
  }
}

Widget Function(BuildContext, Node<T>, Widget)? nodeContainerBuilder

nodeContainerBuilder: (context, node, content) {
  return Container(
    decoration: BoxDecoration(
      border: Border.all(
        color: node.isSelected ? Colors.blue : Colors.grey,
        width: node.isSelected ? 2 : 1,
      ),
      boxShadow: node.isSelected
          ? [BoxShadow(color: Colors.blue.withOpacity(0.3), blurRadius: 8)]
          : null,
    ),
    child: content,
  );
}

PortBuilder<T>? portBuilder

portBuilder: (context, node, port, isOutput, isConnected) {
  // Color ports based on data type
  final color = port.name.contains('error')
      ? Colors.red
      : null; // Use theme default

  return PortWidget(
    port: port,
    theme: Theme.of(context).extension<NodeFlowTheme>()!.portTheme,
    isConnected: isConnected,
    color: color,
  );
}

LabelBuilder? labelBuilder

labelBuilder: (context, connection, label, position) {
  return Positioned(
    left: position.left,
    top: position.top,
    child: Container(
      padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
      decoration: BoxDecoration(
        color: connection.data?['priority'] == 'high'
            ? Colors.orange.shade100
            : Colors.white,
        borderRadius: BorderRadius.circular(4),
      ),
      child: Text(label.text),
    ),
  );
}

ConnectionStyleOverrides? Function(Connection)? connectionStyleResolver

connectionStyleResolver: (connection) {
  if (connection.data?['type'] == 'error') {
    return ConnectionStyleOverrides(
      color: Colors.red,
      selectedColor: Colors.red.shade700,
      strokeWidth: 3.0,
    );
  }
  return null; // Use theme defaults
}

NodeFlowEvents<T>? events

NodeFlowBehavior behavior = NodeFlowBehavior.design

bool scrollToZoom = true

bool showAnnotations = true

// Full editing mode (default)
NodeFlowEditor(
  behavior: NodeFlowBehavior.design,
  // ...
)

// Preview mode - rearrange but no structural changes
NodeFlowEditor(
  behavior: NodeFlowBehavior.preview,
  // ...
)

// Presentation mode - display only
NodeFlowEditor(
  behavior: NodeFlowBehavior.present,
  // ...
)

if (controller.behavior.canDelete) {
  // Allow deletion
}

if (controller.behavior.canModify) {
  // Any CRUD operation allowed
}

if (controller.behavior.isInteractive) {
  // Any interaction allowed
}

class MyFlowEditor extends StatefulWidget {
  @override
  State<MyFlowEditor> createState() => _MyFlowEditorState();
}

class _MyFlowEditorState extends State<MyFlowEditor> {
  late final NodeFlowController<MyNodeData> _controller;
  Node<MyNodeData>? _selectedNode;

  @override
  void initState() {
    super.initState();
    _controller = NodeFlowController<MyNodeData>(
      config: NodeFlowConfig(
        snapToGrid: true,
        gridSize: 20.0,
        autoPan: AutoPanConfig.normal,
        showMinimap: true,
      ),
    );
    _initializeGraph();
  }

  void _initializeGraph() {
    final node1 = Node<MyNodeData>(
      id: 'node-1',
      type: 'start',
      position: Offset(100, 100),
      size: Size(150, 80),
      data: MyNodeData(label: 'Start'),
      outputPorts: [
        Port(id: 'node-1-out', name: 'Output'),
      ],
    );
    _controller.addNode(node1);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Node Flow Editor'),
        actions: [
          IconButton(icon: Icon(Icons.add), onPressed: _addNode),
          if (_selectedNode != null)
            IconButton(icon: Icon(Icons.delete), onPressed: _deleteSelectedNode),
        ],
      ),
      body: Row(
        children: [
          Expanded(
            flex: 3,
            child: NodeFlowEditor<MyNodeData>(
              controller: _controller,
              theme: NodeFlowTheme.light,
              behavior: NodeFlowBehavior.design,
              scrollToZoom: true,
              showAnnotations: true,
              nodeBuilder: (context, node) => _buildNode(node),
              nodeShapeBuilder: (context, node) {
                if (node.type == 'start') {
                  return CircleShape(fillColor: Colors.green);
                }
                return null;
              },
              events: NodeFlowEvents(
                node: NodeEvents(
                  onSelected: (node) => setState(() => _selectedNode = node),
                  onDoubleTap: (node) => _editNode(node),
                  onContextMenu: (node, pos) => _showNodeMenu(node, pos),
                ),
                connection: ConnectionEvents(
                  onCreated: (conn) => _showSnackBar('Connection created'),
                  onDeleted: (conn) => _showSnackBar('Connection deleted'),
                ),
                viewport: ViewportEvents(
                  onCanvasTap: (pos) => _controller.deselectAll(),
                ),
                onInit: () => _controller.fitToView(),
              ),
            ),
          ),
          if (_selectedNode != null)
            SizedBox(
              width: 300,
              child: _buildPropertiesPanel(),
            ),
        ],
      ),
    );
  }

  Widget _buildNode(Node<MyNodeData> node) {
    return Container(
      padding: EdgeInsets.all(12),
      child: Text(
        node.data.label,
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
    );
  }

  Widget _buildPropertiesPanel() {
    return Container(
      color: Colors.grey[100],
      padding: EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('Properties', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
          SizedBox(height: 16),
          Text('Node ID: ${_selectedNode!.id}'),
          Text('Type: ${_selectedNode!.type}'),
          SizedBox(height: 16),
          ElevatedButton(onPressed: _deleteSelectedNode, child: Text('Delete')),
        ],
      ),
    );
  }

  void _addNode() {
    final node = Node<MyNodeData>(
      id: 'node-${DateTime.now().millisecondsSinceEpoch}',
      type: 'process',
      position: Offset(200, 200),
      size: Size(150, 80),
      data: MyNodeData(label: 'New Node'),
      inputPorts: [Port(id: 'in-${DateTime.now().millisecondsSinceEpoch}', name: 'Input')],
      outputPorts: [Port(id: 'out-${DateTime.now().millisecondsSinceEpoch}', name: 'Output')],
    );
    _controller.addNode(node);
  }

  void _deleteSelectedNode() {
    if (_selectedNode != null) {
      _controller.removeNode(_selectedNode!.id);
      setState(() => _selectedNode = null);
    }
  }

  void _editNode(Node<MyNodeData> node) { /* Show edit dialog */ }
  void _showNodeMenu(Node<MyNodeData> node, Offset pos) { /* Show context menu */ }
  void _showSnackBar(String message) {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(message)));
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}