import React, { useState, useEffect } from 'react'
import { View, Text } from '@tarojs/components'
import { Button, Popup, Tag } from '@nutui/nutui-react-taro'
import { Close, Copy, Share, Refresh, QrCode } from '@nutui/icons-react-taro'
import Taro from '@tarojs/taro'
import dayjs from 'dayjs'
import { generateVerificationCode } from '@/api/shop/shopGift'

export interface GiftCardQRCodeProps {
  /** 是否显示弹窗 */
  visible: boolean
  /** 关闭弹窗回调 */
  onClose: () => void
  /** 礼品卡信息 */
  giftCard: {
    id: number
    name?: string
    goodsName?: string
    code?: string
    faceValue?: string
    type?: number
    status?: number
    expireTime?: string
    contactInfo?: string
  }
}

const GiftCardQRCode: React.FC<GiftCardQRCodeProps> = ({
  visible,
  onClose,
  giftCard
}) => {
  const [loading, setLoading] = useState(false)
  const [verificationCode, setVerificationCode] = useState<string>('')
  const [qrData, setQrData] = useState<string>('')

  // 生成核销码（6位数字）
  const generateVerificationCode = () => {
    return Math.random().toString().slice(2, 8)
  }

  // 生成二维码数据
  const generateQRData = () => {
    const code = generateVerificationCode()
    setVerificationCode(code)

    const data = {
      type: 'gift_card_verification',
      giftId: giftCard.id,
      giftCode: giftCard.code,
      verificationCode: code,
      faceValue: giftCard.faceValue,
      timestamp: Date.now(),
      expireTime: giftCard.expireTime
    }

    const jsonData = JSON.stringify(data)
    setQrData(jsonData)
    return jsonData
  }

  // 生成二维码（调用后端API）
  const generateQRCode = async () => {
    try {
      setLoading(true)

      // 调用后端API生成核销码
      const result = await generateVerificationCode(giftCard.id)
      if (result) {
        setVerificationCode(result.verificationCode)

        // 生成二维码数据
        const data = {
          type: 'gift_card_verification',
          giftId: giftCard.id,
          giftCode: giftCard.code,
          verificationCode: result.verificationCode,
          faceValue: giftCard.faceValue,
          timestamp: Date.now(),
          expireTime: giftCard.expireTime,
          codeExpireTime: result.expireTime
        }

        setQrData(JSON.stringify(data))
        console.log('二维码数据:', data)
      }
    } catch (error) {
      console.error('生成二维码失败:', error)
      Taro.showToast({
        title: '生成核销码失败',
        icon: 'error'
      })
    } finally {
      setLoading(false)
    }
  }

  // 复制核销码
  const copyVerificationCode = () => {
    Taro.setClipboardData({
      data: verificationCode,
      success: () => {
        Taro.showToast({
          title: '核销码已复制',
          icon: 'success'
        })
      }
    })
  }

  // 复制礼品卡码
  const copyGiftCode = () => {
    if (giftCard.code) {
      Taro.setClipboardData({
        data: giftCard.code,
        success: () => {
          Taro.showToast({
            title: '兑换码已复制',
            icon: 'success'
          })
        }
      })
    }
  }

  // 分享二维码
  const shareQRCode = () => {
    // 这里可以实现分享功能
    Taro.showToast({
      title: '分享功能开发中',
      icon: 'none'
    })
  }

  // 刷新二维码
  const refreshQRCode = () => {
    generateQRCode()
  }

  // 获取状态文本
  const getStatusText = (status?: number) => {
    switch (status) {
      case 0: return { text: '未使用', color: 'success' }
      case 1: return { text: '已使用', color: 'warning' }
      case 2: return { text: '失效', color: 'danger' }
      default: return { text: '未知', color: 'default' }
    }
  }

  // 获取类型文本
  const getTypeText = (type?: number) => {
    switch (type) {
      case 10: return '实物礼品卡'
      case 20: return '虚拟礼品卡'
      case 30: return '服务礼品卡'
      default: return '礼品卡'
    }
  }

  // 弹窗打开时生成二维码
  useEffect(() => {
    if (visible && giftCard.id) {
      generateQRCode()
    }
  }, [visible, giftCard.id])

  const statusInfo = getStatusText(giftCard.status)

  return (
    <Popup
      visible={visible}
      position="center"
      closeable
      closeIcon={<Close />}
      onClose={onClose}
      style={{ width: '90%', maxWidth: '400px' }}
    >
      <View className="p-6">
        {/* 标题 */}
        <View className="text-center mb-4">
          <Text className="text-lg font-bold">礼品卡核销</Text>
          <Text className="text-sm text-gray-500 mt-1">
            请向门店工作人员出示此二维码
          </Text>
        </View>

        {/* 礼品卡信息 */}
        <View className="bg-gray-50 rounded-lg p-4 mb-4">
          <View className="flex justify-between items-start mb-2">
            <Text className="font-medium text-base">
              {giftCard.goodsName || giftCard.name}
            </Text>
            <Tag type={statusInfo.color} size="small">
              {statusInfo.text}
            </Tag>
          </View>

          <View className="flex justify-between items-center mb-2">
            <Text className="text-sm text-gray-600">面值</Text>
            <Text className="text-lg font-bold text-red-500">
              ¥{giftCard.faceValue}
            </Text>
          </View>

          <View className="flex justify-between items-center mb-2">
            <Text className="text-sm text-gray-600">类型</Text>
            <Text className="text-sm">{getTypeText(giftCard.type)}</Text>
          </View>

          {giftCard.expireTime && (
            <View className="flex justify-between items-center">
              <Text className="text-sm text-gray-600">有效期至</Text>
              <Text className="text-sm text-orange-600">
                {dayjs(giftCard.expireTime).format('YYYY-MM-DD')}
              </Text>
            </View>
          )}
        </View>

        {/* 二维码区域 */}
        <View className="text-center mb-4">
          {loading ? (
            <View className="w-48 h-48 mx-auto bg-gray-100 rounded-lg flex items-center justify-center">
              <Text className="text-gray-500">生成中...</Text>
            </View>
          ) : verificationCode ? (
            <View className="relative">
              {/* 模拟二维码显示区域 */}
              <View className="w-48 h-48 mx-auto bg-white border-2 border-gray-300 rounded-lg flex flex-col items-center justify-center">
                <QrCode size="80" className="text-gray-800 mb-2" />
                <Text className="text-xs text-gray-600">核销二维码</Text>
                <Text className="text-xs text-gray-500 mt-1">
                  ID: {giftCard.id}
                </Text>
              </View>
              <Button
                size="small"
                fill="outline"
                icon={<Refresh />}
                className="absolute top-2 right-2"
                onClick={refreshQRCode}
              >
                刷新
              </Button>
            </View>
          ) : (
            <View className="w-48 h-48 mx-auto bg-gray-100 rounded-lg flex items-center justify-center">
              <Text className="text-gray-500">生成失败</Text>
            </View>
          )}
        </View>

        {/* 核销码 */}
        {verificationCode && (
          <View className="bg-blue-50 rounded-lg p-3 mb-4">
            <View className="flex justify-between items-center">
              <View>
                <Text className="text-sm text-blue-600 mb-1">核销码</Text>
                <Text className="text-xl font-mono font-bold text-blue-800">
                  {verificationCode}
                </Text>
              </View>
              <Button
                size="small"
                fill="outline"
                icon={<Copy />}
                onClick={copyVerificationCode}
              >
                复制
              </Button>
            </View>
          </View>
        )}

        {/* 兑换码 */}
        {giftCard.code && (
          <View className="bg-green-50 rounded-lg p-3 mb-4">
            <View className="flex justify-between items-center">
              <View>
                <Text className="text-sm text-green-600 mb-1">兑换码</Text>
                <Text className="text-base font-mono text-green-800">
                  {giftCard.code}
                </Text>
              </View>
              <Button
                size="small"
                fill="outline"
                icon={<Copy />}
                onClick={copyGiftCode}
              >
                复制
              </Button>
            </View>
          </View>
        )}

        {/* 操作按钮 */}
        <View className="flex">
          <Button
            size="large"
            fill="outline"
            icon={<Share />}
            onClick={shareQRCode}
            className="flex-1 mr-3"
          >
            分享
          </Button>
          <Button
            size="large"
            type="primary"
            onClick={onClose}
            className="flex-1"
          >
            完成
          </Button>
        </View>

        {/* 使用说明 */}
        <View className="mt-4 p-3 bg-yellow-50 rounded-lg">
          <Text className="text-sm text-yellow-800 font-medium mb-2">使用说明：</Text>
          <View>
            <Text className="text-xs text-yellow-700 mb-1">• 请向门店工作人员出示此二维码或核销码</Text>
            <Text className="text-xs text-yellow-700 mb-1">• 工作人员扫码后即可完成核销</Text>
            <Text className="text-xs text-yellow-700 mb-1">• 每次使用会生成新的核销码，确保安全</Text>
            <Text className="text-xs text-yellow-700">• 如有问题请联系客服：{giftCard.contactInfo || '400-800-8888'}</Text>
          </View>
        </View>
      </View>
    </Popup>
  )
}

export default GiftCardQRCode