// import React, { useRef, useState, useEffect, useMemo } from "react";
// import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
// import { GLTFLoader } from "three-stdlib";
// import { useLoader, useFrame } from "@react-three/fiber";
// import * as THREE from "three";
// import { GLTF } from "three-stdlib";
// import boxGltb from "../../../assets/gltf-glb/crate_box.glb";

// interface PointAction {
//   uuid: string;
//   name: string;
//   type: "Inherit" | "Spawn" | "Despawn" | "Delay" | "Swap";
//   objectType: string;
//   material: string;
//   delay: string | number;
//   spawnInterval: string | number;
//   isUsed: boolean;
// }

// interface ProcessPoint {
//   uuid: string;
//   position: number[];
//   rotation: number[];
//   actions: PointAction[];
//   connections: {
//     source: { pathUUID: string; pointUUID: string };
//     targets: { pathUUID: string; pointUUID: string }[];
//   };
// }

// interface ProcessPath {
//   modeluuid: string;
//   modelName: string;
//   points: ProcessPoint[];
//   pathPosition: number[];
//   pathRotation: number[];
//   speed: number;
// }

// interface ProcessData {
//   id: string;
//   paths: ProcessPath[];
//   animationPath: { x: number; y: number; z: number }[];
//   pointActions: PointAction[][];
//   speed: number;
//   customMaterials?: Record<string, THREE.Material>;
//   renderAs?: "box" | "custom";
// }

// interface AnimationState {
//   currentIndex: number;
//   progress: number;
//   isAnimating: boolean;
//   speed: number;
//   isDelaying: boolean;
//   delayStartTime: number;
//   currentDelayDuration: number;
//   delayComplete: boolean;
//   currentPathIndex: number;
// }

// interface SpawnedObject {
//   ref: React.RefObject<THREE.Group | THREE.Mesh>;
//   state: AnimationState;
//   visible: boolean;
//   material: THREE.Material;
//   spawnTime: number;
//   currentMaterialType: string;
//   position: THREE.Vector3; // The position of the object
// }

// interface ProcessAnimationState {
//   spawnedObjects: { [objectId: string]: SpawnedObject };
//   nextSpawnTime: number;
//   objectIdCounter: number;
// }

// const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
//   processes,
// }) => {
//   
//   const gltf = useLoader(GLTFLoader, boxGltb) as GLTF;
//   const { isPlaying } = usePlayButtonStore();
//   const groupRef = useRef<THREE.Group>(null);

//   const [animationStates, setAnimationStates] = useState<
//     Record<string, ProcessAnimationState>
//   >({});

//   // Base materials
//   const baseMaterials = useMemo(
//     () => ({
//       Wood: new THREE.MeshStandardMaterial({ color: 0x8b4513 }),
//       Box: new THREE.MeshStandardMaterial({
//         color: 0xcccccc,
//         metalness: 0.8,
//         roughness: 0.2,
//       }),
//       Crate: new THREE.MeshStandardMaterial({
//         color: 0x00aaff,
//         metalness: 0.1,
//         roughness: 0.5,
//       }),
//       Default: new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
//     }),
//     []
//   );

//   // Initialize animation states when processes or play state changes
//   useEffect(() => {
//     if (!isPlaying) {
//       setAnimationStates({});
//       return;
//     }

//     const newStates: Record<string, ProcessAnimationState> = {};
//     processes.forEach((process) => {
//       newStates[process.id] = {
//         spawnedObjects: {},
//         nextSpawnTime: 0,
//         objectIdCounter: 0,
//       };
//     });
//     setAnimationStates(newStates);
//   }, [isPlaying, processes]);

//   // Find spawn point in a process
//   const findSpawnPoint = (process: ProcessData): ProcessPoint | null => {
//     for (const path of process.paths || []) {
//       for (const point of path.points || []) {
//         const spawnAction = point.actions?.find(
//           (a) => a.isUsed && a.type === "Spawn"
//         );
//         if (spawnAction) {
//           return point;
//         }
//       }
//     }
//     return null;
//   };

//   // Find the corresponding animation path point for a spawn point
//   const findAnimationPathPoint = (process: ProcessData, spawnPoint: ProcessPoint): THREE.Vector3 => {
//     // If we have an animation path, use the first point
//     if (process.animationPath && process.animationPath.length > 0) {
//       // Find the index of this point in the path
//       let pointIndex = 0;

//       // Try to find the corresponding point in the animation path
//       for (const path of process.paths || []) {
//         for (let i = 0; i < (path.points?.length || 0); i++) {
//           const point = path.points?.[i];
//           if (point && point.uuid === spawnPoint.uuid) {
//             // Found the matching point
//             if (process.animationPath[pointIndex]) {
//               const p = process.animationPath[pointIndex];
//               return new THREE.Vector3(p.x, p.y, p.z);
//             }
//           }
//           pointIndex++;
//         }
//       }

//       // Fallback to the spawn point's position
//       return new THREE.Vector3(
//         spawnPoint.position[0],
//         spawnPoint.position[1],
//         spawnPoint.position[2]
//       );
//     }

//     // If no animation path, use the spawn point's position
//     return new THREE.Vector3(
//       spawnPoint.position[0],
//       spawnPoint.position[1],
//       spawnPoint.position[2]
//     );
//   };

//   // Create a new spawned object
//   const createSpawnedObject = (
//     process: ProcessData,
//     currentTime: number,
//     materialType: string,
//     spawnPoint: ProcessPoint
//   ): SpawnedObject => {
//     const processMaterials = {
//       ...baseMaterials,
//       ...(process.customMaterials || {}),
//     };

//     // Get the position where we should spawn
//     const spawnPosition = findAnimationPathPoint(process, spawnPoint);

//     return {
//       ref: React.createRef(),
//       state: {
//         currentIndex: 0,
//         progress: 0,
//         isAnimating: true,
//         speed: process.speed || 1,
//         isDelaying: false,
//         delayStartTime: 0,
//         currentDelayDuration: 0,
//         delayComplete: false,
//         currentPathIndex: 0,
//       },
//       visible: true,
//       material:
//         processMaterials[materialType as keyof typeof processMaterials] ||
//         baseMaterials.Default,
//       currentMaterialType: materialType,
//       spawnTime: currentTime,
//       position: spawnPosition, // Store the position directly
//     };
//   };

//   // Handle material swap for an object
//   const handleMaterialSwap = (
//     processId: string,
//     objectId: string,
//     materialType: string
//   ) => {
//     setAnimationStates((prev) => {
//       const processState = prev[processId];
//       if (!processState || !processState.spawnedObjects[objectId]) return prev;

//       const process = processes.find((p) => p.id === processId);
//       const processMaterials = {
//         ...baseMaterials,
//         ...(process?.customMaterials || {}),
//       };

//       const newMaterial =
//         processMaterials[materialType as keyof typeof processMaterials] ||
//         baseMaterials.Default;

//       return {
//         ...prev,
//         [processId]: {
//           ...processState,
//           spawnedObjects: {
//             ...processState.spawnedObjects,
//             [objectId]: {
//               ...processState.spawnedObjects[objectId],
//               material: newMaterial,
//               currentMaterialType: materialType,
//             },
//           },
//         },
//       };
//     });
//   };

//   // Handle point actions for an object
//   const handlePointActions = (
//     processId: string,
//     objectId: string,
//     actions: PointAction[] = [],
//     currentTime: number
//   ): boolean => {
//     let shouldStopAnimation = false;

//     actions.forEach((action) => {
//       if (!action.isUsed) return;

//       switch (action.type) {
//         case "Delay":
//           setAnimationStates((prev) => {
//             const processState = prev[processId];
//             if (
//               !processState ||
//               !processState.spawnedObjects[objectId] ||
//               processState.spawnedObjects[objectId].state.isDelaying
//             ) {
//               return prev;
//             }

//             const delayDuration =
//               typeof action.delay === "number"
//                 ? action.delay
//                 : parseFloat(action.delay as string) || 0;

//             if (delayDuration > 0) {
//               return {
//                 ...prev,
//                 [processId]: {
//                   ...processState,
//                   spawnedObjects: {
//                     ...processState.spawnedObjects,
//                     [objectId]: {
//                       ...processState.spawnedObjects[objectId],
//                       state: {
//                         ...processState.spawnedObjects[objectId].state,
//                         isDelaying: true,
//                         delayStartTime: currentTime,
//                         currentDelayDuration: delayDuration,
//                         delayComplete: false,
//                       },
//                     },
//                   },
//                 },
//               };
//             }
//             return prev;
//           });
//           shouldStopAnimation = true;
//           break;

//         case "Despawn":
//           setAnimationStates((prev) => {
//             const processState = prev[processId];
//             if (!processState) return prev;

//             const newSpawnedObjects = { ...processState.spawnedObjects };
//             delete newSpawnedObjects[objectId];

//             return {
//               ...prev,
//               [processId]: {
//                 ...processState,
//                 spawnedObjects: newSpawnedObjects,
//               },
//             };
//           });
//           shouldStopAnimation = true;
//           break;

//         case "Swap":
//           if (action.material) {
//             handleMaterialSwap(processId, objectId, action.material);
//           }
//           break;

//         default:
//           break;
//       }
//     });

//     return shouldStopAnimation;
//   };

//   // Check if point has non-inherit actions
//   const hasNonInheritActions = (actions: PointAction[] = []): boolean => {
//     return actions.some((action) => action.isUsed && action.type !== "Inherit");
//   };

//   // Get point data for current animation index
//   const getPointDataForAnimationIndex = (
//     process: ProcessData,
//     index: number
//   ): ProcessPoint | null => {
//     if (!process.paths) return null;

//     let cumulativePoints = 0;
//     for (const path of process.paths) {
//       const pointCount = path.points?.length || 0;

//       if (index < cumulativePoints + pointCount) {
//         const pointIndex = index - cumulativePoints;
//         return path.points?.[pointIndex] || null;
//       }

//       cumulativePoints += pointCount;
//     }

//     return null;
//   };

//   // Spawn objects for all processes
//   useFrame((state) => {
//     if (!isPlaying) return;

//     const currentTime = state.clock.getElapsedTime();
//     setAnimationStates((prev) => {
//       const newStates = { ...prev };

//       processes.forEach((process) => {
//         const processState = newStates[process.id];
//         if (!processState) return;

//         const spawnPoint = findSpawnPoint(process);
//         if (!spawnPoint || !spawnPoint.actions) return;

//         const spawnAction = spawnPoint.actions.find(
//           (a) => a.isUsed && a.type === "Spawn"
//         );
//         if (!spawnAction) return;

//         const spawnInterval =
//           typeof spawnAction.spawnInterval === "number"
//             ? spawnAction.spawnInterval
//             : parseFloat(spawnAction.spawnInterval as string) || 0;

//         if (currentTime >= processState.nextSpawnTime) {
//           const objectId = `obj-${process.id}-${processState.objectIdCounter}`;

//           // Create the new object with the spawn point
//           const newObject = createSpawnedObject(
//             process,
//             currentTime,
//             spawnAction.material || "Default",
//             spawnPoint
//           );

//           newStates[process.id] = {
//             ...processState,
//             spawnedObjects: {
//               ...processState.spawnedObjects,
//               [objectId]: newObject,
//             },
//             objectIdCounter: processState.objectIdCounter + 1,
//             nextSpawnTime: currentTime + spawnInterval,
//           };
//         }
//       });

//       return newStates;
//     });
//   });

//   // Animate objects for all processes
//   useFrame((state, delta) => {
//     if (!isPlaying) return;

//     const currentTime = state.clock.getElapsedTime();
//     setAnimationStates((prev) => {
//       const newStates = { ...prev };

//       processes.forEach((process) => {
//         const processState = newStates[process.id];
//         if (!processState) return;

//         const path =
//           process.animationPath?.map((p) => new THREE.Vector3(p.x, p.y, p.z)) ||
//           [];
//         if (path.length < 2) return;

//         const updatedObjects = { ...processState.spawnedObjects };

//         Object.entries(processState.spawnedObjects).forEach(
//           ([objectId, obj]) => {
//             if (!obj.visible || !obj.state.isAnimating) return;

//             const currentRef = gltf?.scene ? obj.ref.current : obj.ref.current;
//             if (!currentRef) return;

//             // Set the position when the reference is first available
//             if (obj.position && obj.state.currentIndex === 0 && obj.state.progress === 0) {
//               currentRef.position.copy(obj.position);
//             }

//             const stateRef = obj.state;

//             // Get current point data
//             const currentPointData = getPointDataForAnimationIndex(
//               process,
//               stateRef.currentIndex
//             );

//             // Execute actions when arriving at a new point
//             if (stateRef.progress === 0 && currentPointData?.actions) {
//               const shouldStop = handlePointActions(
//                 process.id,
//                 objectId,
//                 currentPointData.actions,
//                 currentTime
//               );
//               if (shouldStop) return;
//             }

//             // Handle delays
//             if (stateRef.isDelaying) {
//               if (
//                 currentTime - stateRef.delayStartTime >=
//                 stateRef.currentDelayDuration
//               ) {
//                 stateRef.isDelaying = false;
//                 stateRef.delayComplete = true;
//               } else {
//                 return; // Keep waiting
//               }
//             }

//             const nextPointIdx = stateRef.currentIndex + 1;
//             const isLastPoint = nextPointIdx >= path.length;

//             if (isLastPoint) {
//               if (currentPointData?.actions) {
//                 const shouldStop = !hasNonInheritActions(
//                   currentPointData.actions
//                 );
//                 if (shouldStop) {
//                   currentRef.position.copy(path[stateRef.currentIndex]);
//                   delete updatedObjects[objectId];
//                   return;
//                 }
//               }
//             }

//             if (!isLastPoint) {
//               const nextPoint = path[nextPointIdx];
//               const distance =
//                 path[stateRef.currentIndex].distanceTo(nextPoint);
//               const movement = stateRef.speed * delta;
//               stateRef.progress += movement / distance;

//               if (stateRef.progress >= 1) {
//                 stateRef.currentIndex = nextPointIdx;
//                 stateRef.progress = 0;
//                 stateRef.delayComplete = false;
//                 currentRef.position.copy(nextPoint);
//               } else {
//                 currentRef.position.lerpVectors(
//                   path[stateRef.currentIndex],
//                   nextPoint,
//                   stateRef.progress
//                 );
//               }
//             }

//             updatedObjects[objectId] = { ...obj, state: { ...stateRef } };
//           }
//         );

//         newStates[process.id] = {
//           ...processState,
//           spawnedObjects: updatedObjects,
//         };
//       });

//       return newStates;
//     });
//   });

//   if (!processes || processes.length === 0) {
//     return null;
//   }

//   return (
//     <>
//       {Object.entries(animationStates).flatMap(([processId, processState]) =>
//         Object.entries(processState.spawnedObjects)
//           .filter(([_, obj]) => obj.visible)
//           .map(([objectId, obj]) => {
//             const process = processes.find((p) => p.id === processId);
//             const renderAs = process?.renderAs || "custom";

//             return renderAs === "box" ? (
//               <mesh
//                 key={objectId}
//                 ref={obj.ref as React.RefObject<THREE.Mesh>}
//                 material={obj.material}
//                 position={obj.position}  // Set position directly in the JSX
//               >
//                 <boxGeometry args={[1, 1, 1]} />
//               </mesh>
//             ) : (
//               gltf?.scene && (
//                 <group
//                   key={objectId}
//                   ref={obj.ref as React.RefObject<THREE.Group>}
//                   position={obj.position}  // Set position directly in the JSX
//                 >
//                   <primitive
//                     object={gltf.scene.clone()}
//                     material={obj.material}
//                   />
//                 </group>
//               )
//             );
//           })
//       )}
//     </>
//   );
// };

// export default ProcessAnimator;

import React, { useRef, useState, useEffect, useMemo } from "react";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import { GLTFLoader } from "three-stdlib";
import { useLoader, useFrame } from "@react-three/fiber";
import * as THREE from "three";
import { GLTF } from "three-stdlib";
import boxGltb from "../../../assets/gltf-glb/crate_box.glb";
import camera from "../../../assets/gltf-glb/camera face 2.gltf";

interface PointAction {
  uuid: string;
  name: string;
  type: "Inherit" | "Spawn" | "Despawn" | "Delay" | "Swap";
  objectType: string;
  material: string;
  delay: string | number;
  spawnInterval: string | number;
  isUsed: boolean;
}

interface ProcessPoint {
  uuid: string;
  position: number[];
  rotation: number[];
  actions: PointAction[];
  connections: {
    source: { pathUUID: string; pointUUID: string };
    targets: { pathUUID: string; pointUUID: string }[];
  };
}

interface ProcessPath {
  modeluuid: string;
  modelName: string;
  points: ProcessPoint[];
  pathPosition: number[];
  pathRotation: number[];
  speed: number;
}

interface ProcessData {
  id: string;
  paths: ProcessPath[];
  animationPath: { x: number; y: number; z: number }[];
  pointActions: PointAction[][];
  speed: number;
  customMaterials?: Record<string, THREE.Material>;
  renderAs?: "box" | "custom";
}

interface AnimationState {
  currentIndex: number;
  progress: number;
  isAnimating: boolean;
  speed: number;
  isDelaying: boolean;
  delayStartTime: number;
  currentDelayDuration: number;
  delayComplete: boolean;
  currentPathIndex: number;
}

interface SpawnedObject {
  ref: React.RefObject<THREE.Group | THREE.Mesh>;
  state: AnimationState;
  visible: boolean;
  material: THREE.Material;
  spawnTime: number;
  currentMaterialType: string;
  position: THREE.Vector3; // The position of the object
}

interface ProcessAnimationState {
  spawnedObjects: { [objectId: string]: SpawnedObject };
  nextSpawnTime: number;
  objectIdCounter: number;
  // New fields for process-wide delay
  isProcessDelaying: boolean;
  processDelayStartTime: number;
  processDelayDuration: number;
}

const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
  processes,
}) => {
  
  const gltf = useLoader(GLTFLoader, boxGltb) as GLTF;
  const { isPlaying } = usePlayButtonStore();
  const groupRef = useRef<THREE.Group>(null);

  const [animationStates, setAnimationStates] = useState<
    Record<string, ProcessAnimationState>
  >({});

  // Base materials
  const baseMaterials = useMemo(
    () => ({
      Wood: new THREE.MeshStandardMaterial({ color: 0x8b4513 }),
      Box: new THREE.MeshPhongMaterial({
        color: 0xcccccc,
      }),
      Crate: new THREE.MeshStandardMaterial({
        color: 0x00aaff,
        metalness: 0.1,
        roughness: 0.5,
      }),
      Default: new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
    }),
    []
  );

  // Initialize animation states when processes or play state changes
  useEffect(() => {
    if (!isPlaying) {
      setAnimationStates({});
      return;
    }

    const newStates: Record<string, ProcessAnimationState> = {};
    processes.forEach((process) => {
      newStates[process.id] = {
        spawnedObjects: {},
        nextSpawnTime: 0,
        objectIdCounter: 0,
        // Initialize process-wide delay state
        isProcessDelaying: false,
        processDelayStartTime: 0,
        processDelayDuration: 0,
      };
    });
    setAnimationStates(newStates);
  }, [isPlaying, processes]);

  // Find spawn point in a process
  const findSpawnPoint = (process: ProcessData): ProcessPoint | null => {
    for (const path of process.paths || []) {
      for (const point of path.points || []) {
        const spawnAction = point.actions?.find(
          (a) => a.isUsed && a.type === "Spawn"
        );
        if (spawnAction) {
          return point;
        }
      }
    }
    return null;
  };

  // Find the corresponding animation path point for a spawn point
  const findAnimationPathPoint = (
    process: ProcessData,
    spawnPoint: ProcessPoint
  ): THREE.Vector3 => {
    // If we have an animation path, use the first point
    if (process.animationPath && process.animationPath.length > 0) {
      // Find the index of this point in the path
      let pointIndex = 0;

      // Try to find the corresponding point in the animation path
      for (const path of process.paths || []) {
        for (let i = 0; i < (path.points?.length || 0); i++) {
          const point = path.points?.[i];
          if (point && point.uuid === spawnPoint.uuid) {
            // Found the matching point
            if (process.animationPath[pointIndex]) {
              const p = process.animationPath[pointIndex];
              return new THREE.Vector3(p.x, p.y, p.z);
            }
          }
          pointIndex++;
        }
      }

      // Fallback to the spawn point's position
      return new THREE.Vector3(
        spawnPoint.position[0],
        spawnPoint.position[1],
        spawnPoint.position[2]
      );
    }

    // If no animation path, use the spawn point's position
    return new THREE.Vector3(
      spawnPoint.position[0],
      spawnPoint.position[1],
      spawnPoint.position[2]
    );
  };

  // Create a new spawned object
  const createSpawnedObject = (
    process: ProcessData,
    currentTime: number,
    materialType: string,
    spawnPoint: ProcessPoint
  ): SpawnedObject => {
    const processMaterials = {
      ...baseMaterials,
      ...(process.customMaterials || {}),
    };

    // Get the position where we should spawn
    const spawnPosition = findAnimationPathPoint(process, spawnPoint);

    return {
      ref: React.createRef(),
      state: {
        currentIndex: 0,
        progress: 0,
        isAnimating: true,
        speed: process.speed || 1,
        isDelaying: false,
        delayStartTime: 0,
        currentDelayDuration: 0,
        delayComplete: false,
        currentPathIndex: 0,
      },
      visible: true,
      material:
        processMaterials[materialType as keyof typeof processMaterials] ||
        baseMaterials.Default,
      currentMaterialType: materialType,
      spawnTime: currentTime,
      position: spawnPosition, // Store the position directly
    };
  };

  // Handle material swap for an object
  const handleMaterialSwap = (
    processId: string,
    objectId: string,
    materialType: string
  ) => {
    setAnimationStates((prev) => {
      const processState = prev[processId];
      if (!processState || !processState.spawnedObjects[objectId]) return prev;

      const process = processes.find((p) => p.id === processId);
      const processMaterials = {
        ...baseMaterials,
        ...(process?.customMaterials || {}),
      };

      const newMaterial =
        processMaterials[materialType as keyof typeof processMaterials] ||
        baseMaterials.Default;

      return {
        ...prev,
        [processId]: {
          ...processState,
          spawnedObjects: {
            ...processState.spawnedObjects,
            [objectId]: {
              ...processState.spawnedObjects[objectId],
              material: newMaterial,
              currentMaterialType: materialType,
            },
          },
        },
      };
    });
  };

  // Handle point actions for an object
  const handlePointActions = (
    processId: string,
    objectId: string,
    actions: PointAction[] = [],
    currentTime: number
  ): boolean => {
    let shouldStopAnimation = false;

    actions.forEach((action) => {
      if (!action.isUsed) return;

      switch (action.type) {
        case "Delay":
          setAnimationStates((prev) => {
            const processState = prev[processId];
            if (!processState || processState.isProcessDelaying) {
              return prev;
            }

            const delayDuration =
              typeof action.delay === "number"
                ? action.delay
                : parseFloat(action.delay as string) || 0;

            if (delayDuration > 0) {
              return {
                ...prev,
                [processId]: {
                  ...processState,
                  // Set process-wide delay instead of object-specific delay
                  isProcessDelaying: true,
                  processDelayStartTime: currentTime,
                  processDelayDuration: delayDuration,
                  // Update the specific object's state as well
                  spawnedObjects: {
                    ...processState.spawnedObjects,
                    [objectId]: {
                      ...processState.spawnedObjects[objectId],
                      state: {
                        ...processState.spawnedObjects[objectId].state,
                        isAnimating: false, // Explicitly pause animation during delay
                        isDelaying: true,
                        delayStartTime: currentTime,
                        currentDelayDuration: delayDuration,
                        delayComplete: false,
                      },
                    },
                  },
                },
              };
            }
            return prev;
          });
          shouldStopAnimation = true;
          break;

        case "Despawn":
          setAnimationStates((prev) => {
            const processState = prev[processId];
            if (!processState) return prev;

            const newSpawnedObjects = { ...processState.spawnedObjects };
            delete newSpawnedObjects[objectId];

            return {
              ...prev,
              [processId]: {
                ...processState,
                spawnedObjects: newSpawnedObjects,
              },
            };
          });
          shouldStopAnimation = true;
          break;

        case "Swap":
          if (action.material) {
            handleMaterialSwap(processId, objectId, action.material);
          }
          break;

        default:
          break;
      }
    });

    return shouldStopAnimation;
  };

  // Check if point has non-inherit actions
  const hasNonInheritActions = (actions: PointAction[] = []): boolean => {
    return actions.some((action) => action.isUsed && action.type !== "Inherit");
  };

  // Get point data for current animation index
  const getPointDataForAnimationIndex = (
    process: ProcessData,
    index: number
  ): ProcessPoint | null => {
    if (!process.paths) return null;

    let cumulativePoints = 0;
    for (const path of process.paths) {
      const pointCount = path.points?.length || 0;

      if (index < cumulativePoints + pointCount) {
        const pointIndex = index - cumulativePoints;
        return path.points?.[pointIndex] || null;
      }

      cumulativePoints += pointCount;
    }

    return null;
  };

  // Spawn objects for all processes
  useFrame((state) => {
    if (!isPlaying) return;

    const currentTime = state.clock.getElapsedTime();
    setAnimationStates((prev) => {
      const newStates = { ...prev };

      processes.forEach((process) => {
        const processState = newStates[process.id];
        if (!processState) return;

        // Skip spawning if the process is currently in a delay
        if (processState.isProcessDelaying) {
          // Check if delay is over
          if (
            currentTime - processState.processDelayStartTime >=
            processState.processDelayDuration
          ) {
            // Reset process delay state
            newStates[process.id] = {
              ...processState,
              isProcessDelaying: false,
              // Reset delay state on all objects in this process
              spawnedObjects: Object.entries(
                processState.spawnedObjects
              ).reduce(
                (acc, [id, obj]) => ({
                  ...acc,
                  [id]: {
                    ...obj,
                    state: {
                      ...obj.state,
                      isDelaying: false,
                      delayComplete: true,
                      isAnimating: true, // Ensure animation resumes
                      // Force a small progress to ensure movement starts
                      progress:
                        obj.state.progress === 0 ? 0.001 : obj.state.progress,
                    },
                  },
                }),
                {}
              ),
            };
          }
          return; // Skip spawning while delaying
        }

        const spawnPoint = findSpawnPoint(process);
        if (!spawnPoint || !spawnPoint.actions) return;

        const spawnAction = spawnPoint.actions.find(
          (a) => a.isUsed && a.type === "Spawn"
        );
        if (!spawnAction) return;

        const spawnInterval =
          typeof spawnAction.spawnInterval === "number"
            ? spawnAction.spawnInterval
            : parseFloat(spawnAction.spawnInterval as string) || 0;

        if (currentTime >= processState.nextSpawnTime) {
          const objectId = `obj-${process.id}-${processState.objectIdCounter}`;

          // Create the new object with the spawn point
          const newObject = createSpawnedObject(
            process,
            currentTime,
            spawnAction.material || "Default",
            spawnPoint
          );

          newStates[process.id] = {
            ...processState,
            spawnedObjects: {
              ...processState.spawnedObjects,
              [objectId]: newObject,
            },
            objectIdCounter: processState.objectIdCounter + 1,
            nextSpawnTime: currentTime + spawnInterval,
          };
        }
      });

      return newStates;
    });
  });

  // Animate objects for all processes
  useFrame((state, delta) => {
    if (!isPlaying) return;

    const currentTime = state.clock.getElapsedTime();
    setAnimationStates((prev) => {
      const newStates = { ...prev };

      processes.forEach((process) => {
        const processState = newStates[process.id];
        if (!processState) return;

        // Check if the process-wide delay is active
        if (processState.isProcessDelaying) {
          // Check if the delay has completed
          if (
            currentTime - processState.processDelayStartTime >=
            processState.processDelayDuration
          ) {
            // Reset process delay state AND resume animation
            newStates[process.id] = {
              ...processState,
              isProcessDelaying: false,
              // Reset delay state on all objects in this process AND ensure isAnimating is true
              spawnedObjects: Object.entries(
                processState.spawnedObjects
              ).reduce(
                (acc, [id, obj]) => ({
                  ...acc,
                  [id]: {
                    ...obj,
                    state: {
                      ...obj.state,
                      isDelaying: false,
                      delayComplete: true,
                      isAnimating: true, // Ensure animation resumes
                      // Important: Force progress to a small positive value to ensure movement
                      progress:
                        obj.state.progress === 0 ? 0.005 : obj.state.progress,
                    },
                  },
                }),
                {}
              ),
            };
            // Skip the rest of the processing for this frame to allow the state update to take effect
            return newStates;
          } else {
            // If we're still in a process-wide delay, don't animate anything
            return newStates;
          }
        }

        const path =
          process.animationPath?.map((p) => new THREE.Vector3(p.x, p.y, p.z)) ||
          [];
        if (path.length < 2) return;

        const updatedObjects = { ...processState.spawnedObjects };

        Object.entries(processState.spawnedObjects).forEach(
          ([objectId, obj]) => {
            // Skip objects that are explicitly not visible
            if (!obj.visible) return;

            const currentRef = gltf?.scene ? obj.ref.current : obj.ref.current;
            if (!currentRef) return;

            // Set the position when the reference is first available
            if (
              obj.position &&
              obj.state.currentIndex === 0 &&
              obj.state.progress === 0
            ) {
              currentRef.position.copy(obj.position);
            }

            const stateRef = obj.state;

            // Check if we're delaying at the object level and update accordingly
            if (stateRef.isDelaying) {
              if (
                currentTime - stateRef.delayStartTime >=
                stateRef.currentDelayDuration
              ) {
                // Delay is complete, resume animation
                stateRef.isDelaying = false;
                stateRef.delayComplete = true;
                stateRef.isAnimating = true; // Explicitly resume animation

                // Force movement from the current point by setting progress to a small value
                // if we're at the start of a segment
                if (stateRef.progress === 0) {
                  stateRef.progress = 0.005;
                }

                // Force an immediate position update to ensure visually accurate position
                const nextPointIdx = stateRef.currentIndex + 1;
                if (nextPointIdx < path.length) {
                  // Calculate the position slightly ahead of the current point
                  const slightProgress = Math.max(stateRef.progress, 0.005);
                  currentRef.position.lerpVectors(
                    path[stateRef.currentIndex],
                    nextPointIdx < path.length
                      ? path[nextPointIdx]
                      : path[stateRef.currentIndex],
                    slightProgress
                  );
                }
              } else {
                // Still delaying, don't animate this object
                updatedObjects[objectId] = { ...obj, state: { ...stateRef } };
                return;
              }
            }

            // Skip animation if the object shouldn't be animating
            if (!stateRef.isAnimating) return;

            // Get current point data
            const currentPointData = getPointDataForAnimationIndex(
              process,
              stateRef.currentIndex
            );

            // Execute actions when arriving at a new point
            if (stateRef.progress === 0 && currentPointData?.actions) {
              const shouldStop = handlePointActions(
                process.id,
                objectId,
                currentPointData.actions,
                currentTime
              );
              if (shouldStop) {
                updatedObjects[objectId] = { ...obj, state: { ...stateRef } };
                return;
              }
            }

            const nextPointIdx = stateRef.currentIndex + 1;
            const isLastPoint = nextPointIdx >= path.length;

            if (isLastPoint) {
              if (currentPointData?.actions) {
                const shouldStop = !hasNonInheritActions(
                  currentPointData.actions
                );
                if (shouldStop) {
                  // uncomment this or write own logic to handle the object when reaching the last point of the process

                  // currentRef.position.copy(path[stateRef.currentIndex]);
                  // delete updatedObjects[objectId];
                  return;
                }
              }
            }

            if (!isLastPoint) {
              const nextPoint = path[nextPointIdx];
              const distance =
                path[stateRef.currentIndex].distanceTo(nextPoint);
              const movement = stateRef.speed * delta;

              // If we just resumed from a delay, ensure we make actual progress
              if (stateRef.delayComplete && stateRef.progress < 0.01) {
                // Boost initial movement after delay to ensure visible progress
                stateRef.progress = 0.05; // Small but visible initial progress
                stateRef.delayComplete = false; // Reset flag so we don't do this again
              } else {
                // Normal progress calculation
                stateRef.progress += movement / distance;
              }

              if (stateRef.progress >= 1) {
                // We've reached the next point
                stateRef.currentIndex = nextPointIdx;
                stateRef.progress = 0;
                currentRef.position.copy(nextPoint);

                // Check if we need to execute actions at this new point
                const newPointData = getPointDataForAnimationIndex(
                  process,
                  stateRef.currentIndex
                );

                if (newPointData?.actions) {
                  // We've arrived at a new point with actions, handle them in the next frame
                  // We don't call handlePointActions directly here to avoid state update issues
                  // The actions will be handled in the next frame when progress is 0
                }
              } else {
                // Normal path interpolation
                currentRef.position.lerpVectors(
                  path[stateRef.currentIndex],
                  nextPoint,
                  stateRef.progress
                );
              }
            }

            updatedObjects[objectId] = { ...obj, state: { ...stateRef } };
          }
        );

        newStates[process.id] = {
          ...processState,
          spawnedObjects: updatedObjects,
        };
      });

      return newStates;
    });
  });

  if (!processes || processes.length === 0) {
    return null;
  }

  return (
    <>
      {Object.entries(animationStates).flatMap(([processId, processState]) =>
        Object.entries(processState.spawnedObjects)
          .filter(([_, obj]) => obj.visible)
          .map(([objectId, obj]) => {
            const process = processes.find((p) => p.id === processId);
            const renderAs = process?.renderAs || "custom";

            return renderAs === "box" ? (
              <mesh
                key={objectId}
                ref={obj.ref as React.RefObject<THREE.Mesh>}
                material={obj.material}
                position={obj.position} // Set position directly in the JSX
              >
                <boxGeometry args={[1, 1, 1]} />
              </mesh>
            ) : (
              gltf?.scene && (
                <group
                  key={objectId}
                  ref={obj.ref as React.RefObject<THREE.Group>}
                  position={obj.position} // Set position directly in the JSX
                >
                  <primitive
                    object={gltf.scene.clone()}
                    material={obj.material}
                  />
                </group>
              )
            );
          })
      )}
    </>
  );
};

export default ProcessAnimator;