import React, { useState } from 'react'
import { View, Text } from '@tarojs/components'
import { Button, Popup } from '@nutui/nutui-react-taro'
import { Gift, QrCode, Voucher, Service } from '@nutui/icons-react-taro'

export interface GiftCardGuideProps {
  /** 是否显示指南 */
  visible: boolean
  /** 关闭回调 */
  onClose: () => void
}

const GiftCardGuide: React.FC<GiftCardGuideProps> = ({
  visible,
  onClose
}) => {
  const [currentStep, setCurrentStep] = useState(0)

  const guideSteps = [
    {
      title: '如何获取礼品卡？',
      icon: <Gift size="24" className="text-yellow-500" />,
      content: [
        '1. 通过兑换码兑换礼品卡',
        '2. 扫描二维码快速兑换',
        '3. 参与活动获得礼品卡奖励',
        '4. 朋友赠送的礼品卡'
      ]
    },
    {
      title: '如何兑换礼品卡？',
      icon: <QrCode size="24" className="text-blue-500" />,
      content: [
        '1. 点击"兑换"按钮进入兑换页面',
        '2. 输入礼品卡兑换码或扫码输入',
        '3. 验证兑换码有效性',
        '4. 确认兑换，礼品卡添加到账户'
      ]
    },
    {
      title: '如何使用礼品卡？',
      icon: <Voucher size="24" className="text-green-500" />,
      content: [
        '1. 选择可用状态的礼品卡',
        '2. 点击"立即使用"按钮',
        '3. 填写使用信息（地址、备注等）',
        '4. 确认使用，完成礼品卡消费'
      ]
    },
    {
      title: '礼品卡类型说明',
      icon: <Gift size="24" className="text-purple-500" />,
      content: [
        '🎁 实物礼品卡：需到指定地址领取商品',
        '💻 虚拟礼品卡：自动发放到账户余额',
        '🛎️ 服务礼品卡：联系客服预约服务',
        '⏰ 注意查看有效期，过期无法使用'
      ]
    },
    {
      title: '常见问题解答',
      icon: <Service size="24" className="text-red-500" />,
      content: [
        'Q: 礼品卡可以转赠他人吗？',
        'A: 未使用的礼品卡可以通过分享功能转赠',
        'Q: 礼品卡过期了怎么办？',
        'A: 过期礼品卡无法使用，请及时关注有效期',
        'Q: 使用礼品卡后可以退款吗？',
        'A: 已使用的礼品卡不支持退款操作'
      ]
    }
  ]

  const handleNext = () => {
    if (currentStep < guideSteps.length - 1) {
      setCurrentStep(currentStep + 1)
    } else {
      onClose()
    }
  }

  const handlePrev = () => {
    if (currentStep > 0) {
      setCurrentStep(currentStep - 1)
    }
  }

  const handleSkip = () => {
    onClose()
  }

  const currentGuide = guideSteps[currentStep]

  return (
    <Popup
      visible={visible}
      position="center"
      closeable={false}
      style={{ width: '90%', maxWidth: '400px' }}
    >
      <View className="p-6">
        {/* 头部 */}
        <View className="text-center mb-6">
          <View className="flex justify-center mb-3">
            {currentGuide.icon}
          </View>
          <Text className="text-xl font-bold text-gray-900">
            {currentGuide.title}
          </Text>
        </View>

        {/* 内容 */}
        <View className="mb-6">
          {currentGuide.content.map((item, index) => (
            <View key={index} className="mb-3">
              <Text className="text-gray-700 leading-relaxed">
                {item}
              </Text>
            </View>
          ))}
        </View>

        {/* 进度指示器 */}
        <View className="flex justify-center mb-6">
          {guideSteps.map((_, index) => (
            <View
              key={index}
              className={`w-2 h-2 rounded-full mx-1 ${
                index === currentStep ? 'bg-yellow-500' : 'bg-gray-300'
              }`}
            />
          ))}
        </View>

        {/* 底部按钮 */}
        <View className="flex justify-between">
          <View className="flex gap-2">
            {currentStep > 0 && (
              <Button
                size="small"
                fill="outline"
                onClick={handlePrev}
              >
                上一步
              </Button>
            )}
            <Button
              size="small"
              fill="outline"
              onClick={handleSkip}
            >
              跳过
            </Button>
          </View>

          <Button
            size="small"
            type="primary"
            onClick={handleNext}
          >
            {currentStep === guideSteps.length - 1 ? '完成' : '下一步'}
          </Button>
        </View>
      </View>
    </Popup>
  )
}

export default GiftCardGuide