<template>
  <div class="ai-subscription-page">
    <div class="subscription-container">
      <!-- 用户信息头部 -->
      <div class="user-header">
        <div class="user-info">
          <div class="avatar-section">
            <div class="avatar-wrapper">
              <img 
                v-if="isLoggedIn && userInfo?.avatarUrl" 
                :src="userInfo.avatarUrl" 
                :alt="userName" 
                @error="handleAvatarError"
                class="avatar-img" 
              />
              <img 
                v-else
                :src="defaultAvatar"
                alt="默认头像"
                class="avatar-img"
              />
            </div>
          </div>
          <div class="user-details">
            <h2 class="user-name">{{ userName }}</h2>
            <p class="user-id">ID: {{ userId }}</p>
           
          </div>
        </div>
        <div class="points-section">
          <!-- <div class="points-display">
            <div class="diamond-icon">
              <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M12.7719 24C19.3993 24 24.7719 18.6274 24.7719 12C24.7719 5.37258 19.3993 0 12.7719 0C6.14443 0 0.771851 5.37258 0.771851 12C0.771851 18.6274 6.14443 24 12.7719 24ZM15.629 9.14286C13.6648 7.17857 12.7719 3.42857 12.7719 3.42857C12.7719 3.42857 11.879 7.17857 9.91471 9.14286C7.95042 11.1071 4.20042 12 4.20042 12C4.20042 12 8.06203 13.0045 9.91471 14.8571C11.7674 16.7098 12.7719 20.5714 12.7719 20.5714C12.7719 20.5714 13.5084 16.9777 15.629 14.8571C17.7495 12.7366 21.3433 12 21.3433 12C21.3433 12 17.5933 11.1071 15.629 9.14286Z"
                  fill="url(#paint0_linear_601_4253)" />
                <defs>
                  <linearGradient id="paint0_linear_601_4253" x1="0.771851" y1="4.66667" x2="14.1886" y2="12.8333"
                    gradientUnits="userSpaceOnUse">
                    <stop offset="0.0001" stop-color="#33DDE5" />
                    <stop offset="1" stop-color="#0F9CFF" />
                  </linearGradient>
                </defs>
              </svg>

            </div>
            <span class="points-value">{{ userPoints }}</span>
          </div> -->
          <div class="action-buttons">
            <button class="action-btn points-btn" @click="handlePointsDetails">
              积分详情
            </button>
            <button class="action-btn orders-btn" @click="handleMyOrders">
              我的订单
            </button>
          </div>
        </div>
      </div>

      <!-- 权益信息卡片 -->
      <div class="benefits-card">
        <div class="benefit-item">
          <div class="benefit-label">当前生效权益</div>
          <div class="benefit-value">{{ currentMembershipType }}</div>
        </div>
        <div class="benefit-item">
          <div class="benefit-label">到期时间</div>
          <div class="benefit-value">{{ membershipExpiryDate }}</div>
        </div>
        <div class="benefit-item">
          <div class="benefit-label">剩余积分</div>
          <div class="benefit-value">
            <div class="diamond-icon">
              <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M12.7719 24C19.3993 24 24.7719 18.6274 24.7719 12C24.7719 5.37258 19.3993 0 12.7719 0C6.14443 0 0.771851 5.37258 0.771851 12C0.771851 18.6274 6.14443 24 12.7719 24ZM15.629 9.14286C13.6648 7.17857 12.7719 3.42857 12.7719 3.42857C12.7719 3.42857 11.879 7.17857 9.91471 9.14286C7.95042 11.1071 4.20042 12 4.20042 12C4.20042 12 8.06203 13.0045 9.91471 14.8571C11.7674 16.7098 12.7719 20.5714 12.7719 20.5714C12.7719 20.5714 13.5084 16.9777 15.629 14.8571C17.7495 12.7366 21.3433 12 21.3433 12C21.3433 12 17.5933 11.1071 15.629 9.14286Z"
                  fill="url(#paint0_linear_601_4253)" />
                <defs>
                  <linearGradient id="paint0_linear_601_4253" x1="0.771851" y1="4.66667" x2="14.1886" y2="12.8333"
                    gradientUnits="userSpaceOnUse">
                    <stop offset="0.0001" stop-color="#33DDE5" />
                    <stop offset="1" stop-color="#0F9CFF" />
                  </linearGradient>
                </defs>
              </svg>

            </div>
            <span>{{ userPoints }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 积分套餐 -->
    <div class="packages-container">
      <h2 class="packages-title">积分套餐</h2>
      <div v-if="loading" class="loading-state">
        <div class="spinner"></div>
        <p>正在加载套餐...</p>
      </div>
      <div v-if="error" class="error-state">
        <p>加载失败，请稍后重试。</p>
        <button @click="fetchPackages">重试</button>
      </div>
      <div v-if="!loading && !error" class="packages-grid">
        <div 
          v-for="(pkg, index) in packages" 
          :key="pkg.id" 
          class="package-card"
          :class="{ 'is-hot': pkg.isHot }"
          :data-index="index"
        >
          <!-- 推荐标签 -->
          <div v-if="pkg.isHot" class="hot-badge">推荐</div>
          
          <!-- 顶部标签区 -->
          <div class="card-header">
            <div class="package-badge">{{ pkg.name }}</div>
            <div v-if="pkg.discountLabel" class="discount-label">{{ pkg.discountLabel }}</div>
          </div>

       

          <!-- 价格区域 -->
          <div class="price-section">
            <div class="price-display">
              <span class="currency">¥</span>
              <span class="price-amount">{{ pkg.price }}</span>
              <span v-if="pkg.originalPrice" class="original-price-small">¥{{ pkg.originalPrice }}</span>
            </div>
          </div>

          <!-- 立即购买按钮 -->
          <button 
            class="purchase-button" 
            :disabled="purchasing && purchasingPackageId === pkg.id"
            @click.stop="handlePurchase(pkg)"
          >
            {{ purchasing && purchasingPackageId === pkg.id ? '处理中...' : '立即购买' }}
          </button>

          <!-- 协议链接 -->
          <div class="agreement-link">
            <a href="/doc/支付协议.html" target="_blank">《1818AI付费服务协议》</a>
          </div>

          <!-- 积分信息 -->
          <div class="points-info">
            <span class="points-label">共 {{ pkg.totalPoints }} 积分</span>
          </div>

          <!-- 功能列表 -->
          <div class="features-list">
            <div class="feature-item">
              <svg class="check-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.3333 4L6 11.3333L2.66667 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              <span>{{ pkg.description }}</span>
            </div>
            <div class="feature-item">
              <svg class="check-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.3333 4L6 11.3333L2.66667 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              <span>有效期 {{ pkg.pointsExpireDays }} 天</span>
            </div>
            <div v-if="pkg.bonusPoints > 0" class="feature-item">
              <svg class="check-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.3333 4L6 11.3333L2.66667 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              <span>额外赠送 {{ pkg.bonusPoints }} 积分</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 登录弹窗 -->
  <LoginModal 
    v-if="showLoginModal"
    :visible="true"
    @login="handleLoginSuccess"
    @close="handleCloseLoginModal"
  />

  <!-- 微信支付弹窗 -->
  <WechatPaymentModal
    v-if="showPaymentModal && paymentData"
    :visible="showPaymentModal"
    :package-name="paymentData.packageName"
    :amount="paymentData.amount"
    :payment-params="paymentData.paymentParams"
    :order-no="paymentData.orderNo"
    @payment-success="handlePaymentSuccess"
    @payment-failed="handlePaymentFailed"
    @close="handleClosePaymentModal"
  />

  <!-- 充值记录弹窗 -->
  <RechargeRecordsModal
    v-if="showRecordsModal"
    :visible="showRecordsModal"
    @close="showRecordsModal = false"
  />

  <!-- 积分详情弹窗 -->
  <ConsumptionLogsModal
    v-if="showConsumptionModal"
    :visible="showConsumptionModal"
    @close="closeConsumeModal"
  />

</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useUserStore } from '../../store'
import { getPointsPackages, createRechargeOrder } from '../../api'
import defaultAvatarImg from '../../assets/AI_APP/USER_AI/user_img.png'
import { ElMessage } from 'element-plus'
import LoginModal from '../../components/LoginModal.vue'
import WechatPaymentModal from '../../components/WechatPaymentModal.vue'
import RechargeRecordsModal from '../../components/RechargeRecordsModal.vue'
import ConsumptionLogsModal from '../../components/ConsumptionLogsModal.vue'
import { useRoute, useRouter } from 'vue-router'

const userStore = useUserStore()
const defaultAvatar = defaultAvatarImg

const userInfo = computed(() => userStore.userInfo)
const isLoggedIn = computed(() => userStore.getIsLoggedIn)
const userName = computed(() => isLoggedIn.value ? (userInfo.value?.username || userInfo.value?.phone || '用户') : '未登录')
const userId = computed(() => isLoggedIn.value ? (userInfo.value?.id || '000000') : '未登录')
const userPoints = computed(() => {
  if (!isLoggedIn.value) {
    return 0
  }
  return userInfo.value?.points || 0
})

// 当前会员类型
const currentMembershipType = computed(() => {
  if (!isLoggedIn.value) return '未登录'
  return userInfo.value?.latestPointsPackageName || userInfo.value?.membershipType || '免费版'
})

// 会员到期时间
const membershipExpiryDate = computed(() => {
  if (!isLoggedIn.value) return '-'
  
  // 如果是积分到期时间
  if (userInfo.value?.pointsExpiresAt) {
    const expiryDate = new Date(userInfo.value.pointsExpiresAt)
    const now = new Date()
    
    // 检查是否已过期
    if (expiryDate < now) {
      return '已过期'
    }
    
    // 格式化日期
    return expiryDate.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit'
    }).replace(/\//g, '-')
  }
  
  // 如果是会员到期时间
  if (userInfo.value?.membershipExpiresAt) {
    const expiryDate = new Date(userInfo.value.membershipExpiresAt)
    const now = new Date()
    
    // 检查是否已过期
    if (expiryDate < now) {
      return '已过期'
    }
    
    // 格式化日期
    return expiryDate.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit'
    }).replace(/\//g, '-')
  }
  
  return '永久'
})

const packages = ref([])
const loading = ref(false)
const error = ref(null)
const purchasing = ref(false)
const purchasingPackageId = ref(null)
const showLoginModal = ref(false)
const pendingPurchasePackage = ref(null)
const showPaymentModal = ref(false)
const paymentData = ref(null)
const showRecordsModal = ref(false)
const showConsumptionModal = ref(false)
const route = useRoute()
const router = useRouter()

const fetchPackages = async () => {
  loading.value = true
  error.value = null
  try {
    const response = await getPointsPackages()
    if (response.code === 200 && Array.isArray(response.data)) {
      // 使用 Map 去重，保留第一个遇到的套餐
      const uniquePackages = new Map()
      for (const pkg of response.data) {
        if (!uniquePackages.has(pkg.name)) {
          uniquePackages.set(pkg.name, pkg)
        }
      }
      packages.value = Array.from(uniquePackages.values())
    } else {
      throw new Error('Failed to fetch packages')
    }
  } catch (err) {
    error.value = err
    console.error(err)
  } finally {
    loading.value = false
  }
}

// 购买套餐
const handlePurchase = async (packageItem) => {
  // 检查登录状态
  if (!isLoggedIn.value) {
    pendingPurchasePackage.value = packageItem
    showLoginModal.value = true
    ElMessage.warning('请先登录后再购买套餐')
    return
  }

  try {
    purchasing.value = true
    purchasingPackageId.value = packageItem.id

    // 构建订单数据
    const orderData = {
      packageId: packageItem.id,
      paymentMethod: 2, // 微信支付
      useBalance: false,
      openid: userInfo.value?.openid || '',
      tradeType: 'NATIVE' // 微信二维码支付
    }

    const response = await createRechargeOrder(orderData)
    
    if (response.code === 200) {
      // 直接显示支付弹窗
      paymentData.value = {
        packageName: packageItem.name,
        amount: response.data.amount,
        paymentParams: response.data.paymentParams,
        orderNo: response.data.orderNo
      }
      showPaymentModal.value = true
    } else {
      ElMessage.error(response.message || '创建订单失败')
    }
  } catch (err) {
    ElMessage.error('购买失败，请稍后重试')
    console.error('购买失败:', err)
  } finally {
    purchasing.value = false
    purchasingPackageId.value = null
  }
}

// 登录成功后的处理
const handleLoginSuccess = () => {
  showLoginModal.value = false
  if (pendingPurchasePackage.value) {
    // 登录成功后自动执行购买流程
    handlePurchase(pendingPurchasePackage.value)
    pendingPurchasePackage.value = null
  }
}

// 关闭登录弹窗
const handleCloseLoginModal = () => {
  showLoginModal.value = false
  pendingPurchasePackage.value = null
}

// 支付成功
const handlePaymentSuccess = async () => {
  console.log('收到支付成功事件，开始处理...')
  showPaymentModal.value = false
  paymentData.value = null
  ElMessage.success('支付成功！积分已到账')
  
  // 刷新用户信息（调用/auth/me接口和积分接口）
  try {
    console.log('开始调用userStore.fetchUserInfo()...')
    // 同时刷新用户信息和积分，确保数据同步
    await Promise.all([
      userStore.fetchUserInfo(),
      userStore.fetchUserPoints()
    ])
    console.log('支付成功后用户信息已更新:', {
      points: userStore.userInfo?.points,
      membershipType: userStore.userInfo?.membershipType,
      latestPointsPackageName: userStore.userInfo?.latestPointsPackageName,
      pointsExpiresAt: userStore.userInfo?.pointsExpiresAt
    })
  } catch (error) {
    console.error('更新用户信息失败:', error)
    // 即使失败也尝试单独刷新积分
    try {
      await userStore.fetchUserPoints()
    } catch (pointsError) {
      console.error('刷新积分失败:', pointsError)
    }
    ElMessage.warning('积分已到账，但刷新用户信息失败，请手动刷新页面')
  }
}

// 支付失败
const handlePaymentFailed = () => {
  showPaymentModal.value = false
  paymentData.value = null
  ElMessage.error('支付失败，请重试')
}

// 关闭支付弹窗
const handleClosePaymentModal = () => {
  showPaymentModal.value = false
  paymentData.value = null
}

onMounted(() => {
  fetchPackages()
  if (route.query.showConsumeModal == 1) {
    showConsumptionModal.value = true;
  }
})

watch(
  () => route.query.showConsumeModal,
  (v) => {
    if (v == 1) {
      showConsumptionModal.value = true;
    }
  }
)

const closeConsumeModal = () => {
  showConsumptionModal.value = false
  // 移除参数
  const q = { ...route.query }
  delete q.showConsumeModal
  router.replace({ query: q })
}

const selectPackage = (id) => {
  console.log(`Selected package ID: ${id}`)
  // TODO: 后续处理购买逻辑
}

const getAvatarText = (name) => {
  return name ? name.charAt(0).toUpperCase() : '用'
}

const handleAvatarError = (e) => {
  e.target.style.display = 'none'
}

const handlePointsDetails = () => {
  // 检查登录状态
  if (!isLoggedIn.value) {
    ElMessage.warning('请先登录后再查看积分详情')
    return
  }
  
  showConsumptionModal.value = true
}

const handleMyOrders = () => {
  // 检查登录状态
  if (!isLoggedIn.value) {
    ElMessage.warning('请先登录后再查看订单')
    return
  }
  
  showRecordsModal.value = true
}
</script>

<style scoped>
.ai-subscription-page {
  width: 100%;
  min-height: calc(100vh - 80px);
  background: #151515;
  color: #ffffff;
  padding: 40px 0;
  box-sizing: border-box;
}

.subscription-container {
  width: 100%;
  margin: 0;
  padding: 0 40px;
  box-sizing: border-box;
}

/* 用户信息头部 */
.user-header {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: #0a0e27;
  border-radius: 16px 16px 0 0;
  padding: 40px;
  margin-bottom: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -moz-backdrop-filter: blur(10px);
  height: 160px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 24px;
}

.avatar-section {
  flex-shrink: 0;
}

.avatar-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 600;
  color: #ffffff;
}

.user-details {
  flex: 1;
}

.user-name {
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: #ffffff;
  margin: 0 0 8px 0;
  text-align: left;
}

.user-id {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  text-align: left;
}

.points-section {
  display: flex;
  align-items: center;
  gap: 24px;
}

.points-display {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(26, 195, 255, 0.1);
  padding: 10px 16px;
  border-radius: 6px;
  border: 1px solid rgba(26, 195, 255, 0.2);
  height: 40px;
  box-sizing: border-box;
}

.diamond-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.points-value {
  font-size: 18px;
  font-weight: 600;
  background: linear-gradient(90deg, #33DDE5 0%, #1AC3FF 50%, #0F9CFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.action-btn {
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  height: 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.points-btn {
  background: rgba(26, 195, 255, 0.1);
  border-color: rgba(26, 195, 255, 0.3);
  color: #1AC3FF;
}

.points-btn:hover {
  background: rgba(26, 195, 255, 0.2);
}

/* 权益信息卡片 */
.benefits-card {
  background: #0a0e27;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 32px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -moz-backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin: 0;
}

.benefit-item {
  flex: 1;
  text-align: center;
  position: relative;
  padding-right: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.benefit-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60px;
  background: rgba(255, 255, 255, 0.08);
}

.benefit-item:last-child {
  padding-right: 0;
}

.benefit-label {
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0%;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 12px;
  width: 100%;
  text-align: left;
}

.benefit-value {
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0%;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  text-align: left;
}

.benefit-value .diamond-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.benefit-value span {
  background: linear-gradient(90deg, #33DDE5 0%, #1AC3FF 50%, #0F9CFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .ai-subscription-page {
    padding: 20px 0;
  }

  .subscription-container {
    padding: 0 20px;
  }

  .user-header {
    flex-direction: column;
    height: auto;
    padding: 24px;
    gap: 20px;
  }

  .user-info {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .points-section {
    flex-direction: column;
    gap: 16px;
  }

  .benefits-card {
    flex-direction: column;
  }

  .packages-container {
    padding: 0 20px;
  }

  .packages-title {
    font-size: 24px;
    margin-bottom: 24px;
  }

  .packages-grid {
    justify-content: center;
    gap: 16px;
  }

  .package-card {
    width: 100%;
    max-width: 339px;
    min-width: 280px;
    min-height: 550px;
  }

  .icon-placeholder {
    width: 100px;
    height: 100px;
  }

  .price-amount {
    font-size: 40px;
  }

  .purchase-button {
    height: 44px;
  }
}

/* 积分套餐样式 */
.packages-container {
  width: 100%;
  margin: 40px 0 0 0;
  padding: 0 40px;
  box-sizing: border-box;
}

.packages-title {
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0%;
  color: #fff;
  text-align: left;
  margin-bottom: 32px;
}

.packages-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: flex-start;
}

.package-card {
  width: 339px;
  min-width: 320px;
  min-height: 625px;
  background: linear-gradient(180deg, #0D1117 0%, #0D1117 50%, rgba(13, 17, 23, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.package-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.hot-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  background: linear-gradient(90deg, rgba(143, 148, 255, 1), rgba(125, 105, 255, 1) 100%);
  color: #fff;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 0px 0px 0px 16px;
  box-shadow: inset 0.5px 0px 0px 0px rgba(255, 255, 255, 1), 0px 0px 20px 0px rgba(0, 0, 0, 1), 0px 0px 20px 0px rgba(122, 125, 255, 1);
  z-index: 10;
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.package-badge {
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0%;
  color: #fff;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  text-align: left;
}

.discount-label {
  width: 95.86px;
  height: 26px;
  font-size: 11px;
  font-weight: 500;
  padding: 0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

/* Icon 预留位置 */
.icon-placeholder {
  width: 120px;
  height: 120px;
  margin: 20px auto;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 价格区域 */
.price-section {
  text-align: center;
  margin-bottom: 24px;
}

.price-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.currency {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
}

.price-amount {
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.original-price-small {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: line-through;
  margin-left: 8px;
}

/* 购买按钮 - 不同渐变色 */
.purchase-button {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 12px;
}

/* 协议链接 */
.agreement-link {
  text-align: center;
  margin-bottom: 12px;
  padding: 0 8px;
}

.agreement-link a {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.2s ease;
}

.agreement-link a:hover {
  color: rgba(59, 130, 246, 0.8);
  text-decoration: underline;
}

/* 为不同索引的卡片设置不同渐变色 */
.package-card[data-index="0"] {
  border-color: rgba(139, 92, 246, 0.3);
  background: linear-gradient(180deg, #0D1117 0%, #0D1117 50%, rgba(139, 92, 246, 0.1) 100%);
}

.package-card[data-index="0"] .package-badge {
  color: #8B5CF6;
}

.package-card[data-index="0"] .discount-label {
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: rgba(139, 92, 246, 0.7);
}

.package-card[data-index="0"] .icon-placeholder {
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
}

.package-card[data-index="0"] .hot-badge {
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
  box-shadow: inset 0.5px 0px 0px 0px rgba(255, 255, 255, 1), 0px 0px 20px 0px rgba(0, 0, 0, 1), 0px 0px 20px 0px rgba(139, 92, 246, 1);
}

.package-card[data-index="0"] .purchase-button {
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
  border: 1px solid rgba(139, 92, 246, 0.5);
}

.package-card[data-index="0"] .purchase-button:hover {
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
}

.package-card[data-index="1"] {
  border-color: rgba(59, 130, 246, 0.3);
  background: linear-gradient(180deg, #0D1117 0%, #0D1117 50%, rgba(59, 130, 246, 0.1) 100%);
}

.package-card[data-index="1"] .package-badge {
  color: #3B82F6;
}

.package-card[data-index="1"] .discount-label {
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: rgba(59, 130, 246, 0.7);
}

.package-card[data-index="1"] .icon-placeholder {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
}

.package-card[data-index="1"] .hot-badge {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  box-shadow: inset 0.5px 0px 0px 0px rgba(255, 255, 255, 1), 0px 0px 20px 0px rgba(0, 0, 0, 1), 0px 0px 20px 0px rgba(59, 130, 246, 1);
}

.package-card[data-index="1"] .purchase-button {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  border: 1px solid rgba(59, 130, 246, 0.5);
}

.package-card[data-index="1"] .purchase-button:hover {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
}

.package-card[data-index="2"] {
  border-color: rgba(16, 185, 129, 0.3);
  background: linear-gradient(180deg, #0D1117 0%, #0D1117 50%, rgba(16, 185, 129, 0.1) 100%);
}

.package-card[data-index="2"] .package-badge {
  color: #10B981;
}

.package-card[data-index="2"] .discount-label {
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: rgba(16, 185, 129, 0.7);
}

.package-card[data-index="2"] .icon-placeholder {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
}

.package-card[data-index="2"] .hot-badge {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  box-shadow: inset 0.5px 0px 0px 0px rgba(255, 255, 255, 1), 0px 0px 20px 0px rgba(0, 0, 0, 1), 0px 0px 20px 0px rgba(16, 185, 129, 1);
}

.package-card[data-index="2"] .purchase-button {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  border: 1px solid rgba(16, 185, 129, 0.5);
}

.package-card[data-index="2"] .purchase-button:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
}

.package-card[data-index="3"] {
  border-color: rgba(245, 158, 11, 0.3);
  background: linear-gradient(180deg, #0D1117 0%, #0D1117 50%, rgba(245, 158, 11, 0.1) 100%);
}

.package-card[data-index="3"] .package-badge {
  color: #F59E0B;
}

.package-card[data-index="3"] .discount-label {
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: rgba(245, 158, 11, 0.7);
}

.package-card[data-index="3"] .icon-placeholder {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
}

.package-card[data-index="3"] .hot-badge {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  box-shadow: inset 0.5px 0px 0px 0px rgba(255, 255, 255, 1), 0px 0px 20px 0px rgba(0, 0, 0, 1), 0px 0px 20px 0px rgba(245, 158, 11, 1);
}

.package-card[data-index="3"] .purchase-button {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  border: 1px solid rgba(245, 158, 11, 0.5);
}

.package-card[data-index="3"] .purchase-button:hover {
  background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
}

.package-card[data-index="4"] {
  border-color: rgba(239, 68, 68, 0.3);
  background: linear-gradient(180deg, #0D1117 0%, #0D1117 50%, rgba(239, 68, 68, 0.1) 100%);
}

.package-card[data-index="4"] .package-badge {
  color: #EF4444;
}

.package-card[data-index="4"] .discount-label {
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: rgba(239, 68, 68, 0.7);
}

.package-card[data-index="4"] .icon-placeholder {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
}

.package-card[data-index="4"] .hot-badge {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  box-shadow: inset 0.5px 0px 0px 0px rgba(255, 255, 255, 1), 0px 0px 20px 0px rgba(0, 0, 0, 1), 0px 0px 20px 0px rgba(239, 68, 68, 1);
}

.package-card[data-index="4"] .purchase-button {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  border: 1px solid rgba(239, 68, 68, 0.5);
}

.package-card[data-index="4"] .purchase-button:hover {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
}

.package-card[data-index="5"] {
  border-color: rgba(236, 72, 153, 0.3);
  background: linear-gradient(180deg, #0D1117 0%, #0D1117 50%, rgba(236, 72, 153, 0.1) 100%);
}

.package-card[data-index="5"] .package-badge {
  color: #EC4899;
}

.package-card[data-index="5"] .discount-label {
  border: 1px solid rgba(236, 72, 153, 0.3);
  color: rgba(236, 72, 153, 0.7);
}

.package-card[data-index="5"] .icon-placeholder {
  background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%);
}

.package-card[data-index="5"] .hot-badge {
  background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%);
  box-shadow: inset 0.5px 0px 0px 0px rgba(255, 255, 255, 1), 0px 0px 20px 0px rgba(0, 0, 0, 1), 0px 0px 20px 0px rgba(236, 72, 153, 1);
}

.package-card[data-index="5"] .purchase-button {
  background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%);
  border: 1px solid rgba(236, 72, 153, 0.5);
}

.package-card[data-index="5"] .purchase-button:hover {
  background: linear-gradient(135deg, #DB2777 0%, #BE185D 100%);
  box-shadow: 0 4px 16px rgba(236, 72, 153, 0.4);
}

/* 积分信息 */
.points-info {
  text-align: center;
  margin-bottom: 24px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}

.points-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

/* 功能列表 */
.features-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

.check-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: #10B981;
}

.loading-state, .error-state {
  text-align: center;
  padding: 40px;
  color: rgba(255, 255, 255, 0.7);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: #1AC3FF;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.error-state button {
  margin-top: 16px;
  padding: 8px 16px;
  background: #1AC3FF;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
</style>
