'use client';

import { useState } from 'react';

export default function ChangePhoneModal({ onClose }: { onClose: () => void }) {
  const [step, setStep] = useState<'phone' | 'otp'>('phone');
  const [phone, setPhone] = useState('');
  const [otp, setOtp] = useState(['', '', '', '']);
  const [saved, setSaved] = useState(false);

  const handleOtpChange = (index: number, value: string) => {
    if (value.length > 1) return;
    const newOtp = [...otp];
    newOtp[index] = value;
    setOtp(newOtp);
    if (value && index < 3) {
      const next = document.getElementById(`otp-phone-${index + 1}`);
      if (next) (next as HTMLInputElement).focus();
    }
  };

  const handleConfirm = () => {
    setSaved(true);
    setTimeout(() => {
      setSaved(false);
      onClose();
    }, 1200);
  };

  return (
    <div className="fixed inset-0 z-50 flex items-end justify-center" style={{ background: 'rgba(0,0,0,0.5)' }} onClick={onClose}>
      <div
        className="w-full rounded-t-3xl p-6 pb-10"
        style={{ maxWidth: '390px', background: 'white' }}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="w-10 h-1 rounded-full mx-auto mb-5" style={{ background: '#E2E8F0' }}></div>

        <div className="flex items-center justify-between mb-6">
          <h2 className="text-lg font-bold text-slate-800" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>تغيير رقم الجوال</h2>
          <button onClick={onClose} className="w-8 h-8 rounded-full flex items-center justify-center cursor-pointer" style={{ background: '#F1F5F9' }}>
            <i className="ri-close-line text-slate-500 text-lg"></i>
          </button>
        </div>

        {step === 'phone' ? (
          <>
            <div className="flex items-center gap-3 p-4 rounded-xl mb-5" style={{ background: '#EEF2FF' }}>
              <i className="ri-information-fill text-xl" style={{ color: '#1E3A8A' }}></i>
              <p className="text-xs text-slate-600 text-right" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                سيتم إرسال رمز التحقق على الرقم الجديد
              </p>
            </div>

            <div className="mb-5">
              <label className="block text-xs font-semibold text-slate-500 mb-1.5 text-right" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>رقم الجوال الجديد</label>
              <div className="flex items-center gap-2 px-4 h-12 rounded-xl border" style={{ background: '#F8FAFF', borderColor: '#E0E7FF' }}>
                <i className="ri-smartphone-fill text-slate-400"></i>
                <input
                  type="tel"
                  value={phone}
                  onChange={(e) => setPhone(e.target.value)}
                  placeholder="05XXXXXXXX"
                  className="flex-1 bg-transparent text-sm text-right outline-none text-slate-800"
                  style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}
                  dir="ltr"
                />
              </div>
            </div>

            <button
              onClick={() => phone.length >= 10 && setStep('otp')}
              className="w-full h-12 rounded-xl font-bold text-base cursor-pointer whitespace-nowrap flex items-center justify-center gap-2"
              style={{
                background: phone.length >= 10 ? '#172554' : '#CBD5E1',
                color: 'white',
                fontFamily: '"IBM Plex Sans Arabic", sans-serif',
              }}
            >
              <i className="ri-send-plane-fill text-lg"></i>
              <span>إرسال رمز التحقق</span>
            </button>
          </>
        ) : (
          <>
            <p className="text-sm text-slate-500 text-right mb-5" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
              أدخل الرمز المرسل إلى <span className="font-bold text-slate-800">{phone}</span>
            </p>

            <div className="flex justify-center gap-3 mb-6" dir="ltr">
              {otp.map((digit, i) => (
                <input
                  key={i}
                  id={`otp-phone-${i}`}
                  type="text"
                  inputMode="numeric"
                  maxLength={1}
                  value={digit}
                  onChange={(e) => handleOtpChange(i, e.target.value)}
                  className="w-14 h-14 text-center text-xl font-bold rounded-xl border-2 outline-none transition-all"
                  style={{
                    fontFamily: '"IBM Plex Sans Arabic", sans-serif',
                    borderColor: digit ? '#172554' : '#E0E7FF',
                    background: digit ? '#EEF2FF' : '#F8FAFF',
                    color: '#172554',
                  }}
                />
              ))}
            </div>

            <button
              onClick={handleConfirm}
              className="w-full h-12 rounded-xl font-bold text-base cursor-pointer whitespace-nowrap flex items-center justify-center gap-2 transition-all"
              style={{
                background: saved ? '#059669' : '#172554',
                color: 'white',
                fontFamily: '"IBM Plex Sans Arabic", sans-serif',
              }}
            >
              {saved ? (
                <><i className="ri-check-line text-lg"></i><span>تم التغيير!</span></>
              ) : (
                <><i className="ri-shield-check-fill text-lg"></i><span>تأكيد التغيير</span></>
              )}
            </button>

            <button
              onClick={() => setStep('phone')}
              className="w-full mt-3 text-sm cursor-pointer whitespace-nowrap text-center"
              style={{ color: '#6366F1', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}
            >
              تغيير الرقم
            </button>
          </>
        )}
      </div>
    </div>
  );
}