<template>
  <div class="flex min-h-screen flex-col bg-black text-white">
    <!-- Full Width Header -->
    <div class="h-[60px] md:h-[125px]">
      <div class="fixed top-[20px] z-50 w-full md:top-[45px]">
        <div class="container">
          <header
            class="lucid-glass-bar flex h-[40px] items-center justify-between rounded-[90px] pr-[5px] pl-5 transition-all duration-300 md:h-[60px] md:pr-[10px]"
          >
            <router-link to="/" class="flex items-center gap-2">
              <!-- Desktop Logo -->
              <Logo alt="Hi快VPN" class="h-[18px] w-auto md:ml-8 md:h-[29px]" />
              <span class="font-black text-2xl ml-3">高能合伙人</span>
            </router-link>
            <div v-if="isLoggedIn" class="flex items-center">
              <router-link
                to="/user-center"
                class="flex size-[30px] items-center justify-center rounded-full bg-[#78788029] text-xl font-bold text-white shadow-lg transition hover:scale-105 md:size-[40px] md:text-3xl"
              >
                {{ userLetter }}
              </router-link>
            </div>
            <button
              v-else
              class="flex h-[30px] cursor-pointer items-center justify-center rounded-full bg-[#78788029] px-6 text-sm font-bold backdrop-blur-md transition hover:brightness-110 md:h-[40px] md:w-[220px] md:text-xl"
            >
              代理后台登录/注册
            </button>
          </header>
        </div>
      </div>
    </div>
    <div class="flex flex-1 flex-col">
      <!-- Main Neon Green Card -->
<!--      <div class="container md:hidden">

      </div>-->
      <div class="hidden flex-1 items-center justify-center md:flex md:pb-[50px]">
        <div class="container mx-auto">
          <DesktopLayout
            :user-info="userSubInfo"
            :selected-plan-id="selectedPlanId"
            :selected-plan="activePlan"
            :is-paying="isPaying"
            :is-user-loading="isUserLoading"
            :is-plans-loading="isPlansLoading"
            :is-payments-loading="isPaymentsLoading"
            @pay="handlePay"
            @show-order-details="orderDetailsModalRef?.show()"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import DesktopLayout from './DesktopLayout/index.vue'
import OrderStatusDialog from '@/components/user-center/OrderStatusDialog.vue'
import OrderDetailsModal from './components/OrderDetails/index.vue'
import Logo from '@/pages/Home/logo.svg?component'
import request from '@/utils/request'
import { toast } from 'vue-sonner'
import { useLocalStorage } from '@vueuse/core'

const route = useRoute()
const router = useRouter()
const token = useLocalStorage('Authorization', '')
const userEmail = useLocalStorage('UserEmail', '')

const isLoggedIn = computed(() => !!token.value)
const userLetter = computed(() => {
  if (!userEmail.value) return '?'
  return userEmail.value.charAt(0).toUpperCase()
})
// --- State ---
const selectedPlanId = ref('p2')
const isPaying = ref(false)
const isUserLoading = ref(true)
const isPlansLoading = ref(true)
const isPaymentsLoading = ref(true)
const orderStatusDialogRef = ref<InstanceType<typeof OrderStatusDialog> | null>(null)
const orderDetailsModalRef = ref<InstanceType<typeof OrderDetailsModal> | null>(null)



</script>

<style scoped>

</style>

<style scoped>
</style>
