<template>
  <!-- Main Neon Green Card -->
  <div class="pt-[15px]">
    <div class="mb-3 ml-[31px] flex h-[60px] items-center gap-3">
      <Transition name="fade" mode="out-in">
        <UserCenterSkeleton v-if="isUserLoading" type="header" layout="mobile" />
        <div v-else class="flex items-center gap-3 text-white">
          <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 tabular-nums"
              :class="{ 'text-[#FF00B7]': expireDateInfo.highlight }"
            >
              {{ expireDateInfo.text }}
            </div>
          </div>
        </div>
      </Transition>
    </div>

    <div class="mb-5 pr-[25px] pl-[21px] text-white">
      <Transition name="fade" mode="out-in">
        <UserCenterSkeleton v-if="isUserLoading" type="devices" layout="mobile" />
        <DeviceList v-else :devices="devices" @refresh="emit('refresh')" />
      </Transition>
    </div>
    <div class="overflow-hidden rounded-4xl bg-[#A8FF53]">
      <div class="pt-7">
        <Transition name="fade" mode="out-in">
          <div v-if="isPlansLoading" class="px-6">
            <UserCenterSkeleton type="plans" layout="mobile" />
          </div>
          <PlanCard
            v-else
            :plans="plans"
            :trial-plan="trialPlan"
            :trial-countdown="trialCountdown"
            :currentPlanIndex="currentPlanIndex"
            :selectedPlanId="selectedPlanId"
            @select="handlePlanSelect"
          />
        </Transition>
      </div>
      <div class="pt-7">
        <Transition name="fade" mode="out-in">
          <div v-if="isPaymentsLoading" class="px-6">
            <UserCenterSkeleton type="payments" layout="mobile" />
          </div>
          <PaymentMethod
            v-else
            :methods="payments"
            :selectedPlan="selectedPlan"
            :is-paying="isPaying"
            @pay="(id: number | string) => $emit('pay', id)"
          />
        </Transition>
      </div>
    </div>

    <div class="px-6 pt-8 pb-[calc(50px+env(safe-area-inset-bottom))]">
      <Button
        variant="outline"
        @click="$emit('show-order-details')"
        class="mb-[10px] h-[50px] w-full rounded-[32px] border-2 border-[#ADFF5B] bg-transparent text-xl font-bold text-[#ADFF5B] transition-all hover:bg-[#ADFF5B]/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 UserCenterSkeleton from '@/components/user-center/UserCenterSkeleton.vue'
import { Button } from '@/components/ui/button'
import { formatExpireDate } from '../subscription'
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
  isPaying: boolean
  isUserLoading: boolean
  isPlansLoading: boolean
  isPaymentsLoading: boolean
  trialPlan: any
  trialCountdown: string
}>()

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

// --- 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]
  return formatExpireDate(first)
})

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

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

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
