import { useDevice } from '#imports'
import { defineNuxtPlugin, useNuxtApp } from 'nuxt/app'
import { DeviceEnum } from '#lib/enums'
import type { AppCookies } from '#lib/types'

export default defineNuxtPlugin(() => {
  const device = useDevice()
  const $appCookies = useNuxtApp().$appCookies as AppCookies

  // Clear layout cookie for non-Apple Safari devices
  if (!device.isApple || !device.isSafari) {
    $appCookies.layout.value = null
  }

  // Check if layout is explicitly set to mobile or if device is actually mobile/tablet
  if (
    $appCookies.layout.value === DeviceEnum.MOBILE ||
    device.isMobileOrTablet
  ) {
    device.isMobile = true
    return
  }

  if (import.meta.client) {
    // More precise mobile detection for Apple devices
    // Only consider it mobile if it's actually a mobile device, not just touch-enabled
    const isActuallyMobile = device.isMobileOrTablet && (
      // Check screen size as additional validation
      window.screen.width <= 768 || 
      // Check if it's actually a mobile user agent
      /iPhone|iPad|iPod|Android.*Mobile/i.test(navigator.userAgent)
    )
    
    if (isActuallyMobile) {
      device.isMobile = true
      $appCookies.layout.value = DeviceEnum.MOBILE
      window.location.reload()
    } else {
      // Ensure desktop devices are not treated as mobile
      device.isMobile = false
      $appCookies.layout.value = null
    }
  }
})