/**
 * Composable para detectar el tipo de dispositivo (desktop o móvil)
 * Usa pointer device para detectar si tiene mouse (desktop) o touch (móvil)
 * Esto es más confiable que el ancho de ventana para PWAs
 */
export const useDeviceType = () => {
  const isDesktop = ref(false)

  if (import.meta.client && typeof window !== 'undefined') {
    // Detectar si el dispositivo principal es un puntero fino (mouse/trackpad)
    // vs un puntero grueso (touch). Esto es más confiable para PWAs.
    const pointerQuery = window.matchMedia('(pointer: fine)')

    // También verificar si el ancho de pantalla es >= 1024px como fallback
    const widthQuery = window.matchMedia('(min-width: 1024px)')

    // Considerar desktop si tiene pointer fino O ancho >= 1024px
    isDesktop.value = pointerQuery.matches || widthQuery.matches

    console.log('[useDeviceType] Initialized:', {
      isDesktop: isDesktop.value,
      pointerFine: pointerQuery.matches,
      windowWidth: window.innerWidth,
      screenWidth: window.screen.availWidth,
      widthMatches: widthQuery.matches
    })

    // Escuchar cambios en el pointer (aunque es raro que cambie)
    const handlePointerChange = (e: MediaQueryListEvent) => {
      isDesktop.value = e.matches || widthQuery.matches
      console.log('[useDeviceType] Pointer changed:', {
        isDesktop: isDesktop.value,
        pointerFine: e.matches
      })
    }

    const handleWidthChange = (e: MediaQueryListEvent) => {
      isDesktop.value = pointerQuery.matches || e.matches
      console.log('[useDeviceType] Width changed:', {
        isDesktop: isDesktop.value,
        windowWidth: window.innerWidth
      })
    }

    pointerQuery.addEventListener('change', handlePointerChange)
    widthQuery.addEventListener('change', handleWidthChange)

    // Cleanup al desmontar
    onUnmounted(() => {
      pointerQuery.removeEventListener('change', handlePointerChange)
      widthQuery.removeEventListener('change', handleWidthChange)
    })
  }

  return {
    isDesktop: readonly(isDesktop),
    isMobile: computed(() => !isDesktop.value)
  }
}
