<template>
  <div class="app-root min-h-screen">
    <!-- Background Decoration -->
    <div class="pointer-events-none fixed inset-0 app-bg-layer"></div>

    <!-- Sidebar -->
    <AppSidebar />

    <!-- Main Content Area -->
    <div
      class="relative min-h-screen transition-all duration-300"
      :class="[sidebarCollapsed ? 'lg:ml-[72px]' : 'lg:ml-64']"
    >
      <!-- Header -->
      <AppHeader />

      <!-- Main Content -->
      <main class="p-4 md:p-6 lg:p-8">
        <slot />
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import '@/styles/onboarding.css'
import { computed, onMounted } from 'vue'
import { useAppStore } from '@/stores'
import { useAuthStore } from '@/stores/auth'
import { useOnboardingTour } from '@/composables/useOnboardingTour'
import { useOnboardingStore } from '@/stores/onboarding'
import AppSidebar from './AppSidebar.vue'
import AppHeader from './AppHeader.vue'

const appStore = useAppStore()
const authStore = useAuthStore()
const sidebarCollapsed = computed(() => appStore.sidebarCollapsed)
const isAdmin = computed(() => authStore.user?.role === 'admin')

const { replayTour } = useOnboardingTour({
  storageKey: isAdmin.value ? 'admin_guide' : 'user_guide',
  autoStart: true
})

const onboardingStore = useOnboardingStore()

onMounted(() => {
  onboardingStore.setReplayCallback(replayTour)
})

defineExpose({ replayTour })
</script>

<style scoped>
.app-root {
  background: #f1f5fb;
}
:global(.dark) .app-root {
  background: #080e1c;
}

.app-bg-layer {
  background:
    radial-gradient(at 15% 30%, rgba(99, 102, 241, 0.06) 0px, transparent 50%),
    radial-gradient(at 85% 10%, rgba(20, 184, 166, 0.05) 0px, transparent 50%),
    radial-gradient(at 60% 80%, rgba(139, 92, 246, 0.04) 0px, transparent 50%);
}
:global(.dark) .app-bg-layer {
  background:
    radial-gradient(at 15% 30%, rgba(99, 102, 241, 0.08) 0px, transparent 50%),
    radial-gradient(at 85% 10%, rgba(20, 184, 166, 0.06) 0px, transparent 50%),
    radial-gradient(at 60% 80%, rgba(139, 92, 246, 0.05) 0px, transparent 50%);
}
</style>
