'use client';

import { useState, useRef, useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function OTPScreen() {
  const [otp, setOtp] = useState(['', '', '', '']);
  const [timer, setTimer] = useState(59);
  const inputRefs = [
    useRef<HTMLInputElement>(null),
    useRef<HTMLInputElement>(null),
    useRef<HTMLInputElement>(null),
    useRef<HTMLInputElement>(null)
  ];
  const router = useRouter();

  useEffect(() => {
    if (timer > 0) {
      const interval = setInterval(() => {
        setTimer(prev => prev - 1);
      }, 1000);
      return () => clearInterval(interval);
    }
  }, [timer]);

  const handleChange = (index: number, value: string) => {
    if (value.length > 1) return;
    
    const newOtp = [...otp];
    newOtp[index] = value;
    setOtp(newOtp);

    if (value && index < 3) {
      inputRefs[index + 1].current?.focus();
    }
  };

  const handleKeyDown = (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Backspace' && !otp[index] && index > 0) {
      inputRefs[index - 1].current?.focus();
    }
  };

  const handleResend = () => {
    if (timer === 0) {
      setTimer(59);
      setOtp(['', '', '', '']);
      inputRefs[0].current?.focus();
    }
  };

  const handleVerify = () => {
    if (otp.every(digit => digit !== '')) {
      router.push('/mobile/home');
    }
  };

  return (
    <div className="min-h-screen bg-slate-100" dir="rtl" style={{ maxWidth: '390px', margin: '0 auto' }}>
      <div className="h-11"></div>

      <div className="h-14 bg-white shadow-sm flex items-center justify-center px-4 relative">
        <button 
          onClick={() => router.back()}
          className="absolute right-4 w-10 h-10 flex items-center justify-center cursor-pointer"
        >
          <i className="ri-arrow-right-line text-slate-900 text-xl"></i>
        </button>
        <h1 className="text-lg font-bold text-slate-900">
          التحقق من الرقم
        </h1>
      </div>

      <div className="px-6 py-12 text-center">
        <div className="w-20 h-20 bg-emerald-50 rounded-full flex items-center justify-center mx-auto mb-4">
          <i className="ri-smartphone-line text-emerald-600 text-4xl"></i>
        </div>

        <h2 className="text-[22px] font-bold text-slate-900 mb-3">
          أدخلي كود التحقق
        </h2>
        
        <p className="text-sm text-slate-600 mb-1">
          أرسلنا كود مكون من 4 أرقام إلى
        </p>
        <p className="text-[15px] font-bold text-emerald-600 mb-8">
          +966 5XX XXX XXX
        </p>

        <div className="flex justify-center gap-3 mb-6" dir="ltr">
          {otp.map((digit, index) => (
            <input
              key={index}
              ref={inputRefs[index]}
              type="text"
              inputMode="numeric"
              maxLength={1}
              value={digit}
              onChange={(e) => handleChange(index, e.target.value)}
              onKeyDown={(e) => handleKeyDown(index, e)}
              className={`w-16 h-16 text-center text-2xl font-bold rounded-xl transition-all focus:outline-none ${
                digit 
                  ? 'bg-emerald-50 border-2 border-emerald-600 text-slate-900' 
                  : 'bg-white border border-slate-200 text-slate-900 focus:ring-2 focus:ring-emerald-500 focus:border-transparent'
              }`}
            />
          ))}
        </div>

        <div className="mb-8">
          {timer > 0 ? (
            <p className="text-sm text-slate-600">
              إعادة الإرسال بعد 0:{timer.toString().padStart(2, '0')}
            </p>
          ) : (
            <button 
              onClick={handleResend}
              className="text-sm text-emerald-600 font-semibold cursor-pointer"
            >
              إعادة إرسال الكود
            </button>
          )}
        </div>

        <button 
          onClick={handleVerify}
          disabled={!otp.every(digit => digit !== '')}
          className={`w-full h-[52px] rounded-xl font-semibold text-base transition-all whitespace-nowrap ${
            otp.every(digit => digit !== '')
              ? 'bg-emerald-600 text-white hover:bg-emerald-700 active:scale-95 cursor-pointer'
              : 'bg-slate-200 text-slate-400 cursor-not-allowed'
          }`}
        >
          تأكيد
        </button>
      </div>

      <div className="h-[34px]"></div>
    </div>
  );
}