factorio-clockmaster/src/engine/Dashboard/GraphView.tsx

// import { useMemo, useEffect, useState } from "react";
// import ReactFlow, { Background, Controls, MarkerType } from "reactflow";
// import type { NodeProps, Node, Edge } from "reactflow";
// import "reactflow/dist/style.css";
// import styles from "./Dashboard.module.css";
import type { MachineData, UIOrchestrator } from "./types";

// // Type for React Flow Node Data
// interface CustomNodeData {
//   instance: MachineData;
//   label: string;
//   currentTick?: number;
// }

// const MachineNode = ({ data }: NodeProps<CustomNodeData>) => {
//   const machine = data.instance as MachineData;
//   return (
//     <div
//       className={styles.machineCard}
//       style={{ margin: 0, minWidth: "220px", boxShadow: "inset 0 0 10px rgba(0,0,0,0.5)" }}
//     >
//       <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "8px" }}>
//         <span style={{ color: "#5eb663", fontWeight: "bold" }}>{machine.recipe.name}</span>
//         <span className={styles.statusBadge} style={{ color: machine.isCrafting ? "#5eb663" : "#fe5a5a" }}>
//           {machine.isCrafting ? "CRAFTING" : "HALTED"}
//         </span>
//       </div>
//       <div
//         style={{
//           width: "100%",
//           height: "6px",
//           backgroundColor: "#1a1a1a",
//           border: "1px solid #000",
//           marginBottom: "8px",
//         }}
//       >
//         <div style={{ width: `${machine.craftProgress * 100}%`, height: "100%", backgroundColor: "#5eb663" }} />
//       </div>
//       <div style={{ display: "flex", justifyContent: "space-between", fontSize: "11px" }}>
//         <div style={{ display: "flex", gap: "4px" }}>
//           <span style={{ color: "#8e8e8e" }}>IN:</span>
//           {Object.entries(machine.inputBuffer).map(([k, v]) => (
//             <span key={k} style={{ color: v === 0 ? "#fe5a5a" : "#fff" }}>
//               {v}
//             </span>
//           ))}
//         </div>
//         <div style={{ display: "flex", gap: "4px" }}>
//           <span style={{ color: "#8e8e8e" }}>OUT:</span>
//           {Object.entries(machine.outputBuffer).map(([k, v]) => {
//             const isFull = v >= (machine.outputBlockLimits[k] || 0);
//             return (
//               <span key={k} style={{ color: isFull ? "#fe5a5a" : "#fff" }}>
//                 {v}
//               </span>
//             );
//           })}
//         </div>
//       </div>
//     </div>
//   );
// };

// const ChestNode = ({ data }: NodeProps<CustomNodeData>) => (
//   <div
//     style={{
//       backgroundColor: "#3d3d3d",
//       padding: "12px",
//       borderRadius: "4px",
//       border: "2px solid #8e8e8e",
//       minWidth: "120px",
//       textAlign: "center",
//       color: "#e3e3e3",
//       fontWeight: "bold",
//     }}
//   >
//     {data.label}
//   </div>
// );

// const nodeTypes = { machine: MachineNode, chest: ChestNode };

interface GraphViewProps {
  orchestrator: UIOrchestrator;
  tick: number;
}
export default function GraphView({ orchestrator, tick }: GraphViewProps) {
  return <div></div>;
}
// export default function GraphView({ orchestrator, tick }: GraphViewProps) {
//   const { initialNodes, initialEdges } = useMemo(() => {
//     const nodes: Node<CustomNodeData>[] = [];
//     const edges: Edge[] = [];
//     const objToId = new Map<any, string>();
//     let idCounter = 0;

//     const getId = (obj: any, type: string, label: string): string => {
//       if (!objToId.has(obj)) {
//         const id = `node_${idCounter++}`;
//         objToId.set(obj, id);
//         nodes.push({
//           id,
//           type,
//           position: { x: (idCounter % 3) * 300, y: Math.floor(idCounter / 3) * 150 },
//           data: { instance: obj, label },
//         });
//       }
//       return objToId.get(obj)!;
//     };

//     orchestrator.getInserters().forEach((ins, i) => {
//       edges.push({
//         id: `edge_${i}`,
//         source: getId(ins.source, ins.source.recipe ? "machine" : "chest", "Source"),
//         target: getId(ins.destination, ins.destination.recipe ? "machine" : "chest", "Destination"),
//         label: ins.targetItemId,
//         animated: false,
//         style: { stroke: "#8e8e8e", strokeWidth: 2 },
//         markerEnd: { type: MarkerType.ArrowClosed, color: "#8e8e8e" },
//       });
//     });

//     return { initialNodes: nodes, initialEdges: edges };
//   }, [orchestrator]);

//   const [nodes, setNodes] = useState<Node<CustomNodeData>[]>(initialNodes);
//   const [edges, setEdges] = useState<Edge[]>(initialEdges);

//   useEffect(() => {
//     setNodes((nds) => nds.map((n) => ({ ...n, data: { ...n.data, currentTick: tick } })));
//     setEdges((eds) =>
//       eds.map((edge, i) => {
//         const ins = orchestrator.getInserters()[i];
//         const isSwinging = ins.state > 0 && ins.state < 4;
//         return {
//           ...edge,
//           animated: isSwinging,
//           style: { stroke: isSwinging ? "#5eb663" : "#8e8e8e", strokeWidth: isSwinging ? 3 : 2 },
//           markerEnd: { type: MarkerType.ArrowClosed, color: isSwinging ? "#5eb663" : "#8e8e8e" },
//         };
//       }),
//     );
//   }, [tick, orchestrator]);

//   return (
//     <div className={styles.graphWrapper}>
//       <ReactFlow nodes={nodes} edges={edges} nodeTypes={nodeTypes} fitView>
//         <Background color="#5f5f5f" gap={16} />
//         <Controls />
//       </ReactFlow>
//     </div>
//   );
// }