<script setup lang="ts">
/**
 * @file GlobalLoader.vue
 * @description Global full-screen loading overlay that triggers during page navigation.
 * Uses a premium pulsing logo animation.
 */

const nuxtApp = useNuxtApp()
const isLoading = ref(false)

// Hook into Nuxt page transitions
nuxtApp.hook('page:start', () => {
  isLoading.value = true
})

nuxtApp.hook('page:finish', () => {
  // Add a small delay for better UX (prevents flickering on fast loads)
  setTimeout(() => {
    isLoading.value = false
  }, 500)
})
</script>

<template>
  <Transition name="fade">
    <div v-if="isLoading" class="fixed inset-0 z-[99999] flex flex-col items-center justify-center bg-white dark:bg-[#0f172a] transition-colors duration-300">
      <div class="relative flex flex-col items-center">
        <!-- Main Logo Box -->
        <div class="w-20 h-20 bg-blue-50 dark:bg-blue-900/20 rounded-2xl flex items-center justify-center mb-6 animate-pulse-soft">
          <div class="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-600/30 animate-bounce-subtle">
            <span class="text-2xl font-black text-white">E</span>
          </div>
        </div>
        
        <!-- Loading Text -->
        <div class="flex flex-col items-center gap-2">
          <h3 class="text-lg font-bold text-slate-800 dark:text-white tracking-wide">e-Learning</h3>
          <div class="flex gap-1">
            <div class="w-2 h-2 rounded-full bg-blue-500 animate-bounce" style="animation-delay: 0s"/>
            <div class="w-2 h-2 rounded-full bg-blue-500 animate-bounce" style="animation-delay: 0.1s"/>
            <div class="w-2 h-2 rounded-full bg-blue-500 animate-bounce" style="animation-delay: 0.2s"/>
          </div>
        </div>
      </div>
    </div>
  </Transition>
</template>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

@keyframes pulse-soft {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
}

@keyframes bounce-subtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.animate-pulse-soft {
  animation: pulse-soft 2s ease-in-out infinite;
}

.animate-bounce-subtle {
  animation: bounce-subtle 2s ease-in-out infinite;
}
</style>
