/**
 * Create Property Modal Component
 * Form modal for adding a new property listing with bilingual support
 */

"use client";

import { useState } from "react";
import type { Lang } from "@/lib/config";
import { fetchWithCSRF } from "@/lib/csrf-client";
import {
  X,
  Building2,
  MapPin,
  DollarSign,
  Sofa,
  Loader2,
  BedDouble,
  Bath,
  Maximize2,
  Layers,
} from "lucide-react";

interface CreatePropertyModalProps {
  lang: Lang;
  isOpen: boolean;
  onClose: () => void;
  onSuccess: () => void;
}

const GCC_COUNTRIES = [
  { value: "QA", labelEn: "Qatar", labelAr: "قطر" },
  { value: "SA", labelEn: "Saudi Arabia", labelAr: "السعودية" },
  { value: "AE", labelEn: "UAE", labelAr: "الإمارات" },
  { value: "KW", labelEn: "Kuwait", labelAr: "الكويت" },
  { value: "BH", labelEn: "Bahrain", labelAr: "البحرين" },
  { value: "OM", labelEn: "Oman", labelAr: "عمان" },
];

const GCC_CURRENCIES = [
  { value: "QAR", label: "QAR" },
  { value: "SAR", label: "SAR" },
  { value: "AED", label: "AED" },
  { value: "KWD", label: "KWD" },
  { value: "BHD", label: "BHD" },
  { value: "OMR", label: "OMR" },
];

const PROPERTY_TYPES = [
  { value: "apartment", labelEn: "Apartment", labelAr: "شقة" },
  { value: "villa", labelEn: "Villa", labelAr: "فيلا" },
  { value: "townhouse", labelEn: "Townhouse", labelAr: "تاون هاوس" },
  { value: "penthouse", labelEn: "Penthouse", labelAr: "بنتهاوس" },
  { value: "studio", labelEn: "Studio", labelAr: "استوديو" },
  { value: "office", labelEn: "Office", labelAr: "مكتب" },
  { value: "retail", labelEn: "Retail", labelAr: "تجاري" },
  { value: "warehouse", labelEn: "Warehouse", labelAr: "مستودع" },
  { value: "land", labelEn: "Land", labelAr: "أرض" },
];

const LISTING_TYPES = [
  { value: "sale", labelEn: "For Sale", labelAr: "للبيع" },
  { value: "rent", labelEn: "For Rent", labelAr: "للإيجار" },
];

const FURNISHING_OPTIONS = [
  { value: "furnished", labelEn: "Furnished", labelAr: "مفروش" },
  { value: "semi_furnished", labelEn: "Semi-furnished", labelAr: "نصف مفروش" },
  { value: "unfurnished", labelEn: "Unfurnished", labelAr: "غير مفروش" },
];

const OWNERSHIP_OPTIONS = [
  { value: "freehold", labelEn: "Freehold", labelAr: "ملكية حرة" },
  { value: "leasehold", labelEn: "Leasehold", labelAr: "إيجار طويل" },
  { value: "usufruct", labelEn: "Usufruct", labelAr: "انتفاع" },
];

const AMENITIES_LIST = [
  { value: "parking", labelEn: "Parking", labelAr: "موقف سيارات" },
  { value: "pool", labelEn: "Swimming Pool", labelAr: "مسبح" },
  { value: "gym", labelEn: "Gym", labelAr: "صالة رياضية" },
  {
    value: "security",
    labelEn: "24/7 Security",
    labelAr: "أمن على مدار الساعة",
  },
  { value: "balcony", labelEn: "Balcony", labelAr: "شرفة" },
  { value: "garden", labelEn: "Garden", labelAr: "حديقة" },
  { value: "elevator", labelEn: "Elevator", labelAr: "مصعد" },
  { value: "central_ac", labelEn: "Central A/C", labelAr: "تكييف مركزي" },
  { value: "maids_room", labelEn: "Maid's Room", labelAr: "غرفة خادمة" },
  { value: "storage", labelEn: "Storage Room", labelAr: "غرفة تخزين" },
  { value: "sea_view", labelEn: "Sea View", labelAr: "إطلالة بحرية" },
  { value: "city_view", labelEn: "City View", labelAr: "إطلالة على المدينة" },
];

export default function CreatePropertyModal({
  lang,
  isOpen,
  onClose,
  onSuccess,
}: CreatePropertyModalProps) {
  const isAr = lang === "ar";

  const [formData, setFormData] = useState({
    titleEn: "",
    titleAr: "",
    descriptionEn: "",
    descriptionAr: "",
    propertyType: "apartment",
    listingType: "sale",
    bedrooms: "",
    bathrooms: "",
    area: "",
    floor: "",
    country: "QA",
    city: "",
    district: "",
    streetAddress: "",
    building: "",
    unit: "",
    price: "",
    currency: "QAR",
    negotiable: false,
    furnishing: "unfurnished",
    ownership: "freehold",
    amenities: [] as string[],
  });

  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
  const [isSaving, setIsSaving] = useState(false);
  const [apiError, setApiError] = useState<string | null>(null);

  const updateField = (field: string, value: string | boolean | string[]) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
  };

  const toggleAmenity = (amenity: string) => {
    setFormData((prev) => ({
      ...prev,
      amenities: prev.amenities.includes(amenity)
        ? prev.amenities.filter((a) => a !== amenity)
        : [...prev.amenities, amenity],
    }));
  };

  const validateForm = () => {
    const errors: Record<string, string> = {};
    const required = isAr ? "حقل مطلوب" : "Required";

    if (!formData.titleEn.trim()) errors.titleEn = required;
    if (!formData.titleAr.trim()) errors.titleAr = required;
    if (!formData.city.trim()) errors.city = required;
    if (!formData.price || parseFloat(formData.price) <= 0)
      errors.price = required;

    setFormErrors(errors);
    return Object.keys(errors).length === 0;
  };

  const handleSave = async () => {
    if (!validateForm()) return;

    setIsSaving(true);
    setApiError(null);

    try {
      const body = {
        ...formData,
        bedrooms: formData.bedrooms ? parseInt(formData.bedrooms) : null,
        bathrooms: formData.bathrooms ? parseInt(formData.bathrooms) : null,
        area: formData.area ? parseFloat(formData.area) : null,
        floor: formData.floor ? parseInt(formData.floor) : null,
        price: parseFloat(formData.price),
      };

      const response = await fetchWithCSRF("/api/real-estate/properties", {
        method: "POST",
        body: JSON.stringify(body),
      });

      const data = await response.json();
      if (!data.success) {
        setApiError(
          data.error ||
            (isAr ? "فشل في إنشاء العقار" : "Failed to create property"),
        );
        return;
      }

      resetForm();
      onSuccess();
    } catch (error) {
      console.error("Failed to create property:", error);
      setApiError(
        isAr
          ? "حدث خطأ أثناء إنشاء العقار"
          : "An error occurred while creating the property",
      );
    } finally {
      setIsSaving(false);
    }
  };

  const resetForm = () => {
    setFormData({
      titleEn: "",
      titleAr: "",
      descriptionEn: "",
      descriptionAr: "",
      propertyType: "apartment",
      listingType: "sale",
      bedrooms: "",
      bathrooms: "",
      area: "",
      floor: "",
      country: "QA",
      city: "",
      district: "",
      streetAddress: "",
      building: "",
      unit: "",
      price: "",
      currency: "QAR",
      negotiable: false,
      furnishing: "unfurnished",
      ownership: "freehold",
      amenities: [],
    });
    setFormErrors({});
    setApiError(null);
  };

  const handleClose = () => {
    resetForm();
    onClose();
  };

  if (!isOpen) return null;

  const inputClass = (field: string) =>
    `w-full h-12 px-4 rounded-xl border-2 ${
      formErrors[field]
        ? "border-red-300 bg-red-50/50"
        : "border-slate-200 bg-slate-50/50 focus:border-brand-green"
    } text-base placeholder-slate-400 transition-all duration-200 focus:ring-4 focus:ring-brand-green/20 focus:outline-none`;

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center p-4"
      onClick={handleClose}
    >
      <div className="absolute inset-0 bg-slate-900/95 backdrop-blur-sm" />

      <div
        className="relative w-full max-w-3xl transform transition-all duration-300 ease-out animate-fadeIn max-h-[90vh] overflow-hidden"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="absolute -inset-1 bg-gradient-to-r from-brand-green via-emerald-400 to-teal-500 rounded-3xl opacity-20 blur-lg" />

        <div className="relative bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
          {/* Header */}
          <div className="relative px-8 pt-8 pb-6 shrink-0">
            <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-brand-green via-emerald-400 to-teal-500" />
            <div className="flex items-start justify-between">
              <div className="flex items-center gap-4">
                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-brand-green to-emerald-600 shadow-lg shadow-brand-green/30">
                  <Building2 className="w-7 h-7 text-white" />
                </div>
                <div>
                  <h3 className="text-2xl font-bold text-slate-900">
                    {isAr ? "إضافة عقار جديد" : "Add New Property"}
                  </h3>
                  <p className="text-sm text-slate-500 mt-1">
                    {isAr
                      ? "أدخل تفاصيل العقار أدناه"
                      : "Enter property details below"}
                  </p>
                </div>
              </div>
              <button
                onClick={handleClose}
                className="flex h-10 w-10 items-center justify-center rounded-xl text-slate-400 hover:text-slate-600 hover:bg-slate-100 transition-all duration-200"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
          </div>

          {/* Form Body */}
          <div className="px-8 pb-6 overflow-y-auto flex-1 space-y-6">
            {apiError && (
              <div className="rounded-xl bg-red-50 border border-red-200 p-4">
                <p className="text-sm text-red-700">{apiError}</p>
              </div>
            )}

            {/* Basic Info */}
            <div className="rounded-xl border-2 border-slate-200 p-5 space-y-4">
              <h4 className="flex items-center gap-2 text-sm font-bold text-slate-700">
                <span className="flex h-6 w-6 items-center justify-center rounded-lg bg-emerald-100">
                  <Building2 className="w-3.5 h-3.5 text-emerald-600" />
                </span>
                {isAr ? "المعلومات الأساسية" : "Basic Information"}
              </h4>

              <div className="grid gap-4 sm:grid-cols-2">
                <div>
                  <label className="text-sm font-semibold text-slate-700 mb-2 block">
                    {isAr ? "العنوان (إنجليزي)" : "Title (English)"}{" "}
                    <span className="text-red-500">*</span>
                  </label>
                  <input
                    type="text"
                    value={formData.titleEn}
                    onChange={(e) => updateField("titleEn", e.target.value)}
                    placeholder="e.g. Luxury 2BR Apartment in The Pearl"
                    className={inputClass("titleEn")}
                    dir="ltr"
                  />
                  {formErrors.titleEn && (
                    <p className="mt-1 text-sm text-red-500">
                      {formErrors.titleEn}
                    </p>
                  )}
                </div>
                <div>
                  <label className="text-sm font-semibold text-slate-700 mb-2 block">
                    {isAr ? "العنوان (عربي)" : "Title (Arabic)"}{" "}
                    <span className="text-red-500">*</span>
                  </label>
                  <input
                    type="text"
                    value={formData.titleAr}
                    onChange={(e) => updateField("titleAr", e.target.value)}
                    placeholder="مثال: شقة فاخرة ٢ غرف في اللؤلؤة"
                    className={inputClass("titleAr")}
                    dir="rtl"
                  />
                  {formErrors.titleAr && (
                    <p className="mt-1 text-sm text-red-500">
                      {formErrors.titleAr}
                    </p>
                  )}
                </div>
                <div>
                  <label className="text-sm font-semibold text-slate-700 mb-2 block">
                    {isAr ? "الوصف (إنجليزي)" : "Description (English)"}
                  </label>
                  <textarea
                    value={formData.descriptionEn}
                    onChange={(e) =>
                      updateField("descriptionEn", e.target.value)
                    }
                    rows={3}
                    className="w-full px-4 py-3 rounded-xl border-2 border-slate-200 bg-slate-50/50 text-base placeholder-slate-400 transition-all duration-200 focus:border-brand-green focus:ring-4 focus:ring-brand-green/20 focus:outline-none resize-none"
                    dir="ltr"
                  />
                </div>
                <div>
                  <label className="text-sm font-semibold text-slate-700 mb-2 block">
                    {isAr ? "الوصف (عربي)" : "Description (Arabic)"}
                  </label>
                  <textarea
                    value={formData.descriptionAr}
                    onChange={(e) =>
                      updateField("descriptionAr", e.target.value)
                    }
                    rows={3}
                    className="w-full px-4 py-3 rounded-xl border-2 border-slate-200 bg-slate-50/50 text-base placeholder-slate-400 transition-all duration-200 focus:border-brand-green focus:ring-4 focus:ring-brand-green/20 focus:outline-none resize-none"
                    dir="rtl"
                  />
                </div>
                <div>
                  <label className="text-sm font-semibold text-slate-700 mb-2 block">
                    {isAr ? "نوع العقار" : "Property Type"}
                  </label>
                  <select
                    value={formData.propertyType}
                    onChange={(e) =>
                      updateField("propertyType", e.target.value)
                    }
                    className="w-full h-12 px-4 rounded-xl border-2 border-slate-200 bg-slate-50/50 focus:border-brand-green text-base appearance-none cursor-pointer transition-all duration-200 focus:ring-4 focus:ring-brand-green/20 focus:outline-none"
                  >
                    {PROPERTY_TYPES.map((t) => (
                      <option key={t.value} value={t.value}>
                        {isAr ? t.labelAr : t.labelEn}
                      </option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="text-sm font-semibold text-slate-700 mb-2 block">
                    {isAr ? "نوع الإعلان" : "Listing Type"}
                  </label>
                  <select
                    value={formData.listingType}
                    onChange={(e) => updateField("listingType", e.target.value)}
                    className="w-full h-12 px-4 rounded-xl border-2 border-slate-200 bg-slate-50/50 focus:border-brand-green text-base appearance-none cursor-pointer transition-all duration-200 focus:ring-4 focus:ring-brand-green/20 focus:outline-none"
                  >
                    {LISTING_TYPES.map((t) => (
                      <option key={t.value} value={t.value}>
                        {isAr ? t.labelAr : t.labelEn}
                      </option>
                    ))}
                  </select>
                </div>
              </div>
            </div>

            {/* Specifications */}
            <div className="rounded-xl border-2 border-slate-200 p-5 space-y-4">
              <h4 className="flex items-center gap-2 text-sm font-bold text-slate-700">
                <span className="flex h-6 w-6 items-center justify-center rounded-lg bg-blue-100">
                  <Layers className="w-3.5 h-3.5 text-blue-600" />
                </span>
                {isAr ? "المواصفات" : "Specifications"}
              </h4>

              <div className="grid gap-4 grid-cols-2 sm:grid-cols-4">
                <div>
                  <label className="flex items-center gap-1 text-sm font-semibold text-slate-700 mb-2">
                    <BedDouble className="w-3.5 h-3.5 text-slate-500" />
                    {isAr ? "غرف نوم" : "Bedrooms"}
                  </label>
                  <input
                    type="number"
                    value={formData.bedrooms}
                    onChange={(e) => updateField("bedrooms", e.target.value)}
                    min="0"
                    className={inputClass("bedrooms")}
                    dir="ltr"
                  />
                </div>
                <div>
                  <label className="flex items-center gap-1 text-sm font-semibold text-slate-700 mb-2">
                    <Bath className="w-3.5 h-3.5 text-slate-500" />
                    {isAr ? "حمامات" : "Bathrooms"}
                  </label>
                  <input
                    type="number"
                    value={formData.bathrooms}
                    onChange={(e) => updateField("bathrooms", e.target.value)}
                    min="0"
                    className={inputClass("bathrooms")}
                    dir="ltr"
                  />
                </div>
                <div>
                  <label className="flex items-center gap-1 text-sm font-semibold text-slate-700 mb-2">
                    <Maximize2 className="w-3.5 h-3.5 text-slate-500" />
                    {isAr ? "المساحة (م²)" : "Area (m²)"}
                  </label>
                  <input
                    type="number"
                    value={formData.area}
                    onChange={(e) => updateField("area", e.target.value)}
                    min="0"
                    className={inputClass("area")}
                    dir="ltr"
                  />
                </div>
                <div>
                  <label className="flex items-center gap-1 text-sm font-semibold text-slate-700 mb-2">
                    <Layers className="w-3.5 h-3.5 text-slate-500" />
                    {isAr ? "الطابق" : "Floor"}
                  </label>
                  <input
                    type="number"
                    value={formData.floor}
                    onChange={(e) => updateField("floor", e.target.value)}
                    className={inputClass("floor")}
                    dir="ltr"
                  />
                </div>
              </div>
            </div>

            {/* Location */}
            <div className="rounded-xl border-2 border-slate-200 p-5 space-y-4">
              <h4 className="flex items-center gap-2 text-sm font-bold text-slate-700">
                <span className="flex h-6 w-6 items-center justify-center rounded-lg bg-orange-100">
                  <MapPin className="w-3.5 h-3.5 text-orange-600" />
                </span>
                {isAr ? "الموقع" : "Location"}
              </h4>

              <div className="grid gap-4 sm:grid-cols-2">
                <div>
                  <label className="text-sm font-semibold text-slate-700 mb-2 block">
                    {isAr ? "الدولة" : "Country"}{" "}
                    <span className="text-red-500">*</span>
                  </label>
                  <select
                    value={formData.country}
                    onChange={(e) => updateField("country", e.target.value)}
                    className="w-full h-12 px-4 rounded-xl border-2 border-slate-200 bg-slate-50/50 focus:border-brand-green text-base appearance-none cursor-pointer transition-all duration-200 focus:ring-4 focus:ring-brand-green/20 focus:outline-none"
                  >
                    {GCC_COUNTRIES.map((c) => (
                      <option key={c.value} value={c.value}>
                        {isAr ? c.labelAr : c.labelEn}
                      </option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="text-sm font-semibold text-slate-700 mb-2 block">
                    {isAr ? "المدينة" : "City"}{" "}
                    <span className="text-red-500">*</span>
                  </label>
                  <input
                    type="text"
                    value={formData.city}
                    onChange={(e) => updateField("city", e.target.value)}
                    placeholder={isAr ? "مثال: الدوحة" : "e.g. Doha"}
                    className={inputClass("city")}
                  />
                  {formErrors.city && (
                    <p className="mt-1 text-sm text-red-500">
                      {formErrors.city}
                    </p>
                  )}
                </div>
                <div>
                  <label className="text-sm font-semibold text-slate-700 mb-2 block">
                    {isAr ? "الحي / المنطقة" : "District"}
                  </label>
                  <input
                    type="text"
                    value={formData.district}
                    onChange={(e) => updateField("district", e.target.value)}
                    placeholder={isAr ? "مثال: اللؤلؤة" : "e.g. The Pearl"}
                    className={inputClass("district")}
                  />
                </div>
                <div className="md:col-span-2">
                  <label className="text-sm font-semibold text-slate-700 mb-2 block">
                    {isAr ? "العنوان التفصيلي" : "Street Address"}
                  </label>
                  <input
                    type="text"
                    value={formData.streetAddress}
                    onChange={(e) =>
                      updateField("streetAddress", e.target.value)
                    }
                    placeholder={
                      isAr
                        ? "مثال: ١٢٣ شارع الوعب، بجانب منطقة أسباير"
                        : "e.g. 123 Al Waab Street, next to Aspire Zone"
                    }
                    className={inputClass("streetAddress")}
                  />
                  <p className="mt-1 text-xs text-slate-500">
                    {isAr
                      ? "العنوان الكامل كما سيظهر للعملاء على واتساب"
                      : "Full address as shown to customers on WhatsApp"}
                  </p>
                </div>
                <div>
                  <label className="text-sm font-semibold text-slate-700 mb-2 block">
                    {isAr ? "المبنى" : "Building"}
                  </label>
                  <input
                    type="text"
                    value={formData.building}
                    onChange={(e) => updateField("building", e.target.value)}
                    className={inputClass("building")}
                  />
                </div>
                <div>
                  <label className="text-sm font-semibold text-slate-700 mb-2 block">
                    {isAr ? "الوحدة" : "Unit"}
                  </label>
                  <input
                    type="text"
                    value={formData.unit}
                    onChange={(e) => updateField("unit", e.target.value)}
                    className={inputClass("unit")}
                  />
                </div>
              </div>
            </div>

            {/* Pricing */}
            <div className="rounded-xl border-2 border-slate-200 p-5 space-y-4">
              <h4 className="flex items-center gap-2 text-sm font-bold text-slate-700">
                <span className="flex h-6 w-6 items-center justify-center rounded-lg bg-violet-100">
                  <DollarSign className="w-3.5 h-3.5 text-violet-600" />
                </span>
                {isAr ? "التسعير" : "Pricing"}
              </h4>

              <div className="grid gap-4 sm:grid-cols-3">
                <div>
                  <label className="text-sm font-semibold text-slate-700 mb-2 block">
                    {isAr ? "السعر" : "Price"}{" "}
                    <span className="text-red-500">*</span>
                  </label>
                  <input
                    type="number"
                    value={formData.price}
                    onChange={(e) => updateField("price", e.target.value)}
                    placeholder="0"
                    min="0"
                    step="1"
                    className={inputClass("price")}
                    dir="ltr"
                  />
                  {formErrors.price && (
                    <p className="mt-1 text-sm text-red-500">
                      {formErrors.price}
                    </p>
                  )}
                </div>
                <div>
                  <label className="text-sm font-semibold text-slate-700 mb-2 block">
                    {isAr ? "العملة" : "Currency"}
                  </label>
                  <select
                    value={formData.currency}
                    onChange={(e) => updateField("currency", e.target.value)}
                    className="w-full h-12 px-4 rounded-xl border-2 border-slate-200 bg-slate-50/50 focus:border-brand-green text-base appearance-none cursor-pointer transition-all duration-200 focus:ring-4 focus:ring-brand-green/20 focus:outline-none"
                  >
                    {GCC_CURRENCIES.map((c) => (
                      <option key={c.value} value={c.value}>
                        {c.label}
                      </option>
                    ))}
                  </select>
                </div>
                <div className="flex items-end pb-1">
                  <label className="flex items-center gap-3 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={formData.negotiable}
                      onChange={(e) =>
                        updateField("negotiable", e.target.checked)
                      }
                      className="w-5 h-5 rounded-md border-2 border-slate-300 text-brand-green focus:ring-brand-green"
                    />
                    <span className="text-sm font-medium text-slate-700">
                      {isAr ? "قابل للتفاوض" : "Negotiable"}
                    </span>
                  </label>
                </div>
              </div>
            </div>

            {/* Features */}
            <div className="rounded-xl border-2 border-slate-200 p-5 space-y-4">
              <h4 className="flex items-center gap-2 text-sm font-bold text-slate-700">
                <span className="flex h-6 w-6 items-center justify-center rounded-lg bg-teal-100">
                  <Sofa className="w-3.5 h-3.5 text-teal-600" />
                </span>
                {isAr ? "المميزات" : "Features"}
              </h4>

              <div className="grid gap-4 sm:grid-cols-2">
                <div>
                  <label className="text-sm font-semibold text-slate-700 mb-2 block">
                    {isAr ? "التأثيث" : "Furnishing"}
                  </label>
                  <select
                    value={formData.furnishing}
                    onChange={(e) => updateField("furnishing", e.target.value)}
                    className="w-full h-12 px-4 rounded-xl border-2 border-slate-200 bg-slate-50/50 focus:border-brand-green text-base appearance-none cursor-pointer transition-all duration-200 focus:ring-4 focus:ring-brand-green/20 focus:outline-none"
                  >
                    {FURNISHING_OPTIONS.map((f) => (
                      <option key={f.value} value={f.value}>
                        {isAr ? f.labelAr : f.labelEn}
                      </option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="text-sm font-semibold text-slate-700 mb-2 block">
                    {isAr ? "الملكية" : "Ownership"}
                  </label>
                  <select
                    value={formData.ownership}
                    onChange={(e) => updateField("ownership", e.target.value)}
                    className="w-full h-12 px-4 rounded-xl border-2 border-slate-200 bg-slate-50/50 focus:border-brand-green text-base appearance-none cursor-pointer transition-all duration-200 focus:ring-4 focus:ring-brand-green/20 focus:outline-none"
                  >
                    {OWNERSHIP_OPTIONS.map((o) => (
                      <option key={o.value} value={o.value}>
                        {isAr ? o.labelAr : o.labelEn}
                      </option>
                    ))}
                  </select>
                </div>
              </div>

              {/* Amenities */}
              <div>
                <label className="text-sm font-semibold text-slate-700 mb-3 block">
                  {isAr ? "المرافق والخدمات" : "Amenities"}
                </label>
                <div className="flex flex-wrap gap-2">
                  {AMENITIES_LIST.map((amenity) => (
                    <button
                      key={amenity.value}
                      type="button"
                      onClick={() => toggleAmenity(amenity.value)}
                      className={`rounded-lg px-3 py-2 text-xs font-medium transition-all ${
                        formData.amenities.includes(amenity.value)
                          ? "bg-brand-green text-white shadow-sm"
                          : "bg-slate-100 text-slate-600 hover:bg-slate-200"
                      }`}
                    >
                      {isAr ? amenity.labelAr : amenity.labelEn}
                    </button>
                  ))}
                </div>
              </div>
            </div>
          </div>

          {/* Footer */}
          <div className="px-8 py-6 bg-gradient-to-r from-slate-50 via-slate-100/50 to-slate-50 border-t border-slate-200 shrink-0">
            <div className="flex items-center justify-end gap-4">
              <button
                onClick={handleClose}
                className="px-6 py-3 rounded-xl border-2 border-slate-200 bg-white text-sm font-bold text-slate-600 hover:bg-slate-50 hover:border-slate-300 transition-all duration-200"
              >
                {isAr ? "إلغاء" : "Cancel"}
              </button>
              <button
                onClick={handleSave}
                disabled={isSaving}
                className="px-8 py-3 rounded-xl bg-gradient-to-r from-brand-green to-emerald-600 text-sm font-bold text-white shadow-lg shadow-brand-green/30 hover:shadow-brand-green/50 hover:-translate-y-0.5 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0 inline-flex items-center gap-2"
              >
                {isSaving && <Loader2 className="w-4 h-4 animate-spin" />}
                {isAr ? "إنشاء العقار" : "Create Property"}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}