hooks/useFullscreen.ts

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

export interface FullscreenHook {
  isFullscreenActive: boolean;
  toggleFullscreen: () => Promise<void>;
  requestFullscreenSupportError?: string;
}

export const useFullscreen = (
  showToast?: (message: string, type: 'info' | 'error') => void
): FullscreenHook => {
  const [isFullscreenActive, setIsFullscreenActive] = useState<boolean>(false);
  const [requestFullscreenSupportError, setRequestFullscreenSupportError] = useState<string | undefined>();

  const handleFullscreenChange = useCallback(() => {
    setIsFullscreenActive(!!(
      document.fullscreenElement ||
      (document as any).webkitFullscreenElement ||
      (document as any).mozFullScreenElement ||
      (document as any).msFullscreenElement
    ));
  }, []);

  useEffect(() => {
    document.addEventListener('fullscreenchange', handleFullscreenChange);
    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
    document.addEventListener('mozfullscreenchange', handleFullscreenChange);
    document.addEventListener('MSFullscreenChange', handleFullscreenChange);
    
    handleFullscreenChange(); // Initial check

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

  const toggleFullscreen = async () => {
    const element = document.documentElement as any;
    try {
      if (!isFullscreenActive) {
        if (element.requestFullscreen) {
          await element.requestFullscreen();
        } else if (element.mozRequestFullScreen) { // Firefox
          await element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) { // Chrome, Safari, Opera
          await element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) { // IE/Edge
          await element.msRequestFullscreen();
        } else {
            const errorMsg = "Fullscreen API is not supported by this browser.";
            setRequestFullscreenSupportError(errorMsg);
            if (showToast) showToast(errorMsg, "error");
            return;
        }
      } else {
        if (document.exitFullscreen) {
          await document.exitFullscreen();
        } else if ((document as any).mozCancelFullScreen) {
          await (document as any).mozCancelFullScreen();
        } else if ((document as any).webkitExitFullscreen) {
          await (document as any).webkitExitFullscreen();
        } else if ((document as any).msExitFullscreen) {
          await (document as any).msExitFullscreen();
        } else {
            const errorMsg = "Could not exit fullscreen. API not found.";
             setRequestFullscreenSupportError(errorMsg);
            if (showToast) showToast(errorMsg, "error");
            return;
        }
      }
      setRequestFullscreenSupportError(undefined);
    } catch (err: any) {
      console.error("Fullscreen API error:", err);
      const errorMsg = `Fullscreen mode change failed: ${err.message || 'Unknown error'}`;
      setRequestFullscreenSupportError(errorMsg);
      if (showToast) showToast(errorMsg, "error");
      handleFullscreenChange(); // Ensure state reflects reality
    }
  };

  return { isFullscreenActive, toggleFullscreen, requestFullscreenSupportError };
};