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, loving, insightful thoughtful compliment for my mom on Mother’s Day (maximum 10 words) Focus on something interesting, fun, or unexpected about her. 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 convert something profound and nice that will make her feel loved and happy."
  );
  
  // 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;