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 { a as cn, f as useStore, n as CATEGORIES, r as Input, s as fmt, t as Button } from "./categories-MJJjwt1u.mjs";
import { h as Link } from "../_libs/@tanstack/react-router+[...].mjs";
import { n as toast } from "../_libs/sonner.mjs";
import { A as MapPin, E as Package, F as History, H as Coins, J as ChevronUp, Q as Check, W as Clock, Z as ChevronDown, d as Store, h as Sparkles, l as Truck, q as CircleCheck, r as Wallet, rt as BadgeCheck, u as Trash2, w as Plus } from "../_libs/lucide-react.mjs";
import { t as usePaystackPayment } from "../_libs/react-paystack.mjs";
import { l as Header, n as CheckoutFlow, t as CartDrawer, u as SignInModal } from "./Modals-PUPoXlMv.mjs";
import { n as Textarea, t as ImageUpload } from "./image-upload-BsyTIobY.mjs";
import { t as TawkChatWidget } from "./TawkChatWidget-42R2rSeG.mjs";
import { a as SelectItemIndicator, c as SelectPortal, d as SelectSeparator$1, f as SelectTrigger$1, i as SelectItem$1, l as SelectScrollDownButton$1, m as SelectViewport, n as SelectContent$1, o as SelectItemText, p as SelectValue$1, r as SelectIcon, s as SelectLabel$1, t as Select$1, u as SelectScrollUpButton$1 } from "../_libs/@radix-ui/react-select+[...].mjs";
//#region node_modules/.nitro/vite/services/ssr/assets/vendor-DWQ7Zfwj.js
var import_react = /* @__PURE__ */ __toESM(require_react());
var import_jsx_runtime = require_jsx_runtime();
var Select = Select$1;
var SelectValue = SelectValue$1;
var SelectTrigger = import_react.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectTrigger$1, {
	ref,
	className: cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background cursor-pointer data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className),
	...props,
	children: [children, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectIcon, {
		asChild: true,
		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, { className: "h-4 w-4 opacity-50" })
	})]
}));
SelectTrigger.displayName = SelectTrigger$1.displayName;
var SelectScrollUpButton = import_react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectScrollUpButton$1, {
	ref,
	className: cn("flex cursor-default items-center justify-center py-1", className),
	...props,
	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronUp, { className: "h-4 w-4" })
}));
SelectScrollUpButton.displayName = SelectScrollUpButton$1.displayName;
var SelectScrollDownButton = import_react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectScrollDownButton$1, {
	ref,
	className: cn("flex cursor-default items-center justify-center py-1", className),
	...props,
	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, { className: "h-4 w-4" })
}));
SelectScrollDownButton.displayName = SelectScrollDownButton$1.displayName;
var SelectContent = import_react.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectContent$1, {
	ref,
	className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-select-content-transform-origin)", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
	position,
	...props,
	children: [
		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectScrollUpButton, {}),
		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectViewport, {
			className: cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),
			children
		}),
		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectScrollDownButton, {})
	]
}) }));
SelectContent.displayName = SelectContent$1.displayName;
var SelectLabel = import_react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectLabel$1, {
	ref,
	className: cn("px-2 py-1.5 text-sm font-semibold", className),
	...props
}));
SelectLabel.displayName = SelectLabel$1.displayName;
var SelectItem = import_react.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectItem$1, {
	ref,
	className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
	...props,
	children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
		className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center",
		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Check, { className: "h-4 w-4" }) })
	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItemText, { children })]
}));
SelectItem.displayName = SelectItem$1.displayName;
var SelectSeparator = import_react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectSeparator$1, {
	ref,
	className: cn("-mx-1 my-1 h-px bg-muted", className),
	...props
}));
SelectSeparator.displayName = SelectSeparator$1.displayName;
function VendorPage() {
	const [signInOpen, setSignInOpen] = (0, import_react.useState)(false);
	const [cartOpen, setCartOpen] = (0, import_react.useState)(false);
	const [checkoutOpen, setCheckoutOpen] = (0, import_react.useState)(false);
	const { user, signIn, applyVendor } = useStore();
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
		className: "min-h-screen bg-neutral-50",
		children: [
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SignInModal, {
				open: signInOpen,
				onOpenChange: setSignInOpen
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CartDrawer, {
				open: cartOpen,
				onOpenChange: setCartOpen,
				onCheckout: () => {
					setCartOpen(false);
					setCheckoutOpen(true);
				}
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckoutFlow, {
				open: checkoutOpen,
				onOpenChange: setCheckoutOpen
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Header, {
				onOpenCart: () => setCartOpen(true),
				onOpenSignIn: () => setSignInOpen(true)
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", {
				className: "max-w-[1100px] mx-auto px-4 py-8",
				children: [
					(!user || user.role === "customer") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ApplyPanel, { onApply: (profile) => {
						if (!user) signIn(profile.contactEmail, profile.contactName);
						applyVendor(profile);
						toast.success("Application submitted!");
					} }),
					user && user.role === "pending_vendor" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PendingPanel, {}),
					user && user.role === "vendor" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VendorDashboard, {})
				]
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TawkChatWidget, { channel: "vendor-admin" })
		]
	});
}
var Field = ({ label, required, children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
	className: "text-xs font-medium",
	children: [label, required && " *"]
}), children] });
function ApplyPanel({ onApply }) {
	const [form, setForm] = (0, import_react.useState)({
		businessName: "",
		businessType: "",
		category: "",
		rcNumber: "",
		taxId: "",
		contactName: "",
		contactEmail: "",
		contactPhone: "",
		altPhone: "",
		address: "",
		city: "",
		state: "",
		country: "Nigeria",
		lat: void 0,
		lng: void 0,
		website: "",
		productInfo: "",
		bankName: "",
		accountName: "",
		accountNumber: "",
		agree: false,
		marketing: false
	});
	const set = (k, v) => setForm((f) => ({
		...f,
		[k]: v
	}));
	const getLocation = () => {
		if (navigator.geolocation) navigator.geolocation.getCurrentPosition((pos) => {
			set("lat", pos.coords.latitude);
			set("lng", pos.coords.longitude);
		}, () => toast.error("Location access denied."));
	};
	const submit = (e) => {
		e.preventDefault();
		if (!form.agree) {
			toast.error("Please accept the Seller Terms");
			return;
		}
		if (form.accountNumber && !/^\d{10}$/.test(form.accountNumber)) {
			toast.error("Account number must be 10 digits");
			return;
		}
		onApply({ ...form });
	};
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
		className: "bg-white rounded-lg border p-8 max-w-3xl mx-auto",
		children: [
			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
				className: "flex items-center gap-2 mb-1",
				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Store, { className: "w-6 h-6 text-orange-500" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
					className: "text-lg font-extrabold",
					children: "Become a SulejaMarket Seller"
				})]
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
				className: "text-2xl font-bold",
				children: "Vendor registration"
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
				className: "text-sm text-neutral-500 mb-6",
				children: "Reach millions of shoppers. Applications are reviewed within 48 hours."
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", {
				className: "space-y-6",
				onSubmit: submit,
				children: [
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
						className: "space-y-3",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
							className: "text-sm font-bold text-neutral-700 border-b pb-1",
							children: "1. Business details"
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
							className: "grid grid-cols-2 gap-3",
							children: [
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
									label: "Business name",
									required: true,
									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
										required: true,
										value: form.businessName,
										onChange: (e) => set("businessName", e.target.value),
										placeholder: "Acme Traders Ltd"
									})
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
									label: "Business type",
									required: true,
									children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select, {
										value: form.businessType,
										onValueChange: (v) => set("businessType", v),
										required: true,
										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValue, { placeholder: "Select type" }) }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectContent, { children: [
											/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
												value: "individual",
												children: "Individual / Sole trader"
											}),
											/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
												value: "registered",
												children: "Registered company (LTD)"
											}),
											/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
												value: "manufacturer",
												children: "Manufacturer"
											}),
											/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
												value: "distributor",
												children: "Distributor / Wholesaler"
											})
										] })]
									})
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
									label: "Primary category",
									required: true,
									children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select, {
										value: form.category,
										onValueChange: (v) => set("category", v),
										required: true,
										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValue, { placeholder: "Select category" }) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectContent, { children: [
											"Phones & Tablets",
											"Electronics",
											"Fashion",
											"Home & Office",
											"Health & Beauty",
											"Groceries",
											"Other"
										].map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
											value: c,
											children: c
										}, c)) })]
									})
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
									label: "Website / social handle",
									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
										value: form.website,
										onChange: (e) => set("website", e.target.value),
										placeholder: "https:// or @handle"
									})
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
									label: "CAC / RC number",
									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
										value: form.rcNumber,
										onChange: (e) => set("rcNumber", e.target.value),
										placeholder: "RC 1234567"
									})
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
									label: "Tax Identification Number (TIN)",
									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
										value: form.taxId,
										onChange: (e) => set("taxId", e.target.value),
										placeholder: "12345678-0001"
									})
								})
							]
						})]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
						className: "space-y-3",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
							className: "text-sm font-bold text-neutral-700 border-b pb-1",
							children: "2. Contact person"
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
							className: "grid grid-cols-2 gap-3",
							children: [
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
									label: "Full name",
									required: true,
									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
										required: true,
										value: form.contactName,
										onChange: (e) => set("contactName", e.target.value),
										placeholder: "Jane Doe"
									})
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
									label: "Email address",
									required: true,
									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
										required: true,
										type: "email",
										value: form.contactEmail,
										onChange: (e) => set("contactEmail", e.target.value),
										placeholder: "you@business.com"
									})
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
									label: "Phone number",
									required: true,
									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
										required: true,
										type: "tel",
										value: form.contactPhone,
										onChange: (e) => set("contactPhone", e.target.value),
										placeholder: "0810 000 0000"
									})
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
									label: "Alternative phone",
									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
										type: "tel",
										value: form.altPhone,
										onChange: (e) => set("altPhone", e.target.value),
										placeholder: "Optional"
									})
								})
							]
						})]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
						className: "space-y-3",
						children: [
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
								className: "text-sm font-bold text-neutral-700 border-b pb-1",
								children: "3. Warehouse / pickup address"
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
								label: "Street address",
								required: true,
								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Textarea, {
									required: true,
									rows: 2,
									value: form.address,
									onChange: (e) => set("address", e.target.value),
									placeholder: "No. 12, Market Road"
								})
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "grid grid-cols-3 gap-3",
								children: [
									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
										label: "City",
										required: true,
										children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
											required: true,
											value: form.city,
											onChange: (e) => set("city", e.target.value),
											placeholder: "Suleja"
										})
									}),
									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
										label: "State",
										required: true,
										children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
											required: true,
											value: form.state,
											onChange: (e) => set("state", e.target.value),
											placeholder: "Niger"
										})
									}),
									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
										label: "Country",
										required: true,
										children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
											required: true,
											value: form.country,
											onChange: (e) => set("country", e.target.value)
										})
									})
								]
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
								className: "pt-2",
								children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
									className: "flex items-center justify-between bg-neutral-50 p-3 rounded-lg border",
									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
										className: "text-sm",
										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
											className: "font-medium text-neutral-700 mb-0.5",
											children: "Exact Shop Coordinates"
										}), form.lat && form.lng ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
											className: "text-emerald-600 text-xs",
											children: [
												"Captured: ",
												form.lat.toFixed(6),
												", ",
												form.lng.toFixed(6)
											]
										}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
											className: "text-neutral-500 text-xs",
											children: "Recommended to help customers and delivery riders find your shop easily."
										})]
									}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
										type: "button",
										variant: "outline",
										size: "sm",
										onClick: getLocation,
										className: "shrink-0 gap-1.5 border-orange-200 text-orange-600 hover:bg-orange-50 hover:text-orange-700",
										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MapPin, { className: "w-4 h-4" }), form.lat ? "Update Location" : "Get My Location"]
									})]
								})
							})
						]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
						className: "space-y-3",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
							className: "text-sm font-bold text-neutral-700 border-b pb-1",
							children: "4. Payout details"
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
							className: "grid grid-cols-3 gap-3",
							children: [
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
									label: "Bank name",
									required: true,
									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
										required: true,
										value: form.bankName,
										onChange: (e) => set("bankName", e.target.value),
										placeholder: "GTBank"
									})
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
									label: "Account name",
									required: true,
									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
										required: true,
										value: form.accountName,
										onChange: (e) => set("accountName", e.target.value),
										placeholder: "Acme Traders Ltd"
									})
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
									label: "Account number",
									required: true,
									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
										required: true,
										inputMode: "numeric",
										maxLength: 10,
										value: form.accountNumber,
										onChange: (e) => set("accountNumber", e.target.value.replace(/\D/g, "")),
										placeholder: "0123456789"
									})
								})
							]
						})]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
						className: "space-y-3",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
							className: "text-sm font-bold text-neutral-700 border-b pb-1",
							children: "5. About your products"
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
							label: "Brands, SKUs, monthly volume",
							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Textarea, {
								rows: 3,
								value: form.productInfo,
								onChange: (e) => set("productInfo", e.target.value),
								placeholder: "e.g. 200+ SKUs of fashion accessories, ~500 orders/month"
							})
						})]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "space-y-2 pt-2 border-t",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
							className: "flex items-start gap-2 text-xs text-neutral-600",
							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
								type: "checkbox",
								required: true,
								checked: form.agree,
								onChange: (e) => set("agree", e.target.checked),
								className: "mt-0.5 accent-orange-500"
							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "I confirm the information above is accurate and agree to the SulejaMarket Seller Terms & Commission Schedule." })]
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
							className: "flex items-start gap-2 text-xs text-neutral-600",
							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
								type: "checkbox",
								checked: form.marketing,
								onChange: (e) => set("marketing", e.target.checked),
								className: "mt-0.5 accent-orange-500"
							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Send me seller tips, promo opportunities and platform updates." })]
						})]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "flex items-center justify-between pt-2",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
							className: "text-xs text-neutral-400",
							children: "Your application is reviewed within 24-48 hours."
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
							type: "submit",
							className: "bg-orange-500 hover:bg-orange-600 h-11 px-8",
							children: "Submit application"
						})]
					})
				]
			})
		]
	});
}
function PendingPanel() {
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
		className: "bg-white rounded-lg border p-10 text-center max-w-xl mx-auto",
		children: [
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Clock, { className: "w-12 h-12 text-amber-500 mx-auto mb-3" }),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
				className: "text-2xl font-bold",
				children: "Application under review"
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
				className: "text-sm text-neutral-500 mt-2 mb-6",
				children: "Our seller team is verifying your details. This usually takes 24-48 hours."
			})
		]
	});
}
function VendorDriverPhoneForm({ orderId, currentPhone, onSave }) {
	const [phone, setPhone] = (0, import_react.useState)(currentPhone || "");
	(0, import_react.useEffect)(() => {
		if (currentPhone) setPhone(currentPhone);
	}, [currentPhone]);
	const handleSave = (e) => {
		e.preventDefault();
		const cleanPhone = phone.trim();
		if (!/^\d{11}$/.test(cleanPhone)) {
			toast.error("Driver phone number must be an 11-digit number (e.g. 08031234567)");
			return;
		}
		onSave(orderId, cleanPhone);
		toast.success(`Driver phone number (${cleanPhone}) assigned to Order ${orderId}!`);
	};
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", {
		onSubmit: handleSave,
		className: "bg-white p-3 rounded-lg border space-y-2",
		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
			className: "flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-2",
			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
				className: "text-xs font-bold text-neutral-800 flex items-center gap-1.5",
				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Truck, { className: "w-4 h-4 text-orange-500" }), " Assign Driver Call Number (11 Digits):"]
			}), currentPhone ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
				className: "text-[11px] font-bold text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded border border-emerald-200 self-start sm:self-auto font-mono",
				children: ["Active: ", currentPhone]
			}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
				className: "text-[10px] text-amber-700 bg-amber-50 px-2 py-0.5 rounded border border-amber-200 self-start sm:self-auto",
				children: "Not assigned yet"
			})]
		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
			className: "flex gap-2",
			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
				value: phone,
				onChange: (e) => setPhone(e.target.value.replace(/\D/g, "").slice(0, 11)),
				placeholder: "Enter 11-digit phone number (e.g. 08031234567)",
				maxLength: 11,
				required: true,
				className: "h-8 text-xs font-mono bg-neutral-50"
			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
				type: "submit",
				size: "sm",
				className: "h-8 text-xs bg-neutral-900 hover:bg-neutral-800 text-white shrink-0 font-semibold px-4",
				children: "Save Driver Number"
			})]
		})]
	});
}
function VendorDashboard() {
	const { vendorProducts, addProduct, editProduct, removeProduct, user, vendors, paystackKey, verifyVendor, editVendorProfile, orders, setOrderStatus, updateOrderDriverPhone, withdrawals, fetchWithdrawals, requestWithdrawal, fetchLoyaltyData, featureProductWithLoyalty } = useStore();
	const mine = vendorProducts.filter((p) => p.vendorEmail === user?.email);
	const myVendorProfile = vendors.find((v) => v.contactEmail === user?.email);
	const [loyaltyTransactions, setLoyaltyTransactions] = (0, import_react.useState)([]);
	const loadLoyalty = () => {
		if (user?.email) fetchLoyaltyData(user.email).then((res) => {
			setLoyaltyTransactions(res.transactions || []);
		});
	};
	(0, import_react.useEffect)(() => {
		if (user?.email) {
			fetchWithdrawals(user.email);
			loadLoyalty();
		}
	}, [user?.email, fetchWithdrawals]);
	const myOrders = orders.filter((o) => o.items.some((item) => vendorProducts.some((p) => p.id === item.id && p.vendorEmail === user?.email)));
	const [editingId, setEditingId] = (0, import_react.useState)(null);
	const [form, setForm] = (0, import_react.useState)({
		name: "",
		price: "",
		old: "",
		category: "",
		summary: "",
		description: "",
		img1: "",
		img2: "",
		img3: "",
		colors: "",
		sizes: "",
		is_top: false
	});
	const initializePayment = usePaystackPayment({
		reference: `VERIFY_${Math.random().toString(36).slice(2, 10).toUpperCase()}`,
		email: user?.email || "vendor@example.com",
		amount: 1e3 * 100,
		publicKey: paystackKey
	});
	const handleVerify = () => {
		if (!paystackKey) {
			toast.error("Payments are currently unavailable (missing API key).");
			return;
		}
		initializePayment({
			onSuccess: () => {
				if (myVendorProfile) {
					verifyVendor(myVendorProfile.id);
					toast.success("Congratulations! You are now a verified vendor.");
				}
			},
			onClose: () => {
				toast("Payment cancelled.");
			}
		});
	};
	const submit = (e) => {
		e.preventDefault();
		const price = Number(form.price);
		if (!form.name || !price) return;
		const images = [
			form.img1,
			form.img2,
			form.img3
		].filter(Boolean);
		const payload = {
			name: form.name,
			price,
			old: form.old ? Number(form.old) : void 0,
			disc: form.old ? `-${Math.round((1 - price / Number(form.old)) * 100)}%` : void 0,
			category: form.category || "Other",
			summary: form.summary || void 0,
			description: form.description || void 0,
			images: images.length > 0 ? images : void 0,
			colors: form.colors ? form.colors.split(",").map((s) => s.trim()).filter(Boolean) : void 0,
			sizes: form.sizes ? form.sizes.split(",").map((s) => s.trim()).filter(Boolean) : void 0,
			is_top: form.is_top
		};
		if (editingId) {
			editProduct(editingId, payload);
			toast.success("Product updated", { description: form.name });
			setEditingId(null);
		} else {
			addProduct(payload);
			toast.success("Product listed", { description: form.name });
		}
		setForm({
			name: "",
			price: "",
			old: "",
			category: "",
			summary: "",
			description: "",
			img1: "",
			img2: "",
			img3: "",
			colors: "",
			sizes: "",
			is_top: false
		});
	};
	const handleEdit = (p) => {
		setEditingId(p.id);
		setForm({
			name: p.name,
			price: String(p.price),
			old: p.old ? String(p.old) : "",
			category: p.category || "",
			summary: p.summary || "",
			description: p.description || "",
			img1: p.images?.[0] || "",
			img2: p.images?.[1] || "",
			img3: p.images?.[2] || "",
			colors: p.colors ? p.colors.join(", ") : "",
			sizes: p.sizes ? p.sizes.join(", ") : "",
			is_top: !!p.is_top
		});
		window.scrollTo({
			top: 0,
			behavior: "smooth"
		});
	};
	const handleFeature = async (p) => {
		if ((myVendorProfile?.loyalty_coins || 0) < 100) {
			toast.error("Insufficient Loyalty Coins! Deliver customer orders to earn 100 coins per completed sale.");
			return;
		}
		if (confirm(`Spend 100 Loyalty Coins to feature '${p.name}' across SulejaMarket?`)) {
			const res = await featureProductWithLoyalty(user.email, p.id);
			if (res.success) {
				toast.success(`✨ '${p.name}' is now a Featured Product across SulejaMarket!`);
				loadLoyalty();
			} else toast.error(res.error || "Failed to feature product.");
		}
	};
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
		className: "space-y-6",
		children: [
			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
				className: "flex flex-col sm:flex-row sm:items-end justify-between gap-4",
				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h1", {
						className: "text-2xl font-bold flex items-center gap-2",
						children: [
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Store, { className: "w-6 h-6 text-orange-500" }),
							"Vendor Dashboard",
							myVendorProfile?.is_verified && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
								className: "inline-flex",
								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BadgeCheck, { className: "w-5 h-5 text-sky-500" })
							})
						]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
						className: "text-sm text-neutral-500",
						children: [
							"Welcome back, ",
							user?.name,
							". You have ",
							mine.length,
							" active listing",
							mine.length === 1 ? "" : "s",
							"."
						]
					}),
					myVendorProfile?.storeSlug && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "mt-2 text-sm",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
							className: "text-neutral-500 mr-2",
							children: "Your Storefront URL:"
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", {
							href: `/${myVendorProfile.storeSlug}`,
							target: "_blank",
							rel: "noreferrer",
							className: "text-orange-500 font-medium hover:underline inline-flex items-center gap-1",
							children: ["sulejamarket.com/", myVendorProfile.storeSlug]
						})]
					})
				] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
					className: "flex gap-3 items-center",
					children: [
						!myVendorProfile?.is_verified && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
							onClick: handleVerify,
							className: "bg-sky-500 hover:bg-sky-600",
							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(BadgeCheck, { className: "w-4 h-4 mr-2" }), " Get Verified (₦1,000)"]
						}),
						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, {
							label: "Listings",
							value: String(mine.length)
						}),
						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, {
							label: "Loyalty Coins",
							value: `🪙 ${myVendorProfile?.loyalty_coins || 0}`,
							tone: "emerald"
						})
					]
				})]
			}),
			myVendorProfile && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StoreCustomization, {
				profile: myVendorProfile,
				onSave: (updates) => editVendorProfile(myVendorProfile.id, updates)
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
				className: "bg-gradient-to-r from-amber-500 via-orange-500 to-amber-600 rounded-2xl text-white p-6 shadow-xl relative overflow-hidden",
				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
					className: "flex flex-col md:flex-row md:items-center justify-between gap-6 relative z-10",
					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "space-y-2",
						children: [
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "flex items-center gap-2 text-amber-100 text-xs font-extrabold uppercase tracking-wider",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Coins, { className: "w-4 h-4 text-amber-200" }), " Vendor Gamified Loyalty Hub"]
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h2", {
								className: "text-3xl font-black flex items-center gap-2 tracking-tight",
								children: [
									"🪙 ",
									myVendorProfile?.loyalty_coins || 0,
									" Loyalty Coins"
								]
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
								className: "text-sm text-amber-100 max-w-xl leading-relaxed",
								children: [
									"Every time you complete a sale and deliver goods to a customer, you get ",
									/* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "100 Loyalty Coins" }),
									" instantly. Use your coins to feature products across SulejaMarket!"
								]
							})
						]
					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "bg-white/15 backdrop-blur-md rounded-xl p-4 border border-white/20 shrink-0 text-center space-y-1",
						children: [
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
								className: "text-xs text-amber-100 font-medium",
								children: "Product Feature Cost"
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
								className: "text-2xl font-black text-white",
								children: "100 Coins / Item"
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
								className: "text-[11px] text-amber-100 font-semibold",
								children: (myVendorProfile?.loyalty_coins || 0) >= 100 ? "✨ You can feature an item now!" : `Need ${100 - (myVendorProfile?.loyalty_coins || 0)} more coins to feature`
							})
						]
					})]
				}), loyaltyTransactions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
					className: "mt-5 pt-4 border-t border-white/20 text-xs",
					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "font-bold text-amber-100 mb-2 flex items-center gap-1.5",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(History, { className: "w-3.5 h-3.5" }), " Recent Coin Activity Log"]
					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
						className: "grid sm:grid-cols-2 md:grid-cols-3 gap-2",
						children: loyaltyTransactions.slice(0, 6).map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
							className: "bg-black/20 px-3 py-2 rounded-lg border border-white/10 flex justify-between items-center",
							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
								className: "text-amber-50 line-clamp-1",
								children: t.description
							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
								className: `font-bold shrink-0 ml-2 font-mono ${t.amount > 0 ? "text-emerald-300" : "text-amber-200"}`,
								children: t.amount > 0 ? `+${t.amount}` : t.amount
							})]
						}, t.id))
					})]
				})]
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
				className: "flex flex-col lg:grid lg:grid-cols-3 gap-6",
				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
					className: "lg:col-span-1 bg-white rounded-lg border p-5",
					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "flex justify-between items-center mb-4",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h2", {
							className: "font-bold flex items-center gap-2",
							children: [
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, { className: "w-4 h-4" }),
								" ",
								editingId ? "Edit product" : "New product"
							]
						}), editingId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
							size: "sm",
							variant: "outline",
							onClick: () => {
								setEditingId(null);
								setForm({
									name: "",
									price: "",
									old: "",
									category: "",
									summary: "",
									description: "",
									img1: "",
									img2: "",
									img3: "",
									colors: "",
									sizes: "",
									is_top: false
								});
							},
							children: "Cancel"
						})]
					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", {
						onSubmit: submit,
						className: "space-y-3",
						children: [
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
								className: "text-xs font-medium",
								children: "Product name *"
							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
								required: true,
								value: form.name,
								onChange: (e) => setForm({
									...form,
									name: e.target.value
								}),
								placeholder: "Wireless Headphones"
							})] }),
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "grid grid-cols-2 gap-2",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
									className: "text-xs font-medium",
									children: "Price ₦ *"
								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
									required: true,
									type: "number",
									value: form.price,
									onChange: (e) => setForm({
										...form,
										price: e.target.value
									}),
									placeholder: "25000"
								})] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
									className: "text-xs font-medium",
									children: "Old price"
								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
									type: "number",
									value: form.old,
									onChange: (e) => setForm({
										...form,
										old: e.target.value
									}),
									placeholder: "35000"
								})] })]
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
								className: "text-xs font-medium",
								children: "Category"
							}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Select, {
								value: form.category,
								onValueChange: (v) => setForm({
									...form,
									category: v
								}),
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValue, { placeholder: "Select" }) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectContent, { children: CATEGORIES.filter((c) => c !== "Official Store").map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItem, {
									value: c,
									children: c
								}, c)) })]
							})] }),
							form.category === "Fashion" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "grid grid-cols-2 gap-2 bg-orange-50/50 p-2 rounded border border-orange-100",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
									className: "text-xs font-medium",
									children: "Colors (comma separated)"
								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
									value: form.colors,
									onChange: (e) => setForm({
										...form,
										colors: e.target.value
									}),
									placeholder: "Red, Blue, Black"
								})] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
									className: "text-xs font-medium",
									children: "Sizes (comma separated)"
								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
									value: form.sizes,
									onChange: (e) => setForm({
										...form,
										sizes: e.target.value
									}),
									placeholder: "S, M, L, XL"
								})] })]
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
								className: "text-xs font-medium",
								children: "Short summary"
							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
								value: form.summary,
								onChange: (e) => setForm({
									...form,
									summary: e.target.value
								}),
								placeholder: "Brief highlight"
							})] }),
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
								className: "text-xs font-medium",
								children: "Description"
							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Textarea, {
								rows: 3,
								value: form.description,
								onChange: (e) => setForm({
									...form,
									description: e.target.value
								}),
								placeholder: "Full product details"
							})] }),
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "space-y-2",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
									className: "text-xs font-medium",
									children: "Product Images"
								}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
									className: "grid gap-2",
									children: [
										/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageUpload, {
											value: form.img1,
											onChange: (url) => setForm({
												...form,
												img1: url
											})
										}),
										/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageUpload, {
											value: form.img2,
											onChange: (url) => setForm({
												...form,
												img2: url
											})
										}),
										/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageUpload, {
											value: form.img3,
											onChange: (url) => setForm({
												...form,
												img3: url
											})
										})
									]
								})]
							}),
							myVendorProfile?.is_verified && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "flex items-center space-x-2 pt-2 border-t",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
									type: "checkbox",
									id: "is_top",
									checked: form.is_top,
									onChange: (e) => setForm({
										...form,
										is_top: e.target.checked
									}),
									className: "accent-orange-500 w-4 h-4"
								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
									htmlFor: "is_top",
									className: "text-sm font-medium",
									children: "Feature in Top Sellers section"
								})]
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
								type: "submit",
								className: "w-full bg-orange-500 hover:bg-orange-600 mt-4",
								children: [
									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleCheck, { className: "w-4 h-4 mr-1" }),
									" ",
									editingId ? "Update listing" : "Publish listing"
								]
							})
						]
					})]
				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
					className: "lg:col-span-2 bg-white rounded-lg border",
					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "px-5 py-3 border-b font-bold flex items-center justify-between",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
							className: "flex items-center gap-2",
							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Package, { className: "w-4 h-4" }), " Your listings"]
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
							className: "text-xs text-neutral-500 font-normal",
							children: "Use 100 Loyalty Coins to feature products"
						})]
					}), mine.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
						className: "p-10 text-center text-sm text-neutral-500",
						children: "No products yet. Create your first listing on the left."
					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
						className: "divide-y",
						children: mine.map((p) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
							className: "flex flex-wrap items-center gap-4 p-4 hover:bg-neutral-50/80 transition",
							children: [
								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
									src: p.images?.[0] || `https://picsum.photos/seed/${p.seed}/80/80`,
									alt: p.name,
									className: "w-14 h-14 rounded object-cover border"
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
									className: "flex-1 min-w-[150px]",
									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
										className: "text-sm font-medium line-clamp-1 flex items-center gap-2",
										children: [p.name, p.is_featured && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
											className: "text-[10px] font-bold text-amber-800 bg-amber-100 border border-amber-300 px-2 py-0.5 rounded-full flex items-center gap-1",
											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Sparkles, { className: "w-3 h-3 text-amber-600 fill-amber-500" }), " Featured"]
										})]
									}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
										className: "text-xs text-neutral-500",
										children: p.category
									})]
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
									className: "text-sm font-bold",
									children: ["₦ ", fmt(p.price)]
								}),
								!p.is_featured ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
									size: "sm",
									variant: "outline",
									onClick: () => handleFeature(p),
									className: "text-xs bg-amber-50 text-amber-900 border-amber-200 hover:bg-amber-100 hover:border-amber-300 font-bold",
									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Sparkles, { className: "w-3.5 h-3.5 mr-1 text-amber-600 fill-amber-400" }), " Feature (100 Coins)"]
								}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
									className: "text-xs font-bold text-emerald-700 bg-emerald-50 px-2.5 py-1 rounded-full border border-emerald-200",
									children: "✨ Active Featured"
								}),
								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
									className: "flex items-center gap-2",
									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
										onClick: () => handleEdit(p),
										className: "text-neutral-400 hover:text-blue-500 p-1",
										title: "Edit",
										children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("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: "w-4 h-4",
											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })]
										})
									}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
										onClick: () => {
											if (confirm("Are you sure?")) removeProduct(p.id);
										},
										className: "text-neutral-400 hover:text-red-500 p-1",
										title: "Delete",
										children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trash2, { className: "w-4 h-4" })
									})]
								})
							]
						}, p.id))
					})]
				})]
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
				className: "grid lg:grid-cols-2 gap-6",
				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
					className: "bg-white rounded-lg border p-5",
					children: [
						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
							className: "flex items-center gap-2 font-bold mb-4 border-b pb-2",
							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Wallet, { className: "w-5 h-5 text-orange-500" }), " Wallet & Payouts"]
						}),
						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
							className: "bg-orange-50 rounded-lg p-5 border border-orange-100 flex items-center justify-between mb-5",
							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
								className: "text-sm text-orange-800 font-medium mb-1",
								children: "Available Balance"
							}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "text-3xl font-bold text-orange-600",
								children: ["₦ ", fmt(myVendorProfile?.wallet_balance || 0)]
							})] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
								onClick: async () => {
									const amountStr = prompt("Enter amount to withdraw (A 1% VAT fee will be deducted from this amount):");
									if (!amountStr) return;
									const amount = Number(amountStr);
									if (isNaN(amount) || amount <= 0) return toast.error("Invalid amount");
									if (amount > (myVendorProfile?.wallet_balance || 0)) return toast.error("Insufficient balance");
									const res = await requestWithdrawal(user.email, amount);
									if (res.success) toast.success("Withdrawal requested");
									else toast.error(res.error || "Failed to request withdrawal");
								},
								className: "bg-orange-500 hover:bg-orange-600 shadow",
								children: "Withdraw Funds"
							})]
						}),
						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
							className: "font-bold text-sm mb-3",
							children: "Withdrawal History"
						}),
						withdrawals.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
							className: "text-sm text-neutral-500 py-4 text-center",
							children: "No withdrawal history."
						}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
							className: "space-y-3",
							children: withdrawals.map((w) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "flex items-center justify-between border-b pb-2 last:border-0",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
									className: "text-sm font-medium",
									children: [
										"₦ ",
										fmt(w.amount * .99),
										" ",
										/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
											className: "text-xs text-neutral-400 font-normal",
											children: "(after 1% VAT)"
										})
									]
								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
									className: "text-xs text-neutral-500",
									children: (/* @__PURE__ */ new Date(w.requestedAt * 1e3)).toLocaleString()
								})] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
									className: `text-xs px-2 py-1 rounded-full ${w.status === "approved" ? "bg-emerald-100 text-emerald-800" : w.status === "rejected" ? "bg-red-100 text-red-800" : "bg-amber-100 text-amber-800"}`,
									children: w.status.charAt(0).toUpperCase() + w.status.slice(1)
								}) })]
							}, w.id))
						})
					]
				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
					className: "bg-white rounded-lg border p-5",
					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "flex items-center justify-between border-b pb-2 mb-4",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
							className: "flex items-center gap-2 font-bold",
							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Truck, { className: "w-5 h-5 text-orange-500" }), " Vendor Delivery Fulfillment"]
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
							className: "text-[11px] font-semibold bg-orange-50 text-orange-600 border border-orange-200 px-2 py-0.5 rounded-full",
							children: "Manual Dispatch Control"
						})]
					}), myOrders.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
						className: "text-sm text-neutral-500 py-8 text-center",
						children: "No orders to fulfill yet."
					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
						className: "space-y-5",
						children: myOrders.map((o) => {
							const isDelivered = o.status === "delivered";
							const milestoneSteps = [
								{
									key: "placed",
									label: "1. Confirmed",
									actionLabel: "Order Received"
								},
								{
									key: "processing",
									label: "2. Packed",
									actionLabel: "Mark Packed"
								},
								{
									key: "shipped",
									label: "3. Dispatched",
									actionLabel: "Mark Shipped"
								},
								{
									key: "out_for_delivery",
									label: "4. Out for Delivery",
									actionLabel: "Out for Delivery"
								},
								{
									key: "delivered",
									label: "5. Delivered 🔒",
									actionLabel: "Mark Delivered",
									adminOnly: true
								}
							];
							const currentIdx = milestoneSteps.findIndex((s) => s.key === o.status);
							const nextStepCandidate = milestoneSteps[currentIdx + 1];
							const nextStep = nextStepCandidate && !nextStepCandidate.adminOnly ? nextStepCandidate : null;
							const handleStatusChange = (newStatus) => {
								if (newStatus === "delivered") {
									toast.error("Only SulejaMarket Admin can mark an order as Delivered to confirm customer receipt and release funds.");
									return;
								}
								setOrderStatus(o.id, newStatus);
								const formatted = newStatus.replace(/_/g, " ").toUpperCase();
								toast.success(`Order ${o.id} delivery milestone set to ${formatted}`);
							};
							return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "border rounded-xl p-4 bg-neutral-50/50 space-y-3 hover:border-neutral-300 transition",
								children: [
									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
										className: "flex flex-wrap justify-between items-start gap-2",
										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
											className: "font-bold text-sm text-neutral-900 flex items-center gap-2",
											children: [
												"Order ",
												o.id,
												/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
													to: "/orders/$id",
													params: { id: o.id },
													target: "_blank",
													className: "text-xs text-orange-500 font-normal hover:underline",
													children: "(View Live Map)"
												})
											]
										}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
											className: "text-xs text-neutral-500",
											children: new Date(o.createdAt).toLocaleString()
										})] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
											className: `text-xs font-bold uppercase px-2.5 py-1 rounded-full border ${isDelivered ? "bg-emerald-50 text-emerald-700 border-emerald-200" : "bg-orange-50 text-orange-700 border-orange-200"}`,
											children: o.status.replace(/_/g, " ")
										})]
									}),
									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
										className: "bg-white p-3 rounded-lg border text-xs space-y-1.5",
										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
											className: "font-semibold text-neutral-700 mb-1 text-[11px] uppercase tracking-wider",
											children: "Ordered Items"
										}), o.items.filter((item) => vendorProducts.some((p) => p.id === item.id && p.vendorEmail === user?.email)).map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
											className: "flex justify-between items-center",
											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
												className: "text-neutral-800 font-medium",
												children: [
													item.qty,
													"x ",
													item.name
												]
											}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
												className: "font-bold text-neutral-900",
												children: ["₦ ", fmt(item.qty * item.price)]
											})]
										}, item.id))]
									}),
									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
										className: "text-xs text-neutral-600 bg-white p-2.5 rounded-lg border flex flex-col gap-0.5",
										children: [
											/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
												className: "font-semibold text-neutral-900",
												children: "Delivery Address:"
											}),
											/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
												o.address.name,
												" (",
												o.address.phone,
												")"
											] }),
											/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
												className: "text-neutral-500",
												children: [
													o.address.street,
													", ",
													o.address.city,
													", ",
													o.address.state
												]
											})
										]
									}),
									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(VendorDriverPhoneForm, {
										orderId: o.id,
										currentPhone: o.driverPhone,
										onSave: updateOrderDriverPhone
									}),
									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
										className: "space-y-2 pt-1 border-t",
										children: [
											/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
												className: "text-xs font-bold text-neutral-700 flex justify-between items-center",
												children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Delivery Process Control:" }), nextStep && !isDelivered && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
													size: "sm",
													onClick: () => handleStatusChange(nextStep.key),
													className: "h-7 text-xs bg-orange-500 hover:bg-orange-600 text-white font-semibold",
													children: [
														"Advance to ",
														nextStep.actionLabel,
														" →"
													]
												})]
											}),
											/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
												className: "grid grid-cols-2 sm:grid-cols-5 gap-1.5",
												children: milestoneSteps.map((step, idx) => {
													const isActive = o.status === step.key;
													const isDone = currentIdx >= idx;
													const isAdminOnly = step.adminOnly;
													return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
														type: "button",
														onClick: () => {
															if (isAdminOnly) {
																toast.error("Only SulejaMarket Admin can mark an order as Delivered to confirm customer receipt and release funds.");
																return;
															}
															handleStatusChange(step.key);
														},
														className: `text-[11px] py-1.5 px-2 rounded font-medium border text-center transition ${isActive ? "bg-orange-500 text-white border-orange-500 font-bold shadow-sm" : isDone ? "bg-orange-50 text-orange-700 border-orange-200 hover:bg-orange-100" : isAdminOnly ? "bg-neutral-100 text-neutral-400 border-neutral-200 cursor-not-allowed" : "bg-white text-neutral-600 border-neutral-200 hover:border-orange-300"}`,
														title: isAdminOnly ? "Admin Confirmation Required for Payout Release" : void 0,
														children: step.label
													}, step.key);
												})
											}),
											o.status === "out_for_delivery" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
												className: "text-xs text-amber-800 font-semibold bg-amber-50 border border-amber-200 p-2.5 rounded-lg text-center",
												children: "Package is Out for Delivery. Awaiting Admin confirmation to finalize delivery and release wallet payment."
											}),
											isDelivered && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
												className: "text-xs text-emerald-700 font-bold bg-emerald-50 border border-emerald-200 p-2 rounded-lg text-center flex items-center justify-center gap-1.5",
												children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleCheck, { className: "w-4 h-4 text-emerald-600" }), "Order Delivered — Confirmed by Admin & Payment Released to Wallet"]
											})
										]
									})
								]
							}, o.id);
						})
					})]
				})]
			}),
			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
				to: "/",
				className: "text-sm text-orange-500 hover:underline",
				children: "← Back to storefront"
			})
		]
	});
}
function Stat({ label, value, tone }) {
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
		className: `px-4 py-2 rounded-md border ${tone === "emerald" ? "bg-emerald-50 border-emerald-200 text-emerald-700" : "bg-white"}`,
		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
			className: "text-[10px] uppercase tracking-wide text-neutral-500",
			children: label
		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
			className: "font-bold text-sm",
			children: value
		})]
	});
}
function StoreCustomization({ profile, onSave }) {
	const [banner, setBanner] = (0, import_react.useState)(profile.banner || "");
	const [logo, setLogo] = (0, import_react.useState)(profile.logo || "");
	const handleSave = () => {
		onSave({
			banner,
			logo
		});
		toast.success("Store profile updated");
	};
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
		className: "bg-white rounded-lg border p-5",
		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
			className: "flex flex-col sm:flex-row sm:items-center justify-between mb-4 gap-2",
			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h2", {
				className: "font-bold flex items-center gap-2",
				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Store, { className: "w-4 h-4" }), " Store Customization"]
			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
				size: "sm",
				onClick: handleSave,
				className: "bg-neutral-900 hover:bg-neutral-800 text-white shrink-0",
				children: "Save Changes"
			})]
		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
			className: "grid md:grid-cols-2 gap-6",
			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
					className: "text-xs font-medium block mb-2",
					children: "Store Banner (e.g. 1200x300)"
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageUpload, {
					value: banner,
					onChange: setBanner
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
					className: "text-[10px] text-neutral-500 mt-1",
					children: "Appears at the top of your store page."
				})
			] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
					className: "text-xs font-medium block mb-2",
					children: "Store Logo / Icon"
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
					className: "w-32 h-32",
					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageUpload, {
						value: logo,
						onChange: setLogo
					})
				}),
				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
					className: "text-[10px] text-neutral-500 mt-1",
					children: "Your brand identity."
				})
			] })]
		})]
	});
}
//#endregion
export { VendorPage as component };
