'use client'

import { useEffect, useState } from 'react'

const USER_VIEW_STORAGE_KEY = 'magent_user_view_preview'
const USER_VIEW_EVENT = 'magent:user-view-change'

const readUserViewPreview = () => {
  if (typeof window === 'undefined') return false
  return window.sessionStorage.getItem(USER_VIEW_STORAGE_KEY) === '1'
}

const applyDocumentMode = (enabled: boolean) => {
  if (typeof document === 'undefined') return
  document.documentElement.dataset.userView = enabled ? 'true' : 'false'
}

export const setUserViewPreview = (enabled: boolean) => {
  if (typeof window === 'undefined') return
  if (enabled) {
    window.sessionStorage.setItem(USER_VIEW_STORAGE_KEY, '1')
  } else {
    window.sessionStorage.removeItem(USER_VIEW_STORAGE_KEY)
  }
  applyDocumentMode(enabled)
  window.dispatchEvent(new CustomEvent(USER_VIEW_EVENT, { detail: { enabled } }))
}

export const useUserViewPreview = () => {
  const [enabled, setEnabled] = useState(false)

  useEffect(() => {
    const sync = () => {
      const nextValue = readUserViewPreview()
      applyDocumentMode(nextValue)
      setEnabled(nextValue)
    }
    sync()
    window.addEventListener(USER_VIEW_EVENT, sync)
    window.addEventListener('storage', sync)
    return () => {
      window.removeEventListener(USER_VIEW_EVENT, sync)
      window.removeEventListener('storage', sync)
    }
  }, [])

  return enabled
}