import React from 'react'
import { View, Text } from '@tarojs/components'
import GiftCard from '@/components/GiftCard'
import { ShopGift } from '@/api/shop/shopGift/model'

const StatusTest: React.FC = () => {
  // 测试不同状态的礼品卡
  const testGifts: ShopGift[] = [
    {
      id: 1,
      name: '未使用礼品卡',
      goodsName: '杜尔伯特草原奶香牛上脑（2kg，分4小包）',
      goodsImage: 'https://img.alicdn.com/imgextra/i1/2206571109/O1CN01QZxQJJ1Uw8QZxQJJ_!!2206571109.jpg',
      description: '未使用状态的礼品卡',
      code: 'UNUSED1234567890',
      goodsId: 101,
      faceValue: '200',
      type: 10,
      status: 0, // 未使用
      expireTime: '2024-12-31 23:59:59',
      instructions: '适用于实物商品兑换',
      contactInfo: '400-800-8888'
    },
    {
      id: 2,
      name: '已使用礼品卡',
      goodsName: '星巴克经典拿铁咖啡券',
      goodsImage: 'https://img.alicdn.com/imgextra/i2/2206571109/O1CN01ABC123_!!2206571109.jpg',
      description: '已使用状态的礼品卡',
      code: 'USED001234567890',
      goodsId: 102,
      faceValue: '100',
      type: 20,
      status: 1, // 已使用
      useTime: '2024-08-15 14:30:00',
      useLocation: '星巴克王府井店',
      instructions: '适用于虚拟商品兑换',
      contactInfo: '400-800-8888'
    },
    {
      id: 3,
      name: '失效礼品卡',
      goodsName: '海底捞4人套餐券',
      goodsImage: 'https://img.alicdn.com/imgextra/i3/2206571109/O1CN01DEF456_!!2206571109.jpg',
      description: '失效状态的礼品卡',
      code: 'INVALID1234567890',
      goodsId: 103,
      faceValue: '300',
      type: 30,
      status: 2, // 失效
      expireTime: '2024-07-31 23:59:59',
      instructions: '适用于服务类商品兑换',
      contactInfo: '400-800-8888'
    }
  ]

  // 转换数据格式
  const transformGiftData = (gift: ShopGift) => {
    return {
      id: gift.id || 0,
      name: gift.name || '礼品卡',
      goodsName: gift.goodsName,
      description: gift.description || gift.instructions,
      code: gift.code,
      goodsImage: gift.goodsImage,
      faceValue: gift.faceValue,
      type: gift.type,
      status: gift.status, // 使用 status 字段
      expireTime: gift.expireTime,
      useTime: gift.useTime,
      useLocation: gift.useLocation,
      contactInfo: gift.contactInfo,
      goodsInfo: {
        ...((gift.goodsName || gift.goodsId) && {
          specification: `礼品卡面值：¥${gift.faceValue}`,
          category: getTypeText(gift.type),
          tags: [
            getTypeText(gift.type),
            getStatusText(gift.status),
            '测试卡片'
          ].filter(Boolean),
          instructions: [
            '这是状态测试卡片',
            '请检查状态显示是否正确',
            '不可兑换现金'
          ],
          notices: [
            '这是测试数据',
            '请勿实际使用',
            '仅用于状态测试'
          ]
        })
      },
      showCode: gift.status === 0, // 只有未使用状态显示兑换码
      showUseBtn: gift.status === 0, // 只有未使用状态显示使用按钮
      showDetailBtn: true,
      showGoodsDetail: true,
      theme: getThemeByType(gift.type),
      onUse: () => console.log('使用:', gift.goodsName || gift.name),
      onDetail: () => console.log('详情:', gift.goodsName || gift.name),
      onClick: () => console.log('点击:', gift.goodsName || gift.name)
    }
  }

  const getTypeText = (type?: number): string => {
    switch (type) {
      case 10: return '实物礼品卡'
      case 20: return '虚拟礼品卡'
      case 30: return '服务礼品卡'
      default: return '通用礼品卡'
    }
  }

  const getStatusText = (status?: number): string => {
    switch (status) {
      case 0: return '未使用'
      case 1: return '已使用'
      case 2: return '失效'
      default: return '未知状态'
    }
  }

  const getThemeByType = (type?: number): 'gold' | 'silver' | 'bronze' | 'blue' | 'green' | 'purple' => {
    switch (type) {
      case 10: return 'gold'
      case 20: return 'blue'
      case 30: return 'green'
      default: return 'purple'
    }
  }

  const getExpectedBehavior = (status?: number): string => {
    switch (status) {
      case 0: return '显示兑换码和使用按钮'
      case 1: return '显示使用时间，无兑换码和使用按钮'
      case 2: return '显示失效状态，无兑换码和使用按钮'
      default: return '未知行为'
    }
  }

  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>
        <Text className="text-sm text-gray-600 text-center mt-1">
          验证 status 字段替代 useStatus 字段
        </Text>
      </View>

      {/* 状态说明 */}
      <View className="bg-white mx-4 mt-4 p-4 rounded-lg">
        <Text className="font-bold mb-2">状态字段说明：</Text>
        <View className="space-y-1">
          <Text className="text-sm text-gray-600">• status=0 (未使用) → 显示"未使用"标签</Text>
          <Text className="text-sm text-gray-600">• status=1 (已使用) → 显示"已使用"标签</Text>
          <Text className="text-sm text-gray-600">• status=2 (失效) → 显示"失效"标签</Text>
        </View>
      </View>

      {/* 修改说明 */}
      <View className="bg-blue-50 mx-4 mt-4 p-4 rounded-lg">
        <Text className="font-bold mb-2 text-blue-800">字段修改说明：</Text>
        <View className="space-y-1">
          <Text className="text-sm text-blue-700">✅ useStatus 字段已废弃</Text>
          <Text className="text-sm text-blue-700">✅ 使用 status 字段替代</Text>
          <Text className="text-sm text-blue-700">✅ 状态文本更新：可用→未使用，已过期→失效</Text>
          <Text className="text-sm text-blue-700">✅ Tab标签文本同步更新</Text>
        </View>
      </View>

      {/* 礼品卡列表 */}
      <View className="p-4">
        {testGifts.map((gift, index) => (
          <View key={gift.id} className="mb-4">
            <View className="bg-green-50 px-3 py-2 rounded-t-lg">
              <Text className="text-sm font-medium text-green-800">
                测试 {index + 1}: status={gift.status} → {getStatusText(gift.status)}
              </Text>
              <Text className="text-xs text-green-600">
                预期行为: {getExpectedBehavior(gift.status)}
              </Text>
            </View>
            <GiftCard {...transformGiftData(gift)} />
          </View>
        ))}
      </View>

      {/* 验证清单 */}
      <View className="bg-white mx-4 mb-4 p-4 rounded-lg">
        <Text className="font-bold mb-2">验证清单：</Text>
        <View className="space-y-1">
          <Text className="text-sm text-gray-600">□ status=0 的卡片显示"未使用"标签</Text>
          <Text className="text-sm text-gray-600">□ status=0 的卡片显示兑换码和使用按钮</Text>
          <Text className="text-sm text-gray-600">□ status=1 的卡片显示"已使用"标签</Text>
          <Text className="text-sm text-gray-600">□ status=1 的卡片显示使用时间</Text>
          <Text className="text-sm text-gray-600">□ status=1 的卡片不显示兑换码和使用按钮</Text>
          <Text className="text-sm text-gray-600">□ status=2 的卡片显示"失效"标签</Text>
          <Text className="text-sm text-gray-600">□ status=2 的卡片有状态遮罩</Text>
          <Text className="text-sm text-gray-600">□ 所有非0状态的卡片都有disabled样式</Text>
        </View>
      </View>

      {/* API 参数说明 */}
      <View className="bg-yellow-50 mx-4 mb-4 p-4 rounded-lg">
        <Text className="font-bold mb-2 text-yellow-800">API 参数更新：</Text>
        <View className="space-y-1">
          <Text className="text-sm text-yellow-700">• 筛选参数：useStatus → status</Text>
          <Text className="text-sm text-yellow-700">• 返回字段：useStatus → status</Text>
          <Text className="text-sm text-yellow-700">• 状态值：0未使用 1已使用 2失效</Text>
        </View>
      </View>
    </View>
  )
}

export default StatusTest