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

const GoodsNameTest: React.FC = () => {
  // 测试数据：包含 goodsName 字段的礼品卡
  const testGifts: ShopGift[] = [
    {
      id: 1,
      name: '星巴克礼品卡',
      goodsName: '星巴克经典拿铁咖啡券', // 后端新增的商品名称字段
      goodsImage: 'https://img.alicdn.com/imgextra/i1/2206571109/O1CN01QZxQJJ1Uw8QZxQJJ_!!2206571109.jpg',
      description: '享受醇香咖啡时光',
      code: 'SB2024001234567890',
      goodsId: 101,
      faceValue: '100',
      type: 20,
      useStatus: 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: 'MCD2024987654321',
      goodsId: 102,
      faceValue: '50',
      type: 20,
      useStatus: 0,
      expireTime: '2024-10-31 23:59:59',
      instructions: '适用于全国麦当劳门店',
      contactInfo: '400-517-517'
    },
    {
      id: 3,
      name: '通用礼品卡',
      // 没有 goodsName，应该显示 name
      goodsImage: 'https://img.alicdn.com/imgextra/i3/2206571109/O1CN01DEF456_!!2206571109.jpg',
      description: '通用型礼品卡',
      code: 'GEN2024555666777',
      faceValue: '200',
      type: 10,
      useStatus: 0,
      expireTime: '2024-11-30 23:59:59',
      instructions: '可在指定商户使用',
      contactInfo: '400-123-456'
    },
    {
      id: 4,
      name: '海底捞火锅券',
      goodsName: '海底捞4人套餐券', // 已使用状态的商品
      goodsImage: 'https://img.alicdn.com/imgextra/i4/2206571109/O1CN01GHI789_!!2206571109.jpg',
      description: '享受正宗川味火锅',
      code: 'HDL2024888999000',
      goodsId: 103,
      faceValue: '300',
      type: 30,
      useStatus: 1, // 已使用
      useTime: '2024-08-15 19:30:00',
      useLocation: '海底捞王府井店',
      instructions: '需提前预约',
      contactInfo: '400-869-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,
      useStatus: gift.useStatus,
      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),
            gift.useStatus === 0 ? '可使用' : gift.useStatus === 1 ? '已使用' : '已过期',
            ...(gift.goodsName ? ['商品礼品卡'] : [])
          ].filter(Boolean),
          instructions: gift.instructions ? [gift.instructions] : [
            '请在有效期内使用',
            '出示兑换码即可使用',
            '不可兑换现金'
          ],
          notices: [
            '礼品卡一经使用不可退换',
            '请妥善保管兑换码',
            '如有疑问请联系客服'
          ]
        })
      },
      showCode: gift.useStatus === 0,
      showUseBtn: gift.useStatus === 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 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 'silver'
    }
  }

  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">
          测试 goodsName 字段的显示效果
        </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">• 第1张：有 goodsName，显示"星巴克经典拿铁咖啡券"</Text>
          <Text className="text-sm text-gray-600">• 第2张：有 goodsName，显示"麦当劳巨无霸套餐券"</Text>
          <Text className="text-sm text-gray-600">• 第3张：无 goodsName，显示"通用礼品卡"</Text>
          <Text className="text-sm text-gray-600">• 第4张：已使用状态，显示"海底捞4人套餐券"</Text>
        </View>
      </View>

      {/* 礼品卡列表 */}
      <View className="p-4">
        {testGifts.map((gift, index) => (
          <View key={gift.id} className="mb-4">
            <View className="bg-blue-50 px-3 py-2 rounded-t-lg">
              <Text className="text-sm font-medium text-blue-800">
                测试 {index + 1}: {gift.goodsName ? `goodsName="${gift.goodsName}"` : '无 goodsName'}
              </Text>
              <Text className="text-xs text-blue-600">
                name="{gift.name}"
              </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">✅ 有 goodsName 时，卡片标题显示商品名称</Text>
          <Text className="text-sm text-gray-600">✅ 无 goodsName 时，卡片标题显示礼品卡名称</Text>
          <Text className="text-sm text-gray-600">✅ 商品信息区域显示相关标签和说明</Text>
          <Text className="text-sm text-gray-600">✅ 不同状态的视觉效果正确</Text>
        </View>
      </View>
    </View>
  )
}

export default GoodsNameTest