<template>
  <UApp>
    <div class="brand-shell text-[var(--brand-text)]">
      <NuxtRouteAnnouncer />
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </div>
  </UApp>
</template>

<script setup lang="ts">
// Inicializar sistema de temas
const { loadTheme, initStorageListener, cleanupStorageListener } = useTheme()

// Signal that the app is ready
onMounted(() => {
  // Cargar tema guardado (o aplicar el por defecto)
  loadTheme()

  // Inicializar sincronización de tema entre pestañas
  initStorageListener()

  // Add class to HTML element to hide loading screen
  if (process.client) {
    // Small delay to ensure everything is painted
    setTimeout(() => {
      document.documentElement.classList.add('nuxt-ready')
    }, 100)
  }
})

// Limpiar listeners al desmontar
onBeforeUnmount(() => {
  cleanupStorageListener()
})
</script>
