<template>
  <FrappeUIProvider>
    <!-- Loading state while checking auth -->
    <div v-if="loading" class="min-h-screen flex items-center justify-center bg-gray-50">
      <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">Loading...</p>
      </div>
    </div>

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

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

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

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

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

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