import { ref, useSnapshot } from 'valtio'
import { useCallback, useMemo } from 'react'
import { flushSync } from 'react-dom'
import { documentPictureInPictureStore } from '@/stores/documentPictureInPicture'
import { useTranslation } from 'react-i18next'
import { reportError } from '@/features/analytics/telemetry'

export const IS_PIP_SUPPORTED =
  typeof globalThis !== 'undefined' && 'documentPictureInPicture' in globalThis

export const usePictureInPicture = () => {
  const { t } = useTranslation('rooms', {
    keyPrefix: 'pictureInPicture',
  })
  const { window: pipWindowRef } = useSnapshot(documentPictureInPictureStore)

  const isOpen = useMemo(() => {
    return !!pipWindowRef && !pipWindowRef.closed
  }, [pipWindowRef])

  const syncStyles = useCallback((pipWindow: Window) => {
    document.head
      .querySelectorAll('link[rel="stylesheet"], style')
      .forEach((node) => {
        pipWindow.document.head.appendChild(node.cloneNode(true))
      })
    pipWindow.document.documentElement.className =
      document.documentElement.className
    pipWindow.document.documentElement.style.cssText =
      document.documentElement.style.cssText

    const theme = document.documentElement.dataset.lkTheme
    if (theme) {
      pipWindow.document.documentElement.dataset.lkTheme = theme
    }
  }, [])

  const initializePortalContainer = useCallback((pipWindow: Window) => {
    const existing = pipWindow.document.getElementById('root')
    if (existing) return existing

    const newContainer = pipWindow.document.createElement('div')
    newContainer.id = 'root'
    newContainer.style.width = '100%'
    newContainer.style.height = '100%'

    pipWindow.document.body.appendChild(newContainer)
  }, [])

  const initializeTitleAndLanguage = useCallback(
    (pipWindow: Window, title: string) => {
      const parentLang = document?.documentElement.lang || 'en'
      pipWindow.document.documentElement.setAttribute('lang', parentLang)
      pipWindow.document.title = title
    },
    []
  )

  const open = useCallback(
    async (width = 400, height = 480) => {
      if (!IS_PIP_SUPPORTED) return null
      if (isOpen) return null

      let pipWindow: Window
      try {
        pipWindow =
          await // eslint-disable-next-line @typescript-eslint/no-explicit-any
          (window as any).documentPictureInPicture.requestWindow({
            width,
            height,
          })
      } catch {
        // Avoid unhandled rejections if the user blocks or closes the request.
        return null
      }

      try {
        initializeTitleAndLanguage(pipWindow, t('title'))
        initializePortalContainer(pipWindow)
        syncStyles(pipWindow)

        const cleanUp = () => {
          if (documentPictureInPictureStore.window === pipWindow) {
            flushSync(() => {
              documentPictureInPictureStore.window = null
            })
          }
        }
        pipWindow.addEventListener('pagehide', () => cleanUp(), { once: true })
        pipWindow.addEventListener('beforeunload', () => cleanUp(), {
          once: true,
        })
        documentPictureInPictureStore.window = ref(pipWindow)
      } catch (error) {
        reportError('generic_failure', error, {
          context: 'pip_init_failure',
        })
        pipWindow.close()
        return null
      }
    },
    [
      initializePortalContainer,
      initializeTitleAndLanguage,
      isOpen,
      syncStyles,
      t,
    ]
  )

  const close = useCallback(() => {
    documentPictureInPictureStore.window?.close()
    documentPictureInPictureStore.window = null
  }, [])

  const toggle = useCallback(async () => {
    if (isOpen) close()
    else await open()
  }, [isOpen, close, open])

  return {
    isSupported: IS_PIP_SUPPORTED,
    isOpen,
    open,
    close,
    toggle,
  }
}
