SIB/frontend/src/components/common/AuthGuard.vue

<script setup lang="ts">
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'

interface Props {
  title?: string
  message?: string
  actionLabel?: string
  showOnGuest?: boolean // If false, the guard won't trigger (standard behavior)
}

const props = withDefaults(defineProps<Props>(), {
  title: '¡Desbloquea contenido exclusivo!',
  message: 'Regístrate para ver todos los detalles, ofertas y rutas recomendadas.',
  actionLabel: 'Unirme ahora',
  showOnGuest: true
})

const authStore = useAuthStore()
const router = useRouter()
const { t } = useI18n()

function goToRegister() {
  router.push('/register')
}

function goToLogin() {
  router.push('/login')
}
</script>

<template>
  <div class="auth-guard-container">
    <!-- Slot for the actual content -->
    <div 
      class="content-wrapper" 
      :class="{ 'content-blurred': !authStore.isAuthenticated && props.showOnGuest }"
    >
      <slot />
    </div>

    <!-- Overlay (only visible if not authenticated) -->
    <Transition name="fade-scale">
      <div 
        v-if="!authStore.isAuthenticated && props.showOnGuest" 
        class="auth-overlay"
      >
        <div class="auth-card glass-effect">
          <div class="auth-icon-circle">
            <span class="material-icons">lock</span>
          </div>
          
          <h3 class="auth-title">{{ props.title }}</h3>
          <p class="auth-message">{{ props.message }}</p>
          
          <div class="auth-actions">
            <button class="primary-btn" @click="goToRegister">
              <span class="material-icons">person_add</span>
              {{ props.actionLabel }}
            </button>
            <button class="secondary-btn" @click="goToLogin">
              {{ t('auth.loginLink') || 'Ya tengo cuenta' }}
            </button>
          </div>
        </div>
      </div>
    </Transition>
  </div>
</template>

<style scoped>
.auth-guard-container {
  position: relative;
  width: 100%;
}

.content-wrapper {
  transition: filter 0.5s ease, opacity 0.5s ease;
}

.content-blurred {
  filter: blur(14px);
  pointer-events: none;
  user-select: none;
  opacity: 0.7;
}

/* ── OVERLAY ── */
.auth-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1.5rem;
  background: rgba(var(--bg-primary-rgb), 0.2);
}

.auth-card {
  max-width: 360px;
  width: 100%;
  padding: 2.25rem 1.75rem;
  border-radius: 2rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  animation: float 6s ease-in-out infinite;
}

.auth-icon-circle {
  width: 64px;
  height: 64px;
  background: var(--active-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.auth-icon-circle .material-icons {
  font-size: 2rem;
  color: #101820;
}

.auth-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

.auth-message {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* ── ACTIONS ── */
.auth-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.5rem;
}

.primary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--active-color);
  color: #101820;
  border: none;
  border-radius: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.primary-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 20px rgba(254, 231, 21, 0.3);
}

.secondary-btn {
  padding: 0.75rem;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}

.secondary-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--active-color);
}

/* ── ANIMATIONS ── */
.fade-scale-enter-active,
.fade-scale-leave-active {
  transition: all 0.4s ease;
}

.fade-scale-enter-from,
.fade-scale-leave-to {
  opacity: 0;
  transform: scale(0.95) translateY(10px);
}

@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* Dark mode utility */
:root {
  --bg-primary-rgb: 16, 24, 32; /* SIBU Dark primary */
}
</style>