<template>
  <div id="app">
    <!-- Splash Screen (only on first visit) -->
    <SplashScreen v-if="showSplash" @complete="handleSplashComplete" />

    <!-- Main App Content - only show after splash and routing is complete -->
    <RouterView v-if="!showSplash && isReady" />
    
    <!-- PWA Update Prompt -->
    <PWAUpdatePrompt />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import SplashScreen from './components/SplashScreen.vue'
import PWAUpdatePrompt from './components/PWAUpdatePrompt.vue'

const router = useRouter()
const route = useRoute()
const showSplash = ref(true)
const isReady = ref(false)

/**
 * Determine if splash screen should be shown
 * Splash is skipped if:
 * - User has already seen the intro
 * - User is on a direct route (refresh/bookmark)
 */
onMounted(() => {
  const seenIntro = localStorage.getItem('neode_intro_seen') === '1'
  const isDirectRoute = route.path !== '/'
  
  if (seenIntro || isDirectRoute) {
    showSplash.value = false
    document.body.classList.add('splash-complete')
    isReady.value = true
  }
})

/**
 * Handle splash screen completion
 * Routes user directly to appropriate screen based on onboarding status
 */
function handleSplashComplete() {
  showSplash.value = false
  document.body.classList.add('splash-complete')
  
  // Determine destination based on onboarding status
  const seenOnboarding = localStorage.getItem('neode_onboarding_complete') === '1'
  const destination = seenOnboarding ? '/login' : '/onboarding/intro'
  
  // Route immediately for seamless video transition (no delay needed)
  router.push(destination).then(() => {
    // Mark as ready after navigation completes
    isReady.value = true
  })
}
</script>

<style>
/* Global styles are in style.css */
</style>
