<template>
  <div class="min-h-screen bg-surface-base">
    <div v-if="isLoginRoute">
      <slot />
    </div>
    <div v-else-if="showAppShell" class="grid min-h-screen lg:grid-cols-[270px_1fr]">
      <LayoutAppSidebar />
      <div class="min-w-0">
        <LayoutAppTopbar />
        <main class="px-4 pb-24 pt-6 sm:px-6 lg:px-8">
          <slot />
        </main>
      </div>
      <LayoutMobileNav />
    </div>
    <div v-else class="flex min-h-screen items-center justify-center">
      <p class="text-sm text-text-secondary">Redirecting to login...</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const route = useRoute();
const { initTheme } = useTheme();
const { isAuthenticated, initAuth } = useAuth();
const isLoginRoute = computed(() => route.path === "/login");
const showAppShell = computed(() => isAuthenticated.value && !isLoginRoute.value);

onMounted(() => {
  initTheme();
  initAuth();
});

watch([() => route.path, isAuthenticated], () => {
  if (!isAuthenticated.value && route.path !== "/login") {
    navigateTo("/login");
    return;
  }
  if (isAuthenticated.value && route.path === "/login") {
    navigateTo("/");
  }
}, { immediate: true });
</script>
