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

    <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 />

            <!-- Botones de acción individuales -->
            <UCard class="w-full">
              <template #header>
                <h3 class="text-lg font-semibold">Acciones de Sesión</h3>
              </template>
              <div class="flex flex-wrap gap-3">
                <AuthEditProfileButton />
                <AuthSessionStatusButton />
                <AuthProfileButton />
                <AuthLogoutButton />
                <AuthLoginButton />
              </div>
            </UCard>

            <!-- Verificaciones Frontend/Backend -->
            <UCard class="w-full">
              <template #header>
                <div class="flex items-center gap-2">
                  <UIcon name="i-heroicons-cpu-chip" class="w-5 h-5" />
                  <h3 class="text-lg font-semibold">Verificación de Sistema</h3>
                </div>
              </template>
              <div class="flex flex-wrap gap-3">
                <AuthFrontendVerificationButton />
                <AuthBackendVerificationButton />
              </div>
            </UCard>
          </div>

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

            <!-- Verificaciones de Grupos Frontend -->
            <UCard class="w-full">
              <template #header>
                <div class="flex items-center gap-2">
                  <UIcon name="i-heroicons-user-group" class="w-5 h-5 text-purple-500" />
                  <h3 class="text-lg font-semibold">Grupos (Frontend)</h3>
                </div>
              </template>
              <div class="grid grid-cols-2 gap-3">
                <AuthCheckAuthentikAdminsButton />
                <AuthCheckGrupoPruebaButton />
                <AuthCheckLvl0Button />
                <AuthCheckPublicAccessButton />
              </div>
            </UCard>

            <!-- Verificaciones de Grupos Backend -->
            <UCard class="w-full">
              <template #header>
                <div class="flex items-center gap-2">
                  <UIcon name="i-heroicons-server-stack" class="w-5 h-5 text-orange-500" />
                  <h3 class="text-lg font-semibold">Grupos (Backend)</h3>
                </div>
              </template>
              <div class="grid grid-cols-2 gap-3">
                <AuthCheckAuthentikAdminsButton :verify-backend="true" />
                <AuthCheckGrupoPruebaButton :verify-backend="true" />
                <AuthCheckLvl0Button :verify-backend="true" />
                <AuthCheckPublicAccessButton :verify-backend="true" />
              </div>
            </UCard>
          </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()

// Configurar meta tags para PWA
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: '#00DC82' },
    { 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' }
  ]
})

//  Build con user.ts unificado (GET y PATCH)
</script>
