import { useMemo } from "react";
import ReactFlow, {
  Background,
  Controls,
  type NodeMouseHandler,
  ReactFlowProvider,
} from "reactflow";
import "reactflow/dist/style.css";
import type { StateResponse, Topology } from "../api";
import { layout } from "../layout";
import { MapNode } from "./MapNode";

const nodeTypes = { pipeline: MapNode };

interface Props {
  topology: Topology;
  state: StateResponse | null;
  pathNodeIds: Set<string> | null;
  onNodeClick: (nodeId: string) => void;
}

// The center pipeline map. Nodes are dagre-laid from the topology; live state
// colors them; clicking a node filters the task list. Multiple trees (processes
// off intake) lay out as separate lanes automatically.
export function PipelineMap({ topology, state, pathNodeIds, onNodeClick }: Props) {
  const { nodes, edges } = useMemo(
    () => layout(topology, state?.nodes ?? {}, pathNodeIds),
    [topology, state, pathNodeIds],
  );

  const handleNodeClick: NodeMouseHandler = (_evt, node) => onNodeClick(node.id);

  return (
    <div className="map-pane" aria-label="pipeline map">
      <ReactFlowProvider>
        <ReactFlow
          nodes={nodes}
          edges={edges}
          nodeTypes={nodeTypes}
          fitView
          nodesDraggable={false}
          nodesConnectable={false}
          elementsSelectable
          onNodeClick={handleNodeClick}
          proOptions={{ hideAttribution: true }}
          minZoom={0.3}
          maxZoom={1.6}
        >
          <Background color="#222a36" gap={22} />
          <Controls showInteractive={false} />
        </ReactFlow>
      </ReactFlowProvider>
    </div>
  );
}