import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { X } from 'lucide-react';
import { Button } from './ui/button';
import { Input } from './ui/input';
import { Label } from './ui/label';

interface LoginModalProps {
  isOpen: boolean;
  onClose: () => void;
  onLoginSuccess: (userData: { email: string; name: string }) => void;
}

export function LoginModal({ isOpen, onClose, onLoginSuccess }: LoginModalProps) {
  const [step, setStep] = useState<'email' | 'otp'>('email');
  const [email, setEmail] = useState('');
  const [otp, setOtp] = useState(['', '', '', '', '', '']);
  const [countdown, setCountdown] = useState(0);
  const [isLoading, setIsLoading] = useState(false);
  const [helperText, setHelperText] = useState('');

  // Reset modal state when closed
  useEffect(() => {
    if (!isOpen) {
      setStep('email');
      setEmail('');
      setOtp(['', '', '', '', '', '']);
      setCountdown(0);
      setHelperText('');
    }
  }, [isOpen]);

  // Countdown timer for OTP resend
  useEffect(() => {
    if (countdown > 0) {
      const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
      return () => clearTimeout(timer);
    }
  }, [countdown]);

  const handleSendOTP = async () => {
    if (!email || !email.includes('@')) {
      setHelperText('Please enter a valid email address');
      return;
    }

    setIsLoading(true);
    setHelperText('');
    
    // Simulate API call
    setTimeout(() => {
      setStep('otp');
      setCountdown(120); // 2 minutes countdown
      setIsLoading(false);
      setHelperText('OTP sent successfully');
    }, 1500);
  };

  const handleOTPChange = (index: number, value: string) => {
    if (value.length > 1) return; // Only allow single digit
    
    const newOtp = [...otp];
    newOtp[index] = value;
    setOtp(newOtp);

    // Auto-focus next input
    if (value && index < 5) {
      const nextInput = document.querySelector(`input[data-otp-index="${index + 1}"]`) as HTMLInputElement;
      nextInput?.focus();
    }
  };

  const handleOTPKeyDown = (index: number, e: React.KeyboardEvent) => {
    if (e.key === 'Backspace' && !otp[index] && index > 0) {
      const prevInput = document.querySelector(`input[data-otp-index="${index - 1}"]`) as HTMLInputElement;
      prevInput?.focus();
    }
  };

  const handleVerifyLogin = async () => {
    const otpString = otp.join('');
    if (otpString.length !== 6) {
      setHelperText('Please enter complete OTP');
      return;
    }

    setIsLoading(true);
    setHelperText('');

    // Simulate API call
    setTimeout(() => {
      // Generate name from email for demo
      const emailParts = email.split('@')[0];
      const name = emailParts.charAt(0).toUpperCase() + emailParts.slice(1);
      
      onLoginSuccess({
        email,
        name: name.length > 8 ? name.substring(0, 8) : name
      });
      setIsLoading(false);
      onClose();
    }, 1500);
  };

  const formatCountdown = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  };

  return (
    <AnimatePresence>
      {isOpen && (
        <>
          {/* Backdrop */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.2 }}
            className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"
            onClick={onClose}
          />

          {/* Modal */}
          <motion.div
            initial={{ opacity: 0, scale: 0.95, y: 20 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.95, y: 20 }}
            transition={{ duration: 0.3, ease: "easeOut" }}
            className="fixed inset-0 flex items-center justify-center z-50 p-4"
          >
            <div className="bg-white rounded-3xl shadow-2xl w-full max-w-md mx-auto overflow-hidden">
              {/* Header */}
              <div className="relative px-8 pt-8 pb-4">
                <button
                  onClick={onClose}
                  className="absolute top-6 right-6 w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 transition-colors"
                >
                  <X className="w-4 h-4 text-gray-600" />
                </button>
                
                <h2 className="font-merchant text-2xl font-semibold text-gray-900 mb-2">
                  Login
                </h2>
                <p className="font-poppins text-sm text-gray-600">
                  Enter your email Id and verify with OTP sent on it.
                </p>
              </div>

              {/* Content */}
              <div className="px-8 pb-8">
                {step === 'email' ? (
                  <div className="space-y-6">
                    {/* Email Input */}
                    <div className="space-y-2">
                      <Label className="font-poppins text-sm font-medium text-gray-700">
                        Email
                      </Label>
                      <Input
                        type="email"
                        placeholder="Name@example.com"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        className="font-poppins text-base h-12 bg-gray-50 border-0 rounded-xl placeholder:text-gray-400"
                        onKeyDown={(e) => e.key === 'Enter' && handleSendOTP()}
                      />
                      {helperText && (
                        <p className={`font-poppins text-xs ${helperText.includes('success') ? 'text-green-600' : 'text-red-500'}`}>
                          {helperText}
                        </p>
                      )}
                    </div>

                    {/* Send OTP Button */}
                    <Button
                      onClick={handleSendOTP}
                      disabled={isLoading}
                      className="w-full h-12 bg-gray-800 hover:bg-gray-900 text-white font-poppins font-semibold rounded-xl transition-colors"
                    >
                      {isLoading ? (
                        <div className="flex items-center gap-2">
                          <div className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" />
                          Sending OTP...
                        </div>
                      ) : (
                        <>
                          Send OTP
                          <svg className="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                          </svg>
                        </>
                      )}
                    </Button>
                  </div>
                ) : (
                  <div className="space-y-6">
                    {/* Email Display */}
                    <div className="space-y-2">
                      <Label className="font-poppins text-sm font-medium text-gray-700">
                        Email
                      </Label>
                      <div className="h-12 bg-gray-50 rounded-xl flex items-center px-4">
                        <span className="font-poppins text-base text-gray-600">{email}</span>
                      </div>
                      {helperText && (
                        <p className={`font-poppins text-xs ${helperText.includes('success') ? 'text-green-600' : 'text-red-500'}`}>
                          {helperText}
                        </p>
                      )}
                    </div>

                    {/* OTP Input */}
                    <div className="space-y-3">
                      <Label className="font-poppins text-sm font-medium text-gray-700">
                        Enter OTP
                      </Label>
                      <div className="flex gap-3 justify-between">
                        {otp.map((digit, index) => (
                          <input
                            key={index}
                            type="text"
                            inputMode="numeric"
                            pattern="[0-9]*"
                            maxLength={1}
                            value={digit}
                            onChange={(e) => handleOTPChange(index, e.target.value.replace(/\D/g, ''))}
                            onKeyDown={(e) => handleOTPKeyDown(index, e)}
                            data-otp-index={index}
                            className="w-12 h-12 text-center font-poppins font-semibold text-lg bg-gray-50 border-0 rounded-xl focus:bg-white focus:ring-2 focus:ring-primary focus:outline-none transition-colors"
                          />
                        ))}
                      </div>
                      
                      {/* Countdown */}
                      {countdown > 0 && (
                        <p className="font-poppins text-xs text-gray-500 text-center">
                          {formatCountdown(countdown)}
                        </p>
                      )}
                    </div>

                    {/* Verify Button */}
                    <Button
                      onClick={handleVerifyLogin}
                      disabled={isLoading || otp.join('').length !== 6}
                      className="w-full h-12 bg-gray-800 hover:bg-gray-900 text-white font-poppins font-semibold rounded-xl transition-colors disabled:opacity-50"
                    >
                      {isLoading ? (
                        <div className="flex items-center gap-2">
                          <div className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" />
                          Verifying...
                        </div>
                      ) : (
                        <>
                          Verify and Login
                          <svg className="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                          </svg>
                        </>
                      )}
                    </Button>

                    {/* Resend OTP */}
                    {countdown === 0 && (
                      <button
                        onClick={() => {
                          setStep('email');
                          setOtp(['', '', '', '', '', '']);
                        }}
                        className="w-full font-poppins text-sm text-gray-600 hover:text-gray-800 transition-colors"
                      >
                        Didn't receive OTP? Send again
                      </button>
                    )}
                  </div>
                )}
              </div>
            </div>
          </motion.div>
        </>
      )}
    </AnimatePresence>
  );
}