import React, { useState, useRef, useEffect } from "react";

const OtpVerificationScreen = ({ onBack, onSuccess }) => {
  const [otp, setOtp] = useState(["", "", "", "", "", ""]);
  const [timeLeft, setTimeLeft] = useState(20);
  const inputRefs = useRef([]);

  useEffect(() => {
    if (timeLeft > 0) {
      const timer = setTimeout(() => setTimeLeft(timeLeft - 1), 1000);
      return () => clearTimeout(timer);
    }
  }, [timeLeft]);

  const handleChange = (index, value) => {
    if (isNaN(value)) return;

    const newOtp = [...otp];
    newOtp[index] = value;
    setOtp(newOtp);

    // Auto-focus next input
    if (value !== "" && index < 5) {
      inputRefs.current[index + 1].focus();
    }
  };

  const handleKeyDown = (index, e) => {
    // Auto-focus previous input on backspace if current is empty
    if (e.key === "Backspace" && index > 0 && otp[index] === "") {
      inputRefs.current[index - 1].focus();
    }
  };

  return (
    <div className="w-full max-w-sm mx-auto p-4 sm:p-8 animate-fadeInUp">
      <div className="text-center mb-8">
        <h2 className="text-2xl font-bold text-dark-900 mb-2">Verify Your Number</h2>
        <p className="text-sm text-dark-700 leading-relaxed">
          We've sent a 6-digit code to your phone. Please enter it below to continue.
        </p>
      </div>

      <div className="flex gap-2 justify-center mb-6">
        {otp.map((data, index) => (
          <input
            key={index}
            type="text"
            maxLength={1}
            ref={(el) => (inputRefs.current[index] = el)}
            value={data}
            onChange={(e) => handleChange(index, e.target.value)}
            onKeyDown={(e) => handleKeyDown(index, e)}
            className="w-10 h-10 sm:w-12 sm:h-12 border border-gray-300 rounded-lg text-center text-lg font-bold text-dark-900 focus:border-primary-600 focus:ring-1 focus:ring-primary-600 outline-none transition-all"
          />
        ))}
      </div>

      <button
        onClick={onSuccess}
        className="w-full bg-primary-600 hover:bg-primary-700 text-white font-bold text-sm py-3.5 rounded-2xl mb-4 transition-colors"
      >
        Continue
      </button>

      <div className="text-center mb-6">
        {timeLeft > 0 ? (
          <p className="text-sm text-dark-400">Resend OTP in {timeLeft}s</p>
        ) : (
          <button className="text-sm text-primary-600 font-semibold hover:text-primary-700">
            Resend OTP
          </button>
        )}
      </div>

      <div className="flex justify-between items-center text-sm font-semibold text-primary-600 mt-2">
        <button onClick={onBack} className="flex items-center gap-1 hover:text-primary-700">
          <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>
          Edit number
        </button>
      </div>
    </div>
  );
};

export default OtpVerificationScreen;
