<template>
  <div class="gatekeeper">
    <div v-if="isLoading">
      <p class="animate-pulse">Loading permissions...</p>
    </div>

    <div v-else-if="!user" class="text-center p-8 glass-panel rounded-xl">
      <h2 class="text-2xl font-bold mb-4">🔐 Locked Area</h2>
      <p class="mb-6">Sign in with your Google account to access this content.</p>
      <button @click="login" class="btn btn-primary">
        Sign in with Google
      </button>
    </div>

    <div v-else-if="!isAllowed" class="text-center p-8 glass-panel rounded-xl border border-red-500/30">
      <h2 class="text-2xl font-bold mb-4 text-red-400">🚫 Access Pending</h2>
      <p class="mb-6">
        Hi <strong>{{ user.displayName }}</strong>. Your account ({{ user.email }}) is not yet on the guest list.
      </p>
      <p class="text-sm opacity-70">
        Please ask the admin to add "<strong>{{ user.email }}</strong>" to the allowlist.
      </p>
      <button @click="logout" class="btn btn-sm btn-ghost mt-4">
        Sign Out
      </button>
    </div>

    <div v-else>
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useAuth } from '../composables/useAuth'

const { user, isAllowed, isLoading, login, logout } = useAuth()
</script>

<style scoped>
.glass-panel {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
</style>
