<template>
  <div class="dashboard-router">
    <v-container v-if="loading" class="fill-height">
      <v-row justify="center" align="center">
        <v-col cols="auto" class="text-center">
          <v-progress-circular 
            indeterminate 
            color="primary" 
            size="64"
            width="6"
          />
          <p class="mt-4 text-h6">Loading your dashboard...</p>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  middleware: 'auth'
});

const { user, userTier, isAuthenticated } = useAuth();
const loading = ref(true);

// Route to tier-specific dashboard
watchEffect(async () => {
  if (isAuthenticated.value && user.value) {
    const tierRoute = `/dashboard/${userTier.value}`;
    console.log('🔄 Routing to tier-specific dashboard:', tierRoute);
    await navigateTo(tierRoute, { replace: true });
  } else if (!isAuthenticated.value) {
    console.log('🔄 User not authenticated, redirecting to login');
    await navigateTo('/login');
  }
});

onMounted(() => {
  // Small delay to ensure auth state is loaded
  setTimeout(() => {
    loading.value = false;
  }, 500);
});
</script>

<style scoped>
.dashboard-router {
  min-height: 100vh;
}

.v-progress-circular {
  margin-bottom: 1rem;
}
</style>
