'use client'

import { useSyncExternalStore } from 'react'

/**
 * `matchMedia` as a hook (Task 83).
 *
 * Tailwind classes can hide an element, but they cannot stop a Radix Dialog
 * from being OPEN — its overlay, body pointer-events lock and focus trap all
 * come from the open state, not from the content's display. Anything that
 * must exist on one breakpoint only has to be mounted conditionally, and
 * that needs the breakpoint in JavaScript.
 *
 * SSR-safe: the server snapshot is `false`, so nothing breakpoint-gated
 * renders during hydration and there is no mismatch.
 */
export function useMediaQuery(query: string): boolean {
  return useSyncExternalStore(
    (onChange) => {
      if (typeof window === 'undefined') return () => {}
      const mql = window.matchMedia(query)
      mql.addEventListener('change', onChange)
      return () => mql.removeEventListener('change', onChange)
    },
    () => (typeof window === 'undefined' ? false : window.matchMedia(query).matches),
    () => false,
  )
}

/** Tailwind `xl` — where the workspace switches to the three-column layout. */
export const XL_QUERY = '(min-width: 1280px)'