<template>
  <RouterView />
  <AuthModal v-model:visible="showAuthModal" @success="handleAuthSuccess" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { RouterView } from 'vue-router'
import { useAuthStore } from './stores/auth'
import AuthModal from './components/AuthModal.vue'

const authStore = useAuthStore()
const showAuthModal = ref(false)

onMounted(async () => {
  // 初始化用户会话
  await authStore.init()
  
  // 检查游客数据是否即将过期
  checkGuestDataExpiry()
})

function handleAuthSuccess() {
  // 登录成功后，如果有游客数据，提示迁移
  if (authStore.guestId) {
    if (confirm('检测到您有游客期间的行程数据，是否迁移到当前账户？')) {
      authStore.migrateGuestData()
    }
  }
}

function checkGuestDataExpiry() {
  if (authStore.isGuestDataExpiring) {
    alert('提示：您的游客数据将在2小时内过期，建议登录账户以保存数据。')
    showAuthModal.value = true
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.3);
}
</style>
