import React from 'react'
import { View, Text } from '@tarojs/components'
import { Button, Popup } from '@nutui/nutui-react-taro'
import { Clock, Close, Agenda } from '@nutui/icons-react-taro'
import Taro from '@tarojs/taro'

export interface ExpiringSoon {
  id: number
  name: string
  type: number
  amount: string
  minAmount?: string
  endTime: string
  daysLeft: number
}

export interface CouponExpireNoticeProps {
  /** 是否显示提醒 */
  visible: boolean
  /** 即将过期的优惠券列表 */
  expiringSoonCoupons: ExpiringSoon[]
  /** 关闭回调 */
  onClose: () => void
  /** 使用优惠券回调 */
  onUseCoupon: (coupon: ExpiringSoon) => void
}

const CouponExpireNotice: React.FC<CouponExpireNoticeProps> = ({
  visible,
  expiringSoonCoupons,
  onClose,
  onUseCoupon
}) => {
  // 获取优惠券金额显示
  const getCouponAmountDisplay = (coupon: ExpiringSoon) => {
    switch (coupon.type) {
      case 10: // 满减券
        return `¥${coupon.amount}`
      case 20: // 折扣券
        return `${coupon.amount}折`
      case 30: // 免费券
        return '免费'
      default:
        return `¥${coupon.amount}`
    }
  }

  // 获取使用条件文本
  const getConditionText = (coupon: ExpiringSoon) => {
    if (coupon.type === 30) return '无门槛使用'
    if (coupon.minAmount && parseFloat(coupon.minAmount) > 0) {
      return `满${coupon.minAmount}元可用`
    }
    return '无门槛使用'
  }

  // 获取到期时间显示
  const getExpireTimeDisplay = (coupon: ExpiringSoon) => {
    if (coupon.daysLeft === 0) {
      return '今天到期'
    } else if (coupon.daysLeft === 1) {
      return '明天到期'
    } else {
      return `${coupon.daysLeft}天后到期`
    }
  }

  // 去购物
  const handleGoShopping = () => {
    onClose()
    Taro.navigateTo({
      url: '/pages/index/index'
    })
  }

  return (
    <Popup
      visible={visible}
      position="center"
      style={{ width: '90%', maxWidth: '400px' }}
      round
    >
      <View className="p-6">
        {/* 头部 */}
        <View className="flex items-center justify-between mb-4">
          <View className="flex items-center">
            <Clock size="24" className="text-orange-500 mr-2" />
            <Text className="text-lg font-semibold text-gray-900">
              优惠券即将过期
            </Text>
          </View>
          <View onClick={onClose}>
            <Close size="20" className="text-gray-500" />
          </View>
        </View>

        {/* 提醒文案 */}
        <View className="text-center mb-6">
          <Text className="text-gray-600">
            您有 {expiringSoonCoupons.length} 张优惠券即将过期，请及时使用
          </Text>
        </View>

        {/* 优惠券列表 */}
        <View className="max-h-80 overflow-y-auto mb-6">
          {expiringSoonCoupons.map((coupon, _) => (
            <View
              key={coupon.id}
              className="flex items-center justify-between p-3 mb-3 bg-gray-50 rounded-lg"
            >
              <View className="flex-1">
                <View className="flex items-center mb-1">
                  <Text className="font-semibold text-gray-900 mr-2">
                    {coupon.name}
                  </Text>
                  <View className="px-2 py-1 bg-red-100 rounded text-red-600 text-xs">
                    {getCouponAmountDisplay(coupon)}
                  </View>
                </View>
                <Text className="text-sm text-gray-600 mb-1">
                  {getConditionText(coupon)}
                </Text>
                <Text className={`text-xs ${
                  coupon.daysLeft === 0 ? 'text-red-500' :
                  coupon.daysLeft === 1 ? 'text-orange-500' : 'text-gray-500'
                }`}>
                  {getExpireTimeDisplay(coupon)}
                </Text>
              </View>

              <Button
                size="small"
                type="primary"
                onClick={() => onUseCoupon(coupon)}
              >
                立即使用
              </Button>
            </View>
          ))}
        </View>

        {/* 底部按钮 */}
        <View className="flex gap-3">
          <Button
            fill="outline"
            size="large"
            className="flex-1"
            onClick={onClose}
          >
            稍后提醒
          </Button>
          <Button
            type="primary"
            size="large"
            className="flex-1"
            icon={<Agenda />}
            onClick={handleGoShopping}
          >
            去购物
          </Button>
        </View>

        {/* 底部提示 */}
        <View className="text-center mt-4">
          <Text className="text-xs text-gray-400">
            过期的优惠券将无法使用，请及时关注有效期
          </Text>
        </View>
      </View>
    </Popup>
  )
}

export default CouponExpireNotice
