frontend/src/hooks/useMediaTimeSync.ts

import { useEffect } from 'react';
import { TranscriptionResponse } from '../services/transcriptionApi';

interface UseMediaTimeSyncProps {
  audioRef: React.RefObject<HTMLAudioElement>;
  videoRef: React.RefObject<HTMLVideoElement>;
  onTimeUpdate: () => void;
  transcription: TranscriptionResponse | null;
}

export const useMediaTimeSync = ({
  audioRef,
  videoRef,
  onTimeUpdate,
  transcription,
}: UseMediaTimeSyncProps) => {
  useEffect(() => {
    const mediaElement = audioRef.current || videoRef.current;
    let frameId: number | null = null;

    console.log('Setting up requestAnimationFrame for media element:', mediaElement?.tagName);

    const smoothUpdate = () => {
      if (mediaElement && !mediaElement.paused && !mediaElement.ended) {
        onTimeUpdate();
        frameId = requestAnimationFrame(smoothUpdate);
      } else {
        frameId = null;
      }
    };

    if (mediaElement && transcription) {
      const handlePlay = () => {
        console.log('Media play event triggered');
        if (frameId) {
          cancelAnimationFrame(frameId);
        }
        frameId = requestAnimationFrame(smoothUpdate);
      };

      const handlePause = () => {
        console.log('Media pause event triggered');
        if (frameId) {
          cancelAnimationFrame(frameId);
          frameId = null;
        }
      };

      mediaElement.addEventListener('play', handlePlay);
      mediaElement.addEventListener('pause', handlePause);
      mediaElement.addEventListener('ended', handlePause);

      // Start if already playing
      if (!mediaElement.paused) {
        console.log('Media is already playing, starting animation loop');
        handlePlay();
      }

      return () => {
        if (frameId) {
          cancelAnimationFrame(frameId);
        }
        mediaElement.removeEventListener('play', handlePlay);
        mediaElement.removeEventListener('pause', handlePause);
        mediaElement.removeEventListener('ended', handlePause);
      };
    }
  }, [transcription, onTimeUpdate, audioRef, videoRef]);
};