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

const useVideoControls = (
  videoRef: RefObject<HTMLVideoElement>,
  videoUrl: string,
  autoplay = false,
) => {
  const [isPaused, setIsPaused] = useState(!autoplay);
  // Start muted — required for autoplay and consistent across all modes.
  const [isMuted, setIsMuted] = useState(true);

  const toggleMute = () => {
    const video = videoRef.current;
    if (!video) return;
    const next = !isMuted;
    video.muted = next;
    setIsMuted(next);
  };

  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;

    video.load();

    if (autoplay) {
      const handleCanPlay = () => {
        video
          .play()
          .then(() => setIsPaused(false))
          .catch(() => setIsPaused(true));
      };
      video.addEventListener('loadeddata', handleCanPlay, { once: true });
      return () => video.removeEventListener('loadeddata', handleCanPlay);
    } else {
      setIsPaused(true);
    }
  }, [videoUrl]);

  const playVideo = async () => {
    try {
      await videoRef.current?.play();
      setIsPaused(false);
    } catch (error) {
      setIsPaused(true);
      throw new Error('Error playing video. Please try again later.');
    }
  };

  const pauseVideo = () => {
    videoRef.current?.pause();
    setIsPaused(true);
  };

  return { isPaused, isMuted, toggleMute, playVideo, pauseVideo };
};

export default useVideoControls;