import React, { useState, useEffect, useRef, useCallback } from "react";
import "maplibre-gl/dist/maplibre-gl.css";
import type { Map as MaplibreMap } from "maplibre-gl";
import { Search, X, ChevronLeft, MapPin } from "lucide-react";
import AppInput from "./AppInput";
import AppTextArea from "./AppTextArea";
import {
  Drawer,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
} from "../components/ui/drawer";
import {
  useServiceCreateAddress,
  useServiceUpdateAddress,
} from "../utils/RequestHandler";
import { useToast } from "../hooks/use-toast";
import { useNavigate, useSearchParams } from "@remix-run/react";
import { Address } from "../../src/api/types";
import {
  iranianCities,
  iranianProvinces,
  getCitiesByProvince,
  type IranianCity,
} from "../data/iranian-cities";

// Map.ir config (vector tiles + reverse geocoding). The key is a client-side
// map key (sent with every tile request), provided via env.
const MAPIR_KEY = import.meta.env.VITE_MAPIR_KEY || "";
const MAPIR_STYLE = "https://map.ir/vector/styles/main/mapir-style.json";

// Reverse geocode (lat/lng -> Persian address) via Map.ir.
async function reverseGeocode(lat: number, lon: number): Promise<string> {
  try {
    const res = await fetch(`https://map.ir/reverse?lat=${lat}&lon=${lon}`, {
      headers: { "x-api-key": MAPIR_KEY },
    });
    const data = await res.json();
    return data?.address || data?.address_compact || "آدرس نامشخص";
  } catch (error) {
    console.error("Error fetching address:", error);
    return "";
  }
}

// Form data interface
interface FormData {
  title: string;
  receiver_name: string;
  phone_number: string;
  main_address: string;
  postal_code: string;
  entry_reference: string;
  details: string;
  latitude: number;
  longitude: number;
  is_default: boolean;
}

// Props interface
interface InteractiveMapProps {
  onLocationSelected?: (location: {
    position: [number, number];
    address: string;
    postalCode?: string;
  }) => void;
  initialAddress?: Address;
  isEditing?: boolean;
  addressId?: string;
  formOnly?: boolean; // Show only the form without map
}

// Convert Persian/Arabic digits to English
function convertPersianToEnglish(str: string): string {
  const persianDigits = "۰۱۲۳۴۵۶۷۸۹";
  const arabicDigits = "٠١٢٣٤٥٦٧٨٩";
  let result = str;
  for (let i = 0; i < 10; i++) {
    result = result.replace(new RegExp(persianDigits[i], "g"), i.toString());
    result = result.replace(new RegExp(arabicDigits[i], "g"), i.toString());
  }
  return result;
}

export default function InteractiveMap({
  onLocationSelected,
  initialAddress,
  isEditing = false,
  addressId,
  formOnly = false,
}: InteractiveMapProps) {
  const [selectedPosition, setSelectedPosition] = useState<
    [number, number] | null
  >(null);
  const [selectedAddress, setSelectedAddress] = useState<string>("");
  const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false);
  const [isCityDrawerOpen, setIsCityDrawerOpen] = useState<boolean>(false);
  const [selectedCity, setSelectedCity] = useState<string>(
    isEditing ? "" : "تهران"
  );
  const [currentCenter, setCurrentCenter] = useState<[number, number]>(
    (iranianCities.find((c) => c.name === "تهران") || iranianCities[0]).position
  );
  const [mounted, setMounted] = useState<boolean>(false);

  const [formData, setFormData] = useState<FormData>({
    title: "",
    receiver_name: "",
    phone_number: "",
    main_address: "",
    postal_code: "",
    entry_reference: "",
    details: "",
    latitude: 0,
    longitude: 0,
    is_default: false,
  });

  // State for city search
  const [citySearchTerm, setCitySearchTerm] = useState<string>("");
  const [filteredCities, setFilteredCities] =
    useState<IranianCity[]>(iranianCities);
  const [selectedProvince, setSelectedProvince] = useState<string | null>(null);

  // Use a ref for the unique map ID to prevent it changing on re-renders
  const mapIdRef = useRef<string>(
    `map-${Math.random().toString(36).substring(2, 9)}-${Date.now()}-${isEditing ? "edit" : "add"}-${addressId || "new"}`
  );

  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  // Set up the toast notification system
  const { toast } = useToast();

  // Get return parameters from URL
  const returnTo = searchParams.get("returnTo");
  const cartId = searchParams.get("cartId");

  // Set up the mutation for creating addresses
  const createAddressMutation = useServiceCreateAddress();

  // For address updates, we'll use the hook with current form data
  const updateAddressMutation = useServiceUpdateAddress(addressId || "", {
    title: formData.title,
    receiverName: formData.receiver_name,
    phoneNumber: formData.phone_number,
    mainAddress: formData.main_address,
    postalCode: formData.postal_code,
    entryReference: formData.entry_reference,
    details: formData.details,
    latitude: formData.latitude,
    longitude: formData.longitude,
    isDefault: formData.is_default,
  });

  // MapLibre refs
  const mapContainerRef = useRef<HTMLDivElement>(null);
  const mapRef = useRef<MaplibreMap | null>(null);
  const moveDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  // Initialize with the existing address data when in editing mode
  useEffect(() => {
    if (isEditing && initialAddress) {
      // Set form data with initial values from address
      setFormData({
        title: initialAddress.title || "",
        receiver_name: initialAddress.receiverName || "",
        phone_number: initialAddress.phoneNumber || "",
        main_address: initialAddress.mainAddress || "",
        postal_code: initialAddress.postalCode || "",
        entry_reference: initialAddress.entryReference || "",
        details: initialAddress.details || "",
        latitude: initialAddress.latitude || 0,
        longitude: initialAddress.longitude || 0,
        is_default: initialAddress.isDefault || false,
      });

      if (initialAddress.latitude && initialAddress.longitude) {
        console.log(
          "Setting position from initial address:",
          initialAddress.latitude,
          initialAddress.longitude
        );
        // Set the marker position to the address location
        setSelectedPosition([
          initialAddress.latitude,
          initialAddress.longitude,
        ]);
        setSelectedAddress(initialAddress.mainAddress || "");
      }
    }
  }, [isEditing, initialAddress]);

  // Handle city search
  useEffect(() => {
    let cities = selectedProvince
      ? getCitiesByProvince(selectedProvince)
      : iranianCities;

    if (citySearchTerm) {
      cities = cities.filter(
        (city) =>
          city.name.includes(citySearchTerm) ||
          city.province.includes(citySearchTerm)
      );
    }

    setFilteredCities(cities);
  }, [citySearchTerm, selectedProvince]);

  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
  const [errors, setErrors] = useState<Record<string, string>>({});

  // Reverse-geocode a point and push it into the form. Used by the map's
  // center pin (on move) — replaces the old click handler.
  const applyLocation = useCallback(
    async (latlng: [number, number]) => {
      const address = await reverseGeocode(latlng[0], latlng[1]);
      setSelectedPosition(latlng);
      setSelectedAddress(address);
      setFormData((prev) => ({
        ...prev,
        main_address: address,
        latitude: latlng[0],
        longitude: latlng[1],
      }));
      if (onLocationSelected) {
        onLocationSelected({ position: latlng, address });
      }
    },
    [onLocationSelected]
  );

  // Keep a stable ref so the map's event listeners always call the latest.
  const applyLocationRef = useRef(applyLocation);
  useEffect(() => {
    applyLocationRef.current = applyLocation;
  }, [applyLocation]);

  // Initialize the MapLibre map (client-only, once) with the Map.ir style.
  useEffect(() => {
    if (!mounted || formOnly || !mapContainerRef.current || mapRef.current) {
      return;
    }
    let cancelled = false;
    (async () => {
      const maplibregl = (await import("maplibre-gl")).default;
      if (cancelled || !mapContainerRef.current) return;
      const start = selectedPosition || currentCenter; // [lat, lng]
      const map = new maplibregl.Map({
        container: mapContainerRef.current,
        style: MAPIR_STYLE,
        center: [start[1], start[0]], // MapLibre uses [lng, lat]
        zoom: 14,
        attributionControl: false,
        transformRequest: (url: string) =>
          url.startsWith("https://map.ir")
            ? { url, headers: { "x-api-key": MAPIR_KEY } }
            : { url },
      });
      mapRef.current = map;
      map.addControl(
        new maplibregl.NavigationControl({ showCompass: false }),
        "top-left"
      );
      // Reverse-geocode the centre whenever the map settles.
      map.on("moveend", () => {
        if (moveDebounceRef.current) clearTimeout(moveDebounceRef.current);
        moveDebounceRef.current = setTimeout(() => {
          const c = map.getCenter();
          applyLocationRef.current([c.lat, c.lng]);
        }, 350);
      });
      map.on("load", () => {
        const c = map.getCenter();
        applyLocationRef.current([c.lat, c.lng]);
      });
    })();
    return () => {
      cancelled = true;
      if (moveDebounceRef.current) clearTimeout(moveDebounceRef.current);
      if (mapRef.current) {
        mapRef.current.remove();
        mapRef.current = null;
      }
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [mounted, formOnly]);

  // Recenter the map when the chosen city changes.
  useEffect(() => {
    if (mapRef.current) {
      mapRef.current.flyTo({
        center: [currentCenter[1], currentCenter[0]],
        zoom: 14,
      });
    }
  }, [currentCenter]);

  const handleCitySelect = (cityName: string) => {
    setSelectedCity(cityName);
    const city = iranianCities.find((c) => c.name === cityName);
    if (city) {
      setCurrentCenter(city.position);
    }
    setSelectedProvince(null);
    setCitySearchTerm("");
    setIsCityDrawerOpen(false);
  };

  const handleOpenDrawer = () => {
    setIsDrawerOpen(true);
  };

  const handleCloseDrawer = () => {
    setIsDrawerOpen(false);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    setErrors({});

    // Validate required fields
    const newErrors: Record<string, string> = {};

    // عنوان آدرس
    if (!formData.title || !formData.title.trim()) {
      newErrors.title = "عنوان آدرس الزامی است";
    }

    // نام گیرنده
    if (!formData.receiver_name || !formData.receiver_name.trim()) {
      newErrors.receiver_name = "نام گیرنده الزامی است";
    } else if (formData.receiver_name.trim().length < 3) {
      newErrors.receiver_name = "نام گیرنده باید حداقل 3 کاراکتر باشد";
    }

    // شماره تماس
    if (!formData.phone_number || !formData.phone_number.trim()) {
      newErrors.phone_number = "شماره تماس الزامی است";
    } else {
      const phoneRegex = /^(\+98|0)?9\d{9}$/;
      const cleanPhone = convertPersianToEnglish(
        formData.phone_number.replace(/[\s-]/g, "")
      );
      if (!phoneRegex.test(cleanPhone)) {
        newErrors.phone_number = "شماره تماس معتبر نیست (مثال: 09123456789)";
      }
    }

    // آدرس کامل
    if (!formData.main_address || !formData.main_address.trim()) {
      newErrors.main_address = "آدرس الزامی است";
    } else if (formData.main_address.trim().length < 10) {
      newErrors.main_address = "آدرس باید حداقل 10 کاراکتر باشد";
    }

    // کد پستی
    if (!formData.postal_code || !formData.postal_code.trim()) {
      newErrors.postal_code = "کد پستی الزامی است";
    } else {
      const postalCodeRegex = /^\d{10}$/;
      const cleanPostalCode = convertPersianToEnglish(
        formData.postal_code.replace(/[\s-]/g, "")
      );
      if (!postalCodeRegex.test(cleanPostalCode)) {
        newErrors.postal_code = "کد پستی باید 10 رقم باشد";
      }
    }

    // پلاک
    if (!formData.entry_reference || !formData.entry_reference.trim()) {
      newErrors.entry_reference = "پلاک الزامی است";
    }

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      setIsSubmitting(false);
      return;
    }

    try {
      if (isEditing && addressId) {
        // Update existing address - use mutation instead of refetch
        console.log("Updating address with ID:", addressId);
        console.log("Form data for update:", formData);

        // In edit mode, use mutation for update
        await updateAddressMutation.mutateAsync();

        toast({
          title: "آدرس با موفقیت ویرایش شد",
          description: "آدرس شما با موفقیت ویرایش شد.",
        });
      } else {
        // Create new address
        await createAddressMutation.mutateAsync(formData);
        toast({
          title: "آدرس جدید با موفقیت اضافه شد",
          description: "آدرس جدید شما با موفقیت اضافه شد.",
        });
      }

      // Redirect based on where the user came from
      if (returnTo === "cart" && cartId) {
        // Return to cart with step=1 to show shipping info
        navigate(`/cart/${cartId}?step=1`);
      } else {
        // Default behavior - go to address list
        navigate("/profile/location");
      }
    } catch (error) {
      console.error("Error submitting address:", error);
      toast({
        variant: "destructive",
        title: "خطا در ثبت آدرس",
        description: "متاسفانه خطایی در ثبت آدرس رخ داد. لطفا مجددا تلاش کنید.",
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  // Clear validation errors when form data changes
  useEffect(() => {
    setErrors({});
  }, [formData]);

  // ایجاد useEffect جدید برای ثبت ID منحصر به فرد نقشه در کنسول برای دیباگ
  useEffect(() => {
    console.log("Map ID created:", mapIdRef.current);
  }, []);

  // تنظیم حالت mounted در اولین رندر
  useEffect(() => {
    setMounted(true);

    return () => {
      // پاکسازی هنگام خروج از صفحه
      setMounted(false);
      console.log("Map component unmounting, cleaning up state");
    };
  }, []);

  // Initial center position setup - ensure it's synced with location in edit mode
  useEffect(() => {
    if (
      isEditing &&
      initialAddress &&
      initialAddress.latitude &&
      initialAddress.longitude
    ) {
      // Make sure the map center is always set to the location being edited initially
      // This is separate from the form data initialization to ensure map always stays centered
      // on the current location regardless of other data changes
      setCurrentCenter([initialAddress.latitude, initialAddress.longitude]);
      console.log("Map center synchronized with edited location coordinates");
    }
  }, [isEditing, initialAddress]);

  // Add keyframes for the pulse animation
  useEffect(() => {
    const styleTag = document.createElement("style");
    styleTag.innerHTML = `
      @keyframes pulse {
        0% {
          transform: translate(-50%, -50%) scale(0.5);
          opacity: 1;
        }
        100% {
          transform: translate(-50%, -50%) scale(1.5);
          opacity: 0;
        }
      }
    `;
    document.head.appendChild(styleTag);

    // Listen for the custom location event
    const handleLocationFound = (event: Event) => {
      const customEvent = event as CustomEvent<{ lat: number; lng: number }>;
      const { lat, lng } = customEvent.detail;
      if (mapRef.current) {
        mapRef.current.flyTo({ center: [lng, lat], zoom: 15 });
      } else {
        applyLocationRef.current([lat, lng]);
      }
    };

    window.addEventListener(
      "user-location-found",
      handleLocationFound as EventListener
    );

    return () => {
      document.head.removeChild(styleTag);
      window.removeEventListener(
        "user-location-found",
        handleLocationFound as EventListener
      );
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // If formOnly mode, render only the form
  if (formOnly) {
    return (
      <div className="flex z-10 flex-col w-full relative">
        <div className="p-4 bg-WHITE">
          <form onSubmit={handleSubmit} dir="rtl">
            <div className="mb-4">
              <AppInput
                inputTitle="عنوان آدرس *"
                inputValue={formData.title}
                inputPlaceholder="مثال: خانه، محل کار، و..."
                inputOnChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                  setFormData({
                    ...formData,
                    title: e.target.value,
                  })
                }
                inputDir="rtl"
              />
              {errors.title && (
                <p className="text-xs text-red-500 mt-1">{errors.title}</p>
              )}
            </div>

            <div className="mb-4">
              <AppInput
                inputTitle="نام گیرنده *"
                inputValue={formData.receiver_name}
                inputPlaceholder="نام و نام خانوادگی گیرنده"
                inputOnChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                  setFormData({
                    ...formData,
                    receiver_name: e.target.value,
                  })
                }
                inputDir="rtl"
              />
              {errors.receiver_name && (
                <p className="text-xs text-red-500 mt-1">
                  {errors.receiver_name}
                </p>
              )}
            </div>

            <div className="mb-4">
              <AppInput
                inputTitle="شماره تماس *"
                inputValue={formData.phone_number}
                inputPlaceholder="شماره تماس گیرنده"
                inputOnChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                  setFormData({
                    ...formData,
                    phone_number: e.target.value,
                  })
                }
                inputDir={formData.phone_number ? "ltr" : "rtl"}
              />
              {errors.phone_number && (
                <p className="text-xs text-red-500 mt-1">
                  {errors.phone_number}
                </p>
              )}
            </div>

            <div className="mb-4">
              <AppTextArea
                inputTitle="آدرس کامل *"
                inputValue={formData.main_address}
                inputPlaceholder="آدرس دقیق"
                inputOnChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
                  setFormData({
                    ...formData,
                    main_address: e.target.value,
                  })
                }
                inputDir="rtl"
              />
              {errors.main_address && (
                <p className="text-xs text-red-500 mt-1">
                  {errors.main_address}
                </p>
              )}
            </div>

            <div className="mb-4">
              <AppInput
                inputTitle="کد پستی *"
                inputValue={formData.postal_code}
                inputPlaceholder="کد پستی ۱۰ رقمی"
                inputOnChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                  setFormData({
                    ...formData,
                    postal_code: e.target.value,
                  })
                }
                inputDir="ltr"
              />
              {errors.postal_code && (
                <p className="text-xs text-red-500 mt-1">
                  {errors.postal_code}
                </p>
              )}
            </div>

            <div className="mb-4">
              <AppInput
                inputTitle="پلاک *"
                inputValue={formData.entry_reference}
                inputPlaceholder="پلاک"
                inputOnChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                  setFormData({
                    ...formData,
                    entry_reference: e.target.value,
                  })
                }
                inputDir="rtl"
              />
              {errors.entry_reference && (
                <p className="text-xs text-red-500 mt-1">
                  {errors.entry_reference}
                </p>
              )}
            </div>

            <div className="mb-4">
              <AppTextArea
                inputTitle="توضیحات اضافی"
                inputValue={formData.details}
                inputPlaceholder="توضیحات اضافی"
                inputOnChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
                  setFormData({
                    ...formData,
                    details: e.target.value,
                  })
                }
                inputDir="rtl"
              />
            </div>

            <div className="flex items-center justify-between p-3 bg-GRAY3 rounded-lg mb-4">
              <span className="text-sm font-medium text-BLACK2">
                تنظیم به عنوان آدرس پیش‌فرض
              </span>
              <label className="relative inline-flex items-center cursor-pointer">
                <input
                  type="checkbox"
                  checked={formData.is_default}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      is_default: e.target.checked,
                    })
                  }
                  className="sr-only peer"
                  aria-label="تنظیم به عنوان آدرس پیش‌فرض"
                />
                <div className="w-11 h-6 bg-WHITE2 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-WHITE after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-WHITE after:border-GRAY3 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-VITROWN_BLUE border"></div>
              </label>
            </div>

            <button
              type="submit"
              disabled={isSubmitting}
              className="w-full bg-BLACK text-WHITE h-[55px] py-3 rounded-md text-center font-medium"
            >
              {isSubmitting ? (
                <>
                  <svg
                    className="animate-spin -ml-1 mr-3 h-5 w-5 text-WHITE inline"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                  >
                    <circle
                      className="opacity-25"
                      cx="12"
                      cy="12"
                      r="10"
                      stroke="currentColor"
                      strokeWidth="4"
                    ></circle>
                    <path
                      className="opacity-75"
                      fill="currentColor"
                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                    ></path>
                  </svg>
                  درحال ذخیره...
                </>
              ) : (
                "ثبت تغییرات"
              )}
            </button>
          </form>
        </div>
      </div>
    );
  }

  return (
    <div className="flex z-10 flex-col w-full relative">
      {/* City selector in a nice blue box */}
      <div
        role="button"
        tabIndex={0}
        className="bg-WHITE"
        onClick={() => setIsCityDrawerOpen(true)}
        onKeyDown={(e) => {
          if (e.key === "Enter" || e.key === " ") {
            setIsCityDrawerOpen(true);
          }
        }}
      >
        <div className="p-2 flex items-center gap-2 justify-center">
          <span className="font-bold text-B16">{selectedCity}</span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="text-B16"
          >
            <polyline points="6 9 12 15 18 9"></polyline>
          </svg>
        </div>
      </div>

      {/* City Selector Drawer */}
      <Drawer open={isCityDrawerOpen} onOpenChange={(open) => {
        setIsCityDrawerOpen(open);
        if (!open) {
          setSelectedProvince(null);
          setCitySearchTerm("");
        }
      }}>
        <DrawerContent className="h-[90vh]">
          <DrawerHeader className="flex flex-col py-3">
            <div className="flex relative pt-2 text-B12 font-bold items-center justify-center w-full">
              {selectedProvince ? (
                <button
                  className="absolute right-4 flex items-center gap-1 text-primary"
                  onClick={() => setSelectedProvince(null)}
                >
                  <ChevronLeft className="w-5 h-5" />
                  <span className="text-sm">استان‌ها</span>
                </button>
              ) : (
                <X
                  className="absolute right-4 cursor-pointer"
                  onClick={() => setIsCityDrawerOpen(false)}
                />
              )}
              <DrawerTitle>
                {selectedProvince ? `شهرهای ${selectedProvince}` : "انتخاب استان و شهر"}
              </DrawerTitle>
            </div>
          </DrawerHeader>

          <div className="px-4">
            <AppInput
              inputTitle={""}
              inputDir="rtl"
              inputIcon={Search}
              inputValue={citySearchTerm}
              inputPlaceholder={selectedProvince ? "جستجوی شهر..." : "جستجوی استان یا شهر..."}
              inputOnChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                setCitySearchTerm(e.target.value)
              }
            />
          </div>

          {/* Province/City List */}
          <div className="flex-1 overflow-auto">
            <div className="grid grid-cols-1">
              {!selectedProvince && !citySearchTerm ? (
                // Show provinces
                iranianProvinces.map((province) => (
                  <button
                    key={province}
                    onClick={() => setSelectedProvince(province)}
                    className="p-3 border-input focus-visible:outline-none flex items-center justify-between text-BLACK2 px-4 border-b w-full hover:bg-gray-50"
                  >
                    <span>{province}</span>
                    <ChevronLeft className="w-5 h-5 text-GRAY" />
                  </button>
                ))
              ) : filteredCities.length > 0 ? (
                // Show cities
                filteredCities.map((city) => (
                  <button
                    key={`${city.province}-${city.name}`}
                    onClick={() => handleCitySelect(city.name)}
                    className="p-3 border-input focus-visible:outline-none flex flex-col items-start text-BLACK2 px-4 border-b w-full hover:bg-gray-50"
                  >
                    <span className="font-medium">{city.name}</span>
                    {!selectedProvince && (
                      <span className="text-xs text-GRAY">{city.province}</span>
                    )}
                  </button>
                ))
              ) : (
                <div className="text-center py-8 text-GRAY">
                  <p>نتیجه‌ای یافت نشد</p>
                </div>
              )}
            </div>
          </div>
        </DrawerContent>
      </Drawer>

      {/* Map Container — MapLibre + Map.ir vector tiles. dir=ltr keeps the
          map's internal positioning correct inside the RTL page. */}
      <div className="dd z-0 h-[500px] w-full relative" dir="ltr">
        <div
          ref={mapContainerRef}
          id={mapIdRef.current}
          className="h-full w-full"
        />

        {/* Fixed center pin — the map moves under it; its tip marks the point */}
        <div className="pointer-events-none absolute left-1/2 top-1/2 z-[5] -translate-x-1/2 -translate-y-full drop-shadow-md">
          <MapPin size={40} className="fill-RED text-RED" strokeWidth={1.5} />
        </div>

        {/* Selected-address preview */}
        {selectedAddress && (
          <div
            dir="rtl"
            className="absolute left-3 right-3 bottom-3 z-[5] bg-WHITE/95 backdrop-blur rounded-xl shadow-md px-3.5 py-2.5"
          >
            <p className="text-R10 text-GRAY mb-0.5">موقعیت انتخاب‌شده</p>
            <p className="text-R12 font-bold line-clamp-2">{selectedAddress}</p>
          </div>
        )}
      </div>

      {/* Select Location Button */}
      {!onLocationSelected && selectedPosition && !isDrawerOpen && (
        <button
          onClick={handleOpenDrawer}
          className="max-w-md mx-auto fixed bottom-20 left-4 right-4 bg-BLACK text-WHITE py-3 rounded-md text-center font-medium z-30"
        >
          {isEditing ? "ثبت موقعیت جدید و ادامه ویرایش" : "انتخاب این مکان"}
        </button>
      )}

      {/* Address Form Drawer */}
      {!onLocationSelected && (
        <Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
          <DrawerContent className="h-[90vh]">
            <DrawerHeader className="flex flex-col py-3">
              <div className="flex relative pt-2 text-B12 font-bold items-center justify-center w-full">
                <X
                  className="absolute right-4"
                  onClick={() => setIsDrawerOpen(false)}
                />
                <DrawerTitle>
                  {isEditing ? "ویرایش آدرس" : "ثبت آدرس"}
                </DrawerTitle>
              </div>
            </DrawerHeader>

            <div className="p-4 overflow-y-auto flex-1 max-h-[calc(90vh-5rem)]">
              <form onSubmit={handleSubmit} dir="rtl">
                <div className="mb-4">
                  <AppInput
                    inputTitle="عنوان آدرس *"
                    inputValue={formData.title}
                    inputPlaceholder="مثال: خانه، محل کار، و..."
                    inputOnChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                      setFormData({
                        ...formData,
                        title: e.target.value,
                      })
                    }
                    inputDir="rtl"
                  />
                  {errors.title && (
                    <p className="text-xs text-red-500 mt-1">{errors.title}</p>
                  )}
                </div>

                <div className="mb-4">
                  <AppInput
                    inputTitle="نام گیرنده *"
                    inputValue={formData.receiver_name}
                    inputPlaceholder="نام و نام خانوادگی گیرنده"
                    inputOnChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                      setFormData({
                        ...formData,
                        receiver_name: e.target.value,
                      })
                    }
                    inputDir="rtl"
                  />
                  {errors.receiver_name && (
                    <p className="text-xs text-red-500 mt-1">
                      {errors.receiver_name}
                    </p>
                  )}
                </div>

                <div className="mb-4">
                  <AppInput
                    inputTitle="شماره تماس *"
                    inputValue={formData.phone_number}
                    inputPlaceholder="شماره تماس گیرنده"
                    inputOnChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                      setFormData({
                        ...formData,
                        phone_number: e.target.value,
                      })
                    }
                    inputDir={formData.phone_number ? "ltr" : "rtl"}
                  />
                  {errors.phone_number && (
                    <p className="text-xs text-red-500 mt-1">
                      {errors.phone_number}
                    </p>
                  )}
                </div>

                <div className="mb-4">
                  <AppTextArea
                    inputTitle="آدرس کامل *"
                    inputValue={formData.main_address}
                    inputPlaceholder="آدرس دقیق"
                    inputOnChange={(
                      e: React.ChangeEvent<HTMLTextAreaElement>
                    ) =>
                      setFormData({
                        ...formData,
                        main_address: e.target.value,
                      })
                    }
                    inputDir="rtl"
                  />
                  {errors.main_address && (
                    <p className="text-xs text-red-500 mt-1">
                      {errors.main_address}
                    </p>
                  )}
                </div>

                <div className="mb-4">
                  <AppInput
                    inputTitle="کد پستی *"
                    inputValue={formData.postal_code}
                    inputPlaceholder="کد پستی ۱۰ رقمی"
                    inputOnChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                      setFormData({
                        ...formData,
                        postal_code: e.target.value,
                      })
                    }
                    inputDir="ltr"
                  />
                  {errors.postal_code && (
                    <p className="text-xs text-red-500 mt-1">
                      {errors.postal_code}
                    </p>
                  )}
                </div>

                <div className="mb-4">
                  <AppInput
                    inputTitle="پلاک *"
                    inputValue={formData.entry_reference}
                    inputPlaceholder="پلاک"
                    inputOnChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                      setFormData({
                        ...formData,
                        entry_reference: e.target.value,
                      })
                    }
                    inputDir="rtl"
                  />
                  {errors.entry_reference && (
                    <p className="text-xs text-red-500 mt-1">
                      {errors.entry_reference}
                    </p>
                  )}
                </div>

                <div className="mb-4">
                  <AppTextArea
                    inputTitle="توضیحات اضافی"
                    inputValue={formData.details}
                    inputPlaceholder="توضیحات اضافی"
                    inputOnChange={(
                      e: React.ChangeEvent<HTMLTextAreaElement>
                    ) =>
                      setFormData({
                        ...formData,
                        details: e.target.value,
                      })
                    }
                    inputDir="rtl"
                  />
                </div>

                <div className="flex items-center justify-between p-3 bg-GRAY3 rounded-lg">
                  <span className="text-sm font-medium text-BLACK2">
                    تنظیم به عنوان آدرس پیش‌فرض
                  </span>
                  <label className="relative inline-flex items-center cursor-pointer">
                    <input
                      type="checkbox"
                      checked={formData.is_default}
                      onChange={(e) =>
                        setFormData({
                          ...formData,
                          is_default: e.target.checked,
                        })
                      }
                      className="sr-only peer"
                      aria-label="تنظیم به عنوان آدرس پیش‌فرض"
                    />
                    <div className="w-11 h-6 bg-WHITE2 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-WHITE after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-WHITE after:border-GRAY3 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-VITROWN_BLUE border"></div>
                  </label>
                </div>

                <button
                  type="submit"
                  disabled={isSubmitting}
                  className="w-full bg-BLACK text-WHITE h-[55px] py-3 rounded-md text-center font-medium mt-3"
                >
                  {isSubmitting ? (
                    <>
                      <svg
                        className="animate-spin -ml-1 mr-3 h-5 w-5 text-WHITE inline"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          className="opacity-25"
                          cx="12"
                          cy="12"
                          r="10"
                          stroke="currentColor"
                          strokeWidth="4"
                        ></circle>
                        <path
                          className="opacity-75"
                          fill="currentColor"
                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        ></path>
                      </svg>
                      درحال ذخیره...
                    </>
                  ) : isEditing ? (
                    "ثبت تغییرات"
                  ) : (
                    "اعمال تغییرات"
                  )}
                </button>
              </form>
            </div>
          </DrawerContent>
        </Drawer>
      )}

      {/* Overlay background when drawer is open */}
      {!onLocationSelected && isDrawerOpen && (
        <div
          role="button"
          tabIndex={0}
          aria-label="Close drawer"
          className="fixed inset-0 bg-BLACK bg-opacity-30 z-40"
          onClick={handleCloseDrawer}
          onKeyDown={(e) => {
            if (e.key === "Escape") {
              handleCloseDrawer();
            }
          }}
        ></div>
      )}

      {/* Selection button for location picker mode */}
      {onLocationSelected && selectedPosition && (
        <button
          onClick={() => {
            if (onLocationSelected && selectedPosition) {
              onLocationSelected({
                position: selectedPosition,
                address: selectedAddress,
                postalCode: formData.postal_code,
              });
            }
          }}
          className="fixed bottom-4 left-4 right-4 bg-blue-600 text-WHITE py-3 rounded-md text-center font-medium z-30"
        >
          تایید و انتخاب این موقعیت
        </button>
      )}
    </div>
  );
}