<template>
  <div class="dashboard">
    <div v-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>
    <div v-else>
      <!-- You can show a loading indicator here if you want -->
      <p>Loading...</p>
    </div>
  </div>
</template>

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

watchEffect(() => {
  // Wait until the initial fetch is done and then decide.
  // isAuthenticated becomes false if the fetch fails (e.g., 401)
  // or true if it succeeds. We redirect only when we are sure.
  if (process.client && isAuthenticated.value === false) {
    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>
