<template>
  <div v-if="user" class="cata-user-info">
    <div class="cata-outline-box rounded-lg p-4">
      <div class="flex items-center gap-3">
        <!-- Avatar simple con inicial -->
        <div class="user-avatar cata-outline-box">
          <span class="cata-text text-xl font-semibold">
            {{ userInitial }}
          </span>
        </div>

        <!-- Info del usuario -->
        <div class="flex-1 min-w-0">
          <h3 class="cata-text font-semibold text-base sm:text-lg truncate">
            {{ user.name || user.username }}
          </h3>
          <p class="cata-text text-xs sm:text-sm opacity-60 truncate">
            {{ user.email }}
          </p>
        </div>

        <!-- Botón de logout compacto -->
        <button
          class="cata-button p-2 flex-shrink-0"
          @click="handleLogout"
          title="Cerrar sesión"
        >
          <UIcon name="i-lucide-log-out" class="w-4 h-4" />
        </button>
      </div>
    </div>
  </div>
</template>

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

// Obtener la inicial del usuario
const userInitial = computed(() => {
  if (!user.value) return '?'
  const name = user.value.name || user.value.username || user.value.email || '?'
  return name.charAt(0).toUpperCase()
})

// Manejar logout
const handleLogout = () => {
  // Redirigir al endpoint de logout de Authentik
  window.location.href = '/outpost.goauthentik.io/sign_out'
}
</script>

<style scoped>
.cata-user-info {
  width: 100%;
}

.user-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: color-mix(in srgb, var(--cata-primary) 5%, transparent);
}

.dark .user-avatar {
  background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--cata-primary) 20%, transparent);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .user-avatar {
    width: 2rem;
    height: 2rem;
  }

  .user-avatar .cata-text {
    font-size: 1rem;
  }
}
</style>
