import {useState, useEffect} from "react";
import {useRouter} from '@tarojs/taro'
import {Button, ConfigProvider, Tag, Divider, Image} from '@nutui/nutui-react-taro'
import {ArrowLeft, Gift, Clock, Location, Phone, Share, Copy} from '@nutui/icons-react-taro'
import Taro from '@tarojs/taro'
import {View, Text} from '@tarojs/components'
import {ShopGift} from "@/api/shop/shopGift/model";
import {getShopGift} from "@/api/shop/shopGift";
import GiftCardShare from "@/components/GiftCardShare";
import dayjs from "dayjs";

const GiftCardDetail = () => {
  const router = useRouter()
  const [gift, setGift] = useState<ShopGift | null>(null)
  const [loading, setLoading] = useState(true)
  const [showShare, setShowShare] = useState(false)
  const giftId = router.params.id

  useEffect(() => {
    if (giftId) {
      loadGiftDetail()
    }
  }, [giftId])

  const loadGiftDetail = async () => {
    try {
      setLoading(true)
      const data = await getShopGift(Number(giftId))
      setGift(data)
    } catch (error) {
      console.error('获取礼品卡详情失败:', error)
      Taro.showToast({
        title: '获取礼品卡详情失败',
        icon: 'error'
      })
    } finally {
      setLoading(false)
    }
  }

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

  // 获取礼品卡面值显示
  const getGiftValueDisplay = () => {
    if (!gift || !gift.faceValue) return ''
    return `¥${gift.faceValue}`
  }

  // 获取使用条件文本
  const getUsageText = () => {
    if (!gift) return ''

    if (gift.instructions) {
      return gift.instructions
    }

    switch (gift.type) {
      case 10: return '请到指定门店使用此礼品卡'
      case 20: return '可在线上平台直接使用'
      case 30: return '请联系客服预约服务时间'
      default: return '请按照使用说明进行操作'
    }
  }

  // 获取有效期文本
  const getValidityText = () => {
    if (!gift) return ''

    if (gift.validDays) {
      return `有效期${gift.validDays}天`
    } else if (gift.expireTime) {
      return `有效期至 ${dayjs(gift.expireTime).format('YYYY年MM月DD日')}`
    } else {
      return '长期有效'
    }
  }

  // 获取礼品卡状态
  const getGiftStatus = () => {
    if (!gift) return { status: 0, text: '未知', color: 'default' }

    switch (gift.useStatus) {
      case 0:
        return { status: 0, text: '可使用', color: 'success' }
      case 1:
        return { status: 1, text: '已使用', color: 'warning' }
      case 2:
        return { status: 2, text: '已过期', color: 'danger' }
      default:
        return { status: 0, text: '未知', color: 'default' }
    }
  }

  // 使用礼品卡
  const handleUseGift = () => {
    if (!gift) return

    Taro.showModal({
      title: '使用礼品卡',
      content: `确定要使用"${gift.name}"吗？`,
      success: (res) => {
        if (res.confirm) {
          // 跳转到礼品卡使用页面
          Taro.navigateTo({
            url: `/user/gift/use?id=${gift.id}`
          })
        }
      }
    })
  }

  // 复制兑换码
  const handleCopyCode = () => {
    if (!gift?.code) return

    Taro.setClipboardData({
      data: gift.code,
      success: () => {
        Taro.showToast({
          title: '兑换码已复制',
          icon: 'success'
        })
      },
      fail: () => {
        Taro.showToast({
          title: '复制失败',
          icon: 'error'
        })
      }
    })
  }

  // 返回上一页
  const handleBack = () => {
    Taro.navigateBack()
  }

  if (loading) {
    return (
      <ConfigProvider>
        <View className="flex justify-center items-center h-screen">
          <Text>加载中...</Text>
        </View>
      </ConfigProvider>
    )
  }

  if (!gift) {
    return (
      <ConfigProvider>
        <View className="flex flex-col justify-center items-center h-screen">
          <Text className="text-gray-500 mb-4">礼品卡不存在</Text>
          <Button onClick={handleBack}>返回</Button>
        </View>
      </ConfigProvider>
    )
  }

  const statusInfo = getGiftStatus()

  return (
    <ConfigProvider>
      {/* 礼品卡卡片 */}
      <View className="m-4 p-6 rounded-2xl text-white" style={{backgroundColor: '#fbbf24'}}>
        <View className="flex items-center justify-between mb-4">
          <View className="flex-1">
            <Text className="text-4xl font-bold">{getGiftValueDisplay()}</Text>
            <Text className="text-lg opacity-90 mt-1">{getGiftTypeText(gift.type)}</Text>
          </View>
          {gift.goodsImage ? (
            <Image
              src={gift.goodsImage}
              className="w-16 h-16 rounded-lg"
              mode="aspectFill"
            />
          ) : (
            <Gift size="40" />
          )}
        </View>

        <Text className="text-xl font-semibold mb-2">{gift.name}</Text>
        <Text className="text-base opacity-90">{gift.description || getUsageText()}</Text>

        {/* 兑换码 */}
        {gift.code && (
          <View className="mt-4 p-3 bg-white bg-opacity-20 rounded-lg">
            <View className="flex items-center justify-between">
              <View>
                <Text className="text-sm opacity-80">兑换码</Text>
                <Text className="text-lg font-mono font-bold">{gift.code}</Text>
              </View>
              <Button
                size="small"
                fill="outline"
                icon={<Copy />}
                onClick={handleCopyCode}
                className="border-white text-white"
              >
                复制
              </Button>
            </View>
          </View>
        )}
      </View>

      {/* 详细信息 */}
      <View className="bg-white mx-4 rounded-xl p-4">
        <Text className="text-lg font-semibold mb-4">使用说明</Text>

        <View>
          <View className="flex items-center mb-3">
            <Clock size="16" className="text-gray-400 mr-3" />
            <View>
              <Text className="text-gray-600 text-sm">有效期</Text>
              <Text className="text-gray-900">{getValidityText()}</Text>
            </View>
          </View>

          <Divider />

          <View className="flex items-center mb-3">
            <Gift size="16" className="text-gray-400 mr-3" />
            <View>
              <Text className="text-gray-600 text-sm">礼品卡类型</Text>
              <Text className="text-gray-900">{getGiftTypeText(gift.type)}</Text>
            </View>
          </View>

          {gift.useLocation && (
            <>
              <Divider />
              <View className="flex items-center">
                <Location size="16" className="text-gray-400 mr-3" />
                <View>
                  <Text className="text-gray-600 text-sm">使用地址</Text>
                  <Text className="text-gray-900">{gift.useLocation}</Text>
                </View>
              </View>
            </>
          )}

          {gift.contactInfo && (
            <>
              <Divider />
              <View className="flex items-center">
                <Phone size="16" className="text-gray-400 mr-3" />
                <View>
                  <Text className="text-gray-600 text-sm">客服联系</Text>
                  <Text className="text-gray-900">{gift.contactInfo}</Text>
                </View>
              </View>
            </>
          )}

          {gift.instructions && (
            <>
              <Divider />
              <View>
                <Text className="text-gray-600 text-sm mb-2">使用说明</Text>
                <Text className="text-gray-900 leading-relaxed">{gift.instructions}</Text>
              </View>
            </>
          )}

          {gift.useTime && (
            <>
              <Divider />
              <View>
                <Text className="text-gray-600 text-sm mb-2">使用记录</Text>
                <Text className="text-gray-900">使用时间：{dayjs(gift.useTime).format('YYYY-MM-DD HH:mm')}</Text>
              </View>
            </>
          )}
        </View>
      </View>

      {/* 底部操作按钮 */}
      {statusInfo.status === 0 && (
        <View className="fixed bottom-0 left-0 right-0 p-4 bg-white border-t border-gray-100">
          <View className="flex gap-3">
            {gift.code && (
              <Button
                fill="outline"
                size="large"
                className="flex-1"
                icon={<Copy />}
                onClick={handleCopyCode}
              >
                复制兑换码
              </Button>
            )}
            <Button
              type="primary"
              size="large"
              className="flex-1"
              onClick={handleUseGift}
            >
              立即使用
            </Button>
          </View>
        </View>
      )}

      {/* 分享弹窗 */}
      {gift && (
        <GiftCardShare
          visible={showShare}
          giftCard={{
            id: gift.id || 0,
            name: gift.name || '',
            type: gift.type || 10,
            faceValue: gift.faceValue || '0',
            code: gift.code,
            description: gift.description
          }}
          onClose={() => setShowShare(false)}
        />
      )}
    </ConfigProvider>
  );
};

export default GiftCardDetail;