SweetHome/app/owner/properties/page.js

"use client";

import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { useRouter } from "next/navigation";
import Link from "next/link";
import {
  PlusCircle,
  Building,
  Home,
  DollarSign,
  MapPin,
  Bed,
  Bath,
  Square,
  Edit,
  Trash2,
  Eye,
  Calendar,
  TrendingUp,
  Users,
  FileText,
  Image as ImageIcon,
  CheckCircle,
  XCircle,
  AlertCircle,
  ChevronRight,
  ChevronLeft,
  Loader2,
  Clock,
  Wifi,
  Zap,
  Flame,
  Droplets,
  Cigarette,
  Dog,
  Music,
  Warehouse,
  Layers,
  Sofa,
  DoorOpen,
  Wind,
  Pencil,
  Save,
  X,
  Star,
  Ban,
  Check,
  School,
  Hospital,
  Store,
  GraduationCap,
  TreePine,
} from "lucide-react";
import toast, { Toaster } from "react-hot-toast";
import AuthService from "../../services/AuthService";
import {
  getMyRentListings,
  getMySaleListings,
  editRentProperty,
  editSaleProperty,
} from "../../utils/api";

const DeleteConfirmationModal = ({
  isOpen,
  onClose,
  onConfirm,
  propertyTitle,
}) => {
  if (!isOpen) return null;

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50"
      onClick={onClose}
    >
      <motion.div
        initial={{ scale: 0.9, y: 20 }}
        animate={{ scale: 1, y: 0 }}
        exit={{ scale: 0.9, y: 20 }}
        className="bg-white rounded-2xl w-full max-w-md p-6 shadow-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="text-center mb-4">
          <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-3">
            <AlertCircle className="w-8 h-8 text-red-600" />
          </div>
          <h3 className="text-xl font-bold text-gray-900">تأكيد الحذف</h3>
          <p className="text-sm text-gray-500 mt-2">
            هل أنت متأكد من حذف العقار:{" "}
            <span className="font-bold text-gray-700">"{propertyTitle}"</span>؟
          </p>
          <p className="text-xs text-red-500 mt-1">
            هذا الإجراء لا يمكن التراجع عنه
          </p>
        </div>

        <div className="flex gap-3 pt-3">
          <button
            onClick={onClose}
            className="flex-1 bg-gray-100 text-gray-700 py-3 rounded-xl font-medium hover:bg-gray-200 transition-colors"
          >
            إلغاء
          </button>
          <button
            onClick={onConfirm}
            className="flex-1 bg-red-600 text-white py-3 rounded-xl font-medium hover:bg-red-700 transition-colors"
          >
            نعم، احذف
          </button>
        </div>
      </motion.div>
    </motion.div>
  );
};

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: "موقف باص",
};

const PropertyViewModal = ({ isOpen, onClose, property }) => {
  if (!isOpen || !property) return null;

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50"
      onClick={onClose}
    >
      <motion.div
        initial={{ scale: 0.9, y: 20 }}
        animate={{ scale: 1, y: 0 }}
        exit={{ scale: 0.9, y: 20 }}
        className="bg-white rounded-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto shadow-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="sticky top-0 z-10 bg-gradient-to-r from-amber-500 to-amber-600 p-6 text-white flex justify-between items-center">
          <div>
            <h2 className="text-2xl font-bold">{property.title}</h2>
            <p className="text-amber-100 text-sm mt-1">
              تم الإضافة:{" "}
              {new Date(property.createdAt).toLocaleDateString("ar-SA")}
            </p>
          </div>
          <button
            onClick={onClose}
            className="p-2 hover:bg-white/20 rounded-full transition-colors"
          >
            <XCircle className="w-6 h-6" />
          </button>
        </div>

        <div className="p-6">
          {property.images && property.images.length > 0 && (
            <div className="mb-6">
              <h3 className="text-lg font-bold text-gray-900 mb-3">
                صور العقار
              </h3>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                {property.images.map((image, index) => (
                  <div
                    key={index}
                    className="relative aspect-square rounded-lg overflow-hidden border border-gray-200"
                  >
                    <img
                      src={image}
                      alt={`${property.title} - صورة ${index + 1}`}
                      className="w-full h-full object-cover"
                    />
                  </div>
                ))}
              </div>
            </div>
          )}

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div className="bg-gray-50 p-4 rounded-xl">
              <h4 className="font-bold text-gray-700 mb-3">معلومات أساسية</h4>
              <div className="space-y-2">
                <p className="text-sm">
                  <span className="text-gray-500">نوع العقار:</span>
                  <span className="font-medium text-gray-900 mr-2">
                    {property.propertyTypeLabel || "عقار"}
                  </span>
                </p>
                <p className="text-sm">
                  <span className="text-gray-500">نوع العرض:</span>
                  <span className="font-medium text-gray-900 mr-2">
                    {property.displayType === "Daily rent"
                      ? "إيجار يومي"
                      : property.displayType === "Monthly rent"
                        ? "إيجار شهري"
                        : property.displayType === "Both"
                          ? "يومي وشهري"
                          : property.displayType === "For sale"
                            ? "للبيع"
                            : property.rentType === "daily"
                              ? "إيجار يومي"
                              : property.rentType === "monthly"
                                ? "إيجار شهري"
                                : (property.dailyPrice > 0 && property.monthlyPrice > 0)
                                  ? "يومي وشهري"
                                  : property.monthlyPrice > 0
                                    ? "إيجار شهري"
                                    : property.dailyPrice > 0
                                      ? "إيجار يومي"
                                      : property.purpose === "sale" ? "للبيع" : "عرض"}
                  </span>
                </p>
                {property.purpose === "rent" && (
                  <p className="text-sm">
                    <span className="text-gray-500">حالة التأثيث:</span>
                    <span
                      className={`font-medium mr-2 ${property.furnished ? "text-green-600" : "text-gray-600"}`}
                    >
                      {property.furnished ? "مفروش" : "غير مفروش"}
                    </span>
                  </p>
                )}
                <p className="text-sm">
                  <span className="text-gray-500">حالة العقار:</span>
                  <span
                    className={`font-medium mr-2 ${property.status === "available" ? "text-green-600" : "text-yellow-600"}`}
                  >
                    {property.status === "available" ? "متاح" : "مؤجر"}
                  </span>
                </p>
                {property.description && (
                  <p className="text-sm mt-2">
                    <span className="text-gray-500">الوصف:</span>
                    <span className="text-gray-700 mr-2">
                      {property.description}
                    </span>
                  </p>
                )}
              </div>
            </div>

            <div className="bg-gray-50 p-4 rounded-xl">
              <h4 className="font-bold text-gray-700 mb-3">التفاصيل</h4>
              <div className="grid grid-cols-4 gap-2">
                <div className="text-center">
                  <Bed className="w-5 h-5 text-amber-500 mx-auto mb-1" />
                  <span className="text-sm font-bold">{property.bedrooms}</span>
                  <span className="text-xs text-gray-500 block">غرف</span>
                </div>
                <div className="text-center">
                  <Bath className="w-5 h-5 text-amber-500 mx-auto mb-1" />
                  <span className="text-sm font-bold">
                    {property.bathrooms}
                  </span>
                  <span className="text-xs text-gray-500 block">حمامات</span>
                </div>
                <div className="text-center">
                  <Square className="w-5 h-5 text-amber-500 mx-auto mb-1" />
                  <span className="text-sm font-bold">{property.area}</span>
                  <span className="text-xs text-gray-500 block">م²</span>
                </div>
                {property.floor > 0 && (
                  <div className="text-center">
                    <Layers className="w-5 h-5 text-amber-500 mx-auto mb-1" />
                    <span className="text-sm font-bold">{property.floor}</span>
                    <span className="text-xs text-gray-500 block">طابق</span>
                  </div>
                )}
                {property.salons > 0 && (
                  <div className="text-center">
                    <Sofa className="w-5 h-5 text-amber-500 mx-auto mb-1" />
                    <span className="text-sm font-bold">{property.salons}</span>
                    <span className="text-xs text-gray-500 block">صالونات</span>
                  </div>
                )}
                {property.balconies > 0 && (
                  <div className="text-center">
                    <DoorOpen className="w-5 h-5 text-amber-500 mx-auto mb-1" />
                    <span className="text-sm font-bold">
                      {property.balconies}
                    </span>
                    <span className="text-xs text-gray-500 block">بلكونات</span>
                  </div>
                )}
                {property.bookedCount > 0 && (
                  <div className="text-center">
                    <Calendar className="w-5 h-5 text-amber-500 mx-auto mb-1" />
                    <span className="text-sm font-bold">
                      {property.bookedCount}
                    </span>
                    <span className="text-xs text-gray-500 block">حجوزات</span>
                  </div>
                )}
              </div>
            </div>
          </div>

          <div className="bg-gray-50 p-4 rounded-xl mb-6">
            <h4 className="font-bold text-gray-700 mb-3 flex items-center gap-2">
              <MapPin className="w-5 h-5 text-amber-500" />
              الموقع
            </h4>
            <p className="text-gray-700">
              {property.address || "لم يتم تحديد العنوان"}
              {property.city && `، ${property.city}`}
              {property.district && `، ${property.district}`}
            </p>
          </div>

          {property.services &&
            (Array.isArray(property.services)
              ? property.services.length > 0
              : Object.keys(property.services).length > 0) && (
              <div className="bg-gray-50 p-4 rounded-xl mb-6">
                <h4 className="font-bold text-gray-700 mb-3">
                  الخدمات المتوفرة
                </h4>
                <div className="flex flex-wrap gap-2">
                  {Array.isArray(property.services)
                    ? property.services.map((svc, i) => (
                        <span
                          key={i}
                          className="inline-flex items-center gap-1 px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm"
                        >
                          {serviceLabels[svc] || svc}
                        </span>
                      ))
                    : Object.entries(property.services).map(([key, value]) => {
                        if (!value) return null;
                        const detail =
                          typeof value === "object" && value.detail
                            ? value.detail
                            : typeof value === "string"
                              ? value
                              : null;
                        return (
                          <span
                            key={key}
                            className="inline-flex items-center gap-1 px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm"
                          >
                            {serviceLabels[key] || key}
                            {detail && (
                              <span className="text-green-400">· {detail}</span>
                            )}
                          </span>
                        );
                      })}
              </div>
            </div>
          )}

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

          {property.terms && Object.keys(property.terms).length > 0 && (
            <div className="bg-gray-50 p-4 rounded-xl mb-6">
              <h4 className="font-bold text-gray-700 mb-3">شروط الاستخدام</h4>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                {Object.entries(property.terms).map(([key, value]) => {
                  if (!value) return null;
                  return (
                    <div
                      key={key}
                      className="flex items-center gap-2 p-2 bg-white rounded-lg"
                    >
                      {key.startsWith("No") || key.startsWith("Only") ? (
                        <Ban className="w-4 h-4 text-red-500 flex-shrink-0" />
                      ) : (
                        <Check className="w-4 h-4 text-green-500 flex-shrink-0" />
                      )}
                      <span className="text-sm text-gray-700">
                        {termLabels[key] || key}
                      </span>
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          <div className="bg-amber-50 p-4 rounded-xl">
            <h4 className="font-bold text-amber-700 mb-3">معلومات السعر</h4>
            {property.purpose === "rent" ? (
              <div className="space-y-2">
                {property.dailyPrice > 0 && (
                  <p className="flex justify-between">
                    <span className="text-gray-600">السعر اليومي:</span>
                    <span className="font-bold text-amber-600">
                      {Number(property.dailyPrice).toLocaleString()} ل.س
                    </span>
                  </p>
                )}
                {property.monthlyPrice > 0 && (
                  <p className="flex justify-between">
                    <span className="text-gray-600">السعر الشهري:</span>
                    <span className="font-bold text-amber-600">
                      {Number(property.monthlyPrice).toLocaleString()} ل.س
                    </span>
                  </p>
                )}
                {property.deposit > 0 && (
                  <p className="flex justify-between">
                    <span className="text-gray-600">التأمين:</span>
                    <span className="font-bold text-gray-700">
                      {Number(property.deposit).toLocaleString()} ل.س
                    </span>
                  </p>
                )}
                <p className="text-sm text-gray-500 mt-1">
                  نوع الإيجار:{" "}
                  {property.rentType === "daily"
                    ? "يومي"
                    : property.rentType === "monthly"
                      ? "شهري"
                      : "يومي وشهري"}
                </p>
                {property.rating > 0 && (
                  <p className="flex justify-between mt-2 pt-2 border-t border-amber-200">
                    <span className="text-gray-600">التقييم:</span>
                    <span className="font-bold text-amber-600 flex items-center gap-1">
                      {Number(property.rating).toFixed(1)}{" "}
                      <Star className="w-4 h-4 fill-amber-500" />
                    </span>
                  </p>
                )}
              </div>
            ) : (
              <p className="flex justify-between">
                <span className="text-gray-600">سعر البيع:</span>
                <span className="font-bold text-blue-600">
                  {Number(property.salePrice).toLocaleString()} ل.س
                </span>
              </p>
            )}
          </div>
        </div>
      </motion.div>
    </motion.div>
  );
};

const PropertyEditModal = ({ isOpen, onClose, property, onSave }) => {
  const [formData, setFormData] = useState({});
  const [newCustomTerm, setNewCustomTerm] = useState('');
  const [isSaving, setIsSaving] = useState(false);

  useEffect(() => {
    if (!property || !isOpen) return;
    const raw = property._raw || {};
    const info = raw.propertyInformation || {};
    let details = {};
    try {
      details =
        typeof info.detailsJSON === 'object' && info.detailsJSON
          ? info.detailsJSON
          : JSON.parse(info.detailsJSON || '{}');
    } catch {
      details = {};
    }

    const propServices = property.services || {};
    const services = {};
    const serviceDetails = {};
    Object.keys(serviceLabels).forEach((key) => {
      const val = propServices[key];
      if (val && typeof val === 'string') {
        services[key] = true;
        serviceDetails[key] = val;
      } else if (val && typeof val === 'object' && val.detail) {
        services[key] = true;
        serviceDetails[key] = val.detail;
      } else {
        services[key] = !!val;
        serviceDetails[key] = details.serviceDetails?.[key] || '';
      }
    });

    const propTerms = property.terms || {};
    const terms = {};
    Object.keys(termLabels).forEach((key) => {
      terms[key] = !!propTerms[key];
    });

    const prox = property.proximity || details.nearbyDistances || {};

    setFormData({
      propertyType: property.propertyType || 'apartment',
      furnished: property.furnished ?? false,
      description: property.description || '',
      bedrooms: property.bedrooms || 0,
      bathrooms: property.bathrooms || 0,
      floor: property.floor ?? details.floorNumber ?? details.floor ?? 0,
      salons: property.salons ?? details.numberOfSalons ?? details.salons ?? 0,
      balconies:
        property.balconies ??
        details.numberOfBalconies ??
        details.balconies ??
        0,
      area: property.area || 0,
      services,
      serviceDetails,
      terms,
      customTerms: details.customTerms || [],
      nearbySchool: prox.School ?? prox.school ?? '',
      nearbyHospital: prox.Hospital ?? prox.hospital ?? '',
      nearbyRestaurant: prox.Restaurant ?? prox.restaurant ?? '',
      nearbyUniversity: prox.University ?? prox.university ?? '',
      nearbyPark: prox.Park ?? prox.park ?? '',
      nearbyMall: prox.Mall ?? prox.mall ?? '',
      purpose: property.purpose || 'rent',
      currencyId: property.currencyId || 1,
      ...(property.purpose === 'rent'
        ? {
            dailyPrice: property.dailyPrice || 0,
            monthlyPrice: property.monthlyPrice || 0,
            deposit: property.deposit || 0,
            rentType: property.rentType || 'monthly',
            allowedPaymentPeriod:
              property.allowedPaymentPeriod ||
              details.allowedPaymentPeriod ||
              '',
          }
        : { salePrice: property.salePrice || 0 }),
    });
    setNewCustomTerm('');
  }, [property, isOpen]);

  const handleChange = (field, value) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
  };

  const handleServiceToggle = (key, checked) => {
    setFormData((prev) => ({
      ...prev,
      services: { ...prev.services, [key]: checked },
    }));
  };

  const handleServiceDetail = (key, value) => {
    setFormData((prev) => ({
      ...prev,
      serviceDetails: { ...prev.serviceDetails, [key]: value },
    }));
  };

  const handleTermToggle = (key, checked) => {
    setFormData((prev) => ({
      ...prev,
      terms: { ...prev.terms, [key]: checked },
    }));
  };

  const addCustomTerm = () => {
    const term = newCustomTerm.trim();
    if (!term) return;
    setFormData((prev) => ({
      ...prev,
      customTerms: [...(prev.customTerms || []), term],
    }));
    setNewCustomTerm('');
  };

  const removeCustomTerm = (index) => {
    setFormData((prev) => ({
      ...prev,
      customTerms: prev.customTerms.filter((_, i) => i !== index),
    }));
  };

  const handleSave = async () => {
    setIsSaving(true);
    try {
      await onSave(formData);
    } catch {
      setIsSaving(false);
    }
  };

  if (!isOpen || !property) return null;

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50"
      onClick={onClose}
    >
      <motion.div
        initial={{ scale: 0.9, y: 20 }}
        animate={{ scale: 1, y: 0 }}
        exit={{ scale: 0.9, y: 20 }}
        className="bg-white rounded-2xl w-full max-w-4xl max-h-[90vh] flex flex-col shadow-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="sticky top-0 z-10 bg-gradient-to-r from-amber-500 to-amber-600 p-6 text-white flex justify-between items-center">
          <div>
            <h2 className="text-2xl font-bold">تعديل العقار</h2>
            <p className="text-amber-100 text-sm mt-1">
              قم بتحديث معلومات العقار
            </p>
          </div>
          <button
            onClick={onClose}
            className="p-2 hover:bg-white/20 rounded-full transition-colors"
          >
            <XCircle className="w-6 h-6" />
          </button>
        </div>

        <div className="p-6 space-y-6 overflow-y-auto flex-1">
          {/* Basic Info */}
          <div className="bg-gray-50 p-4 rounded-xl">
            <h3 className="text-lg font-bold text-gray-900 mb-4">
              معلومات أساسية
            </h3>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  نوع العقار
                </label>
                <select
                  value={formData.propertyType}
                  onChange={(e) =>
                    handleChange('propertyType', e.target.value)
                  }
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"
                >
                  <option value="apartment">شقة</option>
                  <option value="villa">فيلا</option>
                  <option value="sweet">سويت</option>
                  <option value="room">غرفة ضمن شقة</option>
                  <option value="studio">استوديو</option>
                  <option value="office">مكتب</option>
                  <option value="farms">مزرعة</option>
                  <option value="shop">متجر</option>
                  <option value="warehouse">مستودع</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  حالة التأثيث
                </label>
                <div className="flex gap-4">
                  {[
                    { value: true, label: 'مفروش' },
                    { value: false, label: 'غير مفروش' },
                  ].map((opt) => (
                    <label
                      key={String(opt.value)}
                      className="flex items-center gap-2 cursor-pointer"
                    >
                      <input
                        type="radio"
                        name="furnished"
                        checked={formData.furnished === opt.value}
                        onChange={() => handleChange('furnished', opt.value)}
                        className="w-4 h-4 text-amber-500"
                      />
                      <span className="text-sm">{opt.label}</span>
                    </label>
                  ))}
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  الوصف
                </label>
                <textarea
                  value={formData.description}
                  onChange={(e) =>
                    handleChange('description', e.target.value)
                  }
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"
                  rows={3}
                />
              </div>
            </div>
          </div>

          {/* Details */}
          <div className="bg-gray-50 p-4 rounded-xl">
            <h3 className="text-lg font-bold text-gray-900 mb-4">التفاصيل</h3>
            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
              {[
                { id: 'bedrooms', label: 'عدد غرف النوم' },
                { id: 'bathrooms', label: 'عدد الحمامات' },
                { id: 'floor', label: 'الطابق' },
                { id: 'salons', label: 'عدد الصالونات' },
                { id: 'balconies', label: 'عدد البلكونات' },
                { id: 'area', label: 'المساحة (م²)' },
              ].map((field) => (
                <div key={field.id}>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    {field.label}
                  </label>
                  <input
                    type="number"
                    min="0"
                    value={formData[field.id]}
                    onChange={(e) =>
                      handleChange(field.id, Number(e.target.value))
                    }
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"
                  />
                </div>
              ))}
            </div>
          </div>

          {/* Services */}
          <div className="bg-gray-50 p-4 rounded-xl">
            <h3 className="text-lg font-bold text-gray-900 mb-4">الخدمات</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              {Object.entries(serviceLabels).map(([key, label]) => (
                <div
                  key={key}
                  className="flex items-start gap-2 p-2 border rounded-lg bg-white"
                >
                  <input
                    type="checkbox"
                    checked={formData.services?.[key] || false}
                    onChange={(e) =>
                      handleServiceToggle(key, e.target.checked)
                    }
                    className="w-4 h-4 text-amber-500 mt-1"
                  />
                  <div className="flex-1">
                    <span className="text-sm font-medium">{label}</span>
                    {formData.services?.[key] && (
                      <input
                        type="text"
                        value={formData.serviceDetails?.[key] || ''}
                        onChange={(e) =>
                          handleServiceDetail(key, e.target.value)
                        }
                        placeholder="تفاصيل الخدمة..."
                        className="w-full mt-1 px-2 py-1 text-xs border border-gray-200 rounded focus:outline-none focus:ring-1 focus:ring-amber-500"
                      />
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Terms - rent only */}
          {formData.purpose === 'rent' && (
            <div className="bg-gray-50 p-4 rounded-xl">
              <h3 className="text-lg font-bold text-gray-900 mb-4">
                شروط الاستخدام
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                {Object.entries(termLabels).map(([key, label]) => (
                  <label
                    key={key}
                    className="flex items-center gap-2 p-2 border rounded-lg cursor-pointer bg-white hover:bg-amber-50"
                  >
                    <input
                      type="checkbox"
                      checked={formData.terms?.[key] || false}
                      onChange={(e) =>
                        handleTermToggle(key, e.target.checked)
                      }
                      className="w-4 h-4 text-amber-500"
                    />
                    <span className="text-sm">{label}</span>
                  </label>
                ))}
              </div>
              <div className="mt-4">
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  شروط مخصصة
                </label>
                <div className="flex gap-2 mb-2">
                  <input
                    type="text"
                    value={newCustomTerm}
                    onChange={(e) => setNewCustomTerm(e.target.value)}
                    onKeyDown={(e) => e.key === 'Enter' && addCustomTerm()}
                    placeholder="أضف شرطاً مخصصاً..."
                    className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-sm"
                  />
                  <button
                    onClick={addCustomTerm}
                    className="px-3 py-2 bg-amber-500 text-white rounded-lg text-sm hover:bg-amber-600"
                  >
                    إضافة
                  </button>
                </div>
                {formData.customTerms?.length > 0 && (
                  <div className="flex flex-wrap gap-2">
                    {formData.customTerms.map((term, i) => (
                      <span
                        key={i}
                        className="inline-flex items-center gap-1 px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm"
                      >
                        {term}
                        <button
                          onClick={() => removeCustomTerm(i)}
                          className="hover:text-red-600"
                        >
                          <X className="w-3 h-3" />
                        </button>
                      </span>
                    ))}
                  </div>
                )}
              </div>
            </div>
          )}

          {/* Nearby Distances */}
          <div className="bg-gray-50 p-4 rounded-xl">
            <h3 className="text-lg font-bold text-gray-900 mb-4">
              القرب من الخدمات
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {[
                { id: 'nearbySchool', label: 'المدرسة' },
                { id: 'nearbyHospital', label: 'المستشفى' },
                { id: 'nearbyRestaurant', label: 'المطعم' },
                { id: 'nearbyUniversity', label: 'الجامعة' },
                { id: 'nearbyPark', label: 'الحديقة' },
                { id: 'nearbyMall', label: 'مركز التسوق' },
              ].map((field) => (
                <div key={field.id}>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    {field.label}
                  </label>
                  <input
                    type="text"
                    value={formData[field.id] || ''}
                    onChange={(e) => handleChange(field.id, e.target.value)}
                    placeholder="المسافة (كم)"
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"
                  />
                </div>
              ))}
            </div>
          </div>

          {/* Pricing */}
          <div className="bg-gray-50 p-4 rounded-xl">
            <h3 className="text-lg font-bold text-gray-900 mb-4">
              {formData.purpose === 'rent'
                ? 'معلومات السعر (إيجار)'
                : 'سعر البيع'}
            </h3>
            {formData.purpose === 'rent' ? (
              <div className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      السعر اليومي
                    </label>
                    <input
                      type="number"
                      min="0"
                      value={formData.dailyPrice}
                      onChange={(e) =>
                        handleChange('dailyPrice', Number(e.target.value))
                      }
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      السعر الشهري
                    </label>
                    <input
                      type="number"
                      min="0"
                      value={formData.monthlyPrice}
                      onChange={(e) =>
                        handleChange('monthlyPrice', Number(e.target.value))
                      }
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"
                    />
                  </div>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    التأمين
                  </label>
                  <input
                    type="number"
                    min="0"
                    value={formData.deposit}
                    onChange={(e) =>
                      handleChange('deposit', Number(e.target.value))
                    }
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    نوع الإيجار
                  </label>
                  <select
                    value={formData.rentType}
                    onChange={(e) =>
                      handleChange('rentType', e.target.value)
                    }
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"
                  >
                    <option value="daily">يومي</option>
                    <option value="monthly">شهري</option>
                    <option value="both">يومي وشهري</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    مدة السداد المسموحة
                  </label>
                  <select
                    value={formData.allowedPaymentPeriod}
                    onChange={(e) =>
                      handleChange('allowedPaymentPeriod', e.target.value)
                    }
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"
                  >
                    <option value="">اختر المدة</option>
                    <option value="1.00:00:00">يومي</option>
                    <option value="7.00:00:00">أسبوعي</option>
                    <option value="30.00:00:00">شهري</option>
                    <option value="90.00:00:00">ربع سنوي</option>
                    <option value="365.00:00:00">سنوي</option>
                  </select>
                </div>
              </div>
            ) : (
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  سعر البيع
                </label>
                <input
                  type="number"
                  min="0"
                  value={formData.salePrice}
                  onChange={(e) =>
                    handleChange('salePrice', Number(e.target.value))
                  }
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"
                />
              </div>
            )}
          </div>
        </div>

        <div className="p-6 border-t flex gap-3">
          <button
            onClick={onClose}
            className="flex-1 py-3 bg-gray-100 text-gray-700 rounded-xl hover:bg-gray-200 transition-colors"
          >
            إلغاء
          </button>
          <button
            onClick={handleSave}
            disabled={isSaving}
            className="flex-1 bg-gradient-to-r from-amber-500 to-amber-600 text-white py-3 rounded-xl hover:from-amber-600 hover:to-amber-700 transition-all disabled:opacity-50 flex items-center justify-center gap-2"
          >
            {isSaving ? (
              <>
                <Loader2 className="w-5 h-5 animate-spin" />
                جاري الحفظ...
              </>
            ) : (
              <>
                <Save className="w-5 h-5" />
                حفظ التغييرات
              </>
            )}
          </button>
        </div>
      </motion.div>
    </motion.div>
  );
};

export default function OwnerPropertiesPage() {
  const router = useRouter();
  const [user, setUser] = useState(null);
  const [properties, setProperties] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [showAddMenu, setShowAddMenu] = useState(false);
  const [activeTab, setActiveTab] = useState("rent");

  const [deleteModal, setDeleteModal] = useState({
    isOpen: false,
    property: null,
  });
  const [viewModal, setViewModal] = useState({ isOpen: false, property: null });
  const [editModal, setEditModal] = useState({ isOpen: false, property: null });

  const filteredProperties = properties.filter((p) => p.purpose === activeTab);
  const rentCount = properties.filter((p) => p.purpose === "rent").length;
  const saleCount = properties.filter((p) => p.purpose === "sale").length;

  useEffect(() => {
    const authUser = AuthService.getUser();
    if (authUser && AuthService.isOwner()) {
      setUser({
        name: authUser.name || authUser.email,
        email: authUser.email,
        role: "owner",
      });
      loadProperties();
    } else {
      router.push("/auth/choose-role");
    }
  }, [router]);

  const loadProperties = async () => {
    const authUser = AuthService.getUser();
    const userId = authUser?.id;

    if (!userId) {
      console.warn("[OwnerProperties] No user ID found");
      setIsLoading(false);
      return;
    }

    try {
      console.log("[OwnerProperties] Fetching listings for user:", userId);

      const [rentData, saleData] = await Promise.allSettled([
        getMyRentListings(),
        getMySaleListings(),
      ]);

      const rentList =
        rentData.status === "fulfilled"
          ? Array.isArray(rentData.value)
            ? rentData.value.filter(Boolean)
            : rentData.value
              ? [rentData.value]
              : []
          : [];
      const saleList =
        saleData.status === "fulfilled"
          ? Array.isArray(saleData.value)
            ? saleData.value.filter(Boolean)
            : saleData.value
              ? [saleData.value]
              : []
          : [];

      console.log(
        "[OwnerProperties] Rent:",
        rentList.length,
        "Sale:",
        saleList.length,
      );

      const normalizeServices = (details) => {
        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;
        });
        return services;
      };

      const normalizeTerms = (terms) => {
        if (!terms) return {};
        return Array.isArray(terms)
          ? terms.reduce((acc, t) => ({ ...acc, [t]: true }), {})
          : terms;
      };

      const normalizeProximity = (prox) => {
        if (!prox) return {};
        const result = {};
        Object.entries(prox).forEach(([k, v]) => {
          if (!v) return;
          result[k.charAt(0).toUpperCase() + k.slice(1)] = v;
        });
        return result;
      };

      const mappedRent = rentList.map((item) => {
        const info = item.propertyInformation || {};
        const details = typeof info.detailsJSON === 'object' && info.detailsJSON ? info.detailsJSON : (() => {
          try {
            return JSON.parse(info.detailsJSON || "{}");
          } catch {
            return {};
          }
        })();
        const apiBase =
          typeof window !== "undefined"
            ? process.env.NEXT_PUBLIC_API_URL ||
              "https://45.93.137.91.nip.io/api"
            : "";
        const raw = Array.isArray(info.images) ? info.images : [];
        return {
          id: item.id,
          title: info.address || `عقار #${item.id}`,
          propertyType:
            {
              0: "apartment",
              1: "villa",
              2: "sweet",
              3: "room",
              4: "studio",
              5: "office",
              6: "farms",
              7: "shop",
              8: "warehouse",
            }[info.buildingType] || "apartment",
          propertyTypeLabel:
            {
              0: "شقة",
              1: "فيلا",
              2: "سويت",
              3: "غرفة",
              4: "استوديو",
              5: "مكتب",
              6: "مزرعة",
              7: "متجر",
              8: "مستودع",
            }[info.buildingType] || "عقار",
          purpose: "rent",
          rentType:
            item.rentType === 0
              ? "monthly"
              : item.rentType === 1
                ? "daily"
                : "daily",
          dailyPrice: item.dailyRent || 0,
          monthlyPrice: item.monthlyRent || 0,
          salePrice: item.price || 0,
          deposit: item.deposit || 0,
          location: info.address || "",
          bedrooms: info.numberOfBedRooms || 0,
          bathrooms: info.numberOfBathRooms || 0,
          area: info.space || 0,
          livingRooms: details.livingRooms || 0,
          floor: details.floorNumber ?? details.floor ?? 0,
          salons:
            details.numberOfSalons ??
            details.salonsCount ??
            details.salons ??
            0,
          balconies:
            details.numberOfBalconies ??
            details.balconiesCount ??
            details.balconies ??
            0,
          bookedCount: details.bookedCount || 0,
          status:
            { 0: "available", 1: "booked", 2: "maintenance" }[info.status] ||
            "available",
          images:
            raw.length > 0
              ? raw.map((img) =>
                  img.startsWith("http")
                    ? img
                    : `${apiBase}${img.startsWith("/") ? "" : "/Pictures/"}${img}`,
                )
              : ["/property-placeholder.jpg"],
          createdAt: item.createdAt || new Date().toISOString(),
          furnished: details.furnished || false,
          displayType: details.displayType || (item.dailyRent && item.monthlyRent ? 'Both' : item.monthlyRent ? 'Monthly rent' : item.dailyRent ? 'Daily rent' : 'Both'),
          description: info.description || "",
          address: info.address || "",
          city: "",
          district: "",
          services: normalizeServices(details),
          terms: normalizeTerms(details.terms),
          proximity: normalizeProximity(details.nearbyDistances),
          rating: item.rating || 0,
          currencyId: item.currencyId,
          _raw: item,
        };
      });

      const mappedSale = saleList.map((item) => {
        const info = item.propertyInformation || {};
        const details = typeof info.detailsJSON === 'object' && info.detailsJSON ? info.detailsJSON : (() => {
          try {
            return JSON.parse(info.detailsJSON || "{}");
          } catch {
            return {};
          }
        })();
        const apiBase =
          typeof window !== "undefined"
            ? process.env.NEXT_PUBLIC_API_URL ||
              "https://45.93.137.91.nip.io/api"
            : "";
        const raw = Array.isArray(info.images) ? info.images : [];
        return {
          id: item.id,
          title: info.address || `عقار للبيع #${item.id}`,
          propertyType:
            {
              0: "apartment",
              1: "villa",
              2: "sweet",
              3: "room",
              4: "studio",
              5: "office",
              6: "farms",
              7: "shop",
              8: "warehouse",
            }[info.buildingType] || "apartment",
          propertyTypeLabel:
            {
              0: "شقة",
              1: "فيلا",
              2: "سويت",
              3: "غرفة",
              4: "استوديو",
              5: "مكتب",
              6: "مزرعة",
              7: "متجر",
              8: "مستودع",
            }[info.buildingType] || "عقار",
          purpose: "sale",
          dailyPrice: 0,
          monthlyPrice: 0,
          salePrice: item.price || 0,
          deposit: 0,
          location: info.address || "",
          bedrooms: info.numberOfBedRooms || 0,
          bathrooms: info.numberOfBathRooms || 0,
          area: info.space || 0,
          livingRooms: details.livingRooms || 0,
          floor: details.floorNumber ?? details.floor ?? 0,
          salons:
            details.numberOfSalons ??
            details.salonsCount ??
            details.salons ??
            0,
          balconies:
            details.numberOfBalconies ??
            details.balconiesCount ??
            details.balconies ??
            0,
          bookedCount: details.bookedCount || 0,
          status: "available",
          images:
            raw.length > 0
              ? raw.map((img) =>
                  img.startsWith("http")
                    ? img
                    : `${apiBase}${img.startsWith("/") ? "" : "/Pictures/"}${img}`,
                )
              : ["/property-placeholder.jpg"],
          createdAt: item.createdAt || new Date().toISOString(),
          furnished: details.furnished || false,
          displayType: details.displayType || 'For sale',
          description: info.description || "",
          address: info.address || "",
          city: "",
          district: "",
          services: normalizeServices(details),
          terms: normalizeTerms(details.terms),
          proximity: normalizeProximity(details.nearbyDistances),
          rating: item.rating || 0,
          currencyId: item.currencyId,
          _raw: item,
        };
      });

      setProperties([...mappedRent, ...mappedSale]);
    } catch (err) {
      console.error("[OwnerProperties] Failed to load properties:", err);
      toast.error("فشل في تحميل العقارات");
    } finally {
      setIsLoading(false);
    }
  };

  const updatePropertiesInStorage = (newProperties) => {
    setProperties(newProperties);
    localStorage.setItem("ownerProperties", JSON.stringify(newProperties));
  };

  const handleDelete = () => {
    if (deleteModal.property) {
      const newProperties = properties.filter(
        (p) => p.id !== deleteModal.property.id,
      );
      updatePropertiesInStorage(newProperties);
      setDeleteModal({ isOpen: false, property: null });
      toast.success("تم حذف العقار بنجاح");
    }
  };

  const handleSaveEdit = async (formData) => {
    try {
      const property = editModal.property;
      const raw = property._raw || {};
      const rawInfo = raw.propertyInformation || {};

      const buildingTypeMap = {
        apartment: 0,
        villa: 1,
        sweet: 2,
        room: 3,
        studio: 4,
        office: 5,
        farms: 6,
        shop: 7,
        warehouse: 8,
      };

      const activeServices = Object.entries(formData.services || {})
        .filter(([, v]) => v)
        .map(([k]) => k);

      const activeTerms = Object.entries(formData.terms || {})
        .filter(([, v]) => v)
        .reduce((acc, [k]) => ({ ...acc, [k]: true }), {});

      if (formData.customTerms?.length) {
        formData.customTerms.forEach((t) => {
          activeTerms[t] = true;
        });
      }

      const details = {
        description: formData.description || '',
        services: activeServices,
        serviceDetails: Object.fromEntries(
          Object.entries(formData.serviceDetails || {}).filter(
            ([k, v]) => activeServices.includes(k) && v,
          ),
        ),
        ...(formData.purpose === 'rent' ? { terms: activeTerms } : {}),
        displayType:
          formData.purpose === 'rent'
            ? formData.rentType === 'both'
              ? 'Both'
              : formData.rentType === 'daily'
                ? 'Daily rent'
                : 'Monthly rent'
            : 'For sale',
        propertyCondition: formData.furnished
          ? 'WithFurniture'
          : 'WithoutFurniture',
        floorNumber: parseInt(formData.floor) || 0,
        numberOfSalons: parseInt(formData.salons) || 0,
        numberOfBalconies: parseInt(formData.balconies) || 0,
        nearbyDistances: {
          school: formData.nearbySchool || '',
          hospital: formData.nearbyHospital || '',
          restaurant: formData.nearbyRestaurant || '',
          university: formData.nearbyUniversity || '',
          park: formData.nearbyPark || '',
          mall: formData.nearbyMall || '',
        },
      };

      if (
        formData.purpose === 'rent' &&
        formData.propertyType === 'room'
      ) {
        const roomDetails = rawInfo.detailsJSON || {};
        let parsedDetails = {};
        try {
          parsedDetails =
            typeof roomDetails === 'object'
              ? roomDetails
              : JSON.parse(roomDetails);
        } catch {
          parsedDetails = {};
        }
        details.room = parsedDetails.room || {};
      }

      const detailsJSON = JSON.stringify(details);

      const propInfo = {
        cordsX: rawInfo.cordsX || '',
        cordsY: rawInfo.cordsY || '',
        images: rawInfo.images || [],
        address: property.address || rawInfo.address || '',
        description:
          formData.description || rawInfo.description || '',
        numberOfBathRooms: parseInt(formData.bathrooms) || 0,
        numberOfRooms: parseInt(formData.bedrooms) || 0,
        numberOfBedRooms: parseInt(formData.bedrooms) || 0,
        space: parseFloat(formData.area) || 0,
        detailsJSON,
        buildingType: buildingTypeMap[formData.propertyType] ?? 0,
        status: 0,
        propertyType: formData.furnished ? 0 : 1,
      };

      if (formData.purpose === 'rent') {
        const rentTypeMap = { daily: 1, monthly: 0, both: 0 };
        const payload = {
          propertyInformation: propInfo,
          deposit: parseFloat(formData.deposit) || 0,
          monthlyRent: parseFloat(formData.monthlyPrice) || 0,
          dailyRent: parseFloat(formData.dailyPrice) || 0,
          rating: 1,
          currencyId:
            formData.currencyId || property.currencyId || 1,
          rentType: rentTypeMap[formData.rentType] ?? 0,
          type: formData.furnished ? 0 : 1,
          allowedPaymentPeriod: formData.allowedPaymentPeriod || '',
        };
        await editRentProperty(property.id, payload);
      } else {
        const payload = {
          propInfo,
          price: parseFloat(formData.salePrice) || 0,
          currencyId:
            formData.currencyId || property.currencyId || 1,
        };
        await editSaleProperty(property.id, payload);
      }

      const updatedProperty = { ...property, ...formData };
      const newProperties = properties.map((p) =>
        p.id === property.id ? updatedProperty : p,
      );
      updatePropertiesInStorage(newProperties);
      setEditModal({ isOpen: false, property: null });
      toast.success('تم تحديث العقار بنجاح');
    } catch (err) {
      console.error('[OwnerProperties] Edit failed:', err);
      toast.error('فشل تحديث العقار');
      throw err;
    }
  };

  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 relative">
      <Toaster position="top-center" reverseOrder={false} />

      <DeleteConfirmationModal
        isOpen={deleteModal.isOpen}
        onClose={() => setDeleteModal({ isOpen: false, property: null })}
        onConfirm={handleDelete}
        propertyTitle={deleteModal.property?.title}
      />

      <PropertyViewModal
        isOpen={viewModal.isOpen}
        onClose={() => setViewModal({ isOpen: false, property: null })}
        property={viewModal.property}
      />

      <PropertyEditModal
        isOpen={editModal.isOpen}
        onClose={() => setEditModal({ isOpen: false, property: null })}
        property={editModal.property}
        onSave={handleSaveEdit}
      />

      <div className="container mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          className="flex justify-between items-center mb-8"
        >
          <div>
            <h1 className="text-3xl font-bold text-gray-900 mb-2">عقاراتي</h1>
            <p className="text-gray-600">
              مرحباً {user?.name}، لديك {properties.length} عقار
            </p>
          </div>

          <div className="relative">
            <motion.button
              onClick={() => setShowAddMenu(!showAddMenu)}
              className="bg-gradient-to-r from-amber-500 to-amber-600 text-white px-6 py-3 rounded-xl font-medium flex items-center gap-2 shadow-lg hover:shadow-xl transition-all"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
            >
              <PlusCircle className="w-5 h-5" />
              إضافة عقار جديد
            </motion.button>

            <AnimatePresence>
              {showAddMenu && (
                <motion.div
                  initial={{ opacity: 0, y: -10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -10 }}
                  className="absolute left-0 mt-2 w-64 bg-white rounded-xl shadow-xl border border-gray-200 overflow-hidden z-50"
                >
                  <div className="p-2">
                    <Link
                      href="/owner/properties/add?purpose=rent"
                      className="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-amber-50 rounded-lg transition-colors"
                      onClick={() => setShowAddMenu(false)}
                    >
                      <div className="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
                        <Home className="w-4 h-4 text-green-600" />
                      </div>
                      <div>
                        <p className="font-medium">عقار للإيجار</p>
                        <p className="text-xs text-gray-500">
                          أضف عقار متاح للإيجار
                        </p>
                      </div>
                    </Link>

                    <Link
                      href="/owner/properties/add?purpose=sale"
                      className="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-amber-50 rounded-lg transition-colors"
                      onClick={() => setShowAddMenu(false)}
                    >
                      <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                        <DollarSign className="w-4 h-4 text-blue-600" />
                      </div>
                      <div>
                        <p className="font-medium">عقار للبيع</p>
                        <p className="text-xs text-gray-500">
                          أضف عقار متاح للبيع
                        </p>
                      </div>
                    </Link>
                  </div>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        </motion.div>

        {/* Tab Switcher */}
        <div className="flex gap-1 mb-6 bg-gray-100 rounded-xl p-1 w-fit">
          <button
            onClick={() => setActiveTab("rent")}
            className={`px-6 py-2 rounded-lg text-sm font-medium transition-all ${activeTab === "rent" ? "bg-white text-amber-600 shadow-sm" : "text-gray-600 hover:text-gray-800"}`}
          >
            <span className="flex items-center gap-2">
              <Home className="w-4 h-4" />
              للإيجار
              {rentCount > 0 && (
                <span className="bg-amber-100 text-amber-800 text-xs px-2 py-0.5 rounded-full">
                  {rentCount}
                </span>
              )}
            </span>
          </button>
          <button
            onClick={() => setActiveTab("sale")}
            className={`px-6 py-2 rounded-lg text-sm font-medium transition-all ${activeTab === "sale" ? "bg-white text-blue-600 shadow-sm" : "text-gray-600 hover:text-gray-800"}`}
          >
            <span className="flex items-center gap-2">
              <DollarSign className="w-4 h-4" />
              للبيع
              {saleCount > 0 && (
                <span className="bg-blue-100 text-blue-800 text-xs px-2 py-0.5 rounded-full">
                  {saleCount}
                </span>
              )}
            </span>
          </button>
        </div>

        {filteredProperties.length === 0 ? (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="bg-white rounded-2xl p-12 text-center border-2 border-dashed border-gray-300"
          >
            <div className="w-24 h-24 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <Building className="w-12 h-12 text-amber-600" />
            </div>
            <h3 className="text-xl font-bold text-gray-900 mb-2">
              {activeTab === "rent"
                ? "لا توجد عقارات للإيجار"
                : "لا توجد عقارات للبيع"}
            </h3>
            <p className="text-gray-600 mb-6">
              ابدأ بإضافة أول عقار {activeTab === "rent" ? "للإيجار" : "للبيع"}{" "}
              الآن
            </p>
            <Link
              href={`/owner/properties/add?purpose=${activeTab}`}
              className="inline-flex items-center gap-2 bg-amber-500 text-white px-6 py-3 rounded-xl font-medium hover:bg-amber-600 transition-colors"
            >
              <PlusCircle className="w-5 h-5" />
              إضافة عقار جديد
            </Link>
          </motion.div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredProperties.map((property, index) => (
              <motion.div
                key={property.id}
                variants={fadeInUp}
                initial="initial"
                animate="animate"
                transition={{ delay: index * 0.1 }}
                className="bg-white rounded-2xl shadow-sm hover:shadow-md transition-all overflow-hidden border border-gray-200"
              >
                <div className="relative aspect-[16/10] bg-gray-100 overflow-hidden">
                  {property.images && property.images.length > 0 ? (
                    <img
                      src={property.images[0]}
                      alt={property.title}
                      className="w-full h-full object-cover"
                    />
                  ) : (
                    <div className="w-full h-full flex items-center justify-center">
                      <ImageIcon className="w-12 h-12 text-gray-400" />
                    </div>
                  )}
                  <div className="absolute top-2 right-2 flex gap-1">
                    <span
                      className={`px-2 py-0.5 rounded-md text-xs font-medium shadow-sm backdrop-blur-sm ${
                        property.status === "available"
                          ? "bg-white/90 text-green-700"
                          : "bg-white/90 text-yellow-700"
                      }`}
                    >
                      {property.status === "available" ? "متاح" : "مؤجر"}
                    </span>
                    {property.purpose === "rent" &&
                      property.furnished !== undefined && (
                        <span
                          className={`px-2 py-0.5 rounded-md text-xs font-medium shadow-sm backdrop-blur-sm ${
                            property.furnished
                              ? "bg-white/90 text-amber-700"
                              : "bg-white/90 text-gray-600"
                          }`}
                        >
                          {property.furnished ? "مفروش" : "غير مفروش"}
                        </span>
                      )}
                  </div>

                  <div className="absolute top-2 left-2">
                    <span className="px-2 py-0.5 rounded-md text-xs font-medium bg-white/90 text-amber-700 shadow-sm backdrop-blur-sm">
                      {property.propertyTypeLabel ||
                        (property.propertyType === "apartment"
                          ? "شقة"
                          : property.propertyType === "villa"
                            ? "فيلا"
                            : property.propertyType === "sweet"
                              ? "سويت"
                              : property.propertyType === "room"
                                ? "غرفة"
                                : property.propertyType === "studio"
                                  ? "استوديو"
                                  : property.propertyType === "office"
                                    ? "مكتب"
                                    : property.propertyType === "farms"
                                      ? "مزرعة"
                                      : property.propertyType === "shop"
                                        ? "متجر"
                                        : property.propertyType === "warehouse"
                                          ? "مستودع"
                                          : "عقار")}
                    </span>
                  </div>
                </div>

                <div className="p-3">
                  <div className="flex items-start justify-between mb-1">
                    <h3 className="font-bold text-gray-900 truncate flex-1 ml-2">
                      {property.title}
                    </h3>
                    {property.rating > 0 && (
                      <div className="flex items-center gap-0.5 text-amber-600 shrink-0">
                        <Star className="w-3 h-3 fill-amber-500" />
                        <span className="text-xs font-medium">
                          {Number(property.rating).toFixed(1)}
                        </span>
                      </div>
                    )}
                  </div>

                  <div className="flex items-center gap-1 text-gray-500 text-xs mb-2">
                    <MapPin className="w-3 h-3" />
                    <span className="truncate">
                      {property.address || property.location || "موقع غير محدد"}
                    </span>
                  </div>

                  <div className="flex flex-wrap items-center gap-2 text-xs text-gray-600 mb-2">
                    {property.bedrooms > 0 && (
                      <div className="flex items-center gap-0.5 bg-gray-50 px-2 py-0.5 rounded-md">
                        <Bed className="w-3 h-3" />
                        <span>{property.bedrooms}</span>
                      </div>
                    )}
                    {property.bathrooms > 0 && (
                      <div className="flex items-center gap-0.5 bg-gray-50 px-2 py-0.5 rounded-md">
                        <Bath className="w-3 h-3" />
                        <span>{property.bathrooms}</span>
                      </div>
                    )}
                    {property.area > 0 && (
                      <div className="flex items-center gap-0.5 bg-gray-50 px-2 py-0.5 rounded-md">
                        <Square className="w-3 h-3" />
                        <span>{property.area}م²</span>
                      </div>
                    )}
                    {property.floor > 0 && (
                      <div className="flex items-center gap-0.5 bg-gray-50 px-2 py-0.5 rounded-md">
                        <Layers className="w-3 h-3" />
                        <span>ط {property.floor}</span>
                      </div>
                    )}
                    {property.salons > 0 && (
                      <div className="flex items-center gap-0.5 bg-gray-50 px-2 py-0.5 rounded-md">
                        <Sofa className="w-3 h-3" />
                        <span>{property.salons}</span>
                      </div>
                    )}
                    {property.balconies > 0 && (
                      <div className="flex items-center gap-0.5 bg-gray-50 px-2 py-0.5 rounded-md">
                        <DoorOpen className="w-3 h-3" />
                        <span>{property.balconies}</span>
                      </div>
                    )}
                  </div>

                  <div className="flex justify-between items-center pt-2 border-t border-gray-100">
                    <div>
                      {property.purpose === "rent" ? (
                        <div>
                          {property.monthlyPrice > 0 && (
                            <span className="text-base font-bold text-amber-600">
                              {Number(property.monthlyPrice).toLocaleString()}
                              <span className="text-xs text-gray-500 font-normal mr-1">
                                ل.س /شهر
                              </span>
                            </span>
                          )}
                          {property.dailyPrice > 0 &&
                            !property.monthlyPrice && (
                              <span className="text-base font-bold text-amber-600">
                                {Number(property.dailyPrice).toLocaleString()}
                                <span className="text-xs text-gray-500 font-normal mr-1">
                                  ل.س /يوم
                                </span>
                              </span>
                            )}
                          {property.deposit > 0 && (
                            <div className="text-[10px] text-gray-400">
                              تأمين: {Number(property.deposit).toLocaleString()}{" "}
                              ل.س
                            </div>
                          )}
                        </div>
                      ) : (
                        <span className="text-base font-bold text-blue-600">
                          {Number(property.salePrice).toLocaleString()} ل.س
                        </span>
                      )}
                    </div>

                    <div className="flex gap-1">
                      <button
                        onClick={() => setViewModal({ isOpen: true, property })}
                        className="px-3 py-1.5 bg-gray-50 hover:bg-blue-50 border border-gray-200 hover:border-blue-200 rounded-lg transition-all group flex items-center gap-1.5"
                        title="عرض التفاصيل"
                      >
                        <Eye className="w-3.5 h-3.5 text-gray-400 group-hover:text-blue-600" />
                        <span className="text-xs text-gray-500 group-hover:text-blue-600 font-medium">
                          عرض
                        </span>
                      </button>
                      <button
                        onClick={() => setEditModal({ isOpen: true, property })}
                        className="p-1.5 hover:bg-amber-50 rounded-lg transition-colors group"
                        title="تعديل العقار"
                      >
                        <Edit className="w-3.5 h-3.5 text-gray-400 group-hover:text-amber-600" />
                      </button>
                      <button
                        onClick={() =>
                          setDeleteModal({ isOpen: true, property })
                        }
                        className="p-1.5 hover:bg-red-50 rounded-lg transition-colors group"
                        title="حذف العقار"
                      >
                        <Trash2 className="w-3.5 h-3.5 text-gray-400 group-hover:text-red-600" />
                      </button>
                    </div>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}