<template>
  <div class="h-screen w-screen bg-[var(--wraith-bg-primary)]">
    <!-- Loading state -->
    <div v-if="appStore.isLoading" class="h-full flex items-center justify-center">
      <div class="text-center">
        <h1 class="text-3xl font-bold text-[var(--wraith-accent-blue)]">WRAITH</h1>
        <p class="text-[var(--wraith-text-secondary)] mt-2">Loading...</p>
      </div>
    </div>

    <!-- Unlock screen -->
    <UnlockLayout v-else-if="!appStore.isUnlocked" />

    <!-- Main application -->
    <MainLayout v-else />
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { useAppStore } from "@/stores/app.store";
import UnlockLayout from "@/layouts/UnlockLayout.vue";
import MainLayout from "@/layouts/MainLayout.vue";

const appStore = useAppStore();

onMounted(() => {
  appStore.checkFirstRun();
});
</script>
