<template>
  <div class="dashboard">
    <div v-if="!initialized">
      <p>Loading session...</p>
    </div>
    <div v-else-if="isAuthenticated && user">
      <h2>Welcome Back, {{ user.nickname }}!</h2>
      <p>Your village and habits await.</p>
      <div class="quick-links">
        <NuxtLink to="/village">Go to Village</NuxtLink>
        <NuxtLink to="/habits">Check Habits</NuxtLink>
      </div>
    </div>
    <!-- Redirect is handled in script setup, this part might not be seen -->
    <div v-else>
      <p>Redirecting to login...</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const { user, isAuthenticated, initialized } = useAuth();

watchEffect(() => {
  // Only redirect when the auth state has been initialized and the user is not authenticated.
  if (initialized.value && !isAuthenticated.value) {
    navigateTo('/login');
  }
});
</script>

<style scoped>
.dashboard {
  text-align: center;
  padding: 40px 20px;
}

h2 {
  margin-bottom: 10px;
}

p {
  margin-bottom: 20px;
  color: #4c566a;
}

.quick-links {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.quick-links a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #81a1c1;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}
</style>
