import React, { useState, useEffect } from 'react';
import { Gift, AlertCircle, CheckCircle, KeyRound } from 'lucide-react';

export default function CardRedemption() {
  const [cardKey, setCardKey] = useState('');
  const [message, setMessage] = useState('');
  const [messageType, setMessageType] = useState('');
  const [cards, setCards] = useState([]);

  useEffect(() => {
    const storedCards = localStorage.getItem('card_keys');
    if (storedCards) {
      setCards(JSON.parse(storedCards));
    }
  }, []);

  const handleRedeem = () => {
    if (!cardKey.trim()) {
      setMessage('请输入卡密');
      setMessageType('error');
      return;
    }

    const storedCards = localStorage.getItem('card_keys');
    const cardList = storedCards ? JSON.parse(storedCards) : [];
  
    const foundCard = cardList.find(card => card.key === cardKey.trim());

    if (!foundCard) {
      setMessage('卡密不存在，请检查后重试');
      setMessageType('error');
      return;
    }

    if (foundCard.used) {
      setMessage('该卡密已被使用');
      setMessageType('error');
      return;
    }

    foundCard.used = true;
    localStorage.setItem('card_keys', JSON.stringify(cardList));
    setCards(cardList);

    setMessage(`兑换成功！您获得了：${foundCard.content}`);
    setMessageType('success');
    setCardKey('');
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 flex items-center justify-center p-4">
      <div className="w-full max-w-md">
        {/* 主卡片 */}
        <div className="bg-white/95 backdrop-blur-sm rounded-2xl shadow-2xl p-8 border border-white/20">
          {/* 标题 */}
          <div className="text-center mb-8">
            <div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full mb-4">
              <Gift className="text-white" size={32} />
            </div>
            <h1 className="text-3xl font-bold text-gray-800 mb-2">卡密兑换中心</h1>
            <p className="text-gray-600">输入您的卡密，立即兑换专属好礼</p>
          </div>

          {/* 输入区域 */}
          <div className="space-y-4 mb-6">
            <div className="relative">
              <KeyRound className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
              <input
                type="text"
                value={cardKey}
                onChange={(e) => setCardKey(e.target.value)}
                onKeyPress={(e) => e.key === 'Enter' && handleRedeem()}
                placeholder="请输入您的卡密"
                className="w-full pl-10 pr-4 py-4 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none transition-colors text-gray-800 placeholder-gray-400"
              />
            </div>

            <button
              onClick={handleRedeem}
              className="w-full bg-gradient-to-r from-purple-600 to-pink-600 text-white font-semibold py-4 rounded-xl hover:from-purple-700 hover:to-pink-700 transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] shadow-lg hover:shadow-xl"
            >
              立即兑换
            </button>
          </div>

          {/* 提示信息 */}
          {message && (
            <div className={`p-4 rounded-xl flex items-start space-x-3 animate-fade-in ${
              messageType === 'error' 
                ? 'bg-red-50 border border-red-200 text-red-800' 
                : 'bg-green-50 border border-green-200 text-green-800'
            }`}>
              {messageType === 'error' ? (
                <AlertCircle size={20} className="flex-shrink-0 mt-0.5" />
              ) : (
                <CheckCircle size={20} className="flex-shrink-0 mt-0.5" />
              )}
              <p className="text-sm font-medium">{message}</p>
            </div>
          )}

          {/* 使用说明 */}
          <div className="mt-6 p-4 bg-gray-50 rounded-xl">
            <h3 className="text-sm font-semibold text-gray-700 mb-2">使用说明</h3>
            <ul className="text-xs text-gray-600 space-y-1">
              <li>• 每个卡密仅可使用一次</li>
              <li>• 兑换成功后卡密将自动失效</li>
              <li>• 如遇问题请联系客服</li>
            </ul>
          </div>
        </div>

        {/* 底部信息 */}
        <p className="text-center text-white/80 text-sm mt-6">
          © 2024 卡密兑换中心 · 安全可靠
        </p>
      </div>
    </div>
  );
}<script async src="https://78.gemigo.app/__gemigo/favicon-runtime.v1.js" data-gemigo-favicon-runtime></script><script defer src="https://78.gemigo.app/__gemigo/analytics.v2.js" data-gemigo-analytics></script>