hooks/useThoughtGeneration.js

import { useState, useRef, useEffect } from 'react';

const useThoughtGeneration = (canvasRef, isMouthOpen, customPrompt) => {
  const [thought, setThought] = useState('');
  const [isThinking, setIsThinking] = useState(false);
  const [animateThinking, setAnimateThinking] = useState(false);
  const lastGenerationTime = useRef(0);
  const isComponentMounted = useRef(true);
  
  // Set up component mounted ref
  useEffect(() => {
    isComponentMounted.current = true;
    return () => {
      isComponentMounted.current = false;
    };
  }, []);
  
  // Watch for changes in isMouthOpen to trigger thought generation
  useEffect(() => {
    if (isMouthOpen) {
      // Only generate a new thought if we're not already thinking
      // and enough time has passed since the last generation
      const now = Date.now();
      if (!isThinking && now - lastGenerationTime.current > 1000) {
        generateThought();
        lastGenerationTime.current = now;
      }
    }
  }, [isMouthOpen]);
  
  // Watch for changes in isThinking to trigger animation
  useEffect(() => {
    if (isThinking) {
      setAnimateThinking(true);
      
      // Reset animation state after animation completes
      const timer = setTimeout(() => {
        if (isComponentMounted.current) {
          setAnimateThinking(false);
        }
      }, 1200); // Slightly longer to accommodate the enhanced animation
      return () => clearTimeout(timer);
    }
  }, [isThinking]);
  
  // Generate a thought using Gemini
  const generateThought = async () => {
    if (isThinking || !isComponentMounted.current) return;
    
    setIsThinking(true);
    console.log("Generating thought...");
    
    try {
      // Capture the current frame from the canvas
      const canvas = canvasRef.current;
      if (!canvas) return;
      
      const imageData = canvas.toDataURL('image/jpeg', 0.8);
      
      // Send the image to the Gemini API
      const response = await fetch('/api/gemini', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ 
          image: imageData,
          prompt: customPrompt 
        }),
      });
      
      if (!isComponentMounted.current) return;
      
      if (!response.ok) {
        throw new Error('Failed to generate thought');
      }
      
      const data = await response.json();
      
      if (!isComponentMounted.current) return;
      
      setThought(data.thought);
      console.log("Thought generated:", data.thought);
    } catch (error) {
      console.error('Error generating thought:', error);
      if (isComponentMounted.current) {
        setThought('Hmm, I lost my train of thought...');
      }
    } finally {
      if (isComponentMounted.current) {
        setIsThinking(false);
      }
    }
  };
  
  return {
    thought,
    isThinking,
    animateThinking,
    generateThought
  };
};

export default useThoughtGeneration;