'use client';

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import {
  User,
  Mail,
  Phone,
  MessageCircle,
  Check,
  X,
  ArrowLeft,
  Building,
  Home,
  Calendar,
  MapPin,
  Loader2,
  Pencil
} from 'lucide-react';
import toast, { Toaster } from 'react-hot-toast';
import AuthService from '../services/AuthService';
import { getCustomerByUserId, getOwnerByUserId } from '../utils/api';

export default function ProfilePage() {
  const router = useRouter();
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  const [editingBio, setEditingBio] = useState(false);
  const [bioDraft, setBioDraft] = useState('');

  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    whatsapp: '',
    bio: '',
    location: '',
    joinedDate: ''
  });

  const [avatarPreview, setAvatarPreview] = useState('');

  useEffect(() => {
    const authUser = AuthService.getUser();
    if (authUser) {
      const userData = {
        id: authUser.id,
        name: authUser.name || '',
        email: authUser.email || '',
        phone: authUser.phone || '',
        role: AuthService.isOwner() ? 'owner' : 'customer',
      };
      setUser(userData);

      async function fetchProfile() {
        try {
          const fetchFn = userData.role === 'owner' ? getOwnerByUserId : getCustomerByUserId;
          const profile = await fetchFn(userData.id);

          if (profile) {
            const profileData = {
              name: profile.fullName || profile.name || `${profile.firstName || ''} ${profile.lastName || ''}`.trim() || userData.name || '',
              email: profile.email || userData.email || '',
              phone: profile.phone || profile.phoneNumber || userData.phone || '',
              whatsapp: profile.whatsAppNumber || profile.whatsapp || '',
              bio: profile.bio || '',
              location: profile.address || profile.location || '',
              joinedDate: profile.createdAt
                ? new Date(profile.createdAt).toLocaleDateString('ar-SA', { month: 'long', year: 'numeric' })
                : new Date().toLocaleDateString('ar-SA', { month: 'long', year: 'numeric' }),
            };
            setFormData(profileData);
            setBioDraft(profileData.bio);
            localStorage.setItem('userProfile', JSON.stringify(profileData));
            setIsLoading(false);
            return;
          }
        } catch (err) {
          // Ignore API errors and fall back to local data.
        }

        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);
        setBioDraft(profileData.bio || '');
        setIsLoading(false);
      }

      const savedAvatar = localStorage.getItem('userAvatar');
      if (savedAvatar) {
        setAvatarPreview(savedAvatar);
      }

      fetchProfile();
    } else {
      router.push('/login');
    }
  }, [router]);

  const startBioEditing = () => {
    setBioDraft(formData.bio || '');
    setEditingBio(true);
  };

  const cancelBioEditing = () => {
    setBioDraft(formData.bio || '');
    setEditingBio(false);
  };

  const saveBio = () => {
    const updatedData = { ...formData, bio: bioDraft };
    setFormData(updatedData);
    localStorage.setItem('userProfile', JSON.stringify(updatedData));
    setEditingBio(false);
    toast.success('تم تحديث نبذة عني بنجاح');
  };

  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">
                  {avatarPreview ? (
                    <img
                      src={avatarPreview}
                      alt={formData.name}
                      className="w-full h-full object-cover"
                    />
                  ) : (
                    formData.name?.charAt(0).toUpperCase() || 'U'
                  )}
                </div>
              </div>
            </div>

            <div className="text-center mb-6">
              <div className="flex items-center justify-center gap-2">
                <h1 className="text-3xl font-bold text-gray-900">{formData.name}</h1>
              </div>

              <div className="flex items-center justify-center gap-2 text-gray-500 mt-2">
                <MapPin className="w-4 h-4" />
                <span>{formData.location || 'الموقع غير محدد'}</span>
              </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>
                </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>
                </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>
                </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>
                {!editingBio && (
                  <button
                    onClick={startBioEditing}
                    className="opacity-0 group-hover:opacity-100 transition-opacity text-gray-400 hover:text-amber-500"
                  >
                    <Pencil className="w-4 h-4" />
                  </button>
                )}
              </div>

              {editingBio ? (
                <div className="space-y-2">
                  <textarea
                    value={bioDraft}
                    onChange={(e) => setBioDraft(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={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={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" />
                      إلغاء
                    </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>
  );
}