'use client';

import { useState, useEffect, useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import Image from 'next/image';
import {
  User,
  Mail,
  Phone,
  MessageCircle,
  Camera,
  Save,
  X,
  CheckCircle,
  AlertCircle,
  ArrowLeft,
  Building,
  Home,
  Calendar,
  MapPin,
  Edit,
  Loader2,
  Upload,
  Check,
  Pencil
} from 'lucide-react';
import toast, { Toaster } from 'react-hot-toast';

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 [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    whatsapp: '',
    bio: '',
    location: '',
    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 storedUser = localStorage.getItem('user');
    if (storedUser) {
      const userData = JSON.parse(storedUser);
      setUser(userData);
      
      const savedProfile = localStorage.getItem('userProfile');
      let profileData;
      
      if (savedProfile) {
        profileData = JSON.parse(savedProfile);
      } else {
        profileData = {
          name: userData.name || '',
          email: userData.email || '',
          phone: '',
          whatsapp: '',
          bio: '',
          location: '',
          joinedDate: new Date().toLocaleDateString('ar-SA', { month: 'long', year: 'numeric' })
        };
      }
      
      setFormData(profileData);
      setTempValues(profileData);
      
      const savedAvatar = localStorage.getItem('userAvatar');
      if (savedAvatar) {
        setAvatarPreview(savedAvatar);
      }
      
      setIsLoading(false);
    } else {
      router.push('/login');
    }
  }, [router]);

  useEffect(() => {
    if (editingField && inputRefs[editingField]?.current) {
      inputRefs[editingField].current.focus();
    }
  }, [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) => {
    if (field === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
      return 'البريد الإلكتروني غير صالح';
    }
    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) => {
    setEditingField(field);
    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));
    
    if (field === 'name') {
      const updatedUser = { ...user, name: value };
      localStorage.setItem('user', JSON.stringify(updatedUser));
      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 = {
    initial: { opacity: 0, y: 20 },
    animate: { opacity: 1, y: 0 },
    transition: { duration: 0.5 }
  };

  if (isLoading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <Loader2 className="w-12 h-12 text-amber-500 animate-spin mx-auto mb-4" />
          <p className="text-gray-600">جاري تحميل الملف الشخصي...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <Toaster position="top-center" reverseOrder={false} />
      
      <div className="container mx-auto px-4 max-w-4xl">
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          className="flex justify-between items-center mb-6"
        >
          <Link
            href="/"
            className="flex items-center gap-2 text-gray-600 hover:text-amber-600 transition-colors"
          >
            <ArrowLeft className="w-5 h-5" />
            <span>العودة للرئيسية</span>
          </Link>
        </motion.div>

        <motion.div
          variants={fadeInUp}
          initial="initial"
          animate="animate"
          className="bg-white rounded-3xl shadow-xl overflow-hidden"
        >
          <div className="h-48 bg-gradient-to-r from-amber-500 to-amber-600 relative overflow-hidden">
            <motion.div
              className="absolute inset-0 bg-white/10"
              animate={{
                x: ['-100%', '100%'],
              }}
              transition={{
                duration: 3,
                repeat: Infinity,
                ease: 'linear',
              }}
            />
          </div>

          <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"
                     onClick={() => fileInputRef.current?.click()}>
                  {avatarPreview ? (
                    <img
                      src={avatarPreview}
                      alt={formData.name}
                      className="w-full h-full object-cover"
                    />
                  ) : (
                    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' ? (
                  <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' ? (
                  <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">
                <Calendar className="w-4 h-4" />
                <span>عضو منذ {formData.joinedDate}</span>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="bg-gray-50 p-4 rounded-xl group">
                <div className="flex justify-between items-start mb-2">
                  <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>
                
                {editingField === 'email' ? (
                  <div className="space-y-2">
                    <div className="flex gap-2">
                      <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">
                <div className="flex justify-between items-start mb-2">
                  <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>
                
                {editingField === 'phone' ? (
                  <div className="space-y-2">
                    <div className="flex gap-2">
                      <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">
                <div className="flex justify-between items-start mb-2">
                  <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>
                
                {editingField === 'whatsapp' ? (
                  <div className="space-y-2">
                    <div className="flex gap-2">
                      <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">
                <label className="block text-sm font-medium text-gray-600 mb-2">
                  نوع الحساب
                </label>
                <div className="flex items-center gap-2">
                  {user?.role === 'owner' ? (
                    <>
                      <Building className="w-5 h-5 text-amber-500" />
                      <span className="text-gray-900">مالك عقار</span>
                    </>
                  ) : (
                    <>
                      <Home className="w-5 h-5 text-blue-500" />
                      <span className="text-gray-900">مستأجر</span>
                    </>
                  )}
                </div>
              </div>
            </div>

            <div className="mt-6 bg-gray-50 p-4 rounded-xl group">
              <div className="flex justify-between items-start mb-2">
                <label className="text-sm font-medium text-gray-600">
                  نبذة عني
                </label>
                {editingField !== 'bio' && (
                  <button
                    onClick={() => startEditing('bio')}
                    className="opacity-0 group-hover:opacity-100 transition-opacity text-gray-400 hover:text-amber-500"
                  >
                    <Pencil className="w-4 h-4" />
                  </button>
                )}
              </div>
              
              {editingField === 'bio' ? (
                <div className="space-y-2">
                  <textarea
                    ref={inputRefs.bio}
                    value={tempValues.bio || ''}
                    onChange={(e) => setTempValues({...tempValues, bio: e.target.value})}
                    rows="4"
                    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')}
                      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}
                      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" />
                      إلغاء
                    </button>
                  </div>
                </div>
              ) : (
                <p className="text-gray-700 leading-relaxed">
                  {formData.bio || 'لا توجد نبذة تعريفية بعد'}
                </p>
              )}
            </div>

            {user?.role === 'owner' && (
              <div className="grid grid-cols-3 gap-4 mt-6">
                <div className="bg-amber-50 p-4 rounded-xl text-center">
                  <div className="text-2xl font-bold text-amber-600">12</div>
                  <div className="text-xs text-gray-600">عقارات</div>
                </div>
                <div className="bg-blue-50 p-4 rounded-xl text-center">
                  <div className="text-2xl font-bold text-blue-600">8</div>
                  <div className="text-xs text-gray-600">حجوزات نشطة</div>
                </div>
                <div className="bg-green-50 p-4 rounded-xl text-center">
                  <div className="text-2xl font-bold text-green-600">4.8</div>
                  <div className="text-xs text-gray-600">تقييم</div>
                </div>
              </div>
            )}
          </div>
        </motion.div>
      </div>
    </div>
  );
}