<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" />
    
    <!-- Spotlight command palette (Cmd+K / Ctrl+K) -->
    <SpotlightSearch />

    <!-- Help guide modal (from spotlight) -->
    <HelpGuideModal
      :show="spotlightStore.helpModal.show"
      :title="spotlightStore.helpModal.title"
      :content="spotlightStore.helpModal.content"
      :related-path="spotlightStore.helpModal.relatedPath"
      @close="spotlightStore.closeHelpModal()"
    />
    
    <!-- PWA Update Prompt -->
    <PWAUpdatePrompt />

    <!-- Toast notifications - top right, glass style, any page -->
    <Teleport to="body">
      <Transition name="toast">
        <div
          v-if="toastMessage.show"
          @click="messageToast.dismissToastAndOpenMessages"
          class="fixed top-20 right-4 left-4 z-[100] w-auto max-w-md cursor-pointer rounded-xl p-4 transition-all hover:border-white/30 hover:shadow-2xl md:top-6 md:right-6 md:left-auto md:max-w-md toast-glass"
        >
          <div class="flex items-start gap-3">
            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-orange-500/20">
              <svg class="h-5 w-5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
            </div>
            <div class="min-w-0 flex-1">
              <p class="text-sm font-medium text-white">New message</p>
              <p class="mt-0.5 text-sm text-white/70 line-clamp-2">{{ toastMessage.text }}</p>
              <p class="mt-1 text-xs text-orange-400">Click to view</p>
            </div>
          </div>
        </div>
      </Transition>
    </Teleport>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import SplashScreen from './components/SplashScreen.vue'
import PWAUpdatePrompt from './components/PWAUpdatePrompt.vue'
import SpotlightSearch from './components/SpotlightSearch.vue'
import HelpGuideModal from './components/HelpGuideModal.vue'
import { useControllerNav } from '@/composables/useControllerNav'
import { useSpotlightStore } from '@/stores/spotlight'
import { useMessageToast } from '@/composables/useMessageToast'
import { useAppStore } from '@/stores/app'

const router = useRouter()
const spotlightStore = useSpotlightStore()
const appStore = useAppStore()
const messageToast = useMessageToast()
const toastMessage = messageToast.toastMessage

useControllerNav()

// Start/stop message polling when auth state changes
watch(() => appStore.isAuthenticated, (authenticated) => {
  if (authenticated) {
    messageToast.startPolling()
  } else {
    messageToast.stopPolling()
    toastMessage.value = { show: false, text: '' }
  }
}, { immediate: true })

function onKeyDown(e: KeyboardEvent) {
  const isMac = navigator.platform.toUpperCase().includes('MAC')
  const mod = isMac ? e.metaKey : e.ctrlKey
  if (mod && e.key === 'k') {
    e.preventDefault()
    spotlightStore.toggle()
  }
}

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(async () => {
  window.addEventListener('keydown', onKeyDown)
  const seenIntro = localStorage.getItem('neode_intro_seen') === '1'
  const isDirectRoute = route.path !== '/'
  
  if (seenIntro || isDirectRoute) {
    showSplash.value = false
    document.body.classList.add('splash-complete')
    // Wait for router to finish initial navigation before showing content (fixes hard refresh)
    await router.isReady()
    isReady.value = true
  }
  // If splash should show, wait for it to complete
  // SplashScreen will emit 'complete' which calls handleSplashComplete
})

onBeforeUnmount(() => {
  window.removeEventListener('keydown', onKeyDown)
})

/**
 * Handle splash screen completion
 * Routes user directly to appropriate screen based on onboarding status (from backend)
 */
async function handleSplashComplete() {
  showSplash.value = false
  document.body.classList.add('splash-complete')
  isReady.value = true
  sessionStorage.setItem('archipelago_from_splash', '1')

  const devMode = import.meta.env.VITE_DEV_MODE
  if (devMode === 'setup' || devMode === 'existing') {
    router.push('/login').catch(() => {})
    return
  }

  try {
    const { isOnboardingComplete } = await import('@/composables/useOnboarding')
    const seenOnboarding = await isOnboardingComplete()
    const destination = seenOnboarding ? '/login' : '/onboarding/intro'
    router.push(destination).catch(() => {})
  } catch {
    router.push('/onboarding/intro').catch(() => {})
  }
}
</script>

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