<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-gray-500 dark:text-gray-400 mt-0.5" />
        <div class="flex-1">
          <p class="text-xs text-gray-500 dark:text-gray-400">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-gray-500 dark:text-gray-400 mt-0.5" />
        <div class="flex-1">
          <p class="text-xs text-gray-500 dark:text-gray-400">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-gray-500 dark:text-gray-400 mt-0.5" />
        <div class="flex-1">
          <p class="text-xs text-gray-500 dark:text-gray-400">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-gray-500 dark:text-gray-400 mt-0.5" />
        <div class="flex-1">
          <p class="text-xs text-gray-500 dark:text-gray-400">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-gray-500 dark:text-gray-400 mt-0.5" />
        <div class="flex-1">
          <p class="text-xs text-gray-500 dark:text-gray-400 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
            </UBadge>
          </div>
        </div>
      </div>
    </div>
  </UCard>
</template>

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