<script setup>
import { onMounted } from 'vue'
import { RouterView, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import AppSidebar from './components/AppSidebar.vue'

const route = useRoute()
const authStore = useAuthStore()

onMounted(async () => {
  if (authStore.isAuthenticated) {
    await authStore.fetchCurrentUser()
  }
})
</script>

<template>
  <!-- Login Layout (Full Screen) -->
  <div v-if="['login', 'register'].includes(route.name)" class="h-screen w-full">
    <RouterView />
  </div>

  <!-- Main Layout (Sidebar + Content) -->
  <div v-else class="flex flex-col h-screen bg-slate-900 text-slate-100 font-sans overflow-hidden">
    <AppSidebar />

    <div class="flex-1 w-full overflow-hidden relative">
      <RouterView v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </RouterView>
    </div>
  </div>
</template>

<style>
/* Global styles are already imported in main.js */
</style>
