import React, { useState } from 'react';
import { Button } from '../../ui/button';
import { Input } from '../../ui/input';
import { X, Tag, Check, AlertCircle } from 'lucide-react';

interface PromoCodeModalProps {
  onClose: () => void;
  onApply: (discountPercent: number, code: string) => void;
}

export const PromoCodeModal: React.FC<PromoCodeModalProps> = ({ onClose, onApply }) => {
  const [code, setCode] = useState('');
  const [status, setStatus] = useState<'idle' | 'success' | 'error'>('idle');
  
  const handleApply = () => {
      // Mock validation
      if (code.toUpperCase() === 'VEZA20') {
          setStatus('success');
          setTimeout(() => {
              onApply(20, 'VEZA20');
              onClose();
          }, 1000);
      } else {
          setStatus('error');
      }
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm" onClick={onClose}></div>
      <div className="relative w-full max-w-sm bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
        
        <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
          <h3 className="font-bold text-white flex items-center gap-2">
            <Tag className="w-4 h-4 text-kodo-cyan" /> Add Promo Code
          </h3>
          <button onClick={onClose}><X className="w-5 h-5 text-gray-400 hover:text-white" /></button>
        </div>

        <div className="p-6 space-y-4">
            <Input 
                placeholder="Enter code (e.g. VEZA20)" 
                value={code} 
                onChange={(e) => { setCode(e.target.value); setStatus('idle'); }}
                className={status === 'error' ? 'border-kodo-red focus:border-kodo-red' : ''}
            />
            
            {status === 'error' && (
                <div className="flex items-center gap-2 text-xs text-kodo-red animate-shake">
                    <AlertCircle className="w-3 h-3" /> Invalid promo code
                </div>
            )}
            
            {status === 'success' && (
                <div className="flex items-center gap-2 text-xs text-kodo-lime animate-fadeIn">
                    <Check className="w-3 h-3" /> Code applied! 20% Off
                </div>
            )}

            <Button variant="primary" className="w-full" onClick={handleApply} disabled={!code}>
                Apply Discount
            </Button>
        </div>
      </div>
    </div>
  );
};