<template>
  <UCard class="w-full">
    <div class="flex flex-wrap gap-3">
      <!-- Botón de estado de sesión (siempre visible) -->
      <UButton
        color="info"
        size="lg"
        variant="soft"
        @click="checkSessionStatus"
      >
        <template #leading>
          <UIcon name="i-heroicons-information-circle" />
        </template>
        Estado de Sesión
      </UButton>

      <!-- Botones cuando HAY sesión -->
      <template v-if="isAuthenticated">
        <!-- Botón de perfil -->
        <UButton
          color="primary"
          size="lg"
          @click="goToProfile"
        >
          <template #leading>
            <UIcon name="i-heroicons-user-circle" />
          </template>
          Ver Perfil
        </UButton>

        <!-- Botón de logout -->
        <UButton
          color="error"
          size="lg"
          variant="soft"
          @click="logout"
        >
          <template #leading>
            <UIcon name="i-heroicons-arrow-right-on-rectangle" />
          </template>
          Cerrar Sesión
        </UButton>
      </template>

      <!-- Botón cuando NO hay sesión -->
      <template v-else>
        <UButton
          color="primary"
          size="lg"
          @click="reloadPage"
        >
          <template #leading>
            <UIcon name="i-heroicons-arrow-right-end-on-rectangle" />
          </template>
          Iniciar Sesión
        </UButton>
      </template>
    </div>
  </UCard>
</template>

<script setup lang="ts">
const { logout, goToProfile, checkSessionStatus, isAuthenticated } = useAuthentik()

const reloadPage = () => {
  // Recargar la página para forzar redirect de Authentik al login
  window.location.reload()
}
</script>
