import React from 'react'
import {View, Text} from '@tarojs/components'
import {Button, Cell, CellGroup, Tag, Grid, Avatar, Divider} from '@nutui/nutui-react-taro'
import {
  User,
  Shopping,
  Dongdong,
  Share,
  Service,
  ArrowRight,
  Purse,
  People
} from '@nutui/icons-react-taro'
import {useDealerUser} from '@/hooks/useDealerUser'
import { gradientUtils, businessGradients, cardGradients, textGradients } from '@/styles/gradients'
import Taro from '@tarojs/taro'

const DealerIndex: React.FC = () => {
  const {
    dealerUser,
    loading,
    error,
    refresh,
  } = useDealerUser()

  // 跳转到申请页面
  const navigateToApply = () => {
    Taro.navigateTo({
      url: '/dealer/apply/add'
    })
  }

  // 导航到各个功能页面
  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
  }

  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-50 min-h-screen">
      <View>
        {/*头部信息*/}
        {dealerUser && (
          <View className="px-4 py-6 relative overflow-hidden" style={{
            background: getGradientBackground(dealerUser?.themeColor)
          }}>
            {/* 装饰性背景元素 */}
            <View className="absolute top-0 right-0 w-32 h-32 rounded-full opacity-10" style={{
              background: 'radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%)',
              transform: 'translate(50%, -50%)'
            }}></View>
            <View className="absolute bottom-0 left-0 w-24 h-24 rounded-full opacity-10" style={{
              background: 'radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%)',
              transform: 'translate(-50%, 50%)'
            }}></View>
            <View className="absolute top-1/2 left-1/2 w-16 h-16 rounded-full opacity-5" style={{
              background: 'radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%)',
              transform: 'translate(-50%, -50%)'
            }}></View>
            <View className="flex items-center justify-between relative z-10">
              <Avatar
                size="50"
                src={dealerUser?.qrcode}
                icon={<User/>}
                className="mr-4"
                style={{
                  border: '2px solid rgba(255, 255, 255, 0.3)',
                  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)'
                }}
              />
              <View className="flex-1">
                <Text className="text-white text-lg font-bold mb-1" style={{
                  textShadow: '0 1px 2px rgba(0, 0, 0, 0.1)'
                }}>
                  {dealerUser?.realName || '分销商'}
                </Text>
                <Text className="text-sm" style={{
                  color: 'rgba(255, 255, 255, 0.8)'
                }}>
                  ID: {dealerUser.userId} | 推荐人: {dealerUser.refereeId || '无'}
                </Text>
              </View>
              <View className="text-right">
                <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}>
            <Text className="font-semibold mb-4 text-gray-800">佣金统计</Text>
            <View className="grid grid-cols-3 gap-4">
              <View className="text-center p-3 rounded-lg" style={{
                background: businessGradients.money.available,
                backgroundImage: 'linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%)'
              }}>
                <Text className="text-2xl font-bold mb-1 text-white drop-shadow-sm">
                  ¥{formatMoney(dealerUser.money)}
                </Text>
                <Text className="text-xs text-white text-opacity-90">可提现</Text>
              </View>
              <View className="text-center p-3 rounded-lg" style={{
                background: businessGradients.money.frozen,
                backgroundImage: 'linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%)'
              }}>
                <Text className="text-2xl font-bold mb-1 text-white drop-shadow-sm">
                  ¥{formatMoney(dealerUser.freezeMoney)}
                </Text>
                <Text className="text-xs text-white text-opacity-90">冻结中</Text>
              </View>
              <View className="text-center p-3 rounded-lg" style={{
                background: businessGradients.money.total,
                backgroundImage: 'linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%)'
              }}>
                <Text className="text-2xl font-bold mb-1 text-white drop-shadow-sm">
                  ¥{formatMoney(dealerUser.totalMoney)}
                </Text>
                <Text className="text-xs text-white text-opacity-90">累计收益</Text>
              </View>
            </View>
          </View>
        )}

        {/* 团队统计 */}
        {dealerUser && (
          <View className="bg-white mx-4 mt-4 rounded-xl p-4">
            <View className="flex items-center justify-between mb-4">
              <Text className="font-semibold text-gray-800">我的团队</Text>
              <Text
                className="text-blue-500 text-sm"
                onClick={() => navigateToPage('/dealer/team/index')}
              >
                查看详情 <ArrowRight size="12"/>
              </Text>
            </View>
            <View className="grid grid-cols-3 gap-4">
              <View className="text-center">
                <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">
                <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">
                <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">
          <Text className="font-semibold mb-4 text-gray-800">分销工具</Text>
          <Grid columns={4} gap={16}>
            <Grid.Item 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>
                <Text className="text-xs text-gray-600">分销订单</Text>
              </View>
            </Grid.Item>

            <Grid.Item 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>
                <Text className="text-xs text-gray-600">提现申请</Text>
              </View>
            </Grid.Item>

            <Grid.Item onClick={() => navigateToPage('/dealer/team/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>
                <Text className="text-xs text-gray-600">我的团队</Text>
              </View>
            </Grid.Item>

            <Grid.Item 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">
                  <Dongdong color="#f59e0b" size="20"/>
                </View>
                <Text className="text-xs text-gray-600">推广二维码</Text>
              </View>
            </Grid.Item>
          </Grid>
        </View>
      </View>

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

export default DealerIndex