"use client";

import L from "leaflet";
import { useCallback, useMemo } from "react";
import { MapContainer, Marker, TileLayer, useMapEvents } from "react-leaflet";
import "leaflet/dist/leaflet.css";

const DEFAULT_CENTER = { lat: 36.297, lng: 59.606 };

const markerIcon = L.icon({
  iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
  iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
  shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
  iconSize: [25, 41],
  iconAnchor: [12, 41],
});

function MapEvents({
  onPick,
  readOnly,
}: {
  onPick: (lat: number, lng: number) => void;
  readOnly: boolean;
}) {
  useMapEvents({
    click(event) {
      if (readOnly) return;
      onPick(event.latlng.lat, event.latlng.lng);
    },
  });
  return null;
}

export function MapPickerInner({
  lat,
  lng,
  onChange,
  readOnly = false,
}: {
  lat: number | null;
  lng: number | null;
  onChange: (lat: number, lng: number) => void;
  readOnly?: boolean;
}) {
  const centerLat = lat ?? DEFAULT_CENTER.lat;
  const centerLng = lng ?? DEFAULT_CENTER.lng;
  const position = useMemo<[number, number]>(() => [centerLat, centerLng], [centerLat, centerLng]);

  const pick = useCallback(
    (nextLat: number, nextLng: number) => {
      onChange(Number(nextLat.toFixed(6)), Number(nextLng.toFixed(6)));
    },
    [onChange],
  );

  const locateMe = () => {
    if (!navigator.geolocation) return;
    navigator.geolocation.getCurrentPosition((pos) => {
      pick(pos.coords.latitude, pos.coords.longitude);
    });
  };

  return (
    <div className="space-y-3">
      <div className="overflow-hidden rounded-xl border border-[var(--border)]">
        <MapContainer
          key={`${centerLat}-${centerLng}-${readOnly ? "ro" : "rw"}`}
          center={position}
          zoom={14}
          className="h-72 w-full"
          scrollWheelZoom
        >
          <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          {lat != null && lng != null ? (
            <Marker
              position={position}
              icon={markerIcon}
              draggable={!readOnly}
              eventHandlers={
                readOnly
                  ? undefined
                  : {
                      dragend: (event) => {
                        const marker = event.target;
                        const next = marker.getLatLng();
                        pick(next.lat, next.lng);
                      },
                    }
              }
            />
          ) : null}
          <MapEvents onPick={pick} readOnly={readOnly} />
        </MapContainer>
      </div>
      <div className="flex flex-wrap items-center justify-between gap-2">
        <p className="text-xs text-[var(--muted)]">
          {lat != null && lng != null
            ? `مختصات${readOnly ? "" : " انتخاب‌شده"}: ${lat.toFixed(6)} ، ${lng.toFixed(6)}`
            : readOnly
              ? "موقعیت روی نقشه ثبت نشده است."
              : "روی نقشه کلیک کنید یا نشانگر را بکشید."}
        </p>
        {readOnly ? null : (
          <button
            type="button"
            onClick={locateMe}
            className="rounded-lg border border-[var(--border)] px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50"
          >
            موقعیت من
          </button>
        )}
      </div>
    </div>
  );
}