components/HandDetector.js

import { useRef, useState, useEffect } from 'react';
import ParticleEffects, { useParticleEffects } from './ParticleEffects'
import MainContent from './MainContent';
import { AnimationStyles, AudioEffects } from './UIUtils';
import useDeviceAndCanvas from '../hooks/useDeviceAndCanvas';
import useHandDetection from '../hooks/useHandDetection';
import useThoughtGeneration from '../hooks/useThoughtGeneration';

const HandDetector = () => {
  // Refs
  const videoRef = useRef(null);
  const canvasRef = useRef(null);
  const containerRef = useRef(null);
  
  // Camera state
  const [facingMode, setFacingMode] = useState('user'); // 'user' for front camera, 'environment' for back camera
  const [cameraError, setCameraError] = useState(false);
  
  // Prompt state
  const [customPrompt, setCustomPrompt] = useState(
    "Look at this image and identify the main object or scene (ignoring any hands or fingers that might be visible). Generate a single, short, insightful or profound thought (maximum 5 to 10 words) (bonus if you can use an idiom) about this object or scene. Focus on something interesting, fun, or unexpected about it. DO NOT mention hands, fingers, pose estimation, motion tracking, or any computer vision technology in your response. Respond with just the thought, no additional text. Finish with 5 emojis in a coherent manner to convey something thought provoking and profound."
  );
  
  // Custom hooks
  const { 
    isMobile, 
    isMac,
    canvasWidth, 
    canvasHeight, 
    videoAspectRatio, 
    setVideoAspectRatio, 
    updateCanvasSize 
  } = useDeviceAndCanvas();
  
  const {
    handDetected,
    isMouthOpen,
    isLeftHand,
    thumbPosition,
    isFirstLoad
  } = useHandDetection(videoRef, canvasRef, isMobile);
  
  const {
    thought,
    isThinking,
    animateThinking
  } = useThoughtGeneration(canvasRef, isMouthOpen, customPrompt);
  
  const {
    particles,
    popParticles,
    createSparkleParticles,
    createPopParticles
  } = useParticleEffects(containerRef, isMobile);
  
  // Clean up all component mounted refs on unmount
  useEffect(() => {
    return () => {
      // This will run when the component unmounts
      console.log("HandDetector component unmounting");
    };
  }, []);

  return (
    <div className="relative flex flex-col items-center w-full">
      {/* Add animations and styles */}
      <AnimationStyles />
      
      {/* Add audio effects */}
      <AudioEffects isThinking={isThinking} />
      
      {cameraError ? (
        <div className="bg-red-500 text-white p-4 rounded-lg mb-4 w-full max-w-md">
          <p className="font-medium">Camera access denied. Please allow camera access to use this app.</p>
        </div>
      ) : (
        <MainContent 
          videoRef={videoRef}
          canvasRef={canvasRef}
          containerRef={containerRef}
          facingMode={facingMode}
          setFacingMode={setFacingMode}
          setCameraError={setCameraError}
          customPrompt={customPrompt}
          setCustomPrompt={setCustomPrompt}
          isMac={isMac}
          isMobile={isMobile}
          canvasWidth={canvasWidth}
          canvasHeight={canvasHeight}
          setVideoAspectRatio={setVideoAspectRatio}
          updateCanvasSize={updateCanvasSize}
          handDetected={handDetected}
          isMouthOpen={isMouthOpen}
          isLeftHand={isLeftHand}
          thumbPosition={thumbPosition}
          isFirstLoad={isFirstLoad}
          thought={thought}
          isThinking={isThinking}
          animateThinking={animateThinking}
          particles={particles}
          popParticles={popParticles}
          createSparkleParticles={createSparkleParticles}
          createPopParticles={createPopParticles}
        />
      )}
    </div>
  );
};

export default HandDetector;