import { n as __toESM } from "../_runtime.mjs";
import { u as require_react } from "../_libs/@floating-ui/react-dom+[...].mjs";
import { p as require_jsx_runtime } from "../_libs/@radix-ui/react-checkbox+[...].mjs";
import { t as Button } from "./categories-MJJjwt1u.mjs";
import { n as toast } from "../_libs/sonner.mjs";
import { A as MapPin, C as Radio, T as Phone, V as Compass, l as Truck, q as CircleCheck } from "../_libs/lucide-react.mjs";
//#region node_modules/.nitro/vite/services/ssr/assets/LiveMapTracker-CGaH0qfR.js
var import_react = /* @__PURE__ */ __toESM(require_react());
var import_jsx_runtime = require_jsx_runtime();
var stepsList = [
	{
		key: "placed",
		label: "Order Confirmed",
		desc: "Received by SulejaMarket"
	},
	{
		key: "processing",
		label: "Packed at Store",
		desc: "Vendor prepared package"
	},
	{
		key: "shipped",
		label: "In Transit",
		desc: "Dispatched from Suleja Hub"
	},
	{
		key: "out_for_delivery",
		label: "Out for Delivery",
		desc: "Courier driver en-route"
	},
	{
		key: "delivered",
		label: "Delivered",
		desc: "Package handed over"
	}
];
function LiveMapTracker({ orderId, status, destinationAddress, vendorName = "Suleja Central Vendor Store", driverPhone }) {
	const currentStepIdx = stepsList.findIndex((s) => s.key === status);
	const isDelivered = status === "delivered";
	const baseProgressMap = {
		placed: 5,
		processing: 25,
		shipped: 55,
		out_for_delivery: 85,
		delivered: 100
	};
	const etaMap = {
		placed: 40,
		processing: 28,
		shipped: 18,
		out_for_delivery: 7,
		delivered: 0
	};
	const baseProgress = baseProgressMap[status] ?? 0;
	etaMap[status];
	const [telemetryOffset, setTelemetryOffset] = (0, import_react.useState)(0);
	(0, import_react.useEffect)(() => {
		if (isDelivered || status === "placed") {
			setTelemetryOffset(0);
			return;
		}
		const interval = setInterval(() => {
			setTelemetryOffset((prev) => prev === 0 ? 1.5 : prev === 1.5 ? -1.5 : 0);
		}, 2500);
		return () => clearInterval(interval);
	}, [isDelivered, status]);
	const driverProgress = Math.min(100, Math.max(0, baseProgress + telemetryOffset));
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
		className: "bg-white rounded-xl border border-neutral-200 overflow-hidden shadow-sm",
		children: [
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
				className: "bg-gradient-to-r from-neutral-900 via-neutral-800 to-neutral-900 text-white p-4 flex flex-wrap items-center justify-between gap-3",
				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
					className: "flex items-center gap-3",
					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
						className: "w-10 h-10 rounded-full bg-orange-500/20 border border-orange-500/50 flex items-center justify-center text-orange-400",
						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Radio, { className: "w-5 h-5 animate-pulse" })
					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "text-xs text-neutral-400 uppercase tracking-wider font-semibold flex items-center gap-1.5",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Live GPS Milestone Dispatch" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
							className: "text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-400 font-normal border border-emerald-500/30",
							children: "Vendor Controlled"
						})]
					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "text-base font-bold flex items-center gap-2",
						children: [
							"Order ",
							orderId,
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
								className: "text-xs px-2.5 py-0.5 rounded-full font-medium bg-orange-500 text-white",
								children: status.replace(/_/g, " ").toUpperCase()
							})
						]
					})] })]
				})
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
				className: "relative bg-slate-900 h-[260px] sm:h-[300px] overflow-hidden select-none",
				children: [
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
						className: "absolute inset-0 opacity-20",
						style: {
							backgroundImage: `radial-gradient(#38bdf8 1px, transparent 1px)`,
							backgroundSize: "24px 24px"
						}
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
						className: "absolute inset-0 w-full h-full",
						viewBox: "0 0 600 240",
						preserveAspectRatio: "none",
						children: [
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
								d: "M 80,120 Q 300,40 520,120",
								fill: "none",
								stroke: "#334155",
								strokeWidth: "8",
								strokeLinecap: "round"
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
								d: "M 80,120 Q 300,40 520,120",
								fill: "none",
								stroke: "#f97316",
								strokeWidth: "4",
								strokeDasharray: "8 6",
								strokeLinecap: "round",
								className: "animate-pulse"
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
								transform: "translate(80, 120)",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
									r: "14",
									fill: "#f97316",
									fillOpacity: "0.3",
									className: "animate-ping"
								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
									r: "8",
									fill: "#f97316"
								})]
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
								transform: "translate(520, 120)",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
									r: "14",
									fill: "#10b981",
									fillOpacity: "0.3",
									className: "animate-ping"
								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
									r: "8",
									fill: "#10b981"
								})]
							})
						]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "absolute left-4 top-16 bg-slate-800/90 backdrop-blur-md border border-slate-700 text-white p-2.5 rounded-lg text-xs shadow-lg max-w-[150px]",
						children: [
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "text-[10px] text-orange-400 font-bold uppercase flex items-center gap-1",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Compass, { className: "w-3 h-3" }), " Vendor Hub"]
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
								className: "font-semibold truncate",
								children: vendorName
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
								className: "text-[10px] text-slate-400",
								children: "Suleja, Niger State"
							})
						]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "absolute right-4 bottom-12 bg-slate-800/90 backdrop-blur-md border border-slate-700 text-white p-2.5 rounded-lg text-xs shadow-lg max-w-[170px]",
						children: [
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "text-[10px] text-emerald-400 font-bold uppercase flex items-center gap-1",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MapPin, { className: "w-3 h-3" }), " Delivery Address"]
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
								className: "font-semibold truncate",
								children: destinationAddress.name
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "text-[10px] text-slate-400 truncate",
								children: [
									destinationAddress.street,
									", ",
									destinationAddress.city
								]
							})
						]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
						className: "absolute transform -translate-x-1/2 -translate-y-1/2 transition-all duration-1000 ease-out z-20",
						style: {
							left: `${Math.min(92, Math.max(12, driverProgress / 100 * 82 + 10))}%`,
							top: `${50 - Math.sin(driverProgress / 100 * Math.PI) * 20}%`
						},
						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
							className: "relative group",
							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
								className: "w-11 h-11 rounded-full bg-orange-500 text-white flex items-center justify-center shadow-xl ring-4 ring-orange-500/30",
								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Truck, { className: "w-6 h-6" })
							}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "absolute -top-12 left-1/2 -translate-x-1/2 bg-neutral-900 text-white text-[11px] px-2.5 py-1 rounded-md whitespace-nowrap shadow-xl border border-neutral-700 flex items-center gap-1.5 font-medium",
								children: [
									/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-2 h-2 rounded-full bg-emerald-400 animate-ping" }),
									"Suleja Express Courier (",
									driverProgress,
									"%)"
								]
							})]
						})
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "absolute bottom-3 left-4 right-4 bg-slate-900/90 backdrop-blur-md border border-slate-800 rounded-lg p-2 text-[11px] text-slate-300 flex flex-wrap items-center justify-between gap-2",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
							className: "flex items-center gap-3",
							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "flex items-center gap-1.5",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: ["GPS: ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", {
									className: "text-white font-mono",
									children: "9.1804° N, 7.1793° E"
								})] })]
							}), driverPhone && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
								className: "text-emerald-400 font-mono text-[11px] bg-slate-800 px-2 py-0.5 rounded border border-slate-700",
								children: ["Driver: ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: driverPhone })]
							})]
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
							className: "flex items-center gap-3",
							children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
								size: "sm",
								variant: "secondary",
								onClick: () => {
									if (driverPhone) {
										toast.info(`Contacting Driver (${driverPhone})...`);
										window.location.href = `tel:${driverPhone}`;
									} else toast.warning("The vendor has not assigned a driver phone number yet.");
								},
								className: "h-7 text-[11px] gap-1 bg-orange-500 hover:bg-orange-600 text-white font-semibold",
								children: [
									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Phone, { className: "w-3 h-3" }),
									" Call Driver ",
									driverPhone ? `(${driverPhone})` : ""
								]
							})
						})]
					})
				]
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
				className: "p-6 bg-white border-t",
				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", {
					className: "text-xs font-bold text-neutral-500 uppercase tracking-wider mb-4",
					children: "Milestone Checkpoints"
				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
					className: "grid grid-cols-1 sm:grid-cols-5 gap-4 relative",
					children: stepsList.map((step, idx) => {
						const completed = currentStepIdx >= idx;
						return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
							className: "flex sm:flex-col items-center sm:text-center gap-3 sm:gap-2",
							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
								className: `w-9 h-9 rounded-full flex items-center justify-center shrink-0 text-xs font-bold transition-all ${completed ? "bg-orange-500 text-white shadow-md shadow-orange-500/20" : "bg-neutral-100 text-neutral-400 border border-neutral-200"} ${currentStepIdx === idx ? "ring-4 ring-orange-100 scale-110" : ""}`,
								children: completed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleCheck, { className: "w-5 h-5" }) : idx + 1
							}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
								className: `text-xs font-bold ${completed ? "text-neutral-900" : "text-neutral-400"}`,
								children: step.label
							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
								className: "text-[10px] text-neutral-500 line-clamp-1",
								children: step.desc
							})] })]
						}, step.key);
					})
				})]
			})
		]
	});
}
//#endregion
export { LiveMapTracker as t };
