import React from 'react'
import { View, Text } from '@tarojs/components'
import { Gift, Voucher, Clock, Star } from '@nutui/icons-react-taro'

export interface GiftCardStatsProps {
  /** 可用礼品卡数量 */
  availableCount: number
  /** 已使用礼品卡数量 */
  usedCount: number
  /** 已过期礼品卡数量 */
  expiredCount: number
  /** 礼品卡总价值 */
  totalValue?: number
  /** 点击统计项的回调 */
  onStatsClick?: (type: 'available' | 'used' | 'expired' | 'total') => void
}

const GiftCardStats: React.FC<GiftCardStatsProps> = ({
  availableCount,
  usedCount,
  expiredCount,
  totalValue,
  onStatsClick
}) => {
  const handleStatsClick = (type: 'available' | 'used' | 'expired' | 'total') => {
    onStatsClick?.(type)
  }

  return (
    <View className="bg-white mx-4 my-3 rounded-xl p-3 shadow-sm">
      {/* 紧凑的统计卡片 - 2x2 网格 */}
      <View className="grid grid-cols-2 gap-2">
        {/* 可用礼品卡 */}
        <View
          className="flex items-center justify-between p-3 bg-yellow-50 rounded-lg border border-yellow-200"
          onClick={() => handleStatsClick('available')}
        >
          <View className="flex items-center">
            <Gift size="20" className="text-yellow-600 mr-2" />
            <Text className="text-sm text-gray-600">可用</Text>
          </View>
          <Text className="text-lg font-bold text-yellow-600">{availableCount}</Text>
        </View>

        {/* 已使用礼品卡 */}
        <View
          className="flex items-center justify-between p-3 bg-green-50 rounded-lg border border-green-200"
          onClick={() => handleStatsClick('used')}
        >
          <View className="flex items-center">
            <Voucher size="20" className="text-green-600 mr-2" />
            <Text className="text-sm text-gray-600">已使用</Text>
          </View>
          <Text className="text-lg font-bold text-green-600">{usedCount}</Text>
        </View>

        {/* 已过期礼品卡 */}
        <View
          className="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-200"
          onClick={() => handleStatsClick('expired')}
        >
          <View className="flex items-center">
            <Clock size="20" className="text-gray-500 mr-2" />
            <Text className="text-sm text-gray-600">已过期</Text>
          </View>
          <Text className="text-lg font-bold text-gray-500">{expiredCount}</Text>
        </View>

        {/* 总价值 */}
        {totalValue !== undefined && (
          <View
            className="flex items-center justify-between p-3 bg-purple-50 rounded-lg border border-purple-200"
            onClick={() => handleStatsClick('total')}
          >
            <View className="flex items-center">
              <Star size="20" className="text-purple-600 mr-2" />
              <Text className="text-sm text-gray-600">总价值</Text>
            </View>
            <Text className="text-lg font-bold text-purple-600">¥{totalValue}</Text>
          </View>
        )}
      </View>
    </View>
  )
}

export default GiftCardStats