<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { fetchCurrentUser } from '@/services/authSession'

const router = useRouter()
const isLoading = ref(true)
const isAuthenticated = ref(false)

const primaryActionLabel = computed(() => (isAuthenticated.value ? 'Zum Dashboard' : 'Zum Login'))

async function resolveAuthState() {
  try {
    const user = await fetchCurrentUser({ force: true })
    isAuthenticated.value = user !== null
  } catch {
    isAuthenticated.value = false
  } finally {
    isLoading.value = false
  }
}

async function navigatePrimaryAction() {
  if (isAuthenticated.value) {
    await router.replace({ name: 'Dashboard' })
    return
  }

  await router.replace({ name: 'Login' })
}

onMounted(() => {
  void resolveAuthState()
})
</script>

<template>
  <v-container fluid class="forbidden-page hoard-page hoard-page--centered">
    <section class="forbidden-shell hoard-shell-grid hoard-panel">
      <header class="forbidden-head">
        <p class="hoard-kicker">Fehlende Berechtigung</p>
        <h1>Kein Zugriff</h1>
        <p>Dein Konto hat keine ausreichende Rolle für diese Seite.</p>
      </header>

      <div class="forbidden-actions hoard-action-row">
        <v-btn
          color="primary"
          prepend-icon="mdi-arrow-right"
          :loading="isLoading"
          :disabled="isLoading"
          @click="navigatePrimaryAction"
        >
          {{ primaryActionLabel }}
        </v-btn>
      </div>
    </section>
  </v-container>
</template>

<style scoped>
.forbidden-page {
  --hoard-shell-width: min(640px, 100%);
}

.forbidden-shell {
  gap: var(--space-4);
}

.forbidden-head h1,
.forbidden-head p {
  margin: 0;
}

.forbidden-head h1 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.forbidden-head p {
  color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: no-preference) {
  .forbidden-shell {
    animation: hoard-soft-enter 260ms both;
  }
}
</style>
