Integrate FavoriteProperty API: add/remove/get favorites with real backend

app/property/[id]/PropertyDetail.js

@@ -47,6 +47,7 @@ import {
 } from 'lucide-react';
 import { getRentProperty, getSaleProperty, bookReservation, checkAvailability, getAvailableDateRanges } from '../../utils/api';
 import AuthService from '../../services/AuthService';
+import { useFavorites } from '@/app/contexts/FavoritesContext';
 import { BuildingTypeKeys, PropertyStatusKeys, extractCity } from '../../enums';
 
 // Copy to clipboard that works on HTTP too
@@ -161,6 +162,7 @@ function mapApiDetail(item) {
 
 export default function PropertyDetailsPage() {
   const params = useParams();
+  const { isFavorite, addFavorite, removeFavorite } = useFavorites();
   const [currentImage, setCurrentImage] = useState(0);
   const [showContact, setShowContact] = useState(false);
   const [showShareMenu, setShowShareMenu] = useState(false);
@@ -172,6 +174,7 @@ export default function PropertyDetailsPage() {
   const [bookingSuccess, setBookingSuccess] = useState(false);
   const [availableRanges, setAvailableRanges] = useState([]);
   const [calendarMonth, setCalendarMonth] = useState(new Date());
+  const [favLoading, setFavLoading] = useState(false);
   const [selectingEnd, setSelectingEnd] = useState(false);
   const [showLoginDialog, setShowLoginDialog] = useState(false);
 
@@ -417,8 +420,24 @@ export default function PropertyDetailsPage() {
               <span>العودة إلى العقارات</span>
             </Link>
             <div className="flex gap-2">
-              <button className="p-2 hover:bg-gray-100 rounded-full transition-colors">
-                <Heart className="w-5 h-5 text-gray-600" />
+              <button
+                onClick={async () => {
+                  if (!AuthService.isAuthenticated()) { toast.error('سجل الدخول أولاً'); return; }
+                  const propId = property?._raw?.id || parseInt(params.id);
+                  setFavLoading(true);
+                  if (isFavorite(propId)) {
+                    await removeFavorite(propId);
+                    toast.success('تمت الإزالة من المفضلة');
+                  } else {
+                    await addFavorite(propId);
+                    toast.success('تمت الإضافة إلى المفضلة');
+                  }
+                  setFavLoading(false);
+                }}
+                disabled={favLoading}
+                className="p-2 hover:bg-gray-100 rounded-full transition-colors"
+              >
+                <Heart className={`w-5 h-5 ${isFavorite(property?._raw?.id || parseInt(params.id)) ? 'fill-red-500 text-red-500' : 'text-gray-600'}`} />
               </button>
               {/* Share Dropdown */}
               <div className="relative">