import React from 'react'
import { View, Text } from '@tarojs/components'
import { Tag, Rate } from '@nutui/nutui-react-taro'
import { Gift, Clock, Location } from '@nutui/icons-react-taro'
import dayjs from 'dayjs'
import './GiftCard.scss'

export interface GiftCardProps {
  /** 礼品卡ID */
  id: number
  /** 礼品卡名称 */
  name: string
  /** 商品名称 */
  goodsName?: string
  /** 礼品卡描述 */
  description?: string
  /** 礼品卡兑换码 */
  code?: string
  /** 商品图片 */
  goodsImage?: string
  /** 商品图片列表 */
  goodsImages?: string[]
  /** 礼品卡面值 */
  faceValue?: string
  /** 商品原价 */
  originalPrice?: string
  /** 礼品卡类型：10-实物礼品卡 20-虚拟礼品卡 30-服务礼品卡 */
  type?: number
  /** 状态：0-未使用 1-已使用 2-失效 */
  status?: number
  /** 过期时间 */
  expireTime?: string
  /** 使用时间 */
  useTime?: string
  /** 使用地址 */
  useLocation?: string
  /** 客服联系方式 */
  contactInfo?: string
  /** 商品信息 */
  goodsInfo?: {
    /** 商品品牌 */
    brand?: string
    /** 商品规格 */
    specification?: string
    /** 商品分类 */
    category?: string
    /** 库存数量 */
    stock?: number
    /** 商品评分 */
    rating?: number
    /** 评价数量 */
    reviewCount?: number
    /** 商品标签 */
    tags?: string[]
    /** 使用说明 */
    instructions?: string[]
    /** 注意事项 */
    notices?: string[]
    /** 适用门店 */
    applicableStores?: string[]
  }
  /** 优惠信息 */
  promotionInfo?: {
    /** 优惠类型 */
    type?: 'discount' | 'gift' | 'cashback'
    /** 优惠描述 */
    description?: string
    /** 优惠金额 */
    amount?: string
    /** 优惠有效期 */
    validUntil?: string
  }
  /** 是否显示兑换码 */
  showCode?: boolean
  /** 是否显示使用按钮 */
  showUseBtn?: boolean
  /** 是否显示详情按钮 */
  showDetailBtn?: boolean
  /** 是否显示商品详情 */
  showGoodsDetail?: boolean
  /** 卡片主题色 */
  theme?: 'gold' | 'silver' | 'bronze' | 'blue' | 'green' | 'purple'
  /** 使用按钮点击事件 */
  onUse?: () => void
  /** 详情按钮点击事件 */
  onDetail?: () => void
  /** 卡片点击事件 */
  onClick?: () => void
}

const GiftCard: React.FC<GiftCardProps> = ({
  name,
  goodsName,
  code,
  faceValue,
  originalPrice,
  type = 10,
  status = 0,
  expireTime,
  useTime,
  useLocation,
  goodsInfo,
  promotionInfo,
  showCode = false,
  showGoodsDetail = true,
  theme = 'gold',
  onClick
}) => {

  // 获取显示名称，优先使用商品名称
  // const displayName = goodsName || name
  // 获取礼品卡类型文本
  const getTypeText = () => {
    switch (type) {
      case 10: return '实物礼品卡'
      case 20: return '虚拟礼品卡'
      case 30: return '服务礼品卡'
      default: return '礼品卡'
    }
  }

  // 获取状态信息
  const getStatusInfo = () => {
    switch (status) {
      case 0:
        return {
          text: '未使用',
          color: 'success' as const,
          bgColor: 'bg-green-100',
          textColor: 'text-green-600'
        }
      case 1:
        return {
          text: '已使用',
          color: 'warning' as const,
          bgColor: 'bg-gray-100',
          textColor: 'text-gray-600'
        }
      case 2:
        return {
          text: '失效',
          color: 'danger' as const,
          bgColor: 'bg-red-100',
          textColor: 'text-red-600'
        }
      default:
        return {
          text: '未知',
          color: 'default' as const,
          bgColor: 'bg-gray-100',
          textColor: 'text-gray-600'
        }
    }
  }

  // 获取主题样式类名
  const getThemeClass = () => {
    return `gift-card-${theme}`
  }

  // 格式化过期时间显示
  const formatExpireTime = () => {
    if (!expireTime) return ''

    const expire = dayjs(expireTime)
    const now = dayjs()
    const diffDays = expire.diff(now, 'day')

    if (diffDays < 0) {
      return '已过期'
    } else if (diffDays === 0) {
      return '今天过期'
    } else if (diffDays <= 7) {
      return `${diffDays}天后过期`
    } else {
      return expire.format('YYYY-MM-DD 过期')
    }
  }

  // 格式化兑换码显示
  const formatCode = () => {
    if (!code) return ''
    if (!showCode) return code.replace(/(.{4})/g, '$1 ').trim()
    return code.replace(/(.{4})/g, '$1 ').trim()
  }

  const statusInfo = getStatusInfo()

  return (
    <View
      className={`gift-card ${getThemeClass()} ${status !== 0 ? 'disabled' : ''}`}
      onClick={onClick}
    >
      {/* 卡片头部 */}
      <View className="gift-card-header">
        <View className="gift-card-logo">
          <Gift size="24" className="text-white" />
        </View>
        <View className="gift-card-title">
          <Text className="text-left title-text">{getTypeText()}</Text>
          <Text className="text-left type-text">{name}</Text>
        </View>
        <View className="gift-card-status">
          <Tag type={statusInfo.color}>{statusInfo.text}</Tag>
        </View>
      </View>

      {/* 卡片主体 */}
      <View className="gift-card-body">
        <View className="gift-card-content">

          <View className="gift-info">
            {/* 商品基本信息 */}
            <View className="goods-basic-info">
              {/* 商品名称 */}
              {goodsName && (
                <View className="brand-category">
                  <Text className="brand-text">{goodsName}</Text>
                </View>
              )}

              {/* 价格信息 */}
              <View className="price-info">
                {faceValue && (
                  <View className="current-price">
                    <Text className="price-symbol">¥</Text>
                    <Text className="price-amount">{faceValue}</Text>
                  </View>
                )}
                {originalPrice && originalPrice !== faceValue && (
                  <Text className="original-price">原价¥{originalPrice}</Text>
                )}
              </View>

              {/* 评分和评价 */}
              {goodsInfo?.rating && (
                <View className="rating-info">
                  <Rate
                    value={goodsInfo.rating}
                  />
                  <Text className="rating-text">{goodsInfo.rating}</Text>
                  {goodsInfo.reviewCount && (
                    <Text className="review-count">({goodsInfo.reviewCount}条评价)</Text>
                  )}
                </View>
              )}
            </View>

            {/* 规格和库存 */}
            {showGoodsDetail && (goodsInfo?.specification || goodsInfo?.stock !== undefined) && (
              <View className="goods-specs">
                {goodsInfo.stock !== undefined && (
                  <View className="spec-item">
                    <Text className="spec-label">库存：</Text>
                    <Text className={`spec-value ${goodsInfo.stock > 0 ? 'in-stock' : 'out-stock'}`}>
                      {goodsInfo.stock > 0 ? `${goodsInfo.stock}件` : '缺货'}
                    </Text>
                  </View>
                )}
              </View>
            )}

            {/* 优惠信息 */}
            {promotionInfo && (
              <View className="promotion-info">
                <View className="promotion-header">
                  <Gift size="14" className="promotion-icon" />
                  <Text className="promotion-title">优惠活动</Text>
                </View>
                <Text className="promotion-desc">{promotionInfo.description}</Text>
                {promotionInfo.validUntil && (
                  <Text className="promotion-valid">
                    有效期至：{dayjs(promotionInfo.validUntil).format('YYYY-MM-DD')}
                  </Text>
                )}
              </View>
            )}

            {/* 兑换码 */}
            {code && (
              <View className="gift-code">
                <Text className="code-label">兑换码</Text>
                <Text className="code-value">{formatCode()}</Text>
              </View>
            )}
          </View>
        </View>

        {/* 使用说明和注意事项 */}
        {showGoodsDetail && (goodsInfo?.instructions || goodsInfo?.notices || goodsInfo?.applicableStores) && (
          <View className="goods-instructions">
            {goodsInfo.applicableStores && goodsInfo.applicableStores.length > 0 && (
              <View className="instruction-section">
                <View className="section-header">
                  <Text className="section-title">适用门店</Text>
                </View>
                <View className="store-list">
                  {goodsInfo.applicableStores.map((store, index) => (
                    <Tag key={index} plain className="store-tag">
                      {store}
                    </Tag>
                  ))}
                </View>
              </View>
            )}
          </View>
        )}

        {/* 时间信息 */}
        <View className="gift-time-info">
          {status === 1 && useTime && (
            <View className="time-item">
              <Clock size="14" className="text-gray-400" />
              <Text className="time-text">使用时间：{dayjs(useTime).format('YYYY-MM-DD HH:mm')}</Text>
            </View>
          )}

          {status === 0 && expireTime && (
            <View className="time-item">
              <Clock size="14" className="text-orange-500" />
              <Text className="time-text">{formatExpireTime()}</Text>
            </View>
          )}

          {useLocation && (
            <View className="time-item">
              <Location size="14" className="text-gray-400" />
              <Text className="time-text text-sm">使用地址：{useLocation}</Text>
            </View>
          )}
        </View>
      </View>

      {/* 卡片底部操作 */}
      {/*<View className="gift-card-footer">*/}
      {/*  <View className="footer-info">*/}
      {/*    {contactInfo && (*/}
      {/*      <View className="contact-info">*/}
      {/*        <Phone size="12" className="text-gray-400" />*/}
      {/*        <Text className="contact-text">{contactInfo}</Text>*/}
      {/*      </View>*/}
      {/*    )}*/}
      {/*  </View>*/}

      {/*  <View className="footer-actions">*/}
      {/*    {showUseBtn && status === 0 && (*/}
      {/*      <Button*/}
      {/*        size="small"*/}
      {/*        type="primary"*/}
      {/*        className={`use-btn ${getThemeClass()}`}*/}
      {/*      >*/}
      {/*        立即使用*/}
      {/*      </Button>*/}
      {/*    )}*/}
      {/*  </View>*/}
      {/*</View>*/}

      {/* 状态遮罩 */}
      {status !== 0 && (
        <View className="gift-card-overlay">
          <View className="overlay-badge">
            {statusInfo.text}
          </View>
        </View>
      )}

    </View>
  )
}

export default GiftCard