import React, { useState } from 'react'
import { View, Text } from '@tarojs/components'
import { Button, Tabs, TabPane } from '@nutui/nutui-react-taro'
import GiftCard from '@/components/GiftCard'
import { ShopGift } from '@/api/shop/shopGift/model'

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

  // 模拟不同类型的礼品卡数据
  const mockGifts: 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: '海底捞火锅代金券',
      goodsImage: 'https://img.alicdn.com/imgextra/i3/2206571109/O1CN01DEF456_!!2206571109.jpg',
      description: '享受正宗川味火锅',
      code: 'HDL2024555666777',
      goodsId: 103,
      faceValue: '200',
      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.goodsName || gift.name || '礼品卡',
      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.goodsId && {
          specification: `礼品卡面值：¥${gift.faceValue}`,
          category: getTypeText(gift.type),
          tags: [
            getTypeText(gift.type),
            gift.useStatus === 0 ? '可使用' : gift.useStatus === 1 ? '已使用' : '已过期',
            '全国通用',
            gift.type === 20 ? '即买即用' : '需预约'
          ].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: () => handleUse(gift),
      onDetail: () => handleDetail(gift),
      onClick: () => handleClick(gift)
    }
  }

  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'
    }
  }

  const handleUse = (gift: ShopGift) => {
    console.log('使用礼品卡:', gift.goodsName)
  }

  const handleDetail = (gift: ShopGift) => {
    console.log('查看详情:', gift.goodsName)
  }

  const handleClick = (gift: ShopGift) => {
    console.log('点击礼品卡:', gift.goodsName)
  }

  // 根据状态筛选礼品卡
  const getFilteredGifts = () => {
    const statusMap = {
      '0': 0, // 可用
      '1': 1, // 已使用
      '2': 2  // 已过期
    }
    const targetStatus = statusMap[activeTab as keyof typeof statusMap]
    return mockGifts.filter(gift => gift.useStatus === targetStatus)
  }

  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>

      {/* Tab切换 */}
      <View className="bg-white">
        <Tabs value={activeTab} onChange={setActiveTab}>
          <TabPane title="可用" value="0" />
          <TabPane title="已使用" value="1" />
          <TabPane title="已过期" value="2" />
        </Tabs>
      </View>

      {/* 礼品卡列表 */}
      <View className="p-4">
        {getFilteredGifts().map((gift) => (
          <View key={gift.id} className="mb-4">
            <GiftCard {...transformGiftData(gift)} />
          </View>
        ))}
        
        {getFilteredGifts().length === 0 && (
          <View className="text-center py-16">
            <Text className="text-gray-500">
              {activeTab === '0' ? '暂无可用礼品卡' : 
               activeTab === '1' ? '暂无已使用礼品卡' : 
               '暂无已过期礼品卡'}
            </Text>
          </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">• 显示商品图片（goodsImage）</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>
  )
}

export default GiftCardDemo