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

interface UseFullscreenReturn {
  isFullscreen: boolean;
  supportsFullscreen: boolean;
  enterFullscreen: () => Promise<void>;
  exitFullscreen: () => Promise<void>;
}

export const useFullscreen = (
  elementRef: React.RefObject<HTMLElement | null>
): UseFullscreenReturn => {
  const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
  const [supportsFullscreen, setSupportsFullscreen] = useState<boolean>(false);

  // Check for fullscreen support on mount
  useEffect(() => {
    // Check if fullscreen is supported (not available on iOS)
    const checkFullscreenSupport = () => {
      if (!document) {
        setSupportsFullscreen(false);
        return;
      }

      const doc = document as any;
      setSupportsFullscreen(
        !!(
          doc.fullscreenEnabled ||
          doc.webkitFullscreenEnabled ||
          doc.mozFullScreenEnabled ||
          doc.msFullscreenEnabled
        )
      );
    };

    checkFullscreenSupport();
  }, []);

  // Fullscreen functionality
  const enterFullscreen = useCallback(async () => {
    if (!document) return;
    if (!elementRef.current) return;

    try {
      const elem = elementRef.current as any;

      if (elem.requestFullscreen) {
        await elem.requestFullscreen();
      } else if (elem.webkitRequestFullscreen) {
        // Safari on macOS
        await elem.webkitRequestFullscreen();
      } else if (elem.mozRequestFullScreen) {
        await elem.mozRequestFullScreen();
      } else if (elem.msRequestFullscreen) {
        await elem.msRequestFullscreen();
      }
    } catch (error) {
      console.error('Failed to enter fullscreen:', error);
    }
  }, [elementRef]);

  const exitFullscreen = useCallback(async () => {
    try {
      if (!document) return;

      const doc = document as any;

      if (doc.exitFullscreen) {
        await doc.exitFullscreen();
      } else if (doc.webkitExitFullscreen) {
        await doc.webkitExitFullscreen();
      } else if (doc.mozCancelFullScreen) {
        await doc.mozCancelFullScreen();
      } else if (doc.msExitFullscreen) {
        await doc.msExitFullscreen();
      }
    } catch (error) {
      console.error('Failed to exit fullscreen:', error);
    }
  }, []);

  const handleFullscreenChange = useCallback(() => {
    if (!document) return;

    const doc = document as any;
    setIsFullscreen(
      !!(
        doc.fullscreenElement ||
        doc.webkitFullscreenElement ||
        doc.mozFullScreenElement ||
        doc.msFullscreenElement
      )
    );
  }, []);

  // Handle fullscreen change events
  useEffect(() => {
    if (!document) return;
    document.addEventListener('fullscreenchange', handleFullscreenChange);
    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
    document.addEventListener('mozfullscreenchange', handleFullscreenChange);
    document.addEventListener('MSFullscreenChange', handleFullscreenChange);

    return () => {
      document.removeEventListener('fullscreenchange', handleFullscreenChange);
      document.removeEventListener(
        'webkitfullscreenchange',
        handleFullscreenChange
      );
      document.removeEventListener(
        'mozfullscreenchange',
        handleFullscreenChange
      );
      document.removeEventListener(
        'MSFullscreenChange',
        handleFullscreenChange
      );
    };
  }, [handleFullscreenChange]);

  return {
    isFullscreen,
    supportsFullscreen,
    enterFullscreen,
    exitFullscreen,
  };
};