import React, { useState } from 'react'
import { View, Text, Input, ScrollView } from '@tarojs/components'
import Taro, { useDidShow } from '@tarojs/taro'
import { useRequest } from '@/hooks/useRequest'
import { createUserRecharge, payUserRecharge, type UserRecharge } from '@/api/shop/shopRecharge'
import { getUserBalance } from '@/api/system/user/balance'

definePageConfig({
  navigationBarTitleText: '充值',
})

const amounts = [10, 20, 50, 100, 200, 500]

const RechargePage: React.FC = () => {
  const [selected, setSelected] = useState(0)
  const [customAmount, setCustomAmount] = useState('')
  const [balance, setBalance] = useState<string>('')

  // 获取当前余额
  const { run: runGetBalance } = useRequest(getUserBalance, {
    manual: true,
    onSuccess: (data) => {
      setBalance(data.balance)
    }
  })

  // 页面显示时刷新余额
  useDidShow(() => {
    runGetBalance()
  })

  // 发起支付
  const handlePay = async (rechargeOrder: UserRecharge) => {
    try {
      const payParams = await payUserRecharge(rechargeOrder.rechargeId!)
      if (payParams) {
        // 后端返回已支付（回调丢失自动修复场景）
        if ((payParams as Record<string, unknown>).paid === 'true') {
          Taro.showToast({ title: '充值成功', icon: 'success' })
          try {
            const balanceData = await getUserBalance()
            setBalance(balanceData.balance)
          } catch (e) { }
          setTimeout(() => {
            Taro.navigateBack()
          }, 1500)
          return
        }
        // 调用微信支付
        await Taro.requestPayment({
          timeStamp: payParams.timeStamp,
          nonceStr: payParams.nonceStr,
          package: payParams.package,
          signType: payParams.signType,
          paySign: payParams.paySign,
          success: async () => {
            Taro.showToast({ title: '充值成功', icon: 'success' })
            // 立即刷新余额
            try {
              const balanceData = await getUserBalance()
              setBalance(balanceData.balance)
            } catch (e) {
              // 忽略刷新失败
            }
            setTimeout(() => {
              Taro.navigateBack()
            }, 1500)
          },
          fail: (err) => {
            if (err.errMsg.indexOf('cancel') > -1) {
              Taro.showToast({ title: '已取消支付', icon: 'none' })
            } else {
              Taro.showToast({ title: '支付失败', icon: 'none' })
            }
          }
        })
      }
    } catch (err: unknown) {
      const message = err instanceof Error ? err.message : '支付失败'
      Taro.showToast({ title: message, icon: 'none' })
    }
  }

  // 创建充值订单
  const { run: runCreate, loading: creating } = useRequest(createUserRecharge, {
    manual: true,
    onSuccess: (data) => {
      if (data) {
        handlePay(data)
      }
    },
    onError: (err) => {
      Taro.showToast({ title: err.message || '创建订单失败', icon: 'none' })
    }
  })

  const handleRecharge = () => {
    const amount = customAmount || String(amounts[selected])
    if (!amount || Number(amount) <= 0) {
      Taro.showToast({ title: '请选择充值金额', icon: 'none' })
      return
    }
    if (Number(amount) < 1) {
      Taro.showToast({ title: '充值金额不能小于1元', icon: 'none' })
      return
    }
    if (Number(amount) > 5000) {
      Taro.showToast({ title: '单次充值金额不能超过5000元', icon: 'none' })
      return
    }

    // 创建充值订单
    runCreate({
      amount: amount,
      payType: 0, // 微信支付
    })
  }

  return (
    <View className="min-h-screen bg-gray-50 flex flex-col">
      <ScrollView scrollY className="flex-1">
        <View className="p-4">
          {/* 当前余额提示 */}
          {balance && (
            <View className="bg-gradient-to-r from-orange-500 to-orange-600 rounded-xl p-4 mb-3">
              <Text className="text-white text-xs opacity-80 block">当前余额</Text>
              <Text className="text-white text-2xl font-bold block mt-1">¥{parseFloat(balance).toFixed(2)}</Text>
            </View>
          )}

          {/* 充值金额 */}
          <View className="bg-white rounded-xl p-4">
            <Text className="text-sm font-medium text-gray-800 mb-3 block">选择充值金额</Text>
            <View className="grid grid-cols-3 gap-2">
              {amounts.map((amount, idx) => (
                <View
                  key={amount}
                  className={`py-3 rounded-lg text-center border ${
                    selected === idx && !customAmount
                      ? 'border-orange-500 bg-orange-50'
                      : 'border-gray-200'
                  }`}
                  onClick={() => { setSelected(idx); setCustomAmount('') }}
                >
                  <Text className={`text-base font-medium ${selected === idx && !customAmount ? 'text-orange-600' : 'text-gray-700'}`}>
                    ¥{amount}
                  </Text>
                </View>
              ))}
            </View>
            {/* 自定义金额 */}
            <View className="mt-3">
              <Text className="text-sm text-gray-600 mb-1 block">自定义金额</Text>
              <View className="flex items-center border border-gray-200 rounded-lg px-3 py-2">
                <Text className="text-sm text-gray-500 mr-1">¥</Text>
                <Input
                  type="digit"
                  className="flex-1 text-sm"
                  placeholder="请输入金额（1-5000）"
                  value={customAmount}
                  onInput={e => setCustomAmount(e.detail.value)}
                />
              </View>
            </View>
          </View>

          {/* 支付方式 */}
          <View className="bg-white rounded-xl p-4 mt-3">
            <Text className="text-sm font-medium text-gray-800 mb-3 block">支付方式</Text>
            <View className="flex items-center justify-between py-2">
              <View className="flex items-center gap-2">
                <Text className="text-lg">💳</Text>
                <Text className="text-sm text-gray-700">微信支付</Text>
              </View>
              <View className="w-5 h-5 rounded-full border-2 border-orange-500 flex items-center justify-center">
                <View className="w-3 h-3 rounded-full bg-orange-500" />
              </View>
            </View>
          </View>

          {/* 充值说明 */}
          <View className="bg-white rounded-xl p-4 mt-3">
            <Text className="text-sm font-medium text-gray-800 mb-2 block">充值说明</Text>
            <View className="text-xs text-gray-400 leading-5">
              <Text className="block mb-1">1. 充值金额将立即到账</Text>
              <Text className="block mb-1">2. 充值后可在商城消费使用</Text>
              <Text className="block mb-1">3. 充值金额不可提现</Text>
              <Text className="block">4. 如有问题请联系客服</Text>
            </View>
          </View>
        </View>

        {/* 底部按钮占位 */}
        <View style={{ height: '80px' }} />
      </ScrollView>

      {/* 底部充值按钮 - flex 布局 */}
      <View className="bg-white border-t border-gray-200 px-4 py-3" style={{ paddingBottom: '20px' }}>
        <View
          className="py-3 rounded-full text-center"
          style={{ backgroundColor: '#f97316' }}
          onClick={handleRecharge}
        >
          <Text className="text-white font-medium text-sm">
            {creating ? '处理中...' : `立即充值 ¥${customAmount || amounts[selected]}`}
          </Text>
        </View>
      </View>
    </View>
  )
}

export default RechargePage