Show login/register dialog instead of 401 for unauthenticated users

- Auth check on calendar click and booking attempt
- Modal dialog with create account + login buttons
- Click backdrop or cancel to dismiss

app/property/[id]/page.js

@@ -41,9 +41,11 @@ import {
   FileText,
   Printer,
   Download,
-  ArrowLeft
+  ArrowLeft,
+  LogIn
 } from 'lucide-react';
 import { getRentProperty, getSaleProperty, bookReservation, checkAvailability, getAvailableDateRanges } from '../../utils/api';
+import AuthService from '../../services/AuthService';
 import { BuildingTypeKeys, PropertyStatusKeys, extractCity } from '../../enums';
 
 // Map API response to the UI format
@@ -138,6 +140,7 @@ export default function PropertyDetailsPage() {
   const [availableRanges, setAvailableRanges] = useState([]);
   const [calendarMonth, setCalendarMonth] = useState(new Date());
   const [selectingEnd, setSelectingEnd] = useState(false);
+  const [showLoginDialog, setShowLoginDialog] = useState(false);
 
   useEffect(() => {
     const id = params.id;
@@ -235,6 +238,10 @@ export default function PropertyDetailsPage() {
   };
 
   const handleCalendarClick = (dateStr) => {
+    if (!AuthService.isAuthenticated()) {
+      setShowLoginDialog(true);
+      return;
+    }
     if (!isDateAvailable(dateStr)) return;
 
     if (!bookingDates.start || selectingEnd) {
@@ -269,6 +276,11 @@ export default function PropertyDetailsPage() {
   const dayNames = ['أح', 'إث', 'ثل', 'أر', 'خم', 'جم', 'سب'];
 
   const handleBooking = async () => {
+    if (!AuthService.isAuthenticated()) {
+      setShowLoginDialog(true);
+      return;
+    }
+
     setBookingError(null);
     setBookingSuccess(false);
 
@@ -785,6 +797,44 @@ export default function PropertyDetailsPage() {
           </div>
         </div>
       </div>
+
+      {/* Login/Register Dialog */}
+      {showLoginDialog && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" onClick={() => setShowLoginDialog(false)}>
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            onClick={(e) => e.stopPropagation()}
+            className="bg-white rounded-2xl p-8 max-w-md w-full mx-4 shadow-2xl text-center"
+          >
+            <div className="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-4">
+              <LogIn className="w-8 h-8 text-amber-600" />
+            </div>
+            <h3 className="text-xl font-bold text-gray-900 mb-2">سجّل الدخول للمتابعة</h3>
+            <p className="text-gray-500 mb-6">يجب عليك إنشاء حساب أو تسجيل الدخول لحجز هذا العقار</p>
+            <div className="space-y-3">
+              <Link
+                href="/auth/choose-role"
+                className="block w-full bg-amber-500 text-white py-3 rounded-xl font-bold hover:bg-amber-600 transition-colors"
+              >
+                إنشاء حساب جديد
+              </Link>
+              <Link
+                href="/login"
+                className="block w-full bg-gray-100 text-gray-700 py-3 rounded-xl font-bold hover:bg-gray-200 transition-colors"
+              >
+                تسجيل الدخول
+              </Link>
+              <button
+                onClick={() => setShowLoginDialog(false)}
+                className="block w-full text-gray-400 py-2 text-sm hover:text-gray-600 transition-colors"
+              >
+                إلغاء
+              </button>
+            </div>
+          </motion.div>
+        </div>
+      )}
     </div>
   );
 }