//
//
//
//
//
//
//
العودة إلى العقارات
//
//
//
// {/* Share Dropdown */}
//
//
// {showShareMenu && (
// <>
//
setShowShareMenu(false)} />
//
//
// {/* Facebook */}
//
// {/* WhatsApp */}
//
// {/* Telegram */}
//
// {/* Instagram (copy link) */}
//
// {/* Copy Link */}
//
//
//
//
// )}
//
//
//
//
//
//
//
//
//
//
// {property.images.length > 1 && (
// <>
//
//
//
// )}
//
// {property.images.map((_, idx) => (
//
//
//
// {currentImage + 1} / {property.images.length}
//
//
//
// {property.images.slice(1, 5).map((img, idx) => (
//
setCurrentImage(idx + 1)}
// className="relative h-[240px] rounded-2xl overflow-hidden cursor-pointer hover:opacity-90 transition-opacity bg-gray-100"
// >
//
//
// ))}
//
//
//
//
//
//
//
//
{property.title}
//
//
// {property.location.address}
//
//
//
//
{formatCurrency(property.price)}
//
/{property.priceUnit === 'daily' ? 'يوم' : 'شهر'}
//
//
//
//
// {property.rating}
// {property.reviews > 0 && ({property.reviews} تقييم)}
//
//
//
// {property.status === 'available' ? 'متاح للإيجار' : 'محجوز حالياً'}
//
//
//
// المواصفات الرئيسية
//
//
//
//
{property.bedrooms}
//
غرف نوم
//
//
//
//
{property.bathrooms}
//
حمامات
//
//
//
//
{property.area}
//
م²
//
//
//
//
// {property.type === 'villa' ? 'فيلا' :
// property.type === 'apartment' ? 'شقة' : 'بيت'}
//
//
نوع العقار
//
//
//
// وصف العقار
// {property.description || 'لا يوجد وصف متاح.'}
//
//
// المميزات والخدمات
//
// {property.features.map((feature, idx) => (
//
//
// {feature.available ? (
//
// ) : (
//
// )}
//
//
//
// {feature.name}
//
// {feature.description && (
//
// {feature.description}
//
// )}
//
//
// ))}
//
// {property.reviewList && property.reviewList.length > 0 && (
//
// تقييمات المستأجرين
//
// {property.reviewList.map((review, idx) => (
//
//
//
//
//
//
//
//
{review.user}
//
// {[...Array(5)].map((_, i) => (
//
// ))}
//
//
//
//
{review.date}
//
//
{review.comment}
//
// ))}
//
// )}
// {/* New Rating Components */}
// {AuthService.isAuthenticated() && canRate && !userRating && (
//
setShowRatingForm(true)}
// >
//
// قيّم هذا العقار
// شارك تجربتك مع المستأجرين الآخرين
//
// )}
//
//
//
//
//
//
//
// احجز هذا العقار
// {/* Selected dates display */}
//
//
// من
// {bookingDates.start || '—'}
//
//
// إلى
// {bookingDates.end || '—'}
//
//
// {days} يوم{days > 1 ? 'اً' : 'اً'} {selectingEnd ? '— اضغط على تاريخ النهاية' : '✓'}
//
// ) : null;
// })()}
// {/* Calendar */}
//
//
//
// {monthNames[calendarMonth.getMonth()]} {calendarMonth.getFullYear()}
//
//
//
// {dayNames.map((d) => (
//
{d}
// ))}
//
//
// {(() => {
// const year = calendarMonth.getFullYear();
// const month = calendarMonth.getMonth();
// const daysInMonth = getDaysInMonth(year, month);
// const firstDay = getFirstDayOfMonth(year, month);
// const today = new Date().toISOString().split('T')[0];
// const cells = [];
// // Empty cells before first day
// for (let i = 0; i < firstDay; i++) {
// cells.push(
);
// }
// for (let day = 1; day <= daysInMonth; day++) {
// const dateStr = formatDateStr(year, month, day);
// const available = isDateAvailable(dateStr);
// const isStart = bookingDates.start === dateStr;
// const isEnd = bookingDates.end === dateStr;
// const inRange = isInRange(dateStr);
// const isPast = dateStr < today;
// cells.push(
//
// );
// }
// return cells;
// })()}
//
//
//
// {(() => {
// const days = bookingDates.start && bookingDates.end
// ? Math.ceil((new Date(bookingDates.end) - new Date(bookingDates.start)) / (1000 * 60 * 60 * 24))
// : 0;
// const effectiveDays = days > 0 ? days : 1;
// return (
// <>
//
// السعر لـ {effectiveDays} يوم{effectiveDays > 1 ? 'اً' : 'اً'}
// {formatCurrency(property.price * effectiveDays)}
//
//
// سلفة ضمان
// {formatCurrency(property._raw?.deposit || 0)}
//
//
// الإجمالي
// {formatCurrency(property.price * effectiveDays + (property._raw?.deposit || 0))}
//
//
// );
// })()}
//
// {bookingError}
//
// )}
// {bookingSuccess && (
//
// تم إرسال طلب الحجز بنجاح. سيتم التواصل معك قريباً.
//
// )}
//
//
//
// الدفع آمن ومضمون. سلفة الضمان قابلة للاسترداد.
//
//
//
// معلومات المالك
//
//
//
// {property.owner.name.charAt(0)}
//
//
//
//
{property.owner.name}
//
//
// {property.owner.rating}
// · {property.owner.properties} عقارات
//
// {property.owner.responseRate && (
//
//
// استجابة: {property.owner.responseRate}
//
// )}
//
//
//
//
//
{property.owner.phone}
//
//
//
// {property.owner.email}
//
//
//
//
//
//
// {/* Login/Register Dialog */}
// {showLoginDialog && (
//
setShowLoginDialog(false)}>
//
e.stopPropagation()}
// className="bg-white rounded-2xl p-8 max-w-md w-full mx-4 shadow-2xl text-center"
// >
//
//
//
// سجّل الدخول للمتابعة
// يجب عليك إنشاء حساب أو تسجيل الدخول لحجز هذا العقار
//
//
// إنشاء حساب جديد
//
//
// تسجيل الدخول
//
//
//
//
//
// )}
//
// );
// }
'use client';
import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import toast, { Toaster } from 'react-hot-toast';
import Image from 'next/image';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import {
MapPin, Bed, Bath, Square, Heart, Share2, Phone, Mail, MessageCircle,
Calendar, Shield, Star, ChevronLeft, ChevronRight, Check, X,
Camera, Home, Building2, ArrowLeft, LogIn, Copy, Clock, User, Loader2
} from 'lucide-react';
import AuthService from '../../services/AuthService';
import { useFavorites } from '@/app/contexts/FavoritesContext';
import { BuildingTypeKeys, PropertyStatusKeys, extractCity } from '../../enums';
import PropertyRatingList from '@/app/components/ratings/PropertyRatingList';
import PropertyRatingForm from '@/app/components/ratings/PropertyRatingForm';
import { getPropertyAverageRating } from '@/app/utils/ratings';
import { getRentProperty, getSaleProperty, bookReservation } from '../../utils/api';
function formatCurrency(amount) {
return amount?.toLocaleString() + ' ل.س';
}
function mapApiDetail(item) {
if (!item) return null;
const info = item.propertyInformation || {};
const buildingType = info.buildingType ?? 0;
const propType = BuildingTypeKeys[buildingType] ?? 'apartment';
const status = PropertyStatusKeys[info.status] ?? 'available';
const dailyPrice = item.dailyRent ?? item.monthlyRent ?? item.price ?? 0;
const priceUnit = item.monthlyRent ? 'monthly' : 'daily';
const apiBase = process.env.NEXT_PUBLIC_API_URL || 'https://45.93.137.91.nip.io/api';
const rawImages = Array.isArray(info.images) ? info.images : [];
const images = rawImages.length > 0
? rawImages.map(img => img.startsWith('http') ? img : `${apiBase}${img.startsWith('/') ? '' : '/Pictures/'}${img}`)
: ['/property-placeholder.jpg'];
return {
id: item.id,
title: info.address || `عقار #${item.id}`,
description: info.description || '',
type: propType,
price: dailyPrice,
priceUnit,
location: { city: extractCity(info.address) || 'دمشق', address: info.address || '' },
bedrooms: info.numberOfBedRooms || 0,
bathrooms: info.numberOfBathRooms || 0,
area: info.space || 0,
images,
status,
deposit: item.deposit || 0,
_raw: item,
};
}
export default function PropertyDetailsPage() {
const params = useParams();
const propertyId = parseInt(params.id);
const { isFavorite, addFavorite, removeFavorite } = useFavorites();
const [property, setProperty] = useState(null);
const [loading, setLoading] = useState(true);
const [currentImage, setCurrentImage] = useState(0);
const [showContact, setShowContact] = useState(false);
const [showShareMenu, setShowShareMenu] = useState(false);
const [favLoading, setFavLoading] = useState(false);
const [showLoginDialog, setShowLoginDialog] = useState(false);
const [bookingDates, setBookingDates] = useState({ start: '', end: '' });
const [bookingError, setBookingError] = useState(null);
const [bookingSuccess, setBookingSuccess] = useState(false);
const [averageRating, setAverageRating] = useState(null);
const [eligibleReservationId, setEligibleReservationId] = useState(null);
const [showRatingForm, setShowRatingForm] = useState(false);
useEffect(() => {
async function fetchProperty() {
try {
let data = null;
try { data = await getRentProperty(propertyId); } catch {}
if (!data) try { data = await getSaleProperty(propertyId); } catch {}
if (data) setProperty(mapApiDetail(data));
else throw new Error('Property not found');
} catch (err) {
console.error(err);
toast.error('فشل تحميل العقار');
} finally {
setLoading(false);
}
}
fetchProperty();
}, [propertyId]);
useEffect(() => {
async function fetchAvg() {
if (!propertyId) return;
try {
const avg = await getPropertyAverageRating(propertyId);
setAverageRating(avg);
} catch (err) { console.error(err); }
}
fetchAvg();
}, [propertyId]);
useEffect(() => {
async function checkEligibility() {
if (!propertyId || !AuthService.isAuthenticated()) return;
try {
const res = await fetch(`http://45.93.137.91/api/Reservations/GetUserReservations?userId=${AuthService.getUserId()}`);
const data = await res.json();
const reservations = data?.data || data || [];
const completed = reservations.find(r =>
r.propertyId == propertyId &&
(r.status === 'Completed' || r.status === 'Confirmed') &&
!r.hasRatedProperty
);
setEligibleReservationId(completed?.id || null);
} catch (err) {
console.error('[Eligibility]', err);
}
}
checkEligibility();
}, [propertyId]);
const handleBooking = async () => {
if (!AuthService.isAuthenticated()) { setShowLoginDialog(true); return; }
setBookingError(null);
if (!bookingDates.start || !bookingDates.end) {
setBookingError('يرجى اختيار تاريخ البداية والنهاية');
return;
}
try {
await bookReservation(propertyId, bookingDates.start, bookingDates.end);
setBookingSuccess(true);
toast.success('تم إرسال طلب الحجز بنجاح');
} catch (err) {
setBookingError(err.message || 'فشل الحجز');
}
};
if (loading) {
return (
);
}
if (!property) {
return
العقار غير موجود
;
}
return (
العودة
{/* زر المشاركة (اختصار) */}
{property.images.length > 1 && (
{property.images.map((_, idx) => (
)}
{property.title}
{property.location.address}
{averageRating > 0 ? averageRating.toFixed(1) : property.rating}
{property.status === 'available' ? 'متاح' : 'محجوز'}
المواصفات
{property.bedrooms} غرف نوم
{property.bathrooms} حمامات
الوصف
{property.description}
{eligibleReservationId && !showRatingForm && (
setShowRatingForm(true)}>
قيّم هذا العقار
شارك تجربتك مع المستأجرين الآخرين
)}
{showRatingForm && eligibleReservationId && (
{
setShowRatingForm(false);
setEligibleReservationId(null);
getPropertyAverageRating(propertyId).then(setAverageRating);
}}
onCancel={() => setShowRatingForm(false)}
/>
)}
احجز هذا العقار
setBookingDates({ ...bookingDates, start: e.target.value })} />
setBookingDates({ ...bookingDates, end: e.target.value })} />
السعر اليومي{formatCurrency(property.price)}
سلفة ضمان{formatCurrency(property.deposit)}
الإجمالي{formatCurrency(property.price + property.deposit)}
{bookingError &&
{bookingError}
}
معلومات المالك
{showContact ? (
{property._raw?.phoneNumber || 'غير متوفر'}
) : (
)}
{showLoginDialog && (
setShowLoginDialog(false)}>
e.stopPropagation()}>
تسجيل الدخول مطلوب
للحجز أو إضافة المفضلة، سجل دخولك.
تسجيل الدخول
إنشاء حساب
)}
);
}