import React from 'react'
import { View, Text } from '@tarojs/components'
import { Button, Cell, CellGroup, Tag } from '@nutui/nutui-react-taro'
import { useDealerUser } from '@/hooks/useDealerUser'
import Taro from '@tarojs/taro'

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

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

  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 className="bg-white px-4 py-3 border-b border-gray-100">
        <Text className="text-lg font-bold text-center">
          经销商信息
        </Text>
      </View>

      {!dealerUser ? (
        // 非经销商状态
        <View className="bg-white mx-4 mt-4 rounded-lg p-6">
          <View className="text-center py-8">
            <Text className="text-gray-500 mb-4">您还不是经销商</Text>
            <Text className="text-sm text-gray-400 mb-6">
              成为经销商后可享受专属价格和佣金收益
            </Text>
            <Button
              type="primary"
              size="large"
              onClick={navigateToApply}
            >
              申请成为经销商
            </Button>
          </View>
        </View>
      ) : (
        // 经销商信息展示
        <View>
          {/* 状态卡片 */}
          <View className="bg-white mx-4 mt-4 rounded-lg p-4">
            <View className="flex items-center justify-between mb-4">
              <Text className="text-lg font-semibold">经销商状态</Text>
              <Tag>
                {dealerUser.realName}
              </Tag>
            </View>

            {/* 基本信息 */}
            <CellGroup>
              <Cell
                title="经销商ID"
                extra={dealerUser.userId || '-'}
              />
              <Cell
                title="refereeId"
                extra={dealerUser.refereeId || '-'}
              />
              <Cell
                title="成为经销商时间"
                extra={
                  dealerUser.money
                }
              />

            </CellGroup>

            {/* 操作按钮 */}
            <View className="mt-6 gap-2">
              <Button
                type="primary"
                size="large"
                loading={loading}
              >
                检查状态
              </Button>
            </View>
          </View>

          {/* 经销商权益 */}
          <View className="bg-white mx-4 mt-4 rounded-lg p-4">
            <Text className="font-semibold mb-3">经销商权益</Text>
            <View className="gap-2">
              <Text className="text-sm text-gray-600">
                • 享受经销商专属价格
              </Text>
              <Text className="text-sm text-gray-600">
                • 获得推广佣金收益
              </Text>
              <Text className="text-sm text-gray-600">
                • 优先获得新品信息
              </Text>
              <Text className="text-sm text-gray-600">
                • 专属客服支持
              </Text>
            </View>
          </View>

          {/* 佣金统计 */}
          <View className="bg-white mx-4 mt-4 rounded-lg p-4">
            <Text className="font-semibold mb-3">佣金统计</Text>
            <View className="grid grid-cols-3 gap-4">
              <View className="text-center">
                <Text className="text-lg font-bold text-blue-600">0</Text>
                <Text className="text-sm text-gray-500">今日佣金</Text>
              </View>
              <View className="text-center">
                <Text className="text-lg font-bold text-green-600">0</Text>
                <Text className="text-sm text-gray-500">本月佣金</Text>
              </View>
              <View className="text-center">
                <Text className="text-lg font-bold text-orange-600">0</Text>
                <Text className="text-sm text-gray-500">累计佣金</Text>
              </View>
            </View>
          </View>
        </View>
      )}

      {/* 刷新按钮 */}
      <View className="text-center py-4">
        <Text
          className="text-blue-500 text-sm"
          onClick={refresh}
        >
          点击刷新数据
        </Text>
      </View>
    </View>
  )
}

export default DealerInfo