import React, { useState } from 'react'
import { View, Text } from '@tarojs/components'
import { Empty, Tabs, Avatar, Tag, Progress } from '@nutui/nutui-react-taro'
import { User, Star, StarFill } from '@nutui/icons-react-taro'

const DealerTeam: React.FC = () => {
  const [activeTab, setActiveTab] = useState('0')

  // 模拟团队数据
  const teamStats = {
    total: 28,
    firstLevel: 12,
    secondLevel: 10,
    thirdLevel: 6,
    monthlyCommission: '2,580.50'
  }

  const teamMembers = [
    {
      id: '1',
      name: '张小明',
      level: 1,
      joinTime: '2024-11-15',
      orderCount: 15,
      commission: '580.50',
      status: 'active',
      avatar: '',
      subMembers: 3
    },
    {
      id: '2',
      name: '李小红',
      level: 1,
      joinTime: '2024-12-01',
      orderCount: 8,
      commission: '320.00',
      status: 'active',
      avatar: '',
      subMembers: 2
    },
    {
      id: '3',
      name: '王小华',
      level: 2,
      joinTime: '2024-12-10',
      orderCount: 5,
      commission: '150.00',
      status: 'inactive',
      avatar: '',
      subMembers: 0
    }
  ]

  const getLevelColor = (level: number) => {
    switch (level) {
      case 1: return '#f59e0b'
      case 2: return '#8b5cf6'
      case 3: return '#ec4899'
      default: return '#6b7280'
    }
  }

  const getLevelIcon = (level: number) => {
    switch (level) {
      case 1: return <StarFill color={getLevelColor(level)} size="16" />
      case 2: return <Star color={getLevelColor(level)} size="16" />
      case 3: return <User color={getLevelColor(level)} size="16" />
      default: return <User color={getLevelColor(level)} size="16" />
    }
  }

  const renderMemberItem = (member: any) => (
    <View key={member.id} className="bg-white rounded-lg p-4 mb-3 shadow-sm">
      <View className="flex items-center mb-3">
        <Avatar
          size="40"
          src={member.avatar}
          icon={<User />}
          className="mr-3"
        />
        <View className="flex-1">
          <View className="flex items-center mb-1">
            <Text className="font-semibold text-gray-800 mr-2">
              {member.name}
            </Text>
            {getLevelIcon(member.level)}
            <Text className="text-xs text-gray-500 ml-1">
              {member.level}级
            </Text>
          </View>
          <Text className="text-xs text-gray-500">
            加入时间：{member.joinTime}
          </Text>
        </View>
        <View className="text-right">
          <Tag
            type={member.status === 'active' ? 'success' : 'default'}
          >
            {member.status === 'active' ? '活跃' : '沉默'}
          </Tag>
        </View>
      </View>

      <View className="grid grid-cols-3 gap-4 text-center">
        <View>
          <Text className="text-sm font-semibold text-blue-600">
            {member.orderCount}
          </Text>
          <Text className="text-xs text-gray-500">订单数</Text>
        </View>
        <View>
          <Text className="text-sm font-semibold text-green-600">
            ¥{member.commission}
          </Text>
          <Text className="text-xs text-gray-500">贡献佣金</Text>
        </View>
        <View>
          <Text className="text-sm font-semibold text-purple-600">
            {member.subMembers}
          </Text>
          <Text className="text-xs text-gray-500">下级成员</Text>
        </View>
      </View>
    </View>
  )

  const renderOverview = () => (
    <View className="p-4">
      {/* 团队统计卡片 */}
      <View className="rounded-xl p-6 mb-6 text-white relative overflow-hidden" style={{
        background: 'linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)'
      }}>
        {/* 装饰背景 - 小程序兼容版本 */}
        <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-20 h-20 rounded-full" style={{
          backgroundColor: 'rgba(255, 255, 255, 0.05)',
          bottom: '-10px',
          left: '-10px'
        }}></View>

        <View className="relative z-10">
          <Text className="text-lg font-bold mb-4 text-white">团队总览</Text>
          <View className="grid grid-cols-2 gap-4">
            <View>
              <Text className="text-2xl font-bold mb-1 text-white">{teamStats.total}</Text>
              <Text className="text-sm" style={{ color: 'rgba(255, 255, 255, 0.8)' }}>团队总人数</Text>
            </View>
            <View>
              <Text className="text-2xl font-bold mb-1 text-white">¥{teamStats.monthlyCommission}</Text>
              <Text className="text-sm" style={{ color: 'rgba(255, 255, 255, 0.8)' }}>本月团队佣金</Text>
            </View>
          </View>
        </View>
      </View>

      {/* 层级分布 */}
      <View className="bg-white rounded-xl p-4 mb-4">
        <Text className="font-semibold mb-4 text-gray-800">层级分布</Text>
        <View className="gap-2">
          <View className="flex items-center justify-between">
            <View className="flex items-center">
              <StarFill color="#f59e0b" size="16" className="mr-2" />
              <Text className="text-sm">一级成员</Text>
            </View>
            <View className="flex items-center">
              <Text className="text-sm font-semibold mr-2">{teamStats.firstLevel}</Text>
              <Progress
                percent={(teamStats.firstLevel / teamStats.total) * 100}
                strokeWidth="6"
                background="#f59e0b"
                className="w-20"
              />
            </View>
          </View>

          <View className="flex items-center justify-between">
            <View className="flex items-center">
              <Star color="#8b5cf6" size="16" className="mr-2" />
              <Text className="text-sm">二级成员</Text>
            </View>
            <View className="flex items-center">
              <Text className="text-sm font-semibold mr-2">{teamStats.secondLevel}</Text>
              <Progress
                percent={(teamStats.secondLevel / teamStats.total) * 100}
                strokeWidth="6"
                background="#8b5cf6"
                className="w-20"
              />
            </View>
          </View>

          <View className="flex items-center justify-between">
            <View className="flex items-center">
              <User color="#ec4899" size="16" className="mr-2" />
              <Text className="text-sm">三级成员</Text>
            </View>
            <View className="flex items-center">
              <Text className="text-sm font-semibold mr-2">{teamStats.thirdLevel}</Text>
              <Progress
                percent={(teamStats.thirdLevel / teamStats.total) * 100}
                strokeWidth="6"
                background="#ec4899"
                className="w-20"
              />
            </View>
          </View>
        </View>
      </View>

      {/* 最新成员 */}
      <View className="bg-white rounded-xl p-4">
        <Text className="font-semibold mb-4 text-gray-800">最新成员</Text>
        {teamMembers.slice(0, 3).map(renderMemberItem)}
      </View>
    </View>
  )

  const renderMemberList = (level?: number) => (
    <View className="p-4">
      {teamMembers
        .filter(member => !level || member.level === level)
        .map(renderMemberItem)}

      {teamMembers.filter(member => !level || member.level === level).length === 0 && (
        <Empty description={`暂无${level ? level + '级' : ''}团队成员`} />
      )}
    </View>
  )

  return (
    <View className="bg-gray-50 min-h-screen">
      <Tabs value={activeTab} onChange={() => setActiveTab}>
        <Tabs.TabPane title="团队总览" value="0">
          {renderOverview()}
        </Tabs.TabPane>

        <Tabs.TabPane title="一级成员" value="1">
          {renderMemberList(1)}
        </Tabs.TabPane>

        <Tabs.TabPane title="二级成员" value="2">
          {renderMemberList(2)}
        </Tabs.TabPane>

        <Tabs.TabPane title="三级成员" value="3">
          {renderMemberList(3)}
        </Tabs.TabPane>
      </Tabs>
    </View>
  )
}

export default DealerTeam