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(
    "이 이미지를 보고 (보일 수도 있는 손이나 손가락은 무시한 채) 주요 객체나 장면을 식별하세요. 그 객체나 장면에 대해 짧고 통찰력 있는 생각(최대 5단어)을 하나 생성하세요. 흥미롭거나 재미있거나 예상치 못한 점에 집중하세요. 손, 손가락, 포즈 추정, 모션 트래킹, 컴퓨터 비전 기술은 언급하지 마세요. 생각만 응답하고, 추가 텍스트는 넣지 마세요."
  );
  
  // 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;