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(
    "이 이미지를 보고 (보일 수도 있는 손이나 손가락은 무시한 채) 오로지 playing cards만 식별하세요. 식별된 카드의 정확한 정보만 출력하세요(예, A 스페이드, 10 하트, J 다이아몬드"
  );
  
  // 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;