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 { c as relatedCategories, f as useStore, l as seedProducts, n as CATEGORIES, s as fmt, t as Button, u as slugify } from "./categories-MJJjwt1u.mjs";
import { h as Link } from "../_libs/@tanstack/react-router+[...].mjs";
import { rt as BadgeCheck } from "../_libs/lucide-react.mjs";
import { l as Header, n as CheckoutFlow, t as CartDrawer, u as SignInModal } from "./Modals-PUPoXlMv.mjs";
import { t as Route } from "./category._slug-BqzvrAFK.mjs";
//#region node_modules/.nitro/vite/services/ssr/assets/category._slug-D6HXRxGW.js
var import_react = /* @__PURE__ */ __toESM(require_react());
var import_jsx_runtime = require_jsx_runtime();
function CategoryPage() {
	const { name } = Route.useLoaderData();
	const { addToCart, vendorProducts, getAllProducts, vendors } = useStore();
	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 [sort, setSort] = (0, import_react.useState)("pop");
	const wanted = relatedCategories(name).map((s) => s.toLowerCase());
	let items = name === "Other categories" ? getAllProducts() : [...seedProducts, ...vendorProducts].filter((p) => wanted.includes((p.category ?? "").toLowerCase()));
	if (name === "Official Store" && items.length === 0) items = seedProducts.slice(0, 8);
	if (sort === "low") items = [...items].sort((a, b) => a.price - b.price);
	if (sort === "high") items = [...items].sort((a, b) => b.price - a.price);
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
		className: "min-h-screen",
		style: { backgroundColor: "#f0f2f5" },
		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-[1200px] mx-auto px-4 py-4 space-y-4",
				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("nav", {
					className: "text-xs text-neutral-500",
					children: [
						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
							to: "/",
							className: "hover:text-orange-600",
							children: "Home"
						}),
						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
							className: "mx-1.5",
							children: "/"
						}),
						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
							className: "text-neutral-800",
							children: name
						})
					]
				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
					className: "flex flex-col lg:grid lg:grid-cols-12 gap-3",
					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("aside", {
						className: "hidden lg:block lg:col-span-3 bg-white rounded-md py-2 text-sm h-fit",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
							className: "px-4 py-1.5 text-xs uppercase tracking-wide text-neutral-500 font-semibold",
							children: "Categories"
						}), CATEGORIES.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
							to: "/category/$slug",
							params: { slug: slugify(c) },
							className: `block px-4 py-1.5 hover:bg-orange-50 hover:text-orange-600 ${c === name ? "bg-orange-50 text-orange-600 font-medium" : ""}`,
							children: c
						}, c))]
					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "lg:col-span-9 space-y-3",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
							className: "bg-white rounded-md px-4 py-3 flex items-center justify-between",
							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
								className: "text-lg font-bold text-neutral-800",
								children: name
							}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "text-xs text-neutral-500",
								children: [items.length, " products"]
							})] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
								className: "text-xs text-neutral-600 flex items-center gap-2",
								children: ["Sort by", /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
									value: sort,
									onChange: (e) => setSort(e.target.value),
									className: "border rounded px-2 py-1 text-xs",
									children: [
										/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
											value: "pop",
											children: "Popularity"
										}),
										/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
											value: "low",
											children: "Price: low to high"
										}),
										/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
											value: "high",
											children: "Price: high to low"
										})
									]
								})]
							})]
						}), items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
							className: "bg-white rounded-md p-10 text-center text-neutral-500",
							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
								className: "mb-2",
								children: [
									"No products in ",
									name,
									" yet."
								]
							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
								to: "/",
								className: "text-orange-600 underline text-sm",
								children: "Explore other deals"
							})]
						}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
							className: "bg-white rounded-md grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-4",
							children: items.map((p) => {
								const isVerified = vendors.find((v) => v.contactEmail === p.vendorEmail)?.is_verified;
								return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
									className: "border-r border-b last:border-r-0 p-3 bg-white hover:shadow-md transition",
									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
										to: "/product/$id",
										params: { id: p.id },
										className: "block",
										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
											src: p.images?.[0] || `https://picsum.photos/seed/${p.seed}/240/240`,
											alt: p.name,
											className: "w-full aspect-square object-cover rounded"
										}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
											className: "mt-2 space-y-0.5",
											children: [
												/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
													className: "text-xs text-neutral-700 line-clamp-2 flex items-center gap-1",
													children: [p.name, isVerified && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
														className: "inline-flex",
														children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BadgeCheck, { className: "w-3.5 h-3.5 text-sky-500 shrink-0" })
													})]
												}),
												/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
													className: "text-sm font-bold text-neutral-900",
													children: ["₦ ", fmt(p.price)]
												}),
												p.old && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
													className: "text-[11px] text-neutral-400 line-through",
													children: ["₦ ", fmt(p.old)]
												})
											]
										})]
									}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
										onClick: () => addToCart(p),
										size: "sm",
										className: "w-full mt-2 h-8 bg-orange-500 hover:bg-orange-600 text-white text-xs",
										children: "Add to cart"
									})]
								}, p.id);
							})
						})]
					})]
				})]
			})
		]
	});
}
//#endregion
export { CategoryPage as component };
