<template>
  <UApp>
    <NuxtRouteAnnouncer />

    <UContainer class="py-8">
      <div class="space-y-6">
        <!-- Header -->
        <div class="text-center mb-8">
          <h1 class="text-4xl font-bold mb-2">Plantilla Nuxt + Authentik</h1>
          <p class="text-gray-600 dark:text-gray-400">
            Ejemplo de integración con Authentik Proxy Outpost
          </p>
        </div>

        <!-- Componentes de autenticación -->
        <div v-if="isAuthenticated" class="grid gap-6 lg:grid-cols-2">
          <!-- Columna izquierda -->
          <div class="space-y-6">
            <!-- Avatar y datos básicos -->
            <AuthUserAvatar />

            <!-- Badges de estado -->
            <AuthStatusBadges />

            <!-- Botones de acción -->
            <AuthActionButtons />
          </div>

          <!-- Columna derecha -->
          <div class="space-y-6">
            <!-- Metadatos completos -->
            <AuthUserMetadata />
          </div>
        </div>

        <!-- Mensaje si no está autenticado -->
        <UCard v-else class="text-center">
          <div class="py-8">
            <UIcon name="i-heroicons-shield-exclamation" class="w-16 h-16 mx-auto mb-4 text-gray-400" />
            <h2 class="text-2xl font-semibold mb-2">No autenticado</h2>
            <p class="text-gray-600 dark:text-gray-400">
              Authentik Proxy Outpost debería redirigirte automáticamente.
            </p>
          </div>
        </UCard>
      </div>
    </UContainer>
  </UApp>
</template>

<script setup lang="ts">
const { isAuthenticated } = useAuthentik()
</script>
