"use client"

import { useSyncExternalStore } from "react"

function syncTabHiddenAttribute() {
  if (typeof document === "undefined") return
  document.documentElement.toggleAttribute(
    "data-tab-hidden",
    document.visibilityState === "hidden",
  )
}

function subscribe(onStoreChange: () => void) {
  const onVisibilityChange = () => {
    syncTabHiddenAttribute()
    onStoreChange()
  }
  syncTabHiddenAttribute()
  document.addEventListener("visibilitychange", onVisibilityChange)
  return () =>
    document.removeEventListener("visibilitychange", onVisibilityChange)
}

function getSnapshot() {
  return document.visibilityState !== "hidden"
}

function getServerSnapshot() {
  return true
}

/** True while the document tab is visible (not backgrounded). */
export function usePageVisible(): boolean {
  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
}

/** Mount once near the app root so `html[data-tab-hidden]` is set before Leo chrome mounts. */
export function TabVisibilitySync() {
  usePageVisible()
  return null
}