/**
 * 支付页面
 * 处理微信支付流程和状态管理
 */

import Taro, { useRouter } from '@tarojs/taro'
import { useState } from 'react'
import { View, Text } from '@tarojs/components'
import { useQuery } from '@tanstack/react-query'
import { Button } from '@/components/ui/button'
import { Navbar } from '@/components/ui/navbar'
import {
  requestWechatPayment,
  PaymentStatus,
  PaymentStateManager,
  PaymentRateLimiter,
  retryPayment
} from '@/utils/payment'
import { paymentClient } from '@/api'

interface PaymentData {
  timeStamp: string
  nonceStr: string
  package: string
  signType: string
  paySign: string
}

const PaymentPage = () => {
  const [paymentStatus, setPaymentStatus] = useState<PaymentStatus>(PaymentStatus.PENDING)
  const [isProcessing, setIsProcessing] = useState(false)
  const [errorMessage, setErrorMessage] = useState('')

  // 使用useRouter钩子获取路由参数
  const router = useRouter()
  const routerParams = router.params
  const orderId = routerParams?.orderId ? parseInt(routerParams.orderId) : 0
  const amount = routerParams?.amount ? parseFloat(routerParams.amount) : 0
  const orderNo = routerParams?.orderNo


  // 获取支付参数
  const { data: paymentData, isLoading: paymentLoading } = useQuery({
    queryKey: ['payment-params', orderId],
    queryFn: async () => {
      if (!orderId) throw new Error('订单ID无效')

      // 调用后端API获取微信支付参数
      const response = await paymentClient.payment.$post({
        json: {
          orderId: orderId,
          totalAmount: Math.round(amount * 100), // 转换为分
          description: `订单支付 - ${orderNo || `ORD${orderId}`}`
        }
      })

      if (response.status !== 200) {
        throw new Error(`获取支付参数失败: ${response.status}`)
      }

      const responseData = await response.json()

      // 转换响应数据格式
      const paymentData: PaymentData = {
        timeStamp: responseData.timeStamp,
        nonceStr: responseData.nonceStr,
        package: responseData.package,
        signType: responseData.signType,
        paySign: responseData.paySign
      }

      return paymentData
    },
    enabled: !!orderId && paymentStatus === PaymentStatus.PENDING
  })

     // 支付状态管理
     const paymentStateManager = PaymentStateManager.getInstance()
     const rateLimiter = PaymentRateLimiter.getInstance()
  
  // 处理支付
  const handlePayment = async () => {
    if (!paymentData || !orderId) {
      setErrorMessage('支付参数不完整')
      return
    }

    // 检查频率限制
    const rateLimit = rateLimiter.isRateLimited(orderId)
    if (rateLimit.limited) {
      setErrorMessage(`支付频率过高，请${Math.ceil(rateLimit.remainingTime! / 1000)}秒后重试`)
      return
    }

    setIsProcessing(true)
    setErrorMessage('')
    setPaymentStatus(PaymentStatus.PROCESSING)
    paymentStateManager.setPaymentState(orderId, PaymentStatus.PROCESSING)

    try {
      // 记录支付尝试
      rateLimiter.recordAttempt(orderId)

      // 调用微信支付
      // console.debug('开始调用微信支付...')
      const paymentResult = await requestWechatPayment(paymentData)
      // console.debug('微信支付调用完成，结果:', paymentResult)

      if (paymentResult.success) {
        // 支付成功
       // console.debug('微信支付成功，开始更新状态')
       // console.debug('更新前支付状态:', paymentStatus)

        // 使用函数式更新确保状态正确设置
        setPaymentStatus(prevStatus => {
          console.debug('setPaymentStatus 被调用，前一个状态:', prevStatus, '新状态:', PaymentStatus.SUCCESS)
          return PaymentStatus.SUCCESS
        })

        paymentStateManager.setPaymentState(orderId, PaymentStatus.SUCCESS)

        // 清除频率限制记录
        rateLimiter.clearAttempts(orderId)


        // 调用后端API更新订单支付状态为已支付 (2)
        try {
         // console.debug('开始调用后端API更新订单支付状态')
          await paymentClient.payment.updateOrderStatus.$post({
            json: {
              orderId: orderId,
              payState: 2 // 2表示支付成功
            }
          })
         // console.debug('数据库订单支付状态更新成功')
        } catch (error) {
          console.error('数据库更新订单支付状态失败:', error)
          // 这里不抛出错误，因为支付已经成功，只是状态同步失败
          // 可以记录日志或发送通知给管理员
        }

       // console.debug('支付状态已更新为SUCCESS，准备跳转')

        // 强制触发UI重新渲染
        setTimeout(() => {
         // console.debug('强制触发UI更新')
          setPaymentStatus(currentStatus => currentStatus)
        }, 100)

        // 确保状态更新显示在UI上
        setTimeout(() => {
         // console.debug('开始跳转到支付成功页面')
          Taro.redirectTo({
            url: `/pages/payment-success/index?orderId=${orderId}&amount=${amount}`
          })
        }, 2000) // 增加延迟时间，确保用户看到成功状态
      } else {
        // 支付失败
        console.debug('支付失败，开始更新状态')
        console.debug('更新前支付状态:', paymentStatus)

        setPaymentStatus(prevStatus => {
          console.debug('setPaymentStatus 被调用，前一个状态:', prevStatus, '新状态:', PaymentStatus.FAILED)
          return PaymentStatus.FAILED
        })
        paymentStateManager.setPaymentState(orderId, PaymentStatus.FAILED)

        await paymentClient.payment.updateOrderStatus.$post({
          json: {
            orderId: orderId,
            payState: 3 // 3表示支付失败
          }
        })

        if (paymentResult.type === 'cancel') {
          setErrorMessage('用户取消支付')
        } else {
          setErrorMessage(paymentResult.message || '支付失败')
        }
      }
    } catch (error: any) {
      console.error('支付处理异常:', error)
      setPaymentStatus(PaymentStatus.FAILED)
      paymentStateManager.setPaymentState(orderId, PaymentStatus.FAILED)
      setErrorMessage(error.message || '支付异常')
    } finally {
      setIsProcessing(false)
    }
  }

  // 重试支付
  const handleRetryPayment = async () => {
    if (!paymentData || !orderId) return

    setIsProcessing(true)
    setErrorMessage('')

    try {
      const retryResult = await retryPayment(
        () => requestWechatPayment(paymentData),
        3,
        1000
      )

      if (retryResult.success) {
        console.debug('重试支付成功，开始更新状态')
        setPaymentStatus(PaymentStatus.SUCCESS)
        paymentStateManager.setPaymentState(orderId, PaymentStatus.SUCCESS)

        // 调用后端API更新订单支付状态为已支付 (2)
        try {
          console.debug('开始调用后端API更新订单支付状态（重试）')
          await paymentClient.payment.updateOrderStatus.$post({
            json: {
              orderId: orderId,
              payState: 2 // 2表示支付成功
            }
          })
          console.debug('订单支付状态更新成功（重试）')
        } catch (error) {
          console.error('更新订单支付状态失败（重试）:', error)
          // 这里不抛出错误，因为支付已经成功，只是状态同步失败
        }

        console.debug('重试支付状态已更新为SUCCESS，准备跳转')

        // 跳转到支付成功页面
        setTimeout(() => {
          console.debug('开始跳转到支付成功页面（重试）')
          Taro.redirectTo({
            url: `/pages/payment-success/index?orderId=${orderId}&amount=${amount}`
          })
        }, 2000) // 增加延迟时间，确保用户看到成功状态
      } else {
        setPaymentStatus(PaymentStatus.FAILED)
        setErrorMessage(retryResult.message || '支付重试失败')
      }
    } catch (error: any) {
      console.error('支付重试异常:', error)
      setPaymentStatus(PaymentStatus.FAILED)
      setErrorMessage(error.message || '支付重试异常')
    } finally {
      setIsProcessing(false)
    }
  }

  // 取消支付
  const handleCancelPayment = () => {
    if (orderId) {
      paymentStateManager.clearPaymentState(orderId)
      rateLimiter.clearAttempts(orderId)
    }

    // 返回上一页
    Taro.navigateBack()
  }

  // 渲染支付状态
  const renderPaymentStatus = () => {
    switch (paymentStatus) {
      case PaymentStatus.PENDING:
        return (
          <View>
            <Text className="text-xl font-bold text-orange-500 block mb-2">待支付</Text>
            <Text className="text-sm text-gray-600 block">请确认支付信息</Text>
          </View>
        )
      case PaymentStatus.PROCESSING:
        return (
          <View>
            <Text className="text-xl font-bold text-blue-500 block mb-2">支付中...</Text>
            <Text className="text-sm text-gray-600 block">请稍候</Text>
          </View>
        )
      case PaymentStatus.SUCCESS:
        return (
          <View>
            <Text className="text-xl font-bold text-green-500 block mb-2">支付成功</Text>
            <Text className="text-sm text-gray-600 block">正在跳转...</Text>
          </View>
        )
      case PaymentStatus.FAILED:
        return (
          <View>
            <Text className="text-xl font-bold text-red-500 block mb-2">支付失败</Text>
            <Text className="text-sm text-gray-600 block">{errorMessage}</Text>
          </View>
        )
      default:
        return null
    }
  }

  if (!orderId || !amount) {
    return (
      <View className="min-h-screen bg-gray-50 flex flex-col items-center justify-center">
        <Text className="text-xl text-red-500 mb-8">参数错误</Text>
        <Button onClick={() => Taro.navigateBack()} className="w-48 h-18 bg-blue-500 text-white rounded-full text-sm">
          返回
        </Button>
      </View>
    )
  }

  return (
    <View className="min-h-screen bg-gray-50">
      {/* 导航栏 */}
      <Navbar
        title="支付订单"
        leftIcon=""
        onClickLeft={() => {}}
      />

      <View className="p-5">
        {/* 头部 */}
        <View className="text-center py-6 bg-white rounded-2xl mb-5">
          <Text className="text-2xl font-bold text-gray-800">支付订单</Text>
        </View>

      {/* 订单信息 */}
      <View className="bg-white rounded-2xl p-6 mb-5">
        <View className="flex justify-between items-center mb-4">
          <Text className="text-sm text-gray-600">订单号:</Text>
          <Text className="text-sm text-gray-800">{orderNo || `ORD${orderId}`}</Text>
        </View>
        <View className="flex justify-between items-center">
          <Text className="text-sm text-gray-600">支付金额:</Text>
          <Text className="text-2xl font-bold text-orange-500">¥{amount.toFixed(2)}</Text>
        </View>
      </View>

      {/* 支付状态 */}
      <View className="bg-white rounded-2xl p-8 mb-5 text-center">
        {renderPaymentStatus()}
      </View>

      {/* 支付按钮 */}
      <View className="mb-5">
        {paymentStatus === PaymentStatus.PENDING && (
          <Button
            onClick={handlePayment}
            disabled={isProcessing || paymentLoading}
            className={`w-full h-22 bg-gradient-to-r from-orange-500 to-orange-400 text-white rounded-full text-lg font-bold ${
              isProcessing ? 'bg-gray-400' : ''
            }`}
          >
            {isProcessing ? '支付中...' : `确认支付 ¥${amount.toFixed(2)}`}
          </Button>
        )}

        {paymentStatus === PaymentStatus.FAILED && (
          <View className="flex gap-4">
            <Button onClick={handleRetryPayment} className="flex-1 h-22 bg-blue-500 text-white rounded-full text-sm">
              重试支付
            </Button>
            <Button onClick={handleCancelPayment} className="flex-1 h-22 bg-gray-100 text-gray-600 border border-gray-300 rounded-full text-sm">
              取消支付
            </Button>
          </View>
        )}

        {paymentStatus === PaymentStatus.PROCESSING && (
          <Button disabled className="w-full h-22 bg-gray-100 text-gray-500 rounded-full text-sm">
            支付处理中...
          </Button>
        )}

        {paymentStatus === PaymentStatus.SUCCESS && (
          <Button disabled className="w-full h-22 bg-green-500 text-white rounded-full text-lg font-bold">
            ✓ 支付成功
          </Button>
        )}
      </View>

      {/* 支付说明 */}
      <View className="bg-white rounded-2xl p-6">
        <Text className="text-sm font-bold text-gray-800 block mb-4">支付说明</Text>
        <Text className="text-xs text-gray-600 leading-relaxed whitespace-pre-line">
          • 请确保网络连接正常
          {'\n'}
          • 支付过程中请勿关闭页面
          {'\n'}
          • 如遇支付问题，请尝试重新支付
          {'\n'}
          • 支付成功后会自动跳转
        </Text>
      </View>
      </View>
    </View>
  )
}

export default PaymentPage