<template>
  <UCard v-if="user" class="w-full">
    <template #header>
      <h3 class="font-semibold text-lg flex items-center gap-2">
        <UIcon name="i-heroicons-information-circle" />
        Metadatos del Usuario
      </h3>
    </template>

    <div class="space-y-3">
      <!-- Username -->
      <div class="flex items-start gap-3">
        <UIcon name="i-heroicons-at-symbol" class="text-[var(--brand-text-muted)] mt-0.5" />
        <div class="flex-1">
          <p class="text-xs text-[var(--brand-text-muted)]">Username</p>
          <p class="font-medium">{{ user.username }}</p>
        </div>
      </div>

      <!-- Email -->
      <div class="flex items-start gap-3">
        <UIcon name="i-heroicons-envelope" class="text-[var(--brand-text-muted)] mt-0.5" />
        <div class="flex-1">
          <p class="text-xs text-[var(--brand-text-muted)]">Email</p>
          <p class="font-medium">{{ user.email }}</p>
        </div>
      </div>

      <!-- Nombre completo -->
      <div class="flex items-start gap-3">
        <UIcon name="i-heroicons-user" class="text-[var(--brand-text-muted)] mt-0.5" />
        <div class="flex-1">
          <p class="text-xs text-[var(--brand-text-muted)]">Nombre Completo</p>
          <p class="font-medium">{{ user.name || 'No especificado' }}</p>
        </div>
      </div>

      <!-- UID -->
      <div class="flex items-start gap-3">
        <UIcon name="i-heroicons-key" class="text-[var(--brand-text-muted)] mt-0.5" />
        <div class="flex-1">
          <p class="text-xs text-[var(--brand-text-muted)]">ID Único</p>
          <p class="font-mono text-sm">{{ user.uid }}</p>
        </div>
      </div>

      <!-- Grupos -->
      <div class="flex items-start gap-3">
        <UIcon name="i-heroicons-user-group" class="text-[var(--brand-text-muted)] mt-0.5" />
        <div class="flex-1">
          <p class="text-xs text-[var(--brand-text-muted)] mb-2">Grupos</p>
          <div class="flex flex-wrap gap-2">
            <UBadge
              v-for="group in user.groups"
              :key="group"
              color="primary"
              variant="soft"
            >
              {{ group }}
            </UBadge>
            <UBadge v-if="user.groups.length === 0" color="gray" variant="soft">
              Sin grupos asignados
            </UBadge>
          </div>
        </div>
      </div>

      <!-- Metadata de la Aplicación (si está disponible) -->
      <div v-if="user.appSlug || user.outpostName" class="pt-3 mt-3 border-t border-gray-200 dark:border-gray-700">
        <p class="text-xs text-[var(--brand-text-muted)] mb-2">Información de Conexión</p>
        <div class="space-y-2">
          <div v-if="user.appSlug" class="flex items-center gap-2 text-sm">
            <UIcon name="i-heroicons-cube" class="text-[var(--brand-text-muted)]" />
            <span class="text-gray-600 dark:text-gray-300">App: </span>
            <code class="text-xs bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded">{{ user.appSlug }}</code>
          </div>
          <div v-if="user.outpostName" class="flex items-center gap-2 text-sm">
            <UIcon name="i-heroicons-server" class="text-[var(--brand-text-muted)]" />
            <span class="text-gray-600 dark:text-gray-300">Outpost: </span>
            <code class="text-xs bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded">{{ user.outpostName }}</code>
          </div>
        </div>
      </div>
    </div>
  </UCard>
</template>

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