<template>
  <!-- Main Neon Green Card -->
  <div class="pt-[35px]">
    <div class="mb-3 ml-[31px] flex h-[60px] items-center gap-3">
      <img src="../avatar.png" class="size-[60px]" alt="" />
      <div class="flex h-full flex-col justify-center text-white">
        <div class="text-xl font-semibold">{{ userInfo.email }}</div>
        <div class="text-xs" :class="{ 'text-[#FF00B7]': expireDateInfo.highlight }">
          {{ expireDateInfo.text }}
        </div>
      </div>
    </div>

    <div class="mb-5 pr-[25px] pl-[21px] text-white">
      <DeviceList :devices="devices" @refresh="emit('refresh')" />
    </div>
    <div class="overflow-hidden rounded-4xl bg-[#A8FF53]">
      <div class="pt-7">
        <PlanCard :plans="plans" :currentPlanIndex="currentPlanIndex" @select="handlePlanSelect" />
      </div>
      <div class="pt-7">
        <PaymentMethod
          :methods="payments"
          :selectedPlan="selectedPlan"
          @pay="(id: number | string) => $emit('pay', id)"
        />
      </div>
    </div>

    <div class="px-6 pt-8 pb-[calc(50px+env(safe-area-inset-bottom))]">
      <!--      <Button
        variant="outline"
        class="mb-[10px] h-[50px] w-full rounded-[32px] border-2 border-[#FF00B7] bg-transparent text-xl font-bold text-[#FF00B7] transition-all hover:bg-[#FF00FF]/90 active:scale-[0.98]"
      >
        注销账户
      </Button>-->

      <Button
        variant="outline"
        @click="logout"
        class="h-[50px] w-full rounded-[32px] border-2 border-white bg-transparent text-xl font-bold text-white transition-all hover:bg-white/90 active:scale-[0.98]"
      >
        退出登录
      </Button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import PlanCard from '@/components/user-center/PlanCard.vue'
import DeviceList from '@/components/user-center/DeviceList.vue'
import PaymentMethod from '@/components/user-center/PaymentMethod.vue'
import { Button } from '@/components/ui/button'
import { toast } from 'vue-sonner'
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps<{
  devices: any[]
  plans: any[]
  payments: any[]
  alreadySubscribed: any[]
  userInfo: { email: string }
  selectedPlanId: string
  selectedPlan: any
}>()

const emit = defineEmits(['select-plan', 'pay', 'refresh'])

// --- Handlers ---
const handlePlanSelect = (id: string) => {
  emit('select-plan', id)
}
const currentPlanIndex = computed(() => {
  return props.plans.findIndex((p) => p.id === props.selectedPlanId)
})

const expireDateInfo = computed(() => {
  const first = props.alreadySubscribed[0]
  let text = ''
  let highlight = false

  if (!first || !first.expireDate) {
    text = '尚未购买套餐'
    highlight = true
  } else {
    // 尝试解析日期，兼容多种格式
    const dateStr = first.expireDate.replace(/ /g, 'T')
    const expireDateTime = new Date(dateStr)

    if (isNaN(expireDateTime.getTime())) {
      text = '套餐信息无效'
    } else if (expireDateTime < new Date()) {
      const year = expireDateTime.getFullYear()
      const month = String(expireDateTime.getMonth() + 1).padStart(2, '0')
      const day = String(expireDateTime.getDate()).padStart(2, '0')
      text = `已于 ${year}/${month}/${day} 到期`
      highlight = true
    } else {
      const year = expireDateTime.getFullYear()
      const month = String(expireDateTime.getMonth() + 1).padStart(2, '0')
      const day = String(expireDateTime.getDate()).padStart(2, '0')
      const hour = String(expireDateTime.getHours()).padStart(2, '0')
      const minute = String(expireDateTime.getMinutes()).padStart(2, '0')
      const second = String(expireDateTime.getSeconds()).padStart(2, '0')
      text = `到期时间：${year}/${month}/${day} ${hour}:${minute}:${second}`
      highlight = false
    }
  }

  return { text, highlight }
})

function logout() {
  router.push('/')
  localStorage.removeItem('Authorization')
}
</script>

<style scoped>
/* Simplified layout font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');

.tracking-tight {
  font-family: 'Inter', 'PingFang SC', sans-serif;
}
</style>
