<template>
  <UButton
    color="primary"
    size="lg"
    variant="outline"
    @click="handleClick"
    class="verification-button"
  >
    <template #leading>
      <UIcon name="i-heroicons-computer-desktop" />
    </template>
    Verificación Frontend
  </UButton>
</template>

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

const handleClick = () => {
  if (!user.value) {
    toast.add({
      title: 'No Autenticado',
      description: 'No hay usuario autenticado',
      color: 'warning',
      icon: 'i-heroicons-exclamation-triangle'
    })
    return
  }

  const groupCount = user.value.groups.length
  const groupList = user.value.groups.join(', ') || 'Ninguno'

  toast.add({
    title: 'Verificación Frontend',
    description: `Usuario: ${user.value.username}
Grupos (${groupCount}): ${groupList}`,
    color: 'primary',
    icon: 'i-heroicons-check-badge'
  })
}
</script>

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

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

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