<template>
  <view class="page">
    <view class="balance-card">
      <text class="balance-label">可用次数</text>
      <text class="balance-value">{{ balance }}</text>
      <text class="balance-tip" v-if="subscription">含订阅 {{ subCredits }}/月</text>
    </view>

    <view class="section">
      <view class="tabs">
        <text class="tab" :class="{ active: tab === 'packages' }" @click="tab = 'packages'">次数包</text>
        <text class="tab" :class="{ active: tab === 'plans' }" @click="tab = 'plans'">订阅方案</text>
        <text class="tab" :class="{ active: tab === 'history' }" @click="tab = 'history'">消费记录</text>
      </view>

      <view v-if="tab === 'packages'">
        <view class="item-card" v-for="pkg in packages" :key="pkg.id">
          <view class="item-info">
            <text class="item-name">{{ pkg.name }}</text>
            <text class="item-credits">{{ pkg.credits }} 次</text>
          </view>
          <view class="item-action">
            <text class="item-price">¥{{ pkg.price }}</text>
            <view class="buy-btns">
              <text class="buy-btn" @click="purchase(pkg.id)">微信</text>
              <text class="buy-btn overseas" @click="overseasPurchase(pkg.id, 'stripe')">Card</text>
              <text class="buy-btn overseas" @click="overseasPurchase(pkg.id, 'paypal')">PayPal</text>
              <text class="buy-btn pingpong" @click="overseasPurchase(pkg.id, 'pingpong')">Card</text>
            </view>
          </view>
        </view>
      </view>

      <view v-if="tab === 'plans'">
        <view class="item-card" v-for="plan in subPlans" :key="plan.id"
          :class="{ active: plan.id === currentSubId }">
          <view class="item-info">
            <text class="item-name">{{ plan.name }}</text>
            <text class="item-credits">{{ plan.credits_per_month }} 次/月</text>
          </view>
          <view class="item-action">
            <text class="item-price">¥{{ plan.price }}/月</text>
            <text class="buy-btn" v-if="plan.id === currentSubId" @click="cancelSub">取消订阅</text>
            <text class="buy-btn" v-else @click="subscribe(plan.id)">订阅</text>
          </view>
        </view>
      </view>

      <view v-if="tab === 'history'">
        <view class="history-item" v-for="item in history" :key="item.id">
          <text class="hist-desc">{{ item.description || item.action }}</text>
          <text class="hist-amount" :class="{ deduct: item.amount < 0 }">
            {{ item.amount > 0 ? '+' : '' }}{{ item.amount }}
          </text>
          <text class="hist-date">{{ formatDate(item.created_at) }}</text>
        </view>
        <text class="empty" v-if="history.length === 0">暂无记录</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { creditApi, paymentApi } from '@/utils/api.js'

const tab = ref('packages')
const balance = ref(0)
const packages = ref([])
const subPlans = ref([])
const history = ref([])
const subscription = ref(null)
const currentSubId = ref('')
const subCredits = ref(0)

const handlePayPalRedirect = async () => {
  const params = new URLSearchParams(window.location.search)
  const gateway = params.get('gateway')
  const token = params.get('token')
  const orderId = params.get('order_id')
  const result = params.get('result')
  if (gateway === 'paypal' && result === 'success' && token && orderId) {
    try {
      await creditApi.paypalCapture(orderId, token)
      uni.showToast({ title: '支付成功', icon: 'success' })
    } catch (e) {
      uni.showToast({ title: e.message || '支付处理失败', icon: 'none' })
    }
    const url = new URL(window.location.href)
    url.search = ''
    window.history.replaceState({}, '', url)
    loadData()
  }
}

const loadData = async () => {
  try {
    const cb = await creditApi.balance()
    balance.value = cb.balance || 0
    subscription.value = cb.subscription || null
    if (subscription.value) {
      currentSubId.value = subscription.value.plan_id
      subCredits.value = subscription.value.credits_per_month || 0
    }
  } catch {}
  try {
    const pkgs = await creditApi.packages()
    packages.value = pkgs || []
  } catch {}
  try {
    const plans = await creditApi.subscriptionPlans()
    subPlans.value = plans || []
  } catch {}
  try {
    const h = await creditApi.history()
    history.value = h.items || h || []
  } catch {}
}

const purchase = async (packageId) => {
  uni.showLoading({ title: '创建订单...' })
  try {
    const res = await creditApi.purchase(packageId, 'jsapi')
    if (res.pay_params) {
      uni.requestPayment({
        provider: 'wxpay',
        timeStamp: res.pay_params.timeStamp,
        nonceStr: res.pay_params.nonceStr,
        package: res.pay_params.package,
        signType: res.pay_params.signType,
        paySign: res.pay_params.paySign,
        success: () => {
          uni.showToast({ title: '购买成功', icon: 'success' })
          loadData()
        },
        fail: () => {
          uni.showToast({ title: '支付取消', icon: 'none' })
        },
      })
    } else if (res.pay_url) {
      window.location.href = res.pay_url
    } else {
      uni.showToast({ title: '订单创建成功', icon: 'success' })
      loadData()
    }
  } catch (e) {
    uni.showToast({ title: e.message || '购买失败', icon: 'none' })
  } finally {
    uni.hideLoading()
  }
}

const overseasPurchase = async (packageId, gateway) => {
  uni.showLoading({ title: '跳转支付...' })
  try {
    const baseUrl = 'https://trade.yuzhiran.com/workspace/credits'
    const res = await creditApi.stripePurchase(packageId, gateway, `${baseUrl}?gateway=${gateway}&result=success`, `${baseUrl}?gateway=${gateway}&result=cancel`)
    if (res.session_url) {
      window.location.href = res.session_url
    } else {
      uni.showToast({ title: '创建订单失败', icon: 'none' })
    }
  } catch (e) {
    uni.showToast({ title: e.message || '下单失败', icon: 'none' })
  } finally {
    uni.hideLoading()
  }
}

const subscribe = async (planId) => {
  uni.showLoading({ title: '处理中...' })
  try {
    const res = await paymentApi.createOrder(planId, 'jsapi')
    if (res.pay_params) {
      uni.requestPayment({
        provider: 'wxpay',
        timeStamp: res.pay_params.timeStamp,
        nonceStr: res.pay_params.nonceStr,
        package: res.pay_params.package,
        signType: res.pay_params.signType,
        paySign: res.pay_params.paySign,
        success: () => {
          uni.showToast({ title: '订阅成功', icon: 'success' })
          loadData()
        },
        fail: () => {
          uni.showToast({ title: '支付取消', icon: 'none' })
        },
      })
    } else if (res.pay_url) {
      window.location.href = res.pay_url
    } else {
      uni.showToast({ title: '订阅成功', icon: 'success' })
      loadData()
    }
  } catch (e) {
    uni.showToast({ title: e.message || '订阅失败', icon: 'none' })
  } finally {
    uni.hideLoading()
  }
}

const cancelSub = async () => {
  uni.showModal({
    title: '提示',
    content: '确定取消订阅？',
    success: async (res) => {
      if (res.confirm) {
        try {
          await creditApi.cancelSubscription()
          uni.showToast({ title: '已取消', icon: 'success' })
          loadData()
        } catch (e) {
          uni.showToast({ title: e.message || '取消失败', icon: 'none' })
        }
      }
    },
  })
}

const formatDate = (d) => {
  if (!d) return ''
  const date = new Date(d)
  return `${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`
}

onMounted(loadData)
</script>

<style scoped>
.page { padding: 20rpx; background: #f5f5f5; min-height: 100vh; }
.balance-card {
  background: linear-gradient(135deg, #1890ff, #096dd9);
  border-radius: 16rpx;
  padding: 40rpx;
  text-align: center;
  margin-bottom: 20rpx;
}
.balance-label { font-size: 28rpx; color: rgba(255,255,255,0.8); display: block; }
.balance-value { font-size: 72rpx; color: #fff; font-weight: bold; display: block; margin: 10rpx 0; }
.balance-tip { font-size: 24rpx; color: rgba(255,255,255,0.7); display: block; }
.section { background: #fff; border-radius: 16rpx; overflow: hidden; }
.tabs { display: flex; border-bottom: 2rpx solid #f0f0f0; }
.tab {
  flex: 1; text-align: center; padding: 24rpx 0;
  font-size: 28rpx; color: #666; position: relative;
}
.tab.active { color: #1890ff; font-weight: 600; }
.tab.active::after {
  content: ''; position: absolute; bottom: 0; left: 20%; right: 20%;
  height: 4rpx; background: #1890ff; border-radius: 2rpx;
}
.item-card {
  display: flex; justify-content: space-between; align-items: center;
  padding: 28rpx 30rpx; border-bottom: 2rpx solid #f5f5f5;
}
.item-card.active { background: #f0f9ff; }
.item-info { display: flex; flex-direction: column; }
.item-name { font-size: 30rpx; font-weight: 500; color: #333; }
.item-credits { font-size: 24rpx; color: #999; margin-top: 6rpx; }
.item-action { display: flex; flex-direction: column; align-items: flex-end; }
.item-price { font-size: 32rpx; color: #f5222d; font-weight: bold; }
.buy-btn {
  font-size: 24rpx; color: #1890ff; margin-top: 8rpx; padding: 4rpx 16rpx;
  border: 2rpx solid #1890ff; border-radius: 8rpx;
}
.buy-btns { display: flex; gap: 8rpx; margin-top: 8rpx; }
.buy-btn.overseas { color: #52c41a; border-color: #52c41a; }
.buy-btn.pingpong { color: #722ed1; border-color: #722ed1; }
.history-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24rpx 30rpx; border-bottom: 2rpx solid #f5f5f5;
}
.hist-desc { flex: 1; font-size: 26rpx; color: #333; }
.hist-amount { font-size: 28rpx; font-weight: bold; color: #52c41a; margin-left: 16rpx; }
.hist-amount.deduct { color: #f5222d; }
.hist-date { font-size: 22rpx; color: #999; margin-left: 16rpx; min-width: 100rpx; text-align: right; }
.empty { text-align: center; padding: 60rpx; color: #999; font-size: 28rpx; }
</style>