remove profile editing keep

app/profile/page.js

@@ -1,29 +1,22 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion } from 'framer-motion';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
-import Image from 'next/image';
 import {
   User,
   Mail,
   Phone,
   MessageCircle,
-  Camera,
+  Check,
-  Save,
   X,
-  CheckCircle,
-  AlertCircle,
   ArrowLeft,
   Building,
   Home,
   Calendar,
   MapPin,
-  Edit,
   Loader2,
-  Upload,
-  Check,
   Pencil
 } from 'lucide-react';
 import toast, { Toaster } from 'react-hot-toast';
@@ -34,9 +27,9 @@ export default function ProfilePage() {
   const router = useRouter();
   const [user, setUser] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
-  const [isSaving, setIsSaving] = useState(false);
 
-  const [editingField, setEditingField] = useState(null);
+  const [editingBio, setEditingBio] = useState(false);
+  const [bioDraft, setBioDraft] = useState('');
 
   const [formData, setFormData] = useState({
     name: '',
@@ -48,20 +41,7 @@ export default function ProfilePage() {
     joinedDate: ''
   });
 
-  const [tempValues, setTempValues] = useState({});
-  const [avatar, setAvatar] = useState(null);
   const [avatarPreview, setAvatarPreview] = useState('');
-  const [errors, setErrors] = useState({});
-  
-  const fileInputRef = useRef(null);
-  const inputRefs = {
-    name: useRef(null),
-    email: useRef(null),
-    phone: useRef(null),
-    whatsapp: useRef(null),
-    location: useRef(null),
-    bio: useRef(null)
-  };
 
   useEffect(() => {
     const authUser = AuthService.getUser();
@@ -74,15 +54,11 @@ export default function ProfilePage() {
         role: AuthService.isOwner() ? 'owner' : 'customer',
       };
       setUser(userData);
-      console.log('[Profile] User from JWT:', userData);
 
-      // Fetch full profile from API using user ID (SID from JWT)
       async function fetchProfile() {
         try {
           const fetchFn = userData.role === 'owner' ? getOwnerByUserId : getCustomerByUserId;
-          console.log('[Profile] Fetching profile via', userData.role === 'owner' ? 'Owner' : 'Customer', 'GetByUserId:', userData.id);
           const profile = await fetchFn(userData.id);
-          console.log('[Profile] API profile:', profile);
 
           if (profile) {
             const profileData = {
@@ -97,16 +73,15 @@ export default function ProfilePage() {
                 : new Date().toLocaleDateString('ar-SA', { month: 'long', year: 'numeric' }),
             };
             setFormData(profileData);
-            setTempValues(profileData);
+            setBioDraft(profileData.bio);
             localStorage.setItem('userProfile', JSON.stringify(profileData));
             setIsLoading(false);
             return;
           }
         } catch (err) {
-          console.warn('[Profile] API fetch failed, falling back to JWT/localStorage:', err);
+          // Ignore API errors and fall back to local data.
         }
 
-        // Fallback to JWT + localStorage
         const savedProfile = localStorage.getItem('userProfile');
         let profileData;
         if (savedProfile) {
@@ -123,7 +98,7 @@ export default function ProfilePage() {
           };
         }
         setFormData(profileData);
-        setTempValues(profileData);
+        setBioDraft(profileData.bio || '');
         setIsLoading(false);
       }
 
@@ -138,114 +113,22 @@ export default function ProfilePage() {
     }
   }, [router]);
 
-  useEffect(() => {
+  const startBioEditing = () => {
-    if (editingField && inputRefs[editingField]?.current) {
+    setBioDraft(formData.bio || '');
-      inputRefs[editingField].current.focus();
+    setEditingBio(true);
-    }
-  }, [editingField]);
-
-  const handleImageUpload = (file) => {
-    if (!file) return;
-
-    if (!file.type.startsWith('image/')) {
-      toast.error('الرجاء اختيار صورة صالحة');
-      return;
-    }
-
-    if (file.size > 2 * 1024 * 1024) {
-      toast.error('حجم الصورة يجب أن يكون أقل من 2 ميجابايت');
-      return;
-    }
-
-    const reader = new FileReader();
-    reader.onloadend = () => {
-      setAvatarPreview(reader.result);
-      localStorage.setItem('userAvatar', reader.result);
-      toast.success('تم تغيير الصورة بنجاح');
-    };
-    reader.readAsDataURL(file);
   };
 
-  const validateField = (field, value) => {
+  const cancelBioEditing = () => {
-    if (field === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+    setBioDraft(formData.bio || '');
-      return 'البريد الإلكتروني غير صالح';
+    setEditingBio(false);
-    }
-    if ((field === 'phone' || field === 'whatsapp') && value && !/^(09|05)[0-9]{8}$/.test(value)) {
-      return 'رقم الهاتف غير صالح (يجب أن يبدأ 09 أو 05)';
-    }
-    if (field === 'name' && !value?.trim()) {
-      return 'الاسم مطلوب';
-    }
-    return null;
   };
 
-  const startEditing = (field) => {
+  const saveBio = () => {
-    setEditingField(field);
+    const updatedData = { ...formData, bio: bioDraft };
-    setTempValues(prev => ({ ...prev, [field]: formData[field] }));
-    setErrors(prev => ({ ...prev, [field]: null }));
-  };
-
-  const cancelEditing = () => {
-    setEditingField(null);
-    setTempValues({});
-    setErrors({});
-  };
-
-  const saveField = (field) => {
-    const value = tempValues[field];
-    const error = validateField(field, value);
-    
-    if (error) {
-      setErrors(prev => ({ ...prev, [field]: error }));
-      return;
-    }
-
-    const updatedData = { ...formData, [field]: value };
     setFormData(updatedData);
-    
     localStorage.setItem('userProfile', JSON.stringify(updatedData));
-    
+    setEditingBio(false);
-    if (field === 'name') {
+    toast.success('تم تحديث نبذة عني بنجاح');
-      const updatedUser = { ...user, name: value };
-      setUser(updatedUser);
-    }
-    
-    setEditingField(null);
-    setTempValues({});
-    toast.success(`تم تحديث ${getFieldLabel(field)} بنجاح`);
-  };
-
-  const handleKeyDown = (e, field) => {
-    if (e.key === 'Enter') {
-      saveField(field);
-    } else if (e.key === 'Escape') {
-      cancelEditing();
-    }
-  };
-
-  const getFieldLabel = (field) => {
-    const labels = {
-      name: 'الاسم',
-      email: 'البريد الإلكتروني',
-      phone: 'رقم الهاتف',
-      whatsapp: 'رقم الواتساب',
-      location: 'الموقع',
-      bio: 'نبذة عني'
-    };
-    return labels[field] || field;
-  };
-
-  const getFieldIcon = (field) => {
-    const icons = {
-      name: User,
-      email: Mail,
-      phone: Phone,
-      whatsapp: MessageCircle,
-      location: MapPin,
-      bio: User
-    };
-    const Icon = icons[field];
-    return Icon ? <Icon className="w-5 h-5 text-gray-400" /> : null;
   };
 
   const fadeInUp = {
@@ -307,8 +190,7 @@ export default function ProfilePage() {
           <div className="px-8 pb-8">
             <div className="flex justify-center -mt-16 mb-6">
               <div className="relative group">
-                <div className="w-32 h-32 rounded-full border-4 border-white bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center text-white text-4xl font-bold shadow-xl overflow-hidden cursor-pointer"
+                <div className="w-32 h-32 rounded-full border-4 border-white bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center text-white text-4xl font-bold shadow-xl overflow-hidden">
-                     onClick={() => fileInputRef.current?.click()}>
                   {avatarPreview ? (
                     <img
                       src={avatarPreview}
@@ -319,107 +201,17 @@ export default function ProfilePage() {
                     formData.name?.charAt(0).toUpperCase() || 'U'
                   )}
                 </div>
-                
-                <button
-                  onClick={() => fileInputRef.current?.click()}
-                  className="absolute bottom-0 right-0 w-8 h-8 bg-amber-500 rounded-full flex items-center justify-center text-white hover:bg-amber-600 transition-colors shadow-lg"
-                  title="تغيير الصورة"
-                >
-                  <Camera className="w-4 h-4" />
-                </button>
-                
-                <input
-                  ref={fileInputRef}
-                  type="file"
-                  accept="image/*"
-                  onChange={(e) => handleImageUpload(e.target.files?.[0])}
-                  className="hidden"
-                />
               </div>
             </div>
 
             <div className="text-center mb-6">
               <div className="flex items-center justify-center gap-2">
-                {editingField === 'name' ? (
+                <h1 className="text-3xl font-bold text-gray-900">{formData.name}</h1>
-                  <div className="flex items-center gap-2">
-                    <input
-                      ref={inputRefs.name}
-                      type="text"
-                      value={tempValues.name || ''}
-                      onChange={(e) => setTempValues({...tempValues, name: e.target.value})}
-                      onKeyDown={(e) => handleKeyDown(e, 'name')}
-                      className="text-3xl font-bold text-center border-b-2 border-amber-500 outline-none px-2 py-1 w-64"
-                      placeholder="الاسم الكامل"
-                    />
-                    <button
-                      onClick={() => saveField('name')}
-                      className="p-2 bg-green-500 text-white rounded-full hover:bg-green-600 transition-colors"
-                      title="حفظ"
-                    >
-                      <Check className="w-4 h-4" />
-                    </button>
-                    <button
-                      onClick={cancelEditing}
-                      className="p-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition-colors"
-                      title="إلغاء"
-                    >
-                      <X className="w-4 h-4" />
-                    </button>
-                  </div>
-                ) : (
-                  <>
-                    <h1 className="text-3xl font-bold text-gray-900">{formData.name}</h1>
-                    <button
-                      onClick={() => startEditing('name')}
-                      className="p-2 text-gray-400 hover:text-amber-500 transition-colors"
-                      title="تعديل الاسم"
-                    >
-                      <Pencil className="w-4 h-4" />
-                    </button>
-                  </>
-                )}
               </div>
-              {errors.name && (
-                <p className="text-red-500 text-sm mt-1">{errors.name}</p>
-              )}
 
               <div className="flex items-center justify-center gap-2 text-gray-500 mt-2">
                 <MapPin className="w-4 h-4" />
-                {editingField === 'location' ? (
+                <span>{formData.location || 'الموقع غير محدد'}</span>
-                  <div className="flex items-center gap-2">
-                    <input
-                      ref={inputRefs.location}
-                      type="text"
-                      value={tempValues.location || ''}
-                      onChange={(e) => setTempValues({...tempValues, location: e.target.value})}
-                      onKeyDown={(e) => handleKeyDown(e, 'location')}
-                      className="border-b border-amber-500 outline-none px-2 py-1"
-                      placeholder="الموقع"
-                    />
-                    <button
-                      onClick={() => saveField('location')}
-                      className="text-green-500 hover:text-green-600"
-                    >
-                      <Check className="w-4 h-4" />
-                    </button>
-                    <button
-                      onClick={cancelEditing}
-                      className="text-red-500 hover:text-red-600"
-                    >
-                      <X className="w-4 h-4" />
-                    </button>
-                  </div>
-                ) : (
-                  <>
-                    <span>{formData.location || 'الموقع غير محدد'}</span>
-                    <button
-                      onClick={() => startEditing('location')}
-                      className="text-gray-400 hover:text-amber-500 transition-colors"
-                    >
-                      <Pencil className="w-3 h-3" />
-                    </button>
-                  </>
-                )}
               </div>
 
               <div className="flex items-center justify-center gap-2 text-gray-500 mt-1">
@@ -434,53 +226,11 @@ export default function ProfilePage() {
                   <label className="text-sm font-medium text-gray-600">
                     البريد الإلكتروني
                   </label>
-                  {editingField !== 'email' && (
-                    <button
-                      onClick={() => startEditing('email')}
-                      className="opacity-0 group-hover:opacity-100 transition-opacity text-gray-400 hover:text-amber-500"
-                    >
-                      <Pencil className="w-4 h-4" />
-                    </button>
-                  )}
                 </div>
-                
+                <div className="flex items-center gap-2 text-gray-900">
-                {editingField === 'email' ? (
+                  <Mail className="w-5 h-5 text-gray-400" />
-                  <div className="space-y-2">
+                  <span>{formData.email}</span>
-                    <div className="flex gap-2">
+                </div>
-                      <input
-                        ref={inputRefs.email}
-                        type="email"
-                        value={tempValues.email || ''}
-                        onChange={(e) => setTempValues({...tempValues, email: e.target.value})}
-                        onKeyDown={(e) => handleKeyDown(e, 'email')}
-                        className="flex-1 px-3 py-2 border rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent"
-                        placeholder="example@domain.com"
-                      />
-                      <button
-                        onClick={() => saveField('email')}
-                        className="p-2 bg-green-500 text-white rounded-lg hover:bg-green-600"
-                        title="حفظ"
-                      >
-                        <Check className="w-4 h-4" />
-                      </button>
-                      <button
-                        onClick={cancelEditing}
-                        className="p-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
-                        title="إلغاء"
-                      >
-                        <X className="w-4 h-4" />
-                      </button>
-                    </div>
-                    {errors.email && (
-                      <p className="text-red-500 text-xs">{errors.email}</p>
-                    )}
-                  </div>
-                ) : (
-                  <div className="flex items-center gap-2 text-gray-900">
-                    <Mail className="w-5 h-5 text-gray-400" />
-                    <span>{formData.email}</span>
-                  </div>
-                )}
               </div>
 
               <div className="bg-gray-50 p-4 rounded-xl group">
@@ -488,51 +238,11 @@ export default function ProfilePage() {
                   <label className="text-sm font-medium text-gray-600">
                     رقم الهاتف
                   </label>
-                  {editingField !== 'phone' && (
-                    <button
-                      onClick={() => startEditing('phone')}
-                      className="opacity-0 group-hover:opacity-100 transition-opacity text-gray-400 hover:text-amber-500"
-                    >
-                      <Pencil className="w-4 h-4" />
-                    </button>
-                  )}
                 </div>
-                
+                <div className="flex items-center gap-2 text-gray-900">
-                {editingField === 'phone' ? (
+                  <Phone className="w-5 h-5 text-gray-400" />
-                  <div className="space-y-2">
+                  <span>{formData.phone || 'غير محدد'}</span>
-                    <div className="flex gap-2">
+                </div>
-                      <input
-                        ref={inputRefs.phone}
-                        type="tel"
-                        value={tempValues.phone || ''}
-                        onChange={(e) => setTempValues({...tempValues, phone: e.target.value})}
-                        onKeyDown={(e) => handleKeyDown(e, 'phone')}
-                        className="flex-1 px-3 py-2 border rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent"
-                        placeholder="09XXXXXXXX"
-                      />
-                      <button
-                        onClick={() => saveField('phone')}
-                        className="p-2 bg-green-500 text-white rounded-lg hover:bg-green-600"
-                      >
-                        <Check className="w-4 h-4" />
-                      </button>
-                      <button
-                        onClick={cancelEditing}
-                        className="p-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
-                      >
-                        <X className="w-4 h-4" />
-                      </button>
-                    </div>
-                    {errors.phone && (
-                      <p className="text-red-500 text-xs">{errors.phone}</p>
-                    )}
-                  </div>
-                ) : (
-                  <div className="flex items-center gap-2 text-gray-900">
-                    <Phone className="w-5 h-5 text-gray-400" />
-                    <span>{formData.phone || 'غير محدد'}</span>
-                  </div>
-                )}
               </div>
 
               <div className="bg-gray-50 p-4 rounded-xl group">
@@ -540,51 +250,11 @@ export default function ProfilePage() {
                   <label className="text-sm font-medium text-gray-600">
                     رقم الواتساب
                   </label>
-                  {editingField !== 'whatsapp' && (
-                    <button
-                      onClick={() => startEditing('whatsapp')}
-                      className="opacity-0 group-hover:opacity-100 transition-opacity text-gray-400 hover:text-amber-500"
-                    >
-                      <Pencil className="w-4 h-4" />
-                    </button>
-                  )}
                 </div>
-                
+                <div className="flex items-center gap-2 text-gray-900">
-                {editingField === 'whatsapp' ? (
+                  <MessageCircle className="w-5 h-5 text-gray-400" />
-                  <div className="space-y-2">
+                  <span>{formData.whatsapp || 'غير محدد'}</span>
-                    <div className="flex gap-2">
+                </div>
-                      <input
-                        ref={inputRefs.whatsapp}
-                        type="tel"
-                        value={tempValues.whatsapp || ''}
-                        onChange={(e) => setTempValues({...tempValues, whatsapp: e.target.value})}
-                        onKeyDown={(e) => handleKeyDown(e, 'whatsapp')}
-                        className="flex-1 px-3 py-2 border rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent"
-                        placeholder="09XXXXXXXX"
-                      />
-                      <button
-                        onClick={() => saveField('whatsapp')}
-                        className="p-2 bg-green-500 text-white rounded-lg hover:bg-green-600"
-                      >
-                        <Check className="w-4 h-4" />
-                      </button>
-                      <button
-                        onClick={cancelEditing}
-                        className="p-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
-                      >
-                        <X className="w-4 h-4" />
-                      </button>
-                    </div>
-                    {errors.whatsapp && (
-                      <p className="text-red-500 text-xs">{errors.whatsapp}</p>
-                    )}
-                  </div>
-                ) : (
-                  <div className="flex items-center gap-2 text-gray-900">
-                    <MessageCircle className="w-5 h-5 text-gray-400" />
-                    <span>{formData.whatsapp || 'غير محدد'}</span>
-                  </div>
-                )}
               </div>
 
               <div className="bg-gray-50 p-4 rounded-xl">
@@ -612,9 +282,9 @@ export default function ProfilePage() {
                 <label className="text-sm font-medium text-gray-600">
                   نبذة عني
                 </label>
-                {editingField !== 'bio' && (
+                {!editingBio && (
                   <button
-                    onClick={() => startEditing('bio')}
+                    onClick={startBioEditing}
                     className="opacity-0 group-hover:opacity-100 transition-opacity text-gray-400 hover:text-amber-500"
                   >
                     <Pencil className="w-4 h-4" />
@@ -622,26 +292,26 @@ export default function ProfilePage() {
                 )}
               </div>
 
-              {editingField === 'bio' ? (
+              {editingBio ? (
                 <div className="space-y-2">
                   <textarea
-                    ref={inputRefs.bio}
+                    value={bioDraft}
-                    value={tempValues.bio || ''}
+                    onChange={(e) => setBioDraft(e.target.value)}
-                    onChange={(e) => setTempValues({...tempValues, bio: e.target.value})}
                     rows="4"
+                    autoFocus
                     className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent"
                     placeholder="اكتب نبذة عن نفسك..."
                   />
                   <div className="flex justify-end gap-2">
                     <button
-                      onClick={() => saveField('bio')}
+                      onClick={saveBio}
                       className="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 flex items-center gap-2"
                     >
                       <Check className="w-4 h-4" />
                       حفظ
                     </button>
                     <button
-                      onClick={cancelEditing}
+                      onClick={cancelBioEditing}
                       className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 flex items-center gap-2"
                     >
                       <X className="w-4 h-4" />