import React, { useEffect } from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useUser } from '@/hooks/useUser'
import { useRequest } from '@/hooks/useRequest'
import { getUserCardStats, type UserCardStats } from '@/api/shop/shopUserCard'

definePageConfig({
  navigationBarTitleText: '我的钱包',
})

const WalletPage: React.FC = () => {
  const { isLoggedIn } = useUser()

  // 获取用户余额信息（使用与"我的"页面相同的 API）
  const { data: balanceData, run: fetchBalance, loading: balanceLoading } = useRequest(getUserCardStats, {
    manual: true,
  })

  // 加载数据
  useEffect(() => {
    if (isLoggedIn) {
      fetchBalance()
    }
  }, [isLoggedIn, fetchBalance])

  // getUserCardStats 返回 { balance: string }
  const balance = (balanceData as UserCardStats)?.balance || '0.00'

  // 格式化金额
  const formatAmount = (amount: string) => {
    return parseFloat(amount).toFixed(2)
  }

  return (
    <View className='min-h-screen bg-gray-50 flex flex-col'>
      <ScrollView scrollY className='flex-1' onScrollToLower={() => {}}>
        {/* 余额卡片 */}
        <View className='mx-3 mt-3 p-5 rounded-xl text-center' style={{ background: 'linear-gradient(135deg, #f59e0b, #f97316)' }}>
          <Text className='text-white text-sm opacity-80 block mb-1'>账户余额 (元)</Text>
          <Text className='text-white text-3xl font-bold block'>
            {balanceLoading ? '...' : formatAmount(balance)}
          </Text>
          <View className='flex gap-3 mt-4'>
            <View
              className='flex-1 py-2 rounded-full text-center'
              style={{ backgroundColor: 'rgba(255,255,255,0.2)' }}
              onClick={() => Taro.navigateTo({ url: '/pages/user/redeem/index' })}
            >
              <Text className='text-white text-sm font-medium'>充值</Text>
            </View>
            {/*<View*/}
            {/*  className='flex-1 py-2 rounded-full text-center'*/}
            {/*  style={{ backgroundColor: 'rgba(255,255,255,0.2)' }}*/}
            {/*  onClick={() => Taro.navigateTo({ url: '/pages/user/withdraw/index' })}*/}
            {/*>*/}
            {/*  <Text className='text-white text-sm font-medium'>提现</Text>*/}
            {/*</View>*/}
          </View>
        </View>

        {/* 快捷操作 */}
        <View className='mx-3 mt-3 bg-white rounded-xl p-4'>
          <View className='flex justify-between'>
            <View
              className='flex-1 flex flex-col items-center py-2'
              onClick={() => Taro.navigateTo({ url: '/pages/user/balance-log/index' })}
            >
              <Text className='text-lg mb-1'>📄</Text>
              <Text className='text-xs text-gray-600'>余额明细</Text>
            </View>
            <View
              className='flex-1 flex flex-col items-center py-2'
              onClick={() => Taro.navigateTo({ url: '/pages/user/recharge-record/index' })}
            >
              <Text className='text-lg mb-1'>💳</Text>
              <Text className='text-xs text-gray-600'>充值记录</Text>
            </View>
            <View
              className='flex-1 flex flex-col items-center py-2'
              onClick={() => Taro.navigateTo({ url: '/pages/user/redeem/index' })}
            >
              <Text className='text-lg mb-1'>🎫</Text>
              <Text className='text-xs text-gray-600'>兑换码</Text>
            </View>
            {/*<View*/}
            {/*  className='flex-1 flex flex-col items-center py-2'*/}
            {/*  onClick={() => Taro.navigateTo({ url: '/pages/user/withdraw/index' })}*/}
            {/*>*/}
            {/*  <Text className='text-lg mb-1'>💰</Text>*/}
            {/*  <Text className='text-xs text-gray-600'>提现记录</Text>*/}
            {/*</View>*/}
          </View>
        </View>

        <View className='h-6' />
      </ScrollView>
    </View>
  )
}

export default WalletPage