<template>
  <div class="pay-page">
    <div class="pay-container">
      <!-- 加载中 -->
      <div v-if="loading" class="pay-loading">
        <a-spin size="large" />
        <p class="mt-4 text-gray-400">加载订单信息...</p>
      </div>

      <!-- 订单不存在 -->
      <div v-else-if="!subscription" class="pay-empty">
        <div class="text-6xl mb-4">🔍</div>
        <h2 class="text-xl font-semibold text-gray-700 mb-2">订单不存在</h2>
        <p class="text-gray-400 mb-6">该订阅可能已取消或链接有误</p>
        <a-button type="primary" @click="navigateTo('/console/apps?tab=purchased')">
          返回应用中心
        </a-button>
      </div>

      <!-- 已支付成功 -->
      <div v-else-if="paySuccess" class="pay-success">
        <div class="success-icon">
          <CheckCircleFilled class="success-check" />
        </div>
        <h2 class="text-2xl font-bold text-gray-800 mb-2">支付成功</h2>
        <p class="text-gray-500 mb-6">
          {{ subscription.productName || '应用' }} 已激活，快去使用吧！
        </p>
        <a-space>
          <a-button type="primary" size="large" @click="navigateTo('/console/apps?tab=purchased')">
            查看我的应用
          </a-button>
          <a-button size="large" @click="navigateTo('/market')">
            继续浏览
          </a-button>
        </a-space>
      </div>

      <!-- 待支付 -->
      <div v-else class="pay-content">
        <!-- 订单信息 -->
        <div class="pay-card">
          <div class="pay-card-header">
            <h3 class="text-lg font-semibold text-gray-800">订单详情</h3>
            <a-tag :color="subscription.status === 'pending' ? 'warning' : 'default'">
              {{ subscription.status === 'pending' ? '待支付' : subscription.status }}
            </a-tag>
          </div>

          <div class="pay-info">
            <div class="pay-info-row">
              <span class="pay-label">应用名称</span>
              <span class="pay-value font-medium">{{ subscription.productName || '未知应用' }}</span>
            </div>
            <div class="pay-info-row">
              <span class="pay-label">订阅编号</span>
              <span class="pay-value font-mono text-sm">{{ subscription.subscriptionNo }}</span>
            </div>
            <div class="pay-info-row">
              <span class="pay-label">价格类型</span>
              <span class="pay-value">{{ priceTypeText(subscription.priceType) }}</span>
            </div>
            <div v-if="subscription.subscriptionPeriod" class="pay-info-row">
              <span class="pay-label">订阅周期</span>
              <span class="pay-value">{{ subscription.subscriptionPeriod === 'year' ? '按年' : '按月' }}</span>
            </div>

            <a-divider class="!my-3" />

            <div class="pay-info-row pay-amount-row">
              <span class="pay-label">支付金额</span>
              <span class="pay-amount">
                <span v-if="subscription.payPrice === 0" class="text-green-500 text-2xl font-bold">免费</span>
                <span v-else class="text-amber-500 text-2xl font-bold">
                  ¥{{ subscription.payPrice }}
                </span>
              </span>
            </div>
          </div>

          <div class="pay-countdown" v-if="countdown > 0">
            <ClockCircleOutlined class="text-amber-500 mr-1" />
            <span>请在 <span class="text-amber-500 font-semibold">{{ formatCountdown(countdown) }}</span> 内完成支付</span>
          </div>
          <div class="pay-countdown expired" v-else>
            订单已超时，请重新下单
          </div>
        </div>

        <!-- 支付区域 -->
        <div class="pay-card" v-if="subscription.payPrice > 0 && countdown > 0">
          <h3 class="text-lg font-semibold text-gray-800 mb-4">选择支付方式</h3>

          <!-- 支付方式选择 -->
          <div class="pay-methods">
            <div
              v-for="method in payMethods"
              :key="method.key"
              class="pay-method"
              :class="{
                active: selectedMethod === method.key,
                disabled: method.key === 'balance' && !hasEnoughBalance
              }"
              @click="handleSelectMethod(method.key)"
            >
              <component :is="method.icon" class="pay-method-icon" />
              <span>{{ method.label }}</span>
              <span v-if="method.key === 'balance'" class="balance-hint">
                ({{ userBalance.toFixed(2) }}元)
              </span>
            </div>
          </div>

          <!-- 余额不足提示 -->
          <div v-if="selectedMethod === 'balance' && !hasEnoughBalance" class="balance-warning">
            <WarningOutlined class="mr-1" />
            余额不足，当前余额 {{ userBalance.toFixed(2) }} 元，还需 {{ (subscription.payPrice - userBalance).toFixed(2) }} 元
          </div>

          <!-- 支付按钮 -->
          <a-button
            type="primary"
            size="large"
            block
            class="pay-btn"
            :loading="payLoading"
            :disabled="selectedMethod === 'balance' && !hasEnoughBalance"
            @click="handlePay"
          >
            确认支付 ¥{{ subscription.payPrice }}
          </a-button>

          <!-- 二维码区域（Native 支付时展示） -->
          <div v-if="qrcodeValue" class="pay-qrcode">
            <div class="qrcode-wrapper">
              <a-qrcode :value="qrcodeValue" :size="200" />
            </div>
            <p class="qrcode-tip">
              请使用微信扫码支付
            </p>
            <p v-if="testMode" class="qrcode-test-mode">
              <a-tag color="orange">测试模式</a-tag>
              实际支付请使用真实微信商户
            </p>
          </div>
        </div>

        <!-- 免费应用自动激活 -->
        <div class="pay-card" v-if="subscription.payPrice === 0 || subscription.payPrice == null">
          <a-result status="info" title="免费应用" sub-description="点击确认即可激活使用">
            <template #extra>
              <a-button type="primary" size="large" :loading="activateLoading" @click="handleFreeActivate">
                确认激活
              </a-button>
            </template>
          </a-result>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { message } from 'ant-design-vue'
import {
  CheckCircleFilled,
  ClockCircleOutlined,
  WechatOutlined,
  AlipayCircleOutlined,
  WalletOutlined,
  WarningOutlined,
} from '@ant-design/icons-vue'
import { checkPayStatus, paySubscription, getUserBalance } from '@/api/app/subscription'
import type { AppSubscription } from '@/api/app/subscription/model'
import { APP_API_URL } from '@/config/setting'

definePageMeta({ layout: 'console' })

const route = useRoute()
const subscriptionNo = computed(() => route.params.subscriptionNo as string)

// 状态
const loading = ref(true)
const subscription = ref<AppSubscription | null>(null)
const paySuccess = ref(false)
const payLoading = ref(false)
const activateLoading = ref(false)
const selectedMethod = ref<'wechat' | 'alipay' | 'balance'>('wechat')
const qrcodeValue = ref('')
const testMode = ref(false)
const countdown = ref(1800) // 30分钟倒计时
const userBalance = ref(0) // 用户余额

// 计算余额是否充足
const hasEnoughBalance = computed(() => {
  if (!subscription.value) return false
  return userBalance.value >= subscription.value.payPrice
})

// 支付方式
const payMethods = [
  { key: 'wechat', label: '微信支付', icon: WechatOutlined },
  { key: 'alipay', label: '支付宝', icon: AlipayCircleOutlined },
  { key: 'balance', label: '余额支付', icon: WalletOutlined },
]

// 轮询定时器
let pollTimer: ReturnType<typeof setInterval> | null = null
let countdownTimer: ReturnType<typeof setInterval> | null = null

// 工具函数
function priceTypeText(type?: string) {
  const map: Record<string, string> = { free: '免费', one_time: '一次性购买', subscription: '订阅' }
  return map[type || ''] || type || '-'
}

function formatCountdown(seconds: number): string {
  const m = Math.floor(seconds / 60)
  const s = seconds % 60
  return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
}

// 加载订单（checkPayStatus 已包含完整订单详情，无需再调 getSubscription）
async function fetchSubscription() {
  loading.value = true
  try {
    const data = await checkPayStatus(subscriptionNo.value)

    if (data.status === 'active' || data.payStatus === 1) {
      paySuccess.value = true
      stopPolling()
      return
    }

    // 将返回数据映射为 subscription（checkPayStatus 已包含所有详情字段）
    subscription.value = {
      id: data.id,
      subscriptionNo: data.subscriptionNo ?? subscriptionNo.value,
      productId: data.productId,
      productName: data.productName,
      productLogo: data.productLogo,
      priceType: data.priceType,
      payPrice: data.payPrice ?? 0,
      subscriptionPeriod: data.subscriptionPeriod,
      status: data.status,
      payStatus: data.payStatus,
    } as AppSubscription

    // 加载用户余额
    fetchUserBalance()
  } catch {
    subscription.value = null
  } finally {
    loading.value = false
  }
}

// 获取用户余额
async function fetchUserBalance() {
  try {
    const data = await getUserBalance()
    userBalance.value = data.balance ?? 0
  } catch {
    userBalance.value = 0
  }
}

// 轮询支付状态
function startPolling() {
  stopPolling()
  pollTimer = setInterval(async () => {
    try {
      const data = await checkPayStatus(subscriptionNo.value)
      if (data.paid || data.status === 'active') {
        paySuccess.value = true
        stopPolling()
      }
    } catch {
      // 静默处理
    }
  }, 3000)
}

function stopPolling() {
  if (pollTimer) {
    clearInterval(pollTimer)
    pollTimer = null
  }
  if (countdownTimer) {
    clearInterval(countdownTimer)
    countdownTimer = null
  }
}

// 倒计时
function startCountdown() {
  countdownTimer = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--
    } else {
      stopPolling()
    }
  }, 1000)
}

// 发起支付
async function handlePay() {
  if (!subscription.value?.id) return
  payLoading.value = true
  try {
    const method = selectedMethod.value === 'balance' ? 'balance' : 'wechat'
    const result = await paySubscription(subscription.value.id, method)

    // 余额支付直接成功
    if (selectedMethod.value === 'balance') {
      const payData = result as any
      if (payData.paid) {
        userBalance.value = payData.balance ?? userBalance.value - (subscription.value?.payPrice ?? 0)
        paySuccess.value = true
        stopPolling()
        message.success('支付成功！')
        return
      }
    }

    // 微信支付返回 codeUrl
    if (result && typeof result === 'object') {
      const payData = result as any
      if (payData.codeUrl || payData.qrcode) {
        qrcodeValue.value = payData.codeUrl || payData.qrcode
        testMode.value = payData._testMode === true
        startPolling()
      } else if (payData.paymentUrl || payData.payUrl || payData.mwebUrl) {
        const url = payData.paymentUrl || payData.payUrl || payData.mwebUrl
        window.open(url, '_blank')
        startPolling()
      } else {
        message.info('支付请求已发送')
        startPolling()
      }
    } else {
      message.info('支付请求已发送')
      startPolling()
    }
  } catch (error: any) {
    message.error(error.message || '发起支付失败')
  } finally {
    payLoading.value = false
  }
}

// 选择支付方式
function handleSelectMethod(key: string) {
  if (key === 'balance' && !hasEnoughBalance.value) {
    return // 余额不足不可选
  }
  selectedMethod.value = key as 'wechat' | 'alipay' | 'balance'
  // 切换到余额支付时清空二维码
  if (key !== 'wechat') {
    qrcodeValue.value = ''
    stopPolling()
  }
}

// 免费激活
async function handleFreeActivate() {
  activateLoading.value = true
  try {
    await paySubscription(subscription.value!.id!)
    paySuccess.value = true
  } catch (error: any) {
    message.error(error.message || '激活失败')
  } finally {
    activateLoading.value = false
  }
}

onMounted(() => {
  fetchSubscription()
  startCountdown()
})

onUnmounted(() => {
  stopPolling()
})
</script>

<style scoped>
.pay-page {
  min-height: calc(100vh - 120px);
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.pay-container {
  width: 100%;
  max-width: 520px;
}

.pay-loading,
.pay-empty,
.pay-success {
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.success-icon {
  margin-bottom: 16px;
}

.success-check {
  font-size: 64px;
  color: #52c41a;
}

.pay-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pay-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.pay-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.pay-card-header h3 {
  margin: 0;
}

.pay-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pay-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pay-label {
  color: #9ca3af;
  font-size: 14px;
}

.pay-value {
  color: #374151;
  font-size: 14px;
}

.pay-amount-row {
  padding: 4px 0;
}

.pay-amount {
  font-size: 24px;
}

.pay-countdown {
  margin-top: 16px;
  padding: 10px 16px;
  background: #fffbeb;
  border-radius: 8px;
  font-size: 13px;
  color: #666;
  text-align: center;
}

.pay-countdown.expired {
  background: #fef2f2;
  color: #ef4444;
}

.pay-methods {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.pay-method {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  border: 2px solid #f0f0f0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  color: #666;
}

.pay-method:hover {
  border-color: #d9d9d9;
}

.pay-method.active {
  border-color: #4f46e5;
  color: #4f46e5;
  background: #f5f3ff;
}

.pay-method.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pay-method .balance-hint {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 2px;
}

.balance-warning {
  margin-top: 12px;
  padding: 10px 12px;
  background: #fef2f2;
  border-radius: 8px;
  font-size: 13px;
  color: #ef4444;
}

.pay-method-icon {
  font-size: 28px;
}

.pay-btn {
  height: 48px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
}

.pay-qrcode {
  margin-top: 24px;
  text-align: center;
}

.qrcode-wrapper {
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qrcode-tip {
  font-size: 13px;
  color: #9ca3af;
  margin: 0;
}

.qrcode-test-mode {
  margin-top: 8px;
  font-size: 12px;
  color: #f97316;
}

.mt-4 {
  margin-top: 16px;
}
</style>
