<script setup lang="ts">
import { shallowRef, onBeforeMount, type Component } from 'vue';
import { useAuthStore } from '../stores/auth';
import { ensureStaffSession } from '../utils/session-hydrate';

const auth = useAuthStore();
const dashboardView = shallowRef<Component | null>(null);
const booting = shallowRef(true);

onBeforeMount(async () => {
  await ensureStaffSession();
  dashboardView.value = auth.isAdmin.value
    ? (await import('./Dashboard.vue')).default
    : (await import('./agent/Dashboard.vue')).default;
  booting.value = false;
});
</script>

<template>
  <div v-if="booting" v-loading="true" class="home-boot" />
  <component v-else :is="dashboardView" />
</template>

<style scoped>
.home-boot {
  min-height: 240px;
}
</style>
