import { useSyncExternalStore } from "react"

const subscribeMediaQuery = (query: string) => (callback: () => void) => {
  if (typeof window === "undefined") return () => {}
  const mql = window.matchMedia(query)
  mql.addEventListener("change", callback)
  return () => mql.removeEventListener("change", callback)
}

const getMediaQuerySnapshot = (query: string) => () => {
  if (typeof window === "undefined") return false
  return window.matchMedia(query).matches
}

export function useMediaQuery(query: string): boolean {
  return useSyncExternalStore(
    subscribeMediaQuery(query),
    getMediaQuerySnapshot(query),
    () => false,
  )
}

// 移动端：< 768px（对应 Tailwind md 断点以下）
export function useIsMobile(): boolean {
  return useMediaQuery("(max-width: 47.999rem)")
}

// 桌面端：>= 768px
export function useIsDesktop(): boolean {
  return useMediaQuery("(min-width: 48rem)")
}

// 窄桌面/平板横屏：< 1280px（对应 Tailwind xl 断点以下）
export function useIsNarrowDesktop(): boolean {
  return useMediaQuery("(max-width: 79.999rem)")
}