<template>
  <UButton
    color="warning"
    size="lg"
    variant="outline"
    :loading="loading"
    @click="handleClick"
    class="verification-button"
  >
    <template #leading>
      <UIcon name="i-heroicons-server" />
    </template>
    Verificación Backend
  </UButton>
</template>

<script setup lang="ts">
const toast = useToast()
const loading = ref(false)

const handleClick = async () => {
  loading.value = true

  try {
    // Consultar el endpoint que lee los headers del servidor
    const response = await $fetch<{
      authenticated: boolean
      user?: {
        username: string
        groups: string[]
      }
    }>('/api/auth/status')

    if (response.authenticated && response.user) {
      const groupCount = response.user.groups.length
      const groupList = response.user.groups.join(', ') || 'Ninguno'

      toast.add({
        title: 'Verificación Backend',
        description: `Usuario: ${response.user.username}
Grupos (${groupCount}): ${groupList}`,
        color: 'warning',
        icon: 'i-heroicons-server-stack'
      })
    } else {
      toast.add({
        title: 'No Autenticado (Backend)',
        description: 'No hay sesión activa en el servidor',
        color: 'warning',
        icon: 'i-heroicons-exclamation-triangle'
      })
    }
  } catch (error) {
    toast.add({
      title: 'Error Backend',
      description: 'No se pudo verificar en el servidor',
      color: 'error',
      icon: 'i-heroicons-x-circle'
    })
    console.error('Backend verification error:', error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.verification-button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.1), 0 2px 4px -1px rgba(249, 115, 22, 0.06);
}

.verification-button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.2), 0 4px 6px -2px rgba(249, 115, 22, 0.1);
}

.verification-button:active {
  transform: translateY(0) scale(0.98);
}
</style>
