import { ref, onMounted, onBeforeUnmount } from 'vue'

// matchMedia réactif (basé CSS) — fiable partout, y compris là où `$q.screen` ne se met pas à jour
// (aperçu headless), et SSR-safe. Renvoie un ref booléen qui suit le media query.
//
//   const isMobile = useIsMobile()   // true sous 1024px (tablette/téléphone)
//   const isPhone  = useIsPhone()    // true sous 600px
export function useMediaQuery (query) {
  const matches = ref(false)
  let mql = null
  const update = () => { matches.value = !!(mql && mql.matches) }
  onMounted(() => {
    if (typeof window === 'undefined' || !window.matchMedia) return
    mql = window.matchMedia(query)
    update()
    if (mql.addEventListener) mql.addEventListener('change', update)
    else if (mql.addListener) mql.addListener(update) // anciens Safari
  })
  onBeforeUnmount(() => {
    if (!mql) return
    if (mql.removeEventListener) mql.removeEventListener('change', update)
    else if (mql.removeListener) mql.removeListener(update)
  })
  return matches
}

// Seuils alignés sur Quasar (xs<600, sm 600-1023, md 1024+).
export const useIsPhone = () => useMediaQuery('(max-width: 599px)')
export const useIsMobile = () => useMediaQuery('(max-width: 1023px)')
