import React, {useState, useEffect} from 'react'
import {View, Text} from '@tarojs/components'
import {ConfigProvider, Grid, Avatar} from '@nutui/nutui-react-taro'
import {
  User,
  Shopping,
  QrCode,
  ArrowRight,
  Purse,
  People
} from '@nutui/icons-react-taro'
import {useDealerUser} from '@/hooks/useDealerUser'
import {useThemeStyles} from '@/hooks/useTheme'
import {businessGradients, cardGradients} from '@/styles/gradients'
import Taro from '@tarojs/taro'
import {getShopDealerRefereeByUserId} from "@/api/shop/shopDealerReferee";
import {ShopDealerUser} from "@/api/shop/shopDealerUser/model";

const DealerIndex: React.FC = () => {
  const {
    dealerUser
  } = useDealerUser()
  const [dealer, setDealer] = useState<ShopDealerUser>()

  // 使用主题样式
  const themeStyles = useThemeStyles()

  // 导航到各个功能页面
  const navigateToPage = (url: string) => {
    Taro.navigateTo({url})
  }

  // 格式化金额
  const formatMoney = (money?: string) => {
    if (!money) return '0.00'
    return parseFloat(money).toFixed(2)
  }

  // 格式化时间
  const formatTime = (time?: string) => {
    if (!time) return '-'
    return new Date(time).toLocaleDateString()
  }

  // 获取用户主题
  // const userTheme = gradientUtils.getThemeByUserId(dealerUser?.userId)

  // 获取渐变背景
  // const getGradientBackground = (themeColor?: string) => {
  //   if (themeColor) {
  //     const darkerColor = gradientUtils.adjustColorBrightness(themeColor, -30)
  //     return gradientUtils.createGradient(themeColor, darkerColor)
  //   }
  //   return userTheme.background
  // }


  // 初始化当前用户名称
  useEffect(() => {
    getShopDealerRefereeByUserId(Taro.getStorageSync('UserId')).then((data) => {
      setDealer(data);
    })
  }, [dealerUser])


  // console.log(getGradientBackground(), 'getGradientBackground()')
  //
  // if (error) {
  //   return (
  //     <View className="p-4">
  //       <View className="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
  //         <Text className="text-red-600">{error}</Text>
  //       </View>
  //       <Button type="primary" onClick={refresh}>
  //         重试
  //       </Button>
  //     </View>
  //   )
  // }

  return (
    <View className="bg-gray-100 min-h-screen">
      <View>
        {/*头部信息*/}
        {dealerUser && (
          <View className="px-4 py-6 relative overflow-hidden" style={themeStyles.primaryBackground}>
            {/* 装饰性背景元素 - 小程序兼容版本 */}
            <View className="absolute w-32 h-32 rounded-full" style={{
              backgroundColor: 'rgba(255, 255, 255, 0.1)',
              top: '-16px',
              right: '-16px'
            }}></View>
            <View className="absolute w-24 h-24 rounded-full" style={{
              backgroundColor: 'rgba(255, 255, 255, 0.08)',
              bottom: '-12px',
              left: '-12px'
            }}></View>
            <View className="absolute w-16 h-16 rounded-full" style={{
              backgroundColor: 'rgba(255, 255, 255, 0.05)',
              top: '60px',
              left: '120px'
            }}></View>
            <View className="flex items-center justify-between relative z-10 mb-4">
              <Avatar
                size="50"
                src={dealerUser?.qrcode}
                icon={<User/>}
                className="mr-4"
                style={{
                  border: '2px solid rgba(255, 255, 255, 0.3)'
                }}
              />
              <View className="flex-1 flex-col">
                <View className="text-white text-lg font-bold mb-1" style={{}}>
                  {dealerUser?.realName || '分销商'}
                </View>
                <View className="text-sm" style={{
                  color: 'rgba(255, 255, 255, 0.8)'
                }}>
                  ID: {dealerUser.userId} | 推荐人: {dealerUser.refereeId || '无'}
                </View>
              </View>
              <View className="text-right hidden">
                <Text className="text-xs" style={{
                  color: 'rgba(255, 255, 255, 0.9)'
                }}>加入时间</Text>
                <Text className="text-xs" style={{
                  color: 'rgba(255, 255, 255, 0.7)'
                }}>
                  {formatTime(dealerUser.createTime)}
                </Text>
              </View>
            </View>
          </View>
        )}

        {/* 佣金统计卡片 */}
        {dealerUser && (
          <View className="mx-4 -mt-6 rounded-xl p-4 relative z-10" style={cardGradients.elevated}>
            <View className="mb-4">
              <Text className="font-semibold text-gray-800">收益统计</Text>
            </View>
            <View className="grid grid-cols-3 gap-3">
              <View className="text-center p-3 rounded-lg flex flex-col" style={{
                background: businessGradients.money.available
              }}>
                <Text className="text-lg font-bold mb-1 text-white">
                  {formatMoney(dealerUser.money)}
                </Text>
                <Text className="text-xs" style={{color: 'rgba(255, 255, 255, 0.9)'}}>可提现</Text>
              </View>
              <View className="text-center p-3 rounded-lg flex flex-col" style={{
                background: businessGradients.money.frozen
              }}>
                <Text className="text-lg font-bold mb-1 text-white">
                  {formatMoney(dealerUser.freezeMoney)}
                </Text>
                <Text className="text-xs" style={{color: 'rgba(255, 255, 255, 0.9)'}}>冻结中</Text>
              </View>
              <View className="text-center p-3 rounded-lg flex flex-col" style={{
                background: businessGradients.money.total
              }}>
                <Text className="text-lg font-bold mb-1 text-white">
                  {formatMoney(dealerUser.totalMoney)}
                </Text>
                <Text className="text-xs" style={{color: 'rgba(255, 255, 255, 0.9)'}}>累计收益</Text>
              </View>
            </View>
          </View>
        )}

        {/* 团队统计 */}
        {dealerUser && (
          <View className="bg-white mx-4 mt-4 rounded-xl p-4 hidden">
            <View className="flex items-center justify-between mb-4">
              <Text className="font-semibold text-gray-800">我的邀请</Text>
              <View
                className="text-gray-400 text-sm flex items-center"
                onClick={() => navigateToPage('/dealer/team/index')}
              >
                <Text>查看详情</Text>
                <ArrowRight size="12"/>
              </View>
            </View>
            <View className="grid grid-cols-3 gap-4">
              <View className="text-center grid">
                <Text className="text-xl font-bold text-purple-500 mb-1">
                  {dealerUser.firstNum || 0}
                </Text>
                <Text className="text-xs text-gray-500">一级成员</Text>
              </View>
              <View className="text-center grid">
                <Text className="text-xl font-bold text-indigo-500 mb-1">
                  {dealerUser.secondNum || 0}
                </Text>
                <Text className="text-xs text-gray-500">二级成员</Text>
              </View>
              <View className="text-center grid">
                <Text className="text-xl font-bold text-pink-500 mb-1">
                  {dealerUser.thirdNum || 0}
                </Text>
                <Text className="text-xs text-gray-500">三级成员</Text>
              </View>
            </View>
          </View>
        )}

        {/* 功能导航 */}
        <View className="bg-white mx-4 mt-4 rounded-xl p-4">
          <View className="font-semibold mb-4 text-gray-800">我的工具</View>
          <ConfigProvider>
            <Grid
              columns={4}
              className="no-border-grid"
              style={{
                '--nutui-grid-border-color': 'transparent',
                '--nutui-grid-item-border-width': '0px',
                border: 'none'
              } as React.CSSProperties}
            >
              <Grid.Item text="电费订单" onClick={() => navigateToPage('/dealer/orders/index')}>
                <View className="text-center">
                  <View className="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center mx-auto mb-2">
                    <Shopping color="#3b82f6" size="20"/>
                  </View>
                </View>
              </Grid.Item>

              <Grid.Item text="收益明细" onClick={() => navigateToPage('/dealer/capital/record')}>
                <View className="text-center">
                  <View className="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center mx-auto mb-2">
                    <Purse color="#3b82f6" size="20"/>
                  </View>
                </View>
              </Grid.Item>

              <Grid.Item text={'提现申请'} onClick={() => navigateToPage('/dealer/withdraw/index')}>
                <View className="text-center">
                  <View className="w-12 h-12 bg-green-50 rounded-xl flex items-center justify-center mx-auto mb-2">
                    <Purse color="#10b981" size="20"/>
                  </View>
                </View>
              </Grid.Item>

              <Grid.Item text={'实名认证'} onClick={() => navigateToPage('/user/userVerify/index')}>
                <View className="text-center">
                  <View className="w-12 h-12 bg-purple-50 rounded-xl flex items-center justify-center mx-auto mb-2">
                    <People color="#8b5cf6" size="20"/>
                  </View>
                </View>
              </Grid.Item>

              <Grid.Item text={'我的邀请码'} onClick={() => navigateToPage('/dealer/qrcode/index')}>
                <View className="text-center">
                  <View className="w-12 h-12 bg-orange-50 rounded-xl flex items-center justify-center mx-auto mb-2">
                    <QrCode color="#f59e0b" size="20"/>
                  </View>
                </View>
              </Grid.Item>
              {
                (dealerUser?.userId == 33658 || dealerUser?.userId == 33677) && (
                  <Grid.Item text={'提现审核'} onClick={() => navigateToPage('/dealer/withdraw/admin')}>
                    <View className="text-center">
                      <View className="w-12 h-12 bg-red-50 rounded-xl flex items-center justify-center mx-auto mb-2">
                        <Purse color="#10b981" size="20"/>
                      </View>
                    </View>
                  </Grid.Item>
                )
              }

              {
                (dealerUser?.userId == 33658 || dealerUser?.userId == 33677) && (
                  <Grid.Item text={'实名审核'} onClick={() => navigateToPage('/admin/userVerify/index')}>
                    <View className="text-center">
                      <View className="w-12 h-12 bg-red-50 rounded-xl flex items-center justify-center mx-auto mb-2">
                        <People color="#10b981" size="20"/>
                      </View>
                    </View>
                  </Grid.Item>
                )
              }

            </Grid>

            {/* 第二行功能 */}
            {/*<Grid*/}
            {/*  columns={4}*/}
            {/*  className="no-border-grid mt-4"*/}
            {/*  style={{*/}
            {/*    '--nutui-grid-border-color': 'transparent',*/}
            {/*    '--nutui-grid-item-border-width': '0px',*/}
            {/*    border: 'none'*/}
            {/*  } as React.CSSProperties}*/}
            {/*>*/}
            {/*  <Grid.Item text={'邀请统计'} onClick={() => navigateToPage('/dealer/invite-stats/index')}>*/}
            {/*    <View className="text-center">*/}
            {/*      <View className="w-12 h-12 bg-indigo-50 rounded-xl flex items-center justify-center mx-auto mb-2">*/}
            {/*        <Presentation color="#6366f1" size="20"/>*/}
            {/*      </View>*/}
            {/*    </View>*/}
            {/*  </Grid.Item>*/}

            {/*  /!* 预留其他功能位置 *!/*/}
            {/*  <Grid.Item text={''}>*/}
            {/*    <View className="text-center">*/}
            {/*      <View className="w-12 h-12 bg-gray-50 rounded-xl flex items-center justify-center mx-auto mb-2">*/}
            {/*      </View>*/}
            {/*    </View>*/}
            {/*  </Grid.Item>*/}

            {/*  <Grid.Item text={''}>*/}
            {/*    <View className="text-center">*/}
            {/*      <View className="w-12 h-12 bg-gray-50 rounded-xl flex items-center justify-center mx-auto mb-2">*/}
            {/*      </View>*/}
            {/*    </View>*/}
            {/*  </Grid.Item>*/}

            {/*  <Grid.Item text={''}>*/}
            {/*    <View className="text-center">*/}
            {/*      <View className="w-12 h-12 bg-gray-50 rounded-xl flex items-center justify-center mx-auto mb-2">*/}
            {/*      </View>*/}
            {/*    </View>*/}
            {/*  </Grid.Item>*/}
            {/*</Grid>*/}
          </ConfigProvider>
        </View>
        <View className="bg-white mx-4 mt-4 rounded-xl p-4">
          <View className="font-semibold mb-4 text-gray-800">我的推荐人</View>
          <View className={'flex items-center gap-2'}>
            <Avatar src={dealer?.dealerAvatar}/>
            <View className={'flex flex-col'}>
              <Text className="text-lg font-semibold">{dealer?.dealerName}</Text>
              <Text className="text-gray-500"
                    onClick={() => Taro.makePhoneCall({phoneNumber: `${dealer?.dealerPhone}`})}>{dealer?.dealerPhone}</Text>
            </View>
          </View>
        </View>
      </View>

      {/* 底部安全区域 */}
      <View className="h-20"></View>
    </View>
  )
}

export default DealerIndex