<template>
  <div id="app-wrapper">
    <AppHeader class="header" />
    <main class="main-content">
      <router-view />
    </main>
    <AppFooter class="footer" v-if="false" />
    <!-- Payment Dialog -->
    <PaymentDialog ref="paymentDialog" @success="onPaymentSuccess" />
  </div>
</template>

<script setup>
import { ref, provide, onMounted } from 'vue'
import AppHeader from '@/components/common/AppHeader.vue'
import AppFooter from '@/components/common/AppFooter.vue'
import PaymentDialog from '@/components/PaymentDialog.vue'
import { useUserStore } from '@/stores/user'
import api from '@/api'

const userStore = useUserStore()
const paymentDialog = ref(null)

onMounted(() => {
  if (localStorage.getItem('token') && !userStore.tokenChecked) {
    // 用静默验证：401时不跳转登录页（避免注册/登录页被拦截）
    // api.auth.profileSilent().then(res => {
    //   userStore.username = res.username
    //   userStore.isVip = res.is_vip
    //   userStore.avatarUrl = res.avatar_url
    //   userStore.membershipExpireAt = res.membership_expire_at
    //   userStore.tokenChecked = true
    //   userStore.tokenValid = true
    // }).catch(() => {
    //   userStore.tokenChecked = true
    //   userStore.tokenValid = false
    // })
    userStore.fetchProfile().catch(() => { })
  }
})

provide('showPayment', () => {
  paymentDialog.value?.open()
})

function onPaymentSuccess() {
  userStore.fetchProfile()
}
</script>

<style lang="scss">
#app-wrapper {
  min-height: 100vh;
  max-width: 2000px;
  min-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;

  .main-content {
    flex: 1;
  }
}
</style>
