<template>
  <FrappeUIProvider>
    <!-- Loading state while checking auth -->
    <div v-if="loading" class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
      <div class="text-center">
        <div class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-gray-300 border-t-blue-600"></div>
        <p class="mt-2 text-gray-500 dark:text-gray-400">{{ $t('common.loading') }}...</p>
      </div>
    </div>

    <!-- Auth pages without sidebar -->
    <template v-else-if="isAuthPage">
      <router-view />
    </template>

    <!-- Main app with sidebar -->
    <template v-else>
      <AdminLayout>
        <router-view />
      </AdminLayout>
    </template>
  </FrappeUIProvider>
</template>

<script setup>
import { computed, onMounted, ref, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
import { FrappeUIProvider } from 'frappe-ui'
import AdminLayout from '@/components/Layouts/AdminLayout.vue'
import { session } from '@/session'
import { useTheme } from '@/composables/useTheme'

const route = useRoute()
const loading = ref(true)

// Initialize theme
const { initTheme } = useTheme()

const isAuthPage = computed(() => {
  return ['Login'].includes(route.name)
})

onMounted(async () => {
  initTheme()
  await session.init()
  loading.value = false
})
</script>
