<template>
  <view class="page">
    <view class="header"><text class="title">购买 Token 包</text></view>

    <!-- 套餐信息 -->
    <view class="pack-card">
      <text class="pack-name">🎁 音频 Token 包</text>
      <text class="pack-desc">每包含 {{ pack.minutesPerPack }} 分钟音频额度</text>
      <view class="pack-pricing">
        <text class="pack-price">¥{{ pack.packPrice }}</text>
        <text class="pack-unit">/包 (¥{{ pack.unitPrice }}/分钟)</text>
      </view>
      <text class="pack-note">月价 ¥0.032/分钟 × 1.5 倍</text>
    </view>

    <!-- 数量选择 -->
    <view class="quantity-section">
      <text class="qty-label">购买数量</text>
      <view class="qty-controls">
        <view class="qty-btn" @click="qty > 1 && qty--"><text>-</text></view>
        <text class="qty-value">{{ qty }}</text>
        <view class="qty-btn" @click="qty++"><text>+</text></view>
      </view>
    </view>

    <!-- 订单摘要 -->
    <view class="order-card" v-if="qty > 0">
      <view class="order-row"><text>获得额度</text><text class="val">{{ (pack.packQuotaValue * qty).toFixed(2) }} 元 / {{ pack.minutesPerPack * qty }} 分钟</text></view>
      <view class="order-row"><text>应付金额</text><text class="val price">¥{{ (pack.packPrice * qty).toFixed(2) }}</text></view>
    </view>

    <!-- 购买按钮 -->
    <button class="buy-btn" @click="handleBuy" :disabled="buying">
      {{ buying ? '处理中...' : '立即购买' }}
    </button>

    <!-- 购买历史 -->
    <view class="section-title">购买记录</view>
    <view class="history-list" v-if="history.length">
      <view class="history-item" v-for="h in history" :key="h.id">
        <view class="h-top">
          <text class="h-qty">{{ h.quantity }}包 ({{ h.packMinutes * h.quantity }}分钟)</text>
          <text class="h-price">¥{{ h.totalAmount }}</text>
        </view>
        <view class="h-bottom">
          <text class="h-quota">+额度 ¥{{ h.addedQuota }}</text>
          <text class="h-time">{{ formatTime(h.createdAt) }}</text>
        </view>
      </view>
    </view>
    <view class="empty" v-else><text>暂无购买记录</text></view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { request } from '@/utils/request';

const pack = ref({ minutesPerPack: 100, unitPrice: 0.048, packPrice: 4.80, packQuotaValue: 3.20 });
const qty = ref(1);
const buying = ref(false);
const history = ref<any[]>([]);

function formatTime(t: string) {
  return t ? t.replace('T', ' ').substring(0, 16) : '';
}

async function loadData() {
  try {
    const [info, hist] = await Promise.all([
      request('/subscription/token-packs') as any,
      request('/subscription/token-packs/history') as any,
    ]);
    if (info?.minutesPerPack) pack.value = info;
    if (Array.isArray(hist)) history.value = hist;
  } catch {}
}

async function handleBuy() {
  if (buying.value) return;
  buying.value = true;
  try {
    const res = await request('/subscription/token-packs/purchase', {
      method: 'POST', data: { quantity: qty.value },
    }) as any;
    if (res?.success) {
      uni.showToast({ title: '购买成功！', icon: 'success' });
      qty.value = 1;
      loadData();
    } else {
      uni.showToast({ title: res?.message || '购买失败', icon: 'none' });
    }
  } catch (e: any) {
    uni.showToast({ title: e?.message || '网络错误', icon: 'none' });
  } finally {
    buying.value = false;
  }
}

onMounted(loadData);
</script>

<style scoped>
.page { min-height: 100vh; background: #f5f5f5; padding-bottom: 40rpx; }
.header { padding: 30rpx; }
.title { font-size: 36rpx; font-weight: bold; }

.pack-card { margin: 0 24rpx 20rpx; padding: 30rpx; background: linear-gradient(135deg, #f59e0b, #ef4444); border-radius: 16rpx; }
.pack-name { font-size: 32rpx; font-weight: bold; color: #fff; }
.pack-desc { font-size: 24rpx; color: rgba(255,255,255,0.8); margin-top: 8rpx; }
.pack-pricing { margin-top: 16rpx; display: flex; align-items: baseline; }
.pack-price { font-size: 48rpx; font-weight: bold; color: #fff; }
.pack-unit { font-size: 22rpx; color: rgba(255,255,255,0.7); margin-left: 8rpx; }
.pack-note { font-size: 20rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; }

.quantity-section { margin: 0 24rpx 20rpx; padding: 20rpx; background: #fff; border-radius: 12rpx; display: flex; justify-content: space-between; align-items: center; }
.qty-label { font-size: 28rpx; color: #333; }
.qty-controls { display: flex; align-items: center; gap: 24rpx; }
.qty-btn { width: 56rpx; height: 56rpx; border-radius: 28rpx; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 32rpx; }
.qty-value { font-size: 36rpx; font-weight: bold; min-width: 60rpx; text-align: center; }

.order-card { margin: 0 24rpx 20rpx; padding: 20rpx; background: #fff; border-radius: 12rpx; }
.order-row { display: flex; justify-content: space-between; padding: 8rpx 0; font-size: 28rpx; }
.order-row .val { color: #333; }
.order-row .price { color: #ef4444; font-weight: bold; font-size: 32rpx; }

.buy-btn { margin: 20rpx 24rpx; height: 88rpx; line-height: 88rpx; background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; border-radius: 44rpx; font-size: 32rpx; text-align: center; border: none; }
.buy-btn[disabled] { opacity: 0.6; }

.section-title { margin: 24rpx; font-size: 28rpx; font-weight: bold; }
.history-list { margin: 0 24rpx; }
.history-item { background: #fff; padding: 16rpx 20rpx; border-radius: 12rpx; margin-bottom: 12rpx; }
.h-top { display: flex; justify-content: space-between; }
.h-qty { font-size: 28rpx; color: #333; }
.h-price { font-size: 28rpx; color: #ef4444; font-weight: bold; }
.h-bottom { margin-top: 6rpx; display: flex; justify-content: space-between; }
.h-quota { font-size: 22rpx; color: #10b981; }
.h-time { font-size: 22rpx; color: #999; }
.empty { text-align: center; padding: 40rpx; color: #999; }
</style>
