Add enums, AuthService, and integrate backend registration endpoints

- Add separate enum files: BuildingType, PropertyStatus, BookingStatus, CommissionType, IdentityType, UserRole, City, LoginMethod, OwnerType, CustomerType
- Add AuthService (addToken/getToken/deleteToken)
- Update api.js: use AuthService, add Owner/Add and Customer/Add endpoints
- Update login page to use AuthService for token storage
- Rewrite owner register: 3-step flow with OwnerType dropdown, backend integration, OTP verification
- Rewrite tenant register: 2-step flow with CustomerType dropdown, backend integration, OTP verification
- Update homepage and property detail to use enums instead of hardcoded maps
- Update AddPropertyForm to import from enums directly
- Add console logs and status toasts linked to API response messages

app/register/tenant/page.js

@@ -5,80 +5,59 @@ import { motion } from 'framer-motion';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import {
-  User,
-  Mail,
-  Phone,
-  Lock,
-  Eye,
-  EyeOff,
-  CheckCircle,
-  XCircle,
-  ArrowLeft,
-  Home,
-  Loader2
+  User, Mail, Phone, Lock, Eye, EyeOff,
+  CheckCircle, XCircle, ArrowLeft, Home, Loader2,
+  Shield, KeyRound
 } from 'lucide-react';
 import toast, { Toaster } from 'react-hot-toast';
+import { addCustomer, loginWithEmail, sendEmailOTP, verifyEmail } from '../../utils/api';
+import AuthService from '../../services/AuthService';
+import { CustomerType, CustomerTypeLabels } from '../../enums';
 
 export default function TenantRegisterPage() {
   const router = useRouter();
+  const [step, setStep] = useState(1); // 1=form, 2=OTP
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+
   const [formData, setFormData] = useState({
     name: '',
     email: '',
     phone: '',
     password: '',
     confirmPassword: '',
+    customerType: CustomerType.PERSONAL,
     agreeTerms: false
   });
+
+  const [otpCode, setOtpCode] = useState('');
   const [errors, setErrors] = useState({});
 
-  const validateEmail = (email) => {
-    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    return re.test(email);
-  };
-
-  const validatePhone = (phone) => {
-    const re = /^(09|05)[0-9]{8}$/;
-    return re.test(phone);
-  };
+  const validateEmail = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+  const validatePhone = (phone) => /^(09|05)[0-9]{8}$/.test(phone);
 
   const validateForm = () => {
     const newErrors = {};
+    if (!formData.name) newErrors.name = 'الاسم الكامل مطلوب';
+    else if (formData.name.length < 3) newErrors.name = 'الاسم يجب أن يكون 3 أحرف على الأقل';
 
-    if (!formData.name) {
-      newErrors.name = 'الاسم الكامل مطلوب';
-    } else if (formData.name.length < 3) {
-      newErrors.name = 'الاسم يجب أن يكون 3 أحرف على الأقل';
-    }
+    if (!formData.email) newErrors.email = 'البريد الإلكتروني مطلوب';
+    else if (!validateEmail(formData.email)) newErrors.email = 'البريد الإلكتروني غير صالح';
 
-    if (!formData.email) {
-      newErrors.email = 'البريد الإلكتروني مطلوب';
-    } else if (!validateEmail(formData.email)) {
-      newErrors.email = 'البريد الإلكتروني غير صالح';
-    }
+    if (!formData.phone) newErrors.phone = 'رقم الهاتف مطلوب';
+    else if (!validatePhone(formData.phone)) newErrors.phone = 'رقم الهاتف غير صالح (يجب أن يبدأ 09 أو 05)';
 
-    if (!formData.phone) {
-      newErrors.phone = 'رقم الهاتف مطلوب';
-    } else if (!validatePhone(formData.phone)) {
-      newErrors.phone = 'رقم الهاتف غير صالح (يجب أن يبدأ 09 أو 05)';
-    }
+    if (!formData.password) newErrors.password = 'كلمة المرور مطلوبة';
+    else if (formData.password.length < 6) newErrors.password = 'كلمة المرور يجب أن تكون 6 أحرف على الأقل';
 
-    if (!formData.password) {
-      newErrors.password = 'كلمة المرور مطلوبة';
-    } else if (formData.password.length < 6) {
-      newErrors.password = 'كلمة المرور يجب أن تكون 6 أحرف على الأقل';
-    }
-
-    if (formData.password !== formData.confirmPassword) {
-      newErrors.confirmPassword = 'كلمات المرور غير متطابقة';
-    }
+    if (formData.password !== formData.confirmPassword) newErrors.confirmPassword = 'كلمات المرور غير متطابقة';
 
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   };
 
+  // ─── Main signup handler ───
   const handleSubmit = async (e) => {
     e.preventDefault();
 
@@ -86,32 +65,130 @@ export default function TenantRegisterPage() {
       toast.error('يرجى تصحيح الأخطاء في النموذج');
       return;
     }
-
     if (!formData.agreeTerms) {
       toast.error('يجب الموافقة على الشروط والأحكام');
       return;
     }
 
     setIsLoading(true);
+    console.log('[CustomerRegister] Submitting customer registration...');
 
-    setTimeout(() => {
+    const payload = {
+      name: formData.name,
+      email: formData.email,
+      phoneNumber: formData.phone,
+      password: formData.password,
+      customerType: formData.customerType,
+    };
+
+    try {
+      const res = await addCustomer(payload);
+      console.log('[CustomerRegister] addCustomer response:', res);
+
+      if (res.status === 200 || res.ok) {
+        // ── Store temp token for OTP flow ──
+        const tempToken = res.data;
+        if (tempToken) {
+          AuthService.addToken(tempToken);
+          console.log('[CustomerRegister] Temp token stored for OTP');
+        }
+
+        const apiMessage = res.message || res.data?.message;
+        toast.success(apiMessage || 'تم إنشاء الحساب! يرجى التحقق من بريدك الإلكتروني', {
+          duration: 4000,
+        });
+
+        // ── Auto-login to trigger OTP ──
+        console.log('[CustomerRegister] Auto-login to send OTP...');
+        const loginRes = await loginWithEmail(formData.email, formData.password);
+        console.log('[CustomerRegister] login response:', loginRes);
+
+        if (loginRes.status === 206) {
+          // OTP sent — move to OTP step
+          const otpToken = loginRes.data;
+          if (otpToken) {
+            AuthService.addToken(otpToken);
+            console.log('[CustomerRegister] OTP token stored');
+          }
+          const loginMsg = loginRes.message || loginRes.data?.message;
+          toast(loginMsg || 'تم إرسال رمز التحقق إلى بريدك الإلكتروني', { icon: '📧' });
+          setStep(2);
+        } else if (loginRes.status === 200) {
+          // Direct login success (no OTP needed)
+          const loginToken = loginRes.data;
+          if (loginToken) {
+            AuthService.addToken(loginToken);
+          }
+          toast.success(loginRes.message || 'تم تسجيل الدخول بنجاح!');
+          router.push('/');
+        }
+      } else {
+        // Registration failed
+        const errMsg = res.message || res.data?.message || 'فشل في إنشاء الحساب';
+        console.error('[CustomerRegister] Registration failed:', errMsg);
+        toast.error(errMsg);
+      }
+    } catch (err) {
+      console.error('[CustomerRegister] Error:', err);
+      toast.error(err.message || 'حدث خطأ أثناء التسجيل');
+    } finally {
       setIsLoading(false);
-      toast.success('تم إنشاء الحساب بنجاح!', {
-        style: { background: '#dcfce7', color: '#166534' },
-        duration: 3000
-      });
+    }
+  };
 
-      localStorage.setItem('user', JSON.stringify({
-        name: formData.name,
-        email: formData.email,
-        role: 'tenant',
-        avatar: formData.name.charAt(0).toUpperCase()
-      }));
+  // ─── OTP verification handler ───
+  const handleVerifyOTP = async () => {
+    if (!otpCode || otpCode.length < 4) {
+      toast.error('يرجى إدخال رمز التحقق');
+      return;
+    }
 
-      setTimeout(() => {
-        router.push('/');
-      }, 1500);
-    }, 2000);
+    setIsLoading(true);
+    console.log('[CustomerRegister] Verifying OTP:', otpCode);
+
+    try {
+      const res = await verifyEmail(otpCode);
+      console.log('[CustomerRegister] VerifyEmail response:', res);
+
+      if (res.status === 200) {
+        // ── Verified! Remove temp token, redirect to login ──
+        AuthService.deleteToken();
+        console.log('[CustomerRegister] Temp token removed after verification');
+
+        toast.success(res.message || 'تم التحقق من البريد الإلكتروني بنجاح!', {
+          duration: 3000,
+        });
+
+        setTimeout(() => {
+          router.push('/login');
+        }, 1500);
+      } else {
+        const errMsg = res.message || res.data?.message || 'رمز التحقق غير صحيح';
+        console.error('[CustomerRegister] Verification failed:', errMsg);
+        toast.error(errMsg);
+      }
+    } catch (err) {
+      console.error('[CustomerRegister] Verify error:', err);
+      toast.error(err.message || 'حدث خطأ أثناء التحقق');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // ─── Resend OTP ───
+  const handleResendOTP = async () => {
+    setIsLoading(true);
+    console.log('[CustomerRegister] Resending email OTP...');
+
+    try {
+      await sendEmailOTP();
+      toast.success('تم إرسال رمز تحقق جديد');
+    } catch (err) {
+      console.error('[CustomerRegister] Resend OTP error:', err);
+      toast.error('فشل في إرسال الرمز');
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   const fadeInUp = {
@@ -121,37 +198,25 @@ export default function TenantRegisterPage() {
   };
 
   const staggerContainer = {
-    animate: {
-      transition: {
-        staggerChildren: 0.1
-      }
-    }
+    animate: { transition: { staggerChildren: 0.1 } }
   };
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950 flex items-center justify-center p-4 relative overflow-hidden">
       <Toaster position="top-center" reverseOrder={false} />
 
+      {/* Background blobs */}
       <div className="absolute inset-0 overflow-hidden">
         {[...Array(20)].map((_, i) => (
           <motion.div
             key={i}
             className="absolute rounded-full bg-blue-500/10"
             style={{
-              left: `${Math.random() * 100}%`,
-              top: `${Math.random() * 100}%`,
-              width: Math.random() * 200 + 50,
-              height: Math.random() * 200 + 50,
-            }}
-            animate={{
-              x: [0, Math.random() * 100 - 50, 0],
-              y: [0, Math.random() * 100 - 50, 0],
-            }}
-            transition={{
-              duration: Math.random() * 15 + 15,
-              repeat: Infinity,
-              ease: "linear"
+              left: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`,
+              width: Math.random() * 200 + 50, height: Math.random() * 200 + 50,
             }}
+            animate={{ x: [0, Math.random() * 100 - 50, 0], y: [0, Math.random() * 100 - 50, 0] }}
+            transition={{ duration: Math.random() * 15 + 15, repeat: Infinity, ease: "linear" }}
           />
         ))}
       </div>
@@ -162,45 +227,40 @@ export default function TenantRegisterPage() {
         transition={{ duration: 0.5 }}
         className="relative z-10 w-full max-w-md"
       >
-        <motion.div
-          initial={{ opacity: 0, x: -20 }}
-          animate={{ opacity: 1, x: 0 }}
-          className="absolute -top-16 left-0"
-        >
-          <Link
-            href="/auth/choose-role"
-            className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors group"
-          >
-            <motion.div whileHover={{ x: -5 }}>
-              <ArrowLeft className="w-4 h-4" />
-            </motion.div>
+        {/* Back link */}
+        <motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} className="absolute -top-16 left-0">
+          <Link href="/auth/choose-role" className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors group">
+            <motion.div whileHover={{ x: -5 }}><ArrowLeft className="w-4 h-4" /></motion.div>
             <span>العودة</span>
           </Link>
         </motion.div>
 
+        {/* Progress */}
+        <div className="mb-6 mt-4 flex gap-2">
+          {[1, 2].map((s) => (
+            <motion.div key={s} className={`h-2 flex-1 rounded-full ${step >= s ? 'bg-blue-500' : 'bg-gray-700'}`} animate={{ scaleX: step >= s ? 1 : 0.5 }} />
+          ))}
+        </div>
+
         <div className="bg-white/5 backdrop-blur-xl rounded-3xl shadow-2xl border border-white/10 overflow-hidden">
+          {/* Header */}
           <div className="bg-gradient-to-r from-blue-500 to-blue-600 p-8 text-center relative overflow-hidden">
-            <motion.div
-              initial={{ scale: 0 }}
-              animate={{ scale: 1 }}
-              transition={{ delay: 0.2, type: "spring" }}
-              className="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full"
-            />
-            
-            <motion.div
-              initial={{ y: 20, opacity: 0 }}
-              animate={{ y: 0, opacity: 1 }}
-              className="relative z-10"
-            >
+            <motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: 0.2, type: "spring" }}
+              className="absolute -top-10 -right-10 w-40 h-40 bg-white/10 rounded-full" />
+            <motion.div initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} className="relative z-10">
               <motion.div
                 animate={{ rotate: [0, 10, -10, 0] }}
                 transition={{ duration: 2, repeat: Infinity }}
                 className="w-20 h-20 mx-auto mb-4 bg-white/20 rounded-2xl flex items-center justify-center backdrop-blur-sm"
               >
-                <Home className="w-10 h-10 text-white" />
+                {step === 2 ? <KeyRound className="w-10 h-10 text-white" /> : <Home className="w-10 h-10 text-white" />}
               </motion.div>
-              <h1 className="text-3xl font-bold text-white mb-2">إنشاء حساب مستأجر</h1>
-              <p className="text-blue-100">انضم إلينا وابحث عن منزل أحلامك</p>
+              <h1 className="text-3xl font-bold text-white mb-2">
+                {step === 1 ? 'إنشاء حساب مستأجر' : 'التحقق من البريد'}
+              </h1>
+              <p className="text-blue-100">
+                {step === 1 ? 'انضم إلينا وابحث عن منزل أحلامك' : 'أدخل رمز التحقق المرسل إلى بريدك'}
+              </p>
             </motion.div>
           </div>
 
@@ -209,230 +269,187 @@ export default function TenantRegisterPage() {
               variants={staggerContainer}
               initial="initial"
               animate="animate"
-              onSubmit={handleSubmit}
+              onSubmit={step === 1 ? handleSubmit : (e) => { e.preventDefault(); handleVerifyOTP(); }}
               className="space-y-6"
             >
-              <motion.div variants={fadeInUp}>
-                <label className="block text-sm font-medium text-gray-300 mb-2">
-                  الاسم الكامل <span className="text-red-500">*</span>
-                </label>
-                <div className="relative group">
-                  <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                    <User className={`w-5 h-5 ${
-                      errors.name ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'
-                    }`} />
-                  </div>
-                  <input
-                    type="text"
-                    value={formData.name}
-                    onChange={(e) => {
-                      setFormData({...formData, name: e.target.value});
-                      setErrors({...errors, name: null});
-                    }}
-                    className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${
-                      errors.name ? 'border-red-500' : 'border-gray-700'
-                    }`}
-                    placeholder="أدخل اسمك الكامل"
-                  />
-                </div>
-                {errors.name && (
-                  <p className="text-red-500 text-sm mt-1">{errors.name}</p>
-                )}
-              </motion.div>
+              {/* ─── STEP 1: Form fields ─── */}
+              {step === 1 && (
+                <>
+                  <motion.div variants={fadeInUp}>
+                    <label className="block text-sm font-medium text-gray-300 mb-2">الاسم الكامل <span className="text-red-500">*</span></label>
+                    <div className="relative group">
+                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                        <User className={`w-5 h-5 ${errors.name ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'}`} />
+                      </div>
+                      <input type="text" value={formData.name}
+                        onChange={(e) => { setFormData({...formData, name: e.target.value}); setErrors({...errors, name: null}); }}
+                        className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.name ? 'border-red-500' : 'border-gray-700'}`}
+                        placeholder="أدخل اسمك الكامل" />
+                    </div>
+                    {errors.name && <p className="text-red-500 text-sm mt-1">{errors.name}</p>}
+                  </motion.div>
 
-              <motion.div variants={fadeInUp}>
-                <label className="block text-sm font-medium text-gray-300 mb-2">
-                  البريد الإلكتروني <span className="text-red-500">*</span>
-                </label>
-                <div className="relative group">
-                  <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                    <Mail className={`w-5 h-5 ${
-                      errors.email ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'
-                    }`} />
-                  </div>
-                  <input
-                    type="email"
-                    value={formData.email}
-                    onChange={(e) => {
-                      setFormData({...formData, email: e.target.value});
-                      setErrors({...errors, email: null});
-                    }}
-                    className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${
-                      errors.email ? 'border-red-500' : 'border-gray-700'
-                    }`}
-                    placeholder="أدخل بريدك الإلكتروني"
-                  />
-                </div>
-                {errors.email && (
-                  <p className="text-red-500 text-sm mt-1">{errors.email}</p>
-                )}
-              </motion.div>
+                  <motion.div variants={fadeInUp}>
+                    <label className="block text-sm font-medium text-gray-300 mb-2">البريد الإلكتروني <span className="text-red-500">*</span></label>
+                    <div className="relative group">
+                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                        <Mail className={`w-5 h-5 ${errors.email ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'}`} />
+                      </div>
+                      <input type="email" value={formData.email}
+                        onChange={(e) => { setFormData({...formData, email: e.target.value}); setErrors({...errors, email: null}); }}
+                        className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.email ? 'border-red-500' : 'border-gray-700'}`}
+                        placeholder="أدخل بريدك الإلكتروني" />
+                    </div>
+                    {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email}</p>}
+                  </motion.div>
 
-              <motion.div variants={fadeInUp}>
-                <label className="block text-sm font-medium text-gray-300 mb-2">
-                  رقم الهاتف <span className="text-red-500">*</span>
-                </label>
-                <div className="relative group">
-                  <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                    <Phone className={`w-5 h-5 ${
-                      errors.phone ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'
-                    }`} />
-                  </div>
-                  <input
-                    type="tel"
-                    value={formData.phone}
-                    onChange={(e) => {
-                      setFormData({...formData, phone: e.target.value});
-                      setErrors({...errors, phone: null});
-                    }}
-                    className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${
-                      errors.phone ? 'border-red-500' : 'border-gray-700'
-                    }`}
-                    placeholder="أدخل رقم هاتفك"
-                  />
-                </div>
-                {errors.phone && (
-                  <p className="text-red-500 text-sm mt-1">{errors.phone}</p>
-                )}
-              </motion.div>
+                  <motion.div variants={fadeInUp}>
+                    <label className="block text-sm font-medium text-gray-300 mb-2">رقم الهاتف <span className="text-red-500">*</span></label>
+                    <div className="relative group">
+                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                        <Phone className={`w-5 h-5 ${errors.phone ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'}`} />
+                      </div>
+                      <input type="tel" value={formData.phone}
+                        onChange={(e) => { setFormData({...formData, phone: e.target.value}); setErrors({...errors, phone: null}); }}
+                        className={`w-full pr-12 pl-4 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.phone ? 'border-red-500' : 'border-gray-700'}`}
+                        placeholder="أدخل رقم هاتفك" />
+                    </div>
+                    {errors.phone && <p className="text-red-500 text-sm mt-1">{errors.phone}</p>}
+                  </motion.div>
 
-              <motion.div variants={fadeInUp}>
-                <label className="block text-sm font-medium text-gray-300 mb-2">
-                  كلمة المرور <span className="text-red-500">*</span>
-                </label>
-                <div className="relative group">
-                  <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                    <Lock className={`w-5 h-5 ${
-                      errors.password ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'
-                    }`} />
-                  </div>
-                  <input
-                    type={showPassword ? "text" : "password"}
-                    value={formData.password}
-                    onChange={(e) => {
-                      setFormData({...formData, password: e.target.value});
-                      setErrors({...errors, password: null});
-                    }}
-                    className={`w-full pr-12 pl-12 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${
-                      errors.password ? 'border-red-500' : 'border-gray-700'
-                    }`}
-                    placeholder="أدخل كلمة المرور"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowPassword(!showPassword)}
-                    className="absolute inset-y-0 left-0 pl-3 flex items-center"
-                  >
-                    {showPassword ? (
-                      <EyeOff className="w-5 h-5 text-gray-400 hover:text-gray-300" />
-                    ) : (
-                      <Eye className="w-5 h-5 text-gray-400 hover:text-gray-300" />
-                    )}
-                  </button>
-                </div>
-                {errors.password && (
-                  <p className="text-red-500 text-sm mt-1">{errors.password}</p>
-                )}
-              </motion.div>
+                  {/* Customer Type */}
+                  <motion.div variants={fadeInUp}>
+                    <label className="block text-sm font-medium text-gray-300 mb-2">نوع العميل <span className="text-red-500">*</span></label>
+                    <select
+                      value={formData.customerType}
+                      onChange={(e) => setFormData({...formData, customerType: e.target.value})}
+                      className="w-full py-3 px-4 bg-white/5 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white appearance-none cursor-pointer"
+                    >
+                      {Object.entries(CustomerTypeLabels).map(([value, label]) => (
+                        <option key={value} value={value} className="bg-gray-900 text-white">{label}</option>
+                      ))}
+                    </select>
+                    <p className="text-xs text-gray-500 mt-1">المحدد: {CustomerTypeLabels[formData.customerType]}</p>
+                    <p className="text-xs text-gray-600">[Console] customerType = {formData.customerType}</p>
+                  </motion.div>
 
-              <motion.div variants={fadeInUp}>
-                <label className="block text-sm font-medium text-gray-300 mb-2">
-                  تأكيد كلمة المرور <span className="text-red-500">*</span>
-                </label>
-                <div className="relative group">
-                  <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                    <Lock className={`w-5 h-5 ${
-                      errors.confirmPassword ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'
-                    }`} />
-                  </div>
-                  <input
-                    type={showConfirmPassword ? "text" : "password"}
-                    value={formData.confirmPassword}
-                    onChange={(e) => {
-                      setFormData({...formData, confirmPassword: e.target.value});
-                      setErrors({...errors, confirmPassword: null});
-                    }}
-                    className={`w-full pr-12 pl-12 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${
-                      errors.confirmPassword ? 'border-red-500' : 'border-gray-700'
-                    }`}
-                    placeholder="أعد إدخال كلمة المرور"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                    className="absolute inset-y-0 left-0 pl-3 flex items-center"
-                  >
-                    {showConfirmPassword ? (
-                      <EyeOff className="w-5 h-5 text-gray-400 hover:text-gray-300" />
-                    ) : (
-                      <Eye className="w-5 h-5 text-gray-400 hover:text-gray-300" />
-                    )}
-                  </button>
-                  {formData.confirmPassword && (
-                    <div className="absolute inset-y-0 left-12 flex items-center">
-                      {formData.password === formData.confirmPassword ? (
-                        <CheckCircle className="w-5 h-5 text-green-500" />
-                      ) : (
-                        <XCircle className="w-5 h-5 text-red-500" />
+                  <motion.div variants={fadeInUp}>
+                    <label className="block text-sm font-medium text-gray-300 mb-2">كلمة المرور <span className="text-red-500">*</span></label>
+                    <div className="relative group">
+                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                        <Lock className={`w-5 h-5 ${errors.password ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'}`} />
+                      </div>
+                      <input type={showPassword ? "text" : "password"} value={formData.password}
+                        onChange={(e) => { setFormData({...formData, password: e.target.value}); setErrors({...errors, password: null}); }}
+                        className={`w-full pr-12 pl-12 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.password ? 'border-red-500' : 'border-gray-700'}`}
+                        placeholder="أدخل كلمة المرور" />
+                      <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute inset-y-0 left-0 pl-3 flex items-center">
+                        {showPassword ? <EyeOff className="w-5 h-5 text-gray-400 hover:text-gray-300" /> : <Eye className="w-5 h-5 text-gray-400 hover:text-gray-300" />}
+                      </button>
+                    </div>
+                    {errors.password && <p className="text-red-500 text-sm mt-1">{errors.password}</p>}
+                  </motion.div>
+
+                  <motion.div variants={fadeInUp}>
+                    <label className="block text-sm font-medium text-gray-300 mb-2">تأكيد كلمة المرور <span className="text-red-500">*</span></label>
+                    <div className="relative group">
+                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                        <Lock className={`w-5 h-5 ${errors.confirmPassword ? 'text-red-500' : 'text-gray-400 group-focus-within:text-blue-500'}`} />
+                      </div>
+                      <input type={showConfirmPassword ? "text" : "password"} value={formData.confirmPassword}
+                        onChange={(e) => { setFormData({...formData, confirmPassword: e.target.value}); setErrors({...errors, confirmPassword: null}); }}
+                        className={`w-full pr-12 pl-12 py-3 bg-white/5 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500 transition-all ${errors.confirmPassword ? 'border-red-500' : 'border-gray-700'}`}
+                        placeholder="أعد إدخال كلمة المرور" />
+                      <button type="button" onClick={() => setShowConfirmPassword(!showConfirmPassword)} className="absolute inset-y-0 left-0 pl-3 flex items-center">
+                        {showConfirmPassword ? <EyeOff className="w-5 h-5 text-gray-400 hover:text-gray-300" /> : <Eye className="w-5 h-5 text-gray-400 hover:text-gray-300" />}
+                      </button>
+                      {formData.confirmPassword && (
+                        <div className="absolute inset-y-0 left-12 flex items-center">
+                          {formData.password === formData.confirmPassword ? <CheckCircle className="w-5 h-5 text-green-500" /> : <XCircle className="w-5 h-5 text-red-500" />}
+                        </div>
                       )}
                     </div>
-                  )}
-                </div>
-                {errors.confirmPassword && (
-                  <p className="text-red-500 text-sm mt-1">{errors.confirmPassword}</p>
-                )}
-              </motion.div>
+                    {errors.confirmPassword && <p className="text-red-500 text-sm mt-1">{errors.confirmPassword}</p>}
+                  </motion.div>
 
-              <motion.div variants={fadeInUp} className="flex items-center gap-2">
-                <input
-                  type="checkbox"
-                  id="terms"
-                  checked={formData.agreeTerms}
-                  onChange={(e) => setFormData({...formData, agreeTerms: e.target.checked})}
-                  className="w-4 h-4 rounded border-gray-600 bg-white/5 text-blue-500 focus:ring-blue-500 focus:ring-offset-0"
-                  required
-                />
-                <label htmlFor="terms" className="text-sm text-gray-300">
-                  أوافق على{' '}
-                  <Link href="/terms" className="text-blue-400 hover:text-blue-300">
-                    شروط الاستخدام
-                  </Link>
-                  {' '}و{' '}
-                  <Link href="/privacy" className="text-blue-400 hover:text-blue-300">
-                    سياسة الخصوصية
-                  </Link>
-                </label>
-              </motion.div>
+                  <motion.div variants={fadeInUp} className="flex items-center gap-2">
+                    <input type="checkbox" id="terms" checked={formData.agreeTerms}
+                      onChange={(e) => setFormData({...formData, agreeTerms: e.target.checked})}
+                      className="w-4 h-4 rounded border-gray-600 bg-white/5 text-blue-500 focus:ring-blue-500 focus:ring-offset-0" required />
+                    <label htmlFor="terms" className="text-sm text-gray-300">
+                      أوافق على <Link href="/terms" className="text-blue-400 hover:text-blue-300">شروط الاستخدام</Link> و <Link href="/privacy" className="text-blue-400 hover:text-blue-300">سياسة الخصوصية</Link>
+                    </label>
+                  </motion.div>
+                </>
+              )}
 
-              <motion.button
-                variants={fadeInUp}
-                type="submit"
-                disabled={isLoading || !formData.agreeTerms}
-                className="w-full bg-gradient-to-r from-blue-500 to-blue-600 text-white py-4 rounded-xl font-bold text-lg hover:from-blue-600 hover:to-blue-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-blue-500/25"
-              >
-                {isLoading ? (
-                  <div className="flex items-center justify-center gap-2">
-                    <Loader2 className="w-5 h-5 animate-spin" />
-                    <span>جاري إنشاء الحساب...</span>
+              {/* ─── STEP 2: OTP ─── */}
+              {step === 2 && (
+                <motion.div variants={fadeInUp} className="space-y-6">
+                  <div className="bg-blue-500/10 border border-blue-500/20 rounded-xl p-4 text-center">
+                    <Shield className="w-10 h-10 text-blue-500 mx-auto mb-2" />
+                    <p className="text-gray-300 text-sm">تم إرسال رمز التحقق إلى</p>
+                    <p className="text-blue-400 font-medium">{formData.email}</p>
                   </div>
-                ) : (
-                  'إنشاء حساب'
-                )}
-              </motion.button>
 
-              <motion.p variants={fadeInUp} className="text-center text-gray-400 mt-4">
-                لديك حساب بالفعل؟{' '}
-                <Link 
-                  href="/login" 
-                  className="text-blue-400 hover:text-blue-300 font-medium transition-colors"
-                >
-                  تسجيل الدخول
-                </Link>
-              </motion.p>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-300 mb-2">رمز التحقق <span className="text-red-500">*</span></label>
+                    <div className="relative group">
+                      <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                        <KeyRound className="w-5 h-5 text-gray-400 group-focus-within:text-blue-500" />
+                      </div>
+                      <input type="text" value={otpCode} maxLength={6}
+                        onChange={(e) => setOtpCode(e.target.value)}
+                        className="w-full pr-12 pl-4 py-3 bg-white/5 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white placeholder-gray-500 text-center tracking-[0.5em] text-xl transition-all"
+                        placeholder="------" />
+                    </div>
+                  </div>
+
+                  <button type="button" onClick={handleResendOTP} disabled={isLoading}
+                    className="w-full text-center text-blue-400 hover:text-blue-300 text-sm transition-colors disabled:opacity-50">
+                    إعادة إرسال الرمز
+                  </button>
+                </motion.div>
+              )}
+
+              {/* ─── Navigation Buttons ─── */}
+              <motion.div variants={fadeInUp} className="flex gap-3 pt-4">
+                {step === 1 && (
+                  <>
+                    <button type="button" onClick={() => router.push('/auth/choose-role')}
+                      className="flex-1 py-3 px-4 bg-white/5 border border-gray-700 rounded-xl text-gray-300 hover:bg-white/10 transition-colors">إلغاء</button>
+                    <button type="submit" disabled={isLoading}
+                      className="flex-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white py-3 px-4 rounded-xl font-medium hover:from-blue-600 hover:to-blue-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
+                      {isLoading ? (
+                        <div className="flex items-center justify-center gap-2">
+                          <Loader2 className="w-5 h-5 animate-spin" /><span>جاري التسجيل...</span>
+                        </div>
+                      ) : 'إنشاء حساب'}
+                    </button>
+                  </>
+                )}
+                {step === 2 && (
+                  <button type="submit" disabled={isLoading || !otpCode}
+                    className="flex-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white py-3 px-4 rounded-xl font-medium hover:from-blue-600 hover:to-blue-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
+                    {isLoading ? (
+                      <div className="flex items-center justify-center gap-2">
+                        <Loader2 className="w-5 h-5 animate-spin" /><span>جاري التحقق...</span>
+                      </div>
+                    ) : 'تحقق من الرمز'}
+                  </button>
+                )}
+              </motion.div>
+
+              {step === 1 && (
+                <motion.p variants={fadeInUp} className="text-center text-gray-400 mt-4">
+                  لديك حساب بالفعل؟{' '}
+                  <Link href="/login" className="text-blue-400 hover:text-blue-300 font-medium transition-colors">تسجيل الدخول</Link>
+                </motion.p>
+              )}
             </motion.form>
           </div>
         </div>
       </motion.div>
     </div>
   );
-}
+}