import { useState } from 'react';
import { Smartphone, ArrowLeft, ShieldCheck } from 'lucide-react';

export default function Auth({ onLogin }) {
  const [step, setStep] = useState(1);
  const [phone, setPhone] = useState('');
  const [otp, setOtp] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSendOtp = (e) => {
    e.preventDefault();
    if (phone.length < 10) return alert('شماره موبایل معتبر نیست');
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      setStep(2);
    }, 1000);
  };

  const handleVerifyOtp = (e) => {
    e.preventDefault();
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      onLogin(phone);
    }, 1000);
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-screen p-4">
      <div className="glass-panel p-8 rounded-2xl w-full max-w-md animate-slide-in">
        <div className="flex flex-col items-center mb-8">
          <div className="bg-white/10 p-4 rounded-full mb-4">
            <Smartphone className="w-8 h-8 text-primary" />
          </div>
          <h2 className="text-2xl font-bold text-white mb-2">
            {step === 1 ? 'ورود به حساب' : 'تایید شماره'}
          </h2>
          <p className="text-white/60 text-center text-sm">
            {step === 1 
              ? 'برای ادامه شماره موبایل خود را وارد کنید' 
              : `کد تایید برای ${phone} ارسال شد (کد تست: 1234)`}
          </p>
        </div>

        <form onSubmit={step === 1 ? handleSendOtp : handleVerifyOtp} className="space-y-4">
          {step === 1 ? (
            <div className="relative">
              <input
                type="tel"
                placeholder="09123456789"
                value={phone}
                onChange={(e) => setPhone(e.target.value)}
                className="glass-input w-full p-4 rounded-xl text-center text-lg tracking-widest placeholder:text-white/30"
                dir="ltr"
              />
            </div>
          ) : (
            <div className="relative">
              <input
                type="text"
                placeholder="کد تایید ۴ رقمی"
                value={otp}
                onChange={(e) => setOtp(e.target.value)}
                className="glass-input w-full p-4 rounded-xl text-center text-2xl tracking-[0.5em] placeholder:text-white/30"
                maxLength={4}
                dir="ltr"
              />
            </div>
          )}

          <button
            type="submit"
            disabled={loading}
            className="w-full bg-primary hover:bg-indigo-600 text-white font-bold py-4 rounded-xl transition-all duration-300 transform hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
          >
            {loading ? (
              <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
            ) : step === 1 ? (
              <>دریافت کد تایید <ShieldCheck className="w-4 h-4" /></>
            ) : (
              <>ورود به چت روم <ArrowLeft className="w-4 h-4 rotate-180" /></>
            )}
          </button>
          
          {step === 2 && (
            <button
              type="button"
              onClick={() => setStep(1)}
              className="w-full text-white/50 text-sm py-2 hover:text-white transition-colors"
            >
              اصلاح شماره موبایل
            </button>
          )}
        </form>
      </div>
    </div>
  );
}