<template>
  <UApp>
    <NuxtRouteAnnouncer />
    <UNotifications />
    <NuxtPage />
  </UApp>
</template>

<script setup lang="ts">
const { isAuthenticated } = useAuthentik()
const { inicializar, getCurrentColors } = useColorCustomization()

// Inicializar personalización de colores
onMounted(() => {
  inicializar()
})

// Color de tema reactivo basado en el background del tema actual
const themeColor = computed(() => getCurrentColors.value.background)

// Configurar meta tags para PWA con theme-color reactivo
useHead({
  link: [
    { rel: 'manifest', href: '/manifest.webmanifest' },
    { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
    { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }
  ],
  meta: [
    { name: 'theme-color', content: themeColor },
    { name: 'mobile-web-app-capable', content: 'yes' },
    { name: 'apple-mobile-web-app-capable', content: 'yes' },
    { name: 'apple-mobile-web-app-status-bar-style', content: 'default' }
  ]
})
</script>
