SweetHome/app/property/[id]/PropertyDetail.js

"use client";

import { useState, useEffect, useMemo } from "react";
import { motion, AnimatePresence } from "framer-motion";
import toast, { Toaster } from "react-hot-toast";
import Link from "next/link";
import { useParams, useRouter } from "next/navigation";
import {
  MapPin,
  Bed,
  Bath,
  Square,
  DollarSign,
  Heart,
  Share2,
  Phone,
  Mail,
  MessageCircle,
  Calendar,
  Shield,
  Star,
  ChevronLeft,
  ChevronRight,
  Check,
  X,
  Wifi,
  Car,
  Wind,
  Camera,
  Home,
  Building2,
  Users,
  Clock,
  FileText,
  LogIn,
  Loader2,
  ArrowLeft,
  ImageIcon,
  ChevronDown,
  Layers,
  Sofa,
  DoorOpen,
  School,
  Hospital,
  Store,
  TreePine,
  Building,
  GraduationCap,
  ExternalLink,
  Smile,
  Ban,
  Wine,
  Dog,
  CassetteTape,
  Info,
} from "lucide-react";
import {
  getRentProperty,
  getSaleProperty,
  getSalePropertyById,
  bookReservation,
  getAvailableDateRanges,
  getOwnerContactInformation,
  getMyRentListings,
  getMySaleListings,
} from "../../utils/api";
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 { getPropertyAverageRating } from "../../utils/ratings";
import dynamic from "next/dynamic";
import "leaflet/dist/leaflet.css";

const MapContainer = dynamic(
  () => import("react-leaflet").then((m) => m.MapContainer),
  { ssr: false },
);
const TileLayer = dynamic(
  () => import("react-leaflet").then((m) => m.TileLayer),
  { ssr: false },
);
const Marker = dynamic(() => import("react-leaflet").then((m) => m.Marker), {
  ssr: false,
});
const Popup = dynamic(() => import("react-leaflet").then((m) => m.Popup), {
  ssr: false,
});

function formatCurrency(amount) {
  if (!amount || isNaN(amount)) return "0";
  return Number(amount).toLocaleString("ar-SA");
}

function buildImageUrl(img) {
  if (!img) return "";
  const apiBase =
    typeof window !== "undefined"
      ? process.env.NEXT_PUBLIC_API_URL || "https://45.93.137.91.nip.io/api"
      : "";
  if (img.startsWith("http")) return img;
  return `${apiBase}${img.startsWith("/") ? "" : "/Pictures/"}${img}`;
}

const serviceLabels = {
  Electricity: "كهرباء",
  Internet: "إنترنت",
  Heating: "تدفئة",
  Water: "ماء",
  Pool: "مسبح",
  PrivateGarden: "حديقة خاصة",
  Parking: "موقف سيارات",
  Security247: "حراسة 24 س",
  CentralHeating: "تدفئة مركزية",
  CentralAirConditioning: "تكييف مركزي",
  EquippedKitchen: "مطبخ مجهز",
  MaidsRoom: "غرفة خادمة",
  Elevator: "مصعد",
  Gym: "نادي رياضي",
  Sauna: "ساونا",
  Jacuzzi: "جاكوزي",
  Balcony: "بلكونة",
  Rooftop: "سطح",
  Furnished: "مفروش",
  AirConditioning: "تكييف",
  SatelliteTV: "تلفاز",
  Fireplace: "مدفأة",
  StudyRoom: "غرفة دراسة",
  Storage: "مستودع",
  Laundry: "غرفة غسيل",
  SmartHome: "منزل ذكي",
};

const termLabels = {
  NoSmoking: "ممنوع التدخين",
  NoAnimals: "ممنوع الحيوانات الأليفة",
  NoParties: "ممنوع الحفلات",
  NoAlcohol: "ممنوع الكحول",
  SuitableForChildren: "مناسب للأطفال",
  SuitableForFamilies: "مناسب للعائلات",
  SuitableForStudents: "مناسب للطلاب",
  SuitableForElderly: "مناسب لكبار السن",
  OnlyFemales: "إناث فقط",
  OnlyMales: "ذكور فقط",
};

const proximityLabels = {
  School: "مدرسة",
  Hospital: "مستشفى",
  Restaurant: "مطعم",
  University: "جامعة",
  Park: "حديقة",
  Mall: "مركز تسوق",
  Supermarket: "سوبر ماركت",
  Pharmacy: "صيدلية",
  Mosque: "مسجد",
  Bank: "بنك",
  Airport: "مطار",
  BusStation: "موقف باص",
};

function mapApiDetail(item) {
  if (!item) return null;
  const info = item.propertyInformation || {};
  const details =
    typeof info.detailsJSON === "object" && info.detailsJSON
      ? info.detailsJSON
      : (() => {
          try {
            return JSON.parse(info.detailsJSON || "{}");
          } catch {
            return {};
          }
        })();

  const isRent = item.dailyRent != null || item.monthlyRent != null;
  const dailyPrice = item.dailyRent || 0;
  const monthlyPrice = item.monthlyRent || 0;
  const salePrice = item.price || 0;
  const price = isRent ? monthlyPrice || dailyPrice : salePrice;
  const priceUnit = isRent ? (monthlyPrice ? "monthly" : "daily") : "sale";

  const propType =
    BuildingTypeKeys[info.buildingType] ??
    BuildingTypeKeys[item.type] ??
    "apartment";
  const typeLabel =
    {
      apartment: "شقة",
      villa: "فيلا",
      house: "بيت",
      sweet: "سويت",
      studio: "استوديو",
      office: "مكتب",
      shop: "متجر",
      warehouse: "مستودع",
      farms: "مزرعة",
      room: "غرفة ضمن شقة",
    }[propType] || "عقار";
  const status =
    PropertyStatusKeys[info.status] ??
    PropertyStatusKeys[item.status] ??
    "available";
  const statusLabel =
    {
      available: "متاح",
      booked: "محجوز",
      notAvailable: "غير متاح",
      maintenance: "صيانة",
    }[status] || "متاح";

  const rawImages = Array.isArray(info.images) ? info.images : [];
  const photosFallback = Array.isArray(details.photos) ? details.photos : [];
  const allRaw = rawImages.length > 0 ? rawImages : photosFallback;
  const images = allRaw.length > 0 ? allRaw.map(buildImageUrl) : [];

  // Normalize services: Flutter sends list of strings or object with boolean values
  const rawServices = details.services || {};
  const serviceList = Array.isArray(rawServices)
    ? rawServices
    : Object.keys(rawServices).filter((k) => rawServices[k]);
  const serviceDetails = details.serviceDetails || {};
  const services = {};
  serviceList.forEach((s) => {
    services[s] = serviceDetails[s] || true;
  });

  const rawTerms = details.terms || {};
  const terms = Array.isArray(rawTerms)
    ? rawTerms.reduce((acc, t) => ({ ...acc, [t]: true }), {})
    : rawTerms;

  // Try multiple key aliases like Flutter does
  const floor = details.floorNumber ?? details.floor ?? 0;
  const salons =
    details.numberOfSalons ?? details.salonsCount ?? details.salons ?? 0;
  const balconies =
    details.numberOfBalconies ??
    details.balconiesCount ??
    details.balconies ??
    0;
  const rawProximity = details.nearbyDistances || details.proximity || {};
  const proximity = {};
  Object.entries(rawProximity).forEach(([k, v]) => {
    if (!v) return;
    const normalizedKey = k.charAt(0).toUpperCase() + k.slice(1);
    proximity[normalizedKey] = v;
  });
  const roomDetails = details.room || details.roomDetails || {};

  const displayType =
    details.displayType ||
    (isRent
      ? monthlyPrice && dailyPrice
        ? "Both"
        : monthlyPrice
          ? "Monthly"
          : "Daily"
      : "Sale");
  const propertyCondition = details.propertyCondition || "";
  const furnished = propertyCondition.toLowerCase().includes("furniture")
    ? propertyCondition.toLowerCase() === "withfurniture"
    : !!item.isFurnished;

  return {
    id: item.id,
    propertyInformationId: info.id,
    title: details.description || info.address || `عقار #${item.id}`,
    description: details.description || info.description || "",
    type: propType,
    typeLabel,
    price,
    priceUnit,
    priceDisplay: { daily: dailyPrice, monthly: monthlyPrice, sale: salePrice },
    isRent,
    displayType,
    propertyCondition,
    furnished,
    location: {
      city: extractCity(info.address) || "دمشق",
      address: info.address || "",
      lat: parseFloat(info.cordsX) || 0,
      lng: parseFloat(info.cordsY) || 0,
    },
    bedrooms: info.numberOfBedRooms || 0,
    bathrooms: info.numberOfBathRooms || 0,
    area: info.space || 0,
    floor,
    salons,
    balconies,
    images,
    status,
    statusLabel,
    services,
    terms,
    proximity,
    roomDetails,
    details,
    bookedCount: details.bookedCount || 0,
    deposit: item.deposit || 0,
    currencyId: item.currencyId,
    isSmokeAllow: item.isSmokeAllow,
    isVisitorAllow: item.isVisitorAllow,
    specializedFor: item.specializedFor,
    ownerId: info.ownerId ?? info.userId ?? item.ownerId ?? item.userId ?? null,
    _raw: item,
  };
}

export default function PropertyDetailsPage() {
  const params = useParams();
  const router = useRouter();
  const { isFavorite, addFavorite, removeFavorite } = useFavorites();

  const [property, setProperty] = useState(null);
  const [loading, setLoading] = useState(true);
  const [currentImage, setCurrentImage] = useState(0);
  const [showLoginDialog, setShowLoginDialog] = useState(false);
  const [bookingDates, setBookingDates] = useState({ start: "", end: "" });
  const [bookingLoading, setBookingLoading] = useState(false);
  const [bookingError, setBookingError] = useState(null);
  const [bookingSuccess, setBookingSuccess] = useState(false);
  const [availableRanges, setAvailableRanges] = useState([]);
  const [bookingStep, setBookingStep] = useState("entry");
  const [selectedStart, setSelectedStart] = useState(null);
  const [selectedEnd, setSelectedEnd] = useState(null);
  const [calendarMonth, setCalendarMonth] = useState(() =>
    new Date().getMonth(),
  );
  const [calendarYear, setCalendarYear] = useState(() =>
    new Date().getFullYear(),
  );
  const [pricingMode, setPricingMode] = useState("daily");
  const [isOwnProperty, setIsOwnProperty] = useState(false);
  const [favLoading, setFavLoading] = useState(false);
  const [avgRating, setAvgRating] = useState(null);
  const [showContact, setShowContact] = useState(false);
  const [contactInfo, setContactInfo] = useState(null);
  const [ownerData, setOwnerData] = useState(null);

  useEffect(() => {
    const id = params.id;
    if (!id) return;
    setLoading(true);

    async function fetchProperty() {
      try {
        let data = null;
        try {
          data = await getRentProperty(id);
        } catch {}
        if (!data) {
          try {
            data =
              (await getSalePropertyById(id)) || (await getSaleProperty(id));
          } catch {}
        }
        if (!data) {
          try {
            data = await getSaleProperty(id);
          } catch {}
        }

        if (data) {
          const mapped = mapApiDetail(data);
          setProperty(mapped);
          if (mapped) fetchAvgRating(mapped.id);
          if (mapped && mapped.isRent) {
            try {
              const propInfoId =
                mapped._raw?.propertyInformationId || mapped.id;
              const ranges = await getAvailableDateRanges(propInfoId);
              if (ranges && Array.isArray(ranges)) {
                setAvailableRanges(ranges);
              }
            } catch (e) {
              console.warn("Failed to fetch date ranges", e);
            }
          }
          // Check if current user owns this property via their own listings
          if (AuthService.isAuthenticated() && AuthService.isOwner()) {
            try {
              const [myRent, mySale] = await Promise.allSettled([
                getMyRentListings(),
                getMySaleListings(),
              ]);
              const myPropIds = new Set();
              const collectIds = (result) => {
                if (result.status !== "fulfilled" || !result.value) return;
                const list = Array.isArray(result.value)
                  ? result.value
                  : [result.value];
                list.filter(Boolean).forEach((p) => {
                  const info = p.propertyInformation || {};
                  if (info.id) myPropIds.add(Number(info.id));
                  if (p.id) myPropIds.add(Number(p.id));
                });
              };
              collectIds(myRent);
              collectIds(mySale);
              const propInfoId = mapped._raw?.propertyInformation?.id;
              if (
                myPropIds.has(Number(mapped.id)) ||
                (propInfoId && myPropIds.has(Number(propInfoId)))
              ) {
                setIsOwnProperty(true);
              }
            } catch (e) {
              console.warn("[OwnerCheck] failed:", e);
            }
          }
        }
      } catch (err) {
        console.error("[PropertyDetail] Failed:", err);
      } finally {
        setLoading(false);
      }
    }

    fetchProperty();
  }, [params.id]);

  const fetchAvgRating = async (propId) => {
    try {
      const avg = await getPropertyAverageRating(propId);
      setAvgRating(avg);
    } catch {}
  };

  const fetchContactInfo = async () => {
    if (!property) return;
    try {
      const info = await getOwnerContactInformation(
        property._raw?.propertyInformationId || property.id,
      );
      setContactInfo(info);
      setShowContact(true);
    } catch (err) {
      toast.error("فشل تحميل معلومات الاتصال");
    }
  };

  const handleFavorite = async () => {
    if (!AuthService.isAuthenticated()) {
      setShowLoginDialog(true);
      return;
    }
    if (!property) return;
    setFavLoading(true);
    try {
      if (isFavorite(property.id)) {
        await removeFavorite(property.id);
      } else {
        await addFavorite(property.id);
      }
    } catch (err) {
      toast.error("حدث خطأ");
    } finally {
      setFavLoading(false);
    }
  };

  const handleBookNow = async () => {
    if (!AuthService.isAuthenticated()) {
      setShowLoginDialog(true);
      return;
    }
    if (!bookingDates.start || !bookingDates.end) {
      setBookingError("يرجى تحديد تاريخ البداية والنهاية");
      return;
    }
    setBookingLoading(true);
    setBookingError(null);
    try {
      await bookReservation(
        property._raw?.propertyInformationId || property.id,
        bookingDates.start,
        bookingDates.end,
      );
      setBookingSuccess(true);
      toast.success("تم إرسال طلب الحجز بنجاح");
    } catch (err) {
      setBookingError(err.message || "فشل الحجز");
    } finally {
      setBookingLoading(false);
    }
  };

  const MONTHS_AR = [
    "يناير",
    "فبراير",
    "مارس",
    "أبريل",
    "مايو",
    "يونيو",
    "يوليو",
    "أغسطس",
    "سبتمبر",
    "أكتوبر",
    "نوفمبر",
    "ديسمبر",
  ];
  const DAYS_AR = ["ح", "ن", "ث", "ر", "خ", "ج", "س"];

  const availableDatesSet = useMemo(() => {
    const dates = new Set();
    if (!Array.isArray(availableRanges)) return dates;
    availableRanges.forEach((r) => {
      const start = new Date(r.startDate || r.start);
      const end = new Date(r.endDate || r.end);
      for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
        dates.add(d.toISOString().split("T")[0]);
      }
    });
    return dates;
  }, [availableRanges]);

  const isDateAvailable = (dateStr) => availableDatesSet.has(dateStr);
  const isPastDate = (dateStr) => {
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    return new Date(dateStr) < today;
  };

  const handleDayClick = (dateStr) => {
    if (bookingStep === "entry") {
      setSelectedStart(dateStr);
      setSelectedEnd(null);
      setBookingStep("exit");
    } else {
      if (new Date(dateStr) <= new Date(selectedStart)) {
        setSelectedStart(dateStr);
        setSelectedEnd(null);
        setBookingStep("exit");
      } else {
        setSelectedEnd(dateStr);
        setBookingStep("entry");
      }
    }
  };

  const handleBookingConfirm = async () => {
    if (!AuthService.isAuthenticated()) {
      setShowLoginDialog(true);
      return;
    }
    if (!selectedStart || !selectedEnd) {
      setBookingError("يرجى تحديد تاريخ البداية والنهاية");
      return;
    }
    setBookingLoading(true);
    setBookingError(null);
    try {
      const propInfoId = property._raw?.propertyInformationId || property.id;
      const startDate = new Date(selectedStart + "T00:00:00.000").toISOString();
      const endDate = new Date(selectedEnd + "T00:00:00.000").toISOString();
      await bookReservation(propInfoId, startDate, endDate);
      setBookingSuccess(true);
      toast.success("تم إرسال طلب الحجز بنجاح");
    } catch (err) {
      setBookingError(err.message || "فشل الحجز");
    } finally {
      setBookingLoading(false);
    }
  };

  const navigateMonth = (delta) => {
    let month = calendarMonth + delta;
    let year = calendarYear;
    if (month < 0) {
      month = 11;
      year--;
    }
    if (month > 11) {
      month = 0;
      year++;
    }
    setCalendarMonth(month);
    setCalendarYear(year);
  };

  const handleRatingSuccess = () => {
    setShowRatingForm(false);
    if (property) fetchAvgRating(property.id);
  };

  if (loading) {
    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>
    );
  }

  if (!property) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
        <div className="text-center max-w-md">
          <div className="w-24 h-24 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <Home className="w-12 h-12 text-amber-600" />
          </div>
          <h2 className="text-2xl font-bold text-gray-900 mb-2">
            العقار غير موجود
          </h2>
          <p className="text-gray-600 mb-6">لم يتم العثور على العقار المطلوب</p>
          <Link
            href="/properties"
            className="inline-flex items-center gap-2 bg-amber-500 text-white px-6 py-3 rounded-xl font-medium hover:bg-amber-600"
          >
            <ArrowLeft className="w-5 h-5" />
            العودة إلى العقارات
          </Link>
        </div>
      </div>
    );
  }

  const isFav = isFavorite(property.id);
  const isRoomType = property.type === "room";
  const isMostRequested = avgRating !== null && avgRating >= 4.5;
  const showPricingToggle =
    property.isRent &&
    property.priceDisplay?.daily > 0 &&
    property.priceDisplay?.monthly > 0;
  const effectivePricingMode = showPricingToggle
    ? pricingMode
    : property.isRent && property.priceDisplay?.monthly > 0
      ? "monthly"
      : "daily";

  return (
    <div className="min-h-screen bg-gray-50" dir="rtl">
      <Toaster position="top-center" reverseOrder={false} />

      <div className="container mx-auto px-4 py-6">
        <motion.div
          initial={{ opacity: 0, y: -10 }}
          animate={{ opacity: 1, y: 0 }}
          className="mb-6"
        >
          <Link
            href="/properties"
            className="inline-flex items-center gap-2 text-gray-600 hover:text-amber-600 transition-colors"
          >
            <ArrowLeft className="w-5 h-5" />
            العودة إلى العقارات
          </Link>
        </motion.div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <div className="lg:col-span-2 space-y-5">
            {/* Image Gallery */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              className="bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-200"
            >
              <div
                className="relative bg-gray-900"
                style={{ minHeight: "380px", maxHeight: "460px" }}
              >
                {property.images.length > 0 ? (
                  <img
                    src={property.images[currentImage]}
                    alt={property.title}
                    className="w-full h-full object-contain mx-auto"
                    style={{ minHeight: "380px", maxHeight: "460px" }}
                  />
                ) : (
                  <div
                    className="w-full h-full flex items-center justify-center"
                    style={{ minHeight: "420px" }}
                  >
                    <div className="text-center">
                      <ImageIcon className="w-20 h-20 text-gray-500 mx-auto mb-2" />
                      <p className="text-gray-400 text-sm">لا توجد صور</p>
                    </div>
                  </div>
                )}

                {isMostRequested && (
                  <div className="absolute top-4 right-4 z-10">
                    <span className="bg-gradient-to-l from-amber-500 to-amber-600 text-white px-3 py-1.5 rounded-full text-xs font-bold shadow-lg flex items-center gap-1">
                      <Star className="w-3 h-3 fill-white" /> الأكثر طلباً
                    </span>
                  </div>
                )}

                {property.images.length > 1 && (
                  <>
                    <button
                      onClick={() =>
                        setCurrentImage(
                          (prev) =>
                            (prev - 1 + property.images.length) %
                            property.images.length,
                        )
                      }
                      className="absolute right-4 top-1/2 -translate-y-1/2 bg-black/60 text-white p-3 rounded-full hover:bg-black/80 transition-all shadow-lg"
                    >
                      <ChevronRight className="w-5 h-5" />
                    </button>
                    <button
                      onClick={() =>
                        setCurrentImage(
                          (prev) => (prev + 1) % property.images.length,
                        )
                      }
                      className="absolute left-4 top-1/2 -translate-y-1/2 bg-black/60 text-white p-3 rounded-full hover:bg-black/80 transition-all shadow-lg"
                    >
                      <ChevronLeft className="w-5 h-5" />
                    </button>
                  </>
                )}

                <div className="absolute bottom-4 right-4 flex gap-2 z-10">
                  <span className="bg-black/70 text-white px-3 py-1 rounded-full text-sm font-medium backdrop-blur-sm">
                    {property.statusLabel}
                  </span>
                  <span className="bg-black/70 text-white px-3 py-1 rounded-full text-sm font-medium backdrop-blur-sm">
                    {property.typeLabel}
                  </span>
                </div>
                <div className="absolute bottom-4 left-4 bg-black/70 text-white px-3 py-1 rounded-full text-xs backdrop-blur-sm z-10">
                  {currentImage + 1} / {property.images.length || 1}
                </div>
              </div>

              {property.images.length > 1 && (
                <div
                  className="flex gap-2 p-3 bg-gray-50 overflow-x-auto"
                  style={{ scrollBehavior: "smooth" }}
                >
                  {property.images.map((img, idx) => (
                    <button
                      key={idx}
                      onClick={() => setCurrentImage(idx)}
                      className={`flex-shrink-0 w-24 h-20 rounded-xl overflow-hidden border-2 transition-all duration-200 ${idx === currentImage ? "border-amber-500 ring-2 ring-amber-200 shadow-md" : "border-gray-200 opacity-60 hover:opacity-100"}`}
                    >
                      <img
                        src={img}
                        alt=""
                        className="w-full h-full object-cover"
                      />
                    </button>
                  ))}
                </div>
              )}
            </motion.div>

            {/* Property Info */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              className="bg-white rounded-2xl p-5 shadow-sm border border-gray-200"
            >
              <div className="flex justify-between items-start mb-3">
                <div>
                  <div className="flex items-center gap-1.5 mb-1 flex-wrap">
                    <span className="px-2 py-0.5 bg-amber-100 text-amber-800 rounded-full text-xs">
                      {property.typeLabel}
                    </span>
                    <span
                      className={`px-2 py-0.5 rounded-full text-xs ${property.status === "available" ? "bg-green-100 text-green-800" : "bg-yellow-100 text-yellow-800"}`}
                    >
                      {property.statusLabel}
                    </span>
                    {property.isRent && property.displayType && (
                      <span className="px-2 py-0.5 bg-blue-100 text-blue-800 rounded-full text-xs">
                        {(() => {
                          const dt = property.displayType.toLowerCase();
                          if (dt === "both" || dt.includes("both"))
                            return "يومي وشهري";
                          if (dt.includes("daily")) return "يومي";
                          if (dt.includes("monthly")) return "شهري";
                          return dt;
                        })()}
                      </span>
                    )}
                    <span
                      className={`px-2 py-0.5 rounded-full text-xs ${property.furnished ? "bg-purple-100 text-purple-800" : "bg-gray-100 text-gray-600"}`}
                    >
                      {property.furnished ? "مفروش" : "غير مفروش"}
                    </span>
                  </div>
                  <h1 className="text-xl font-bold text-gray-900">
                    {property.title}
                  </h1>
                  <div className="flex items-center gap-1 text-gray-500 text-xs mt-0.5">
                    <MapPin className="w-3 h-3" />
                    <span>
                      {property.location.address || property.location.city}
                    </span>
                  </div>
                </div>
                <button
                  onClick={handleFavorite}
                  disabled={favLoading}
                  className="p-1.5 rounded-full hover:bg-gray-100 transition-colors"
                >
                  <Heart
                    className={`w-5 h-5 ${isFav ? "fill-red-500 text-red-500" : "text-gray-400"}`}
                  />
                </button>
              </div>

              {/* Price */}
              <div className="bg-amber-50 rounded-xl p-3 mb-4">
                {property.isRent ? (
                  <div className="flex flex-wrap gap-6 items-end">
                    {property.priceDisplay.monthly > 0 && (
                      <div>
                        <span className="text-2xl font-bold text-amber-600">
                          {formatCurrency(property.priceDisplay.monthly)}
                        </span>
                        <span className="text-gray-500 mr-1">ل.س / شهرياً</span>
                      </div>
                    )}
                    {property.priceDisplay.daily > 0 && (
                      <div>
                        <span className="text-2xl font-bold text-amber-600">
                          {formatCurrency(property.priceDisplay.daily)}
                        </span>
                        <span className="text-gray-500 mr-1">ل.س / يومياً</span>
                      </div>
                    )}
                    {property.deposit > 0 && (
                      <div className="text-sm text-gray-500">
                        <span className="font-medium">تأمين:</span>{" "}
                        {formatCurrency(property.deposit)} ل.س
                      </div>
                    )}
                  </div>
                ) : (
                  <div>
                    <span className="text-2xl font-bold text-blue-600">
                      {formatCurrency(property.price)}
                    </span>
                    <span className="text-gray-500 mr-1">ل.س</span>
                    <span className="text-sm text-gray-400 mr-2">للبيع</span>
                  </div>
                )}
              </div>

              {/* Specs Tiles */}
              <div className="grid grid-cols-3 md:grid-cols-6 gap-1.5 mb-4">
                {property.bedrooms > 0 && (
                  <div className="bg-gray-50 rounded-lg p-2 text-center">
                    <Bed className="w-4 h-4 text-amber-500 mx-auto mb-0.5" />
                    <div className="font-bold text-gray-900 text-sm">
                      {property.bedrooms}
                    </div>
                    <div className="text-[10px] text-gray-500">غرف نوم</div>
                  </div>
                )}
                {property.bathrooms > 0 && (
                  <div className="bg-gray-50 rounded-lg p-2 text-center">
                    <Bath className="w-4 h-4 text-amber-500 mx-auto mb-0.5" />
                    <div className="font-bold text-gray-900 text-sm">
                      {property.bathrooms}
                    </div>
                    <div className="text-[10px] text-gray-500">حمامات</div>
                  </div>
                )}
                {property.area > 0 && (
                  <div className="bg-gray-50 rounded-lg p-2 text-center">
                    <Square className="w-4 h-4 text-amber-500 mx-auto mb-0.5" />
                    <div className="font-bold text-gray-900 text-sm">
                      {property.area}
                    </div>
                    <div className="text-[10px] text-gray-500">م²</div>
                  </div>
                )}
                {property.floor > 0 && (
                  <div className="bg-gray-50 rounded-lg p-2 text-center">
                    <Layers className="w-4 h-4 text-amber-500 mx-auto mb-0.5" />
                    <div className="font-bold text-gray-900 text-sm">
                      {property.floor}
                    </div>
                    <div className="text-[10px] text-gray-500">طابق</div>
                  </div>
                )}
                {property.salons > 0 && (
                  <div className="bg-gray-50 rounded-lg p-2 text-center">
                    <Sofa className="w-4 h-4 text-amber-500 mx-auto mb-0.5" />
                    <div className="font-bold text-gray-900 text-sm">
                      {property.salons}
                    </div>
                    <div className="text-[10px] text-gray-500">صالونات</div>
                  </div>
                )}
                {property.balconies > 0 && (
                  <div className="bg-gray-50 rounded-lg p-2 text-center">
                    <DoorOpen className="w-4 h-4 text-amber-500 mx-auto mb-0.5" />
                    <div className="font-bold text-gray-900 text-sm">
                      {property.balconies}
                    </div>
                    <div className="text-[10px] text-gray-500">بلكونات</div>
                  </div>
                )}
                {avgRating !== null && avgRating > 0 && (
                  <div className="bg-gray-50 rounded-lg p-2 text-center">
                    <Star className="w-4 h-4 text-amber-500 mx-auto mb-0.5 fill-amber-500" />
                    <div className="font-bold text-gray-900 text-sm">
                      {avgRating.toFixed(1)}
                    </div>
                    <div className="text-[10px] text-gray-500">التقييم</div>
                  </div>
                )}
                {property.bookedCount > 0 && (
                  <div className="bg-gray-50 rounded-lg p-2 text-center">
                    <Calendar className="w-4 h-4 text-amber-500 mx-auto mb-0.5" />
                    <div className="font-bold text-gray-900 text-sm">
                      {property.bookedCount}
                    </div>
                    <div className="text-[10px] text-gray-500">حجوزات</div>
                  </div>
                )}
              </div>

              {/* Description */}
              {property.description && (
                <div className="mb-4">
                  <h3 className="font-bold text-gray-900 mb-1 text-sm">
                    الوصف
                  </h3>
                  <p className="text-gray-600 text-sm leading-relaxed">
                    {property.description}
                  </p>
                </div>
              )}

              {/* Features */}
              <div className="flex flex-wrap gap-1.5 mb-4">
                {property.isSmokeAllow && (
                  <span className="px-2 py-0.5 bg-gray-100 text-gray-700 rounded-full text-xs border flex items-center gap-1">
                    <Wind className="w-3 h-3" /> يسمح بالتدخين
                  </span>
                )}
                {!property.isSmokeAllow && (
                  <span className="px-2 py-0.5 bg-gray-100 text-gray-700 rounded-full text-xs border flex items-center gap-1">
                    <Ban className="w-3 h-3" /> ممنوع التدخين
                  </span>
                )}
                {property.isVisitorAllow && (
                  <span className="px-2 py-0.5 bg-gray-100 text-gray-700 rounded-full text-xs border flex items-center gap-1">
                    <Users className="w-3 h-3" /> يسمح بالزوار
                  </span>
                )}
                {property.specializedFor && (
                  <span className="px-2 py-0.5 bg-amber-50 text-amber-700 rounded-full text-xs border border-amber-200 flex items-center gap-1">
                    <Users className="w-3 h-3" /> {property.specializedFor}
                  </span>
                )}
              </div>

              {/* Services with detail text */}
              {property.services &&
                (Array.isArray(property.services)
                  ? property.services.length > 0
                  : Object.keys(property.services).length > 0) && (
                  <div className="mb-4">
                    <h3 className="font-bold text-gray-900 mb-2 text-sm">
                      الخدمات
                    </h3>
                    <div className="flex flex-wrap gap-1.5">
                      {Array.isArray(property.services)
                        ? property.services.map((svc, i) => (
                            <span
                              key={i}
                              className="px-3 py-1 bg-green-50 text-green-700 rounded-full text-sm border border-green-200 flex items-center gap-1"
                            >
                              {serviceLabels[svc] || svc}
                            </span>
                          ))
                        : Object.entries(property.services).map(
                            ([key, val]) => {
                              if (!val) return null;
                              const detail =
                                typeof val === "object" && val.detail
                                  ? val.detail
                                  : typeof val === "string"
                                    ? val
                                    : null;
                              return (
                                <span
                                  key={key}
                                  className="px-3 py-1 bg-green-50 text-green-700 rounded-full text-sm border border-green-200 flex items-center gap-1"
                                >
                                  {serviceLabels[key] || key}
                                  {detail && (
                                    <span className="text-green-400">
                                      · {detail}
                                    </span>
                                  )}
                                </span>
                              );
                            },
                          )}
                    </div>
                  </div>
                )}

              {/* Room Details (only for room type) */}
              {isRoomType && Object.keys(property.roomDetails).length > 0 && (
                <div className="mb-4 bg-blue-50 rounded-xl p-3">
                  <h3 className="font-bold text-gray-900 mb-2 text-sm flex items-center gap-2">
                    <Info className="w-4 h-4 text-blue-500" />
                    تفاصيل الغرفة
                  </h3>
                  <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
                    {(() => {
                      const rd = property.roomDetails;
                      const items = [];
                      if (rd.areaType)
                        items.push({
                          label: "نوع المساحة",
                          value:
                            rd.areaType === "private room"
                              ? "غرفة خاصة"
                              : rd.areaType === "shared room"
                                ? "غرفة مشتركة"
                                : rd.areaType,
                        });
                      if (rd.peopleAllowed)
                        items.push({
                          label: "عدد الأشخاص",
                          value: rd.peopleAllowed,
                        });
                      if (rd.furnitureDetails || rd.furniture)
                        items.push({
                          label: "الأثاث",
                          value: rd.furnitureDetails || rd.furniture,
                        });
                      if (rd.entranceType)
                        items.push({
                          label: "نوع المدخل",
                          value:
                            rd.entranceType === "shared entrance"
                              ? "مدخل مشترك"
                              : rd.entranceType === "independent entrance"
                                ? "مدخل مستقل"
                                : rd.entranceType,
                        });
                      if (rd.bathroomType)
                        items.push({
                          label: "الحمام",
                          value:
                            rd.bathroomType === "room specific"
                              ? "خاص بالغرفة"
                              : rd.bathroomType === "shared"
                                ? "مشترك"
                                : rd.bathroomType,
                        });
                      if (rd.kitchenType)
                        items.push({
                          label: "المطبخ",
                          value:
                            rd.kitchenType === "shared"
                              ? "مشترك"
                              : rd.kitchenType === "not available"
                                ? "غير متوفر"
                                : rd.kitchenType,
                        });
                      if (rd.homeResidentsCount ?? rd.residents)
                        items.push({
                          label: "عدد السكان",
                          value: rd.homeResidentsCount ?? rd.residents,
                        });
                      if (rd.currentPopulationGender)
                        items.push({
                          label: "جنس السكان",
                          value:
                            rd.currentPopulationGender === "men"
                              ? "رجال"
                              : rd.currentPopulationGender === "women"
                                ? "نساء"
                                : rd.currentPopulationGender === "family"
                                  ? "عائلة"
                                  : rd.currentPopulationGender,
                        });
                      if (rd.dedicatedTo)
                        items.push({
                          label: "مخصص لـ",
                          value:
                            rd.dedicatedTo === "men only"
                              ? "رجال فقط"
                              : rd.dedicatedTo === "women only"
                                ? "نساء فقط"
                                : rd.dedicatedTo === "families only"
                                  ? "عائلات فقط"
                                  : rd.dedicatedTo === "everyone"
                                    ? "الجميع"
                                    : rd.dedicatedTo,
                        });
                      if (rd.hasRestrictedOwnerAreas !== undefined)
                        items.push({
                          label: "مناطق ممنوعة",
                          value: rd.hasRestrictedOwnerAreas ? "نعم" : "لا",
                        });
                      if (rd.hasChildren !== undefined)
                        items.push({
                          label: "أطفال",
                          value: rd.hasChildren ? "مسموح" : "غير مسموح",
                        });
                      if (rd.hasPets !== undefined)
                        items.push({
                          label: "حيوانات أليفة",
                          value: rd.hasPets ? "مسموح" : "غير مسموح",
                        });
                      if (rd.languageDialect)
                        items.push({
                          label: "اللغة",
                          value: rd.languageDialect,
                        });
                      if (rd.visitorsAllowed !== undefined)
                        items.push({
                          label: "الزوار",
                          value: rd.visitorsAllowed ? "مسموح" : "ممنوع",
                        });
                      if (rd.quietTimesEnabled ?? rd.quietTimes)
                        items.push({
                          label: "أوقات الهدوء",
                          value:
                            rd.quietTimesDetails ||
                            rd.quietTimes ||
                            (rd.quietTimesEnabled ? "مفعلة" : ""),
                        });
                      return items.map((item, i) => (
                        <div
                          key={i}
                          className="bg-white rounded-lg p-2 text-center"
                        >
                          <div className="text-xs text-gray-500">
                            {item.label}
                          </div>
                          <div className="font-medium text-sm">
                            {item.value}
                          </div>
                        </div>
                      ));
                    })()}
                  </div>
                </div>
              )}

              {/* Proximity */}
              {Object.keys(property.proximity).length > 0 && (
                <div className="mb-4">
                  <h3 className="font-bold text-gray-900 mb-2 text-sm">
                    القرب من الخدمات
                  </h3>
                  <div className="grid grid-cols-2 md:grid-cols-3 gap-1.5">
                    {Object.entries(property.proximity).map(([key, val]) => {
                      if (!val) return null;
                      const dist = typeof val === "object" ? val.distance : val;
                      return (
                        <div
                          key={key}
                          className="bg-gray-50 rounded-lg p-2 flex items-center gap-1.5"
                        >
                          {key === "School" && (
                            <School className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />
                          )}
                          {key === "Hospital" && (
                            <Hospital className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />
                          )}
                          {key === "Restaurant" && (
                            <Store className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />
                          )}
                          {key === "University" && (
                            <GraduationCap className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />
                          )}
                          {key === "Park" && (
                            <TreePine className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />
                          )}
                          {key === "Mall" && (
                            <Building className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />
                          )}
                          {![
                            "School",
                            "Hospital",
                            "Restaurant",
                            "University",
                            "Park",
                            "Mall",
                          ].includes(key) && (
                            <MapPin className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />
                          )}
                          <div>
                            <div className="text-xs font-medium text-gray-900">
                              {proximityLabels[key] || key}
                            </div>
                            <div className="text-[10px] text-gray-500">
                              {dist} {typeof dist === "number" ? "كم" : ""}
                            </div>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}

              {/* Terms as checklist */}
              {Object.keys(property.terms).length > 0 && (
                <div className="mb-4">
                  <h3 className="font-bold text-gray-900 mb-2 text-sm">
                    الشروط
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-1.5">
                    {Object.entries(property.terms).map(([key, val]) => {
                      if (!val) return null;
                      return (
                        <div
                          key={key}
                          className="flex items-center gap-1.5 p-1.5 bg-gray-50 rounded-lg"
                        >
                          {key.startsWith("No") || key.startsWith("Only") ? (
                            <Ban className="w-3.5 h-3.5 text-red-500 flex-shrink-0" />
                          ) : (
                            <Check className="w-3.5 h-3.5 text-green-500 flex-shrink-0" />
                          )}
                          <span className="text-xs text-gray-700">
                            {termLabels[key] || key}
                          </span>
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}
            </motion.div>

            {/* Map */}
            {property.location.lat && property.location.lng && (
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                className="bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-200"
              >
                <div className="h-64">
                  <MapContainer
                    center={[property.location.lat, property.location.lng]}
                    zoom={14}
                    className="h-full w-full"
                    scrollWheelZoom={false}
                  >
                    <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
                    <Marker
                      position={[property.location.lat, property.location.lng]}
                    >
                      <Popup>{property.title}</Popup>
                    </Marker>
                  </MapContainer>
                </div>
                <div className="p-3 bg-amber-50 text-center text-sm text-amber-700 flex items-center justify-center gap-2">
                  <Info className="w-4 h-4" />
                  <span>موقع تقريبي — يظهر الموقع الدقيق بعد تأكيد الحجز</span>
                </div>
                <div className="p-3 border-t border-gray-100">
                  <a
                    href={`https://www.google.com/maps?q=${property.location.lat},${property.location.lng}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center justify-center gap-2 text-blue-600 hover:text-blue-700 font-medium text-sm"
                  >
                    <ExternalLink className="w-4 h-4" />
                    فتح في Google Maps
                  </a>
                </div>
              </motion.div>
            )}

            {/* Ratings Section */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
            >
              <PropertyRatingList
                propertyId={property._raw?.propertyInformationId || property.id}
              />
            </motion.div>
          </div>

          {/* Sidebar */}
          <div className="space-y-4">
            {/* Booking Card */}
            {property.isRent && !AuthService.isAdmin() && (
              <motion.div
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                className="bg-white rounded-2xl p-5 shadow-sm border border-gray-200 sticky top-6"
              >
                {isOwnProperty ? (
                  <div className="text-center py-3">
                    <div className="w-14 h-14 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-2">
                      <Home className="w-7 h-7 text-gray-400" />
                    </div>
                    <h4 className="font-bold text-gray-700 text-sm mb-1">
                      هذا عقارك
                    </h4>
                    <p className="text-xs text-gray-500">
                      لا يمكنك حجز عقارك الخاص
                    </p>
                  </div>
                ) : bookingSuccess ? (
                  <div className="text-center py-3">
                    <div className="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
                      <Check className="w-7 h-7 text-green-600" />
                    </div>
                    <h4 className="font-bold text-green-700 text-sm mb-1">
                      تم إرسال طلب الحجز
                    </h4>
                    <p className="text-xs text-gray-500">
                      سيتم مراجعة طلبك من قبل المالك
                    </p>
                  </div>
                ) : (
                  <>
                    {/* Pricing Mode Toggle */}
                    {showPricingToggle && (
                      <div className="grid grid-cols-2 gap-2 mb-3">
                        <button
                          onClick={() => setPricingMode("daily")}
                          className={`p-2.5 rounded-xl text-center border-2 transition-all ${effectivePricingMode === "daily" ? "border-amber-500 bg-amber-50" : "border-gray-200 hover:border-gray-300"}`}
                        >
                          <div className="text-xs font-bold text-gray-900">
                            إيجار يومي
                          </div>
                          <div className="text-sm font-bold text-amber-600">
                            {formatCurrency(property.priceDisplay.daily)} ل.س
                          </div>
                        </button>
                        <button
                          onClick={() => setPricingMode("monthly")}
                          className={`p-2.5 rounded-xl text-center border-2 transition-all ${effectivePricingMode === "monthly" ? "border-amber-500 bg-amber-50" : "border-gray-200 hover:border-gray-300"}`}
                        >
                          <div className="text-xs font-bold text-gray-900">
                            إيجار شهري
                          </div>
                          <div className="text-sm font-bold text-amber-600">
                            {formatCurrency(property.priceDisplay.monthly)} ل.س
                          </div>
                        </button>
                      </div>
                    )}

                    {/* Step Indicator */}
                    <div className="flex items-center justify-center gap-2 mb-3">
                      <div
                        className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${bookingStep === "entry" ? "bg-amber-100 text-amber-800" : "bg-gray-100 text-gray-500"}`}
                      >
                        <div
                          className={`w-1.5 h-1.5 rounded-full ${bookingStep === "entry" ? "bg-amber-500" : "bg-gray-400"}`}
                        />
                        تحديد تاريخ البداية
                      </div>
                      <div className="text-gray-300 text-xs">←</div>
                      <div
                        className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${bookingStep === "exit" ? "bg-amber-100 text-amber-800" : "bg-gray-100 text-gray-500"}`}
                      >
                        <div
                          className={`w-1.5 h-1.5 rounded-full ${bookingStep === "exit" ? "bg-amber-500" : "bg-gray-400"}`}
                        />
                        تحديد تاريخ النهاية
                      </div>
                    </div>

                    {/* Calendar */}
                    {effectivePricingMode === "daily" ? (
                      <div className="mb-3">
                        <div className="flex items-center justify-between mb-2">
                          <button
                            onClick={() => navigateMonth(-1)}
                            className="p-1 rounded-lg hover:bg-gray-100 transition-colors"
                          >
                            <ChevronRight className="w-4 h-4 text-gray-600" />
                          </button>
                          <span className="text-sm font-bold text-gray-900">
                            {MONTHS_AR[calendarMonth]} {calendarYear}
                          </span>
                          <button
                            onClick={() => navigateMonth(1)}
                            className="p-1 rounded-lg hover:bg-gray-100 transition-colors"
                          >
                            <ChevronLeft className="w-4 h-4 text-gray-600" />
                          </button>
                        </div>

                        <div className="grid grid-cols-7 mb-1">
                          {DAYS_AR.map((d, i) => (
                            <div
                              key={i}
                              className="text-center text-[10px] text-gray-400 font-medium py-1"
                            >
                              {d}
                            </div>
                          ))}
                        </div>

                        {(() => {
                          const firstDay = new Date(
                            calendarYear,
                            calendarMonth,
                            1,
                          ).getDay();
                          const daysInMonth = new Date(
                            calendarYear,
                            calendarMonth + 1,
                            0,
                          ).getDate();
                          const adjustedFirstDay = (firstDay + 1) % 7;
                          const cells = [];
                          for (let i = 0; i < adjustedFirstDay; i++) {
                            cells.push(<div key={`e-${i}`} />);
                          }
                          for (let day = 1; day <= daysInMonth; day++) {
                            const dateStr = `${calendarYear}-${String(calendarMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
                            const past = isPastDate(dateStr);
                            const available = isDateAvailable(dateStr);
                            const isSelStart = dateStr === selectedStart;
                            const isSelEnd = dateStr === selectedEnd;
                            const inRange =
                              selectedStart &&
                              selectedEnd &&
                              new Date(dateStr) > new Date(selectedStart) &&
                              new Date(dateStr) < new Date(selectedEnd);
                            const disabled = past || !available;
                            cells.push(
                              <button
                                key={dateStr}
                                onClick={() =>
                                  !disabled && handleDayClick(dateStr)
                                }
                                disabled={disabled}
                                className={`text-center py-1.5 text-xs rounded-lg transition-all ${disabled ? "text-gray-300 cursor-not-allowed" : ""} ${isSelStart || isSelEnd ? "bg-amber-500 text-white font-bold shadow-sm" : ""} ${inRange ? "bg-amber-100 text-amber-800" : ""} ${!disabled && !isSelStart && !isSelEnd && !inRange && available ? "hover:bg-amber-50 text-gray-700" : ""} ${!disabled && !isSelStart && !isSelEnd && !inRange && !available ? "text-red-300" : ""}`}
                              >
                                {day}
                              </button>,
                            );
                          }
                          return (
                            <div className="grid grid-cols-7 gap-0.5">
                              {cells}
                            </div>
                          );
                        })()}
                      </div>
                    ) : (
                      <div className="mb-3">
                        <div className="flex items-center justify-between mb-2">
                          <button
                            onClick={() => setCalendarYear((prev) => prev - 1)}
                            className="p-1 rounded-lg hover:bg-gray-100 transition-colors"
                          >
                            <ChevronRight className="w-4 h-4 text-gray-600" />
                          </button>
                          <span className="text-sm font-bold text-gray-900">
                            {calendarYear}
                          </span>
                          <button
                            onClick={() => setCalendarYear((prev) => prev + 1)}
                            className="p-1 rounded-lg hover:bg-gray-100 transition-colors"
                          >
                            <ChevronLeft className="w-4 h-4 text-gray-600" />
                          </button>
                        </div>
                        <div className="grid grid-cols-3 gap-2">
                          {MONTHS_AR.map((name, idx) => {
                            const monthStr = `${calendarYear}-${String(idx + 1).padStart(2, "0")}`;
                            const isSelStart =
                              selectedStart &&
                              selectedStart.startsWith(monthStr);
                            const isSelEnd =
                              selectedEnd && selectedEnd.startsWith(monthStr);
                            const inRange =
                              selectedStart &&
                              selectedEnd &&
                              monthStr > selectedStart.substring(0, 7) &&
                              monthStr < selectedEnd.substring(0, 7);
                            return (
                              <button
                                key={idx}
                                onClick={() => {
                                  const firstDay = `${monthStr}-01`;
                                  if (
                                    bookingStep === "entry" ||
                                    (selectedStart &&
                                      monthStr <= selectedStart.substring(0, 7))
                                  ) {
                                    setSelectedStart(firstDay);
                                    setSelectedEnd(null);
                                    setBookingStep("exit");
                                  } else {
                                    const lastDay = new Date(
                                      calendarYear,
                                      idx + 1,
                                      0,
                                    ).getDate();
                                    setSelectedEnd(
                                      `${monthStr}-${String(lastDay).padStart(2, "0")}`,
                                    );
                                    setBookingStep("entry");
                                  }
                                }}
                                className={`p-2.5 rounded-xl text-center text-xs font-medium transition-all border ${isSelStart || isSelEnd ? "bg-amber-500 text-white border-amber-500 shadow-sm" : inRange ? "bg-amber-100 text-amber-800 border-amber-200" : "bg-white text-gray-700 border-gray-200 hover:border-amber-300"}`}
                              >
                                {name}
                              </button>
                            );
                          })}
                        </div>
                      </div>
                    )}

                    {/* Summary */}
                    {selectedStart && (
                      <div className="bg-gray-50 rounded-xl p-3 mb-3 space-y-1.5">
                        <div className="flex justify-between text-xs">
                          <span className="text-gray-500">تاريخ البداية</span>
                          <span className="font-medium text-gray-900">
                            {selectedStart}
                          </span>
                        </div>
                        {selectedEnd && (
                          <>
                            <div className="flex justify-between text-xs">
                              <span className="text-gray-500">
                                تاريخ النهاية
                              </span>
                              <span className="font-medium text-gray-900">
                                {selectedEnd}
                              </span>
                            </div>
                            <div className="border-t border-gray-200 my-1" />
                            <div className="flex justify-between text-xs">
                              <span className="text-gray-500">
                                {effectivePricingMode === "daily"
                                  ? "عدد الأيام"
                                  : "عدد الأشهر"}
                              </span>
                              <span className="font-medium text-gray-900">
                                {effectivePricingMode === "daily"
                                  ? Math.max(
                                      1,
                                      Math.round(
                                        (new Date(selectedEnd) -
                                          new Date(selectedStart)) /
                                          (1000 * 60 * 60 * 24),
                                      ) + 1,
                                    )
                                  : new Date(selectedEnd).getMonth() -
                                    new Date(selectedStart).getMonth() +
                                    (new Date(selectedEnd).getFullYear() -
                                      new Date(selectedStart).getFullYear()) *
                                      12 +
                                    1}
                              </span>
                            </div>
                            <div className="flex justify-between text-xs font-bold">
                              <span className="text-gray-700">المجموع</span>
                              <span className="text-amber-600">
                                {formatCurrency(
                                  effectivePricingMode === "daily"
                                    ? Math.max(
                                        1,
                                        Math.round(
                                          (new Date(selectedEnd) -
                                            new Date(selectedStart)) /
                                            (1000 * 60 * 60 * 24),
                                        ) + 1,
                                      ) * property.priceDisplay.daily
                                    : (new Date(selectedEnd).getMonth() -
                                        new Date(selectedStart).getMonth() +
                                        (new Date(selectedEnd).getFullYear() -
                                          new Date(
                                            selectedStart,
                                          ).getFullYear()) *
                                          12 +
                                        1) *
                                        property.priceDisplay.monthly,
                                )}{" "}
                                ل.س
                              </span>
                            </div>
                            {property.deposit > 0 && (
                              <div className="flex justify-between text-xs">
                                <span className="text-gray-500">تأمين</span>
                                <span className="font-medium text-gray-900">
                                  {formatCurrency(property.deposit)} ل.س
                                </span>
                              </div>
                            )}
                          </>
                        )}
                      </div>
                    )}

                    {bookingError && (
                      <div className="bg-red-50 text-red-600 p-2.5 rounded-xl text-xs mb-3">
                        {bookingError}
                      </div>
                    )}

                    <button
                      onClick={handleBookingConfirm}
                      disabled={
                        bookingLoading || !selectedStart || !selectedEnd
                      }
                      className="w-full bg-amber-500 hover:bg-amber-600 text-white py-2.5 rounded-xl font-bold text-sm transition-all disabled:opacity-50 flex items-center justify-center gap-2"
                    >
                      {bookingLoading ? (
                        <Loader2 className="w-4 h-4 animate-spin" />
                      ) : (
                        <Calendar className="w-4 h-4" />
                      )}
                      {bookingLoading ? "جاري الحجز..." : "تأكيد الحجز"}
                    </button>
                  </>
                )}
              </motion.div>
            )}

            {/* Contact Card */}
            {/* {!isOwnProperty && (
            <motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} className="bg-white rounded-2xl p-5 shadow-sm border border-gray-200">
              <div className="flex items-center gap-2 mb-3">
                <Phone className="w-4 h-4 text-amber-500" />
                <h3 className="font-bold text-gray-900">معلومات المالك</h3>
              </div>

              {showContact && contactInfo ? (
                <div className="space-y-2">
                  <div className="flex items-center gap-2.5 p-2.5 bg-gray-50 rounded-xl">
                    <Phone className="w-4 h-4 text-gray-600 flex-shrink-0" />
                    <span className="font-medium text-gray-900 text-sm" dir="ltr">{contactInfo.phone || contactInfo.phoneNumber || '—'}</span>
                  </div>
                  {contactInfo.whatsAppNumber && (
                    <a href={`https://wa.me/${contactInfo.whatsAppNumber.replace(/[^0-9]/g, '')}`} target="_blank" rel="noopener noreferrer"
                      className="flex items-center gap-2.5 p-2.5 bg-green-50 rounded-xl hover:bg-green-100 transition-colors">
                      <MessageCircle className="w-4 h-4 text-green-600 flex-shrink-0" />
                      <span className="font-medium text-gray-900 text-sm" dir="ltr">{contactInfo.whatsAppNumber}</span>
                    </a>
                  )}
                </div>
              ) : (
                <button onClick={fetchContactInfo}
                  className="w-full bg-gray-800 hover:bg-gray-900 text-white py-2.5 rounded-xl font-medium text-sm transition-colors flex items-center justify-center gap-2">
                  <Phone className="w-4 h-4" />
                  عرض معلومات الاتصال
                </button>
              )}
            </motion.div>
            )} */}
          </div>
        </div>
      </div>

      {/* Login Dialog */}
      {showLoginDialog && (
        <div
          className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
          onClick={() => setShowLoginDialog(false)}
        >
          <div
            className="bg-white rounded-2xl p-6 max-w-sm text-center mx-4"
            onClick={(e) => e.stopPropagation()}
          >
            <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 mb-2">تسجيل الدخول مطلوب</h3>
            <p className="text-gray-500 mb-4">
              للحجز أو إضافة المفضلة، سجل دخولك.
            </p>
            <Link
              href="/login"
              className="block w-full bg-amber-500 text-white py-3 rounded-xl font-medium mb-2 hover:bg-amber-600"
            >
              تسجيل الدخول
            </Link>
            <Link
              href="/auth/choose-role"
              className="block w-full bg-gray-100 py-3 rounded-xl font-medium hover:bg-gray-200"
            >
              إنشاء حساب
            </Link>
            <button
              onClick={() => setShowLoginDialog(false)}
              className="mt-3 text-gray-400 hover:text-gray-600"
            >
              إلغاء
            </button>
          </div>
        </div>
      )}
    </div>
  );
}
//reset