<script setup lang="ts">
import { useTheme } from 'vuetify'
import ScrollToTop from '@core/components/ScrollToTop.vue'
import initCore from '@core/initCore'
import { initConfigStore } from '@core/stores/config'
import { hexToRgb } from '@core/utils/colorConverter'
import { useAuthStore } from '@/stores/useAuthStore'

const { global } = useTheme()

initCore()
initConfigStore()

const authStore = useAuthStore()

// Validate stored token on app startup — must complete before rendering protected content
authStore.initialize()
</script>

<template>
  <VApp :style="`--v-global-theme-primary: ${hexToRgb(global.current.value.colors.primary)}`">
    <!-- Show loading state while validating auth token -->
    <template v-if="!authStore.isInitialized">
      <div class="d-flex align-center justify-center" style="min-height: 100vh;">
        <VProgressCircular indeterminate color="primary" size="48" />
      </div>
    </template>

    <!-- Only render app shell after auth is resolved -->
    <template v-else>
      <RouterView />
      <ScrollToTop />
    </template>
  </VApp>
</template>
