"use client";
import "leaflet/dist/leaflet.css";
import * as React from "react";
import { Loader2, MapPin as MapPinIcon, Search, X } from "lucide-react";
import L from "leaflet";
import {
Circle,
MapContainer,
Marker,
TileLayer,
ZoomControl,
useMap,
useMapEvents,
} from "react-leaflet";
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
} from "@/components/ui/input-group";
import { Button } from "@/components/ui/button";
import { Typography } from "@/components/ui/typography";
import { useTranslation } from "@/hooks/useTranslation";
import { geocodePlace, type GeocodeResult } from "@/lib/api/geocode.api";
export interface LatLng {
lat: number;
lng: number;
}
/** Pilot city — the map opens here until the owner drops a pin. */
const JEDDAH: [number, number] = [21.5433, 39.1728];
/** Minimum characters before a type-ahead search fires. */
const MIN_QUERY = 3;
type SearchStatus = "idle" | "loading" | "empty" | "error";
/**
* A divIcon pin styled with design tokens: the wrapper carries `text-primary-blue`
* and the SVG fills with `currentColor`, so no hardcoded hex and no reliance on
* Leaflet's default marker images (which break under bundlers). An empty-ish
* className avoids Leaflet's default white `leaflet-div-icon` box.
*/
const pinIcon = L.divIcon({
className: "washy-map-pin",
html: ``,
iconSize: [32, 40],
iconAnchor: [16, 40],
});
function ClickToPlace({ onPick }: { onPick: (coords: LatLng) => void }) {
useMapEvents({
click(event) {
onPick({ lat: event.latlng.lat, lng: event.latlng.lng });
},
});
return null;
}
/**
* Recenters the map when `target` changes identity (set on search select, not on
* plain map clicks — a clicked point is already in view). Calls an imperative
* Leaflet API in an effect, so no cascading state updates.
*/
function MapController({ target }: { target: LatLng | null }) {
const map = useMap();
React.useEffect(() => {
if (target) {
map.flyTo([target.lat, target.lng], Math.max(map.getZoom(), 14), {
duration: 0.7,
});
}
}, [target, map]);
return null;
}
interface StationMapPickerProps {
/** Current pin, or null when the owner hasn't placed one yet */
value: LatLng | null;
onChange: (coords: LatLng) => void;
/** Coverage radius in km — drawn as a live circle around the pin */
radiusKm: number;
/**
* Returns the address the owner typed in the fields above, joined into a
* geocoding query. Read lazily (on button click) so typing there doesn't
* re-render the map. Setting the pin from it never edits those fields.
*/
getAddressQuery: () => string;
}
/**
* Click-or-drag map picker for the service-station coordinates, with an on-map
* search bar (type-ahead) and a "use the address above" shortcut — both via free
* OSM Nominatim. Leaflet + OSM, no API key. This is the ONLY module importing
* Leaflet on this screen — its parent loads it via `next/dynamic` with
* `ssr: false` because Leaflet reads `window` at import time. Search only moves
* the pin (lat/lng); the address text inputs above are never changed, and the
* pin stays draggable. The coverage circle updates live with `radiusKm`.
*/
export function StationMapPicker({
value,
onChange,
radiusKm,
getAddressQuery,
}: StationMapPickerProps) {
const { t, language } = useTranslation();
const center: [number, number] = value ? [value.lat, value.lng] : JEDDAH;
const [focus, setFocus] = React.useState(null);
const [query, setQuery] = React.useState("");
const [results, setResults] = React.useState([]);
const [status, setStatus] = React.useState("idle");
const [addressEmpty, setAddressEmpty] = React.useState(false);
// Debounced type-ahead search. All state writes happen in the async timeout /
// cleanup, never synchronously in the effect body (keeps the compiler happy),
// and the in-flight request is aborted when the query changes.
React.useEffect(() => {
const q = query.trim();
if (q.length < MIN_QUERY) return;
const controller = new AbortController();
const timer = setTimeout(() => {
geocodePlace(q, { language, signal: controller.signal })
.then((found) => {
setResults(found);
setStatus(found.length ? "idle" : "empty");
})
.catch(() => {
if (!controller.signal.aborted) setStatus("error");
});
}, 450);
return () => {
clearTimeout(timer);
controller.abort();
};
}, [query, language]);
function onQueryChange(next: string) {
setQuery(next);
setAddressEmpty(false);
if (next.trim().length < MIN_QUERY) {
setResults([]);
setStatus("idle");
} else {
// Keep any previous results visible under the spinner until fresh ones land.
setStatus("loading");
}
}
function clearSearch() {
setQuery("");
setResults([]);
setStatus("idle");
}
function select(result: GeocodeResult) {
const coords = { lat: result.lat, lng: result.lng };
onChange(coords);
setFocus({ ...coords }); // fresh identity → MapController flies here
setResults([]);
setStatus("idle");
}
function handleUseAddress() {
const q = getAddressQuery();
if (!q.trim()) {
setAddressEmpty(true);
return;
}
onQueryChange(q); // prefill the search → type-ahead shows matches to pick
}
const trimmed = query.trim();
const showDropdown =
trimmed.length >= MIN_QUERY &&
(results.length > 0 ||
status === "loading" ||
status === "empty" ||
status === "error");
return (
{value && (
<>
)}
{/* On-map search overlay (sibling of the map, so it never triggers a
map click / pan). z-[1000] sits above Leaflet's panes and controls. */}
onQueryChange(event.target.value)}
onKeyDown={(event) => {
// Don't let Enter submit the registration form.
if (event.key === "Enter") event.preventDefault();
}}
placeholder={t(
"auth.registerProvider.location.searchPlaceholder",
)}
aria-label={t("auth.registerProvider.location.search")}
/>
{status === "loading" ? (
) : query ? (
) : null}
{showDropdown && (