import { useCallback, useEffect, useState, type RefObject } from 'react'
import { useToast } from '@/components/ui/ToastProvider'

interface UseFullscreenResult {
  /** `document.fullscreenEnabled` — если `false`, кнопку в тулбаре нужно скрыть (программный фуллскрин недоступен). */
  supported: boolean
  /** Активен ли полноэкранный режим сейчас. */
  active: boolean
  /** Войти/выйти из полноэкранного режима для контейнера `ref`. */
  toggle: () => void
}

/**
 * Полноэкранный режим комнаты конференции (Fullscreen API, MDN).
 * Цель — корневой контейнер комнаты
 * (`div[data-theme="room"]` в `RoomPage.tsx`), чтобы тулбар и чат оставались
 * видны внутри фуллскрина.
 *
 * Единственный источник истины о состоянии — событие `fullscreenchange`
 * документа, а не промис `requestFullscreen()`: выход по Esc браузер
 * выполняет сам, без обратного вызова нашего кода, и событие — единственный
 * способ об этом узнать.
 */
export function useFullscreen(ref: RefObject<HTMLElement | null>): UseFullscreenResult {
  const toast = useToast()
  const supported = typeof document !== 'undefined' && document.fullscreenEnabled
  const [active, setActive] = useState(() => typeof document !== 'undefined' && document.fullscreenElement !== null)

  useEffect(() => {
    function handleChange() {
      setActive(document.fullscreenElement !== null)
    }
    document.addEventListener('fullscreenchange', handleChange)
    return () => document.removeEventListener('fullscreenchange', handleChange)
  }, [])

  const toggle = useCallback(() => {
    if (document.fullscreenElement) {
      void document.exitFullscreen()
      return
    }
    ref.current?.requestFullscreen().catch(() => {
      toast.show('Не удалось включить полноэкранный режим', 'error')
    })
  }, [ref, toast])

  return { supported, active, toggle }
}
