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 { d as statusLabel, f as useStore, 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, a as User, u as Trash2, w as Plus } from "../_libs/lucide-react.mjs";
import { l as Header, n as CheckoutFlow, t as CartDrawer, u as SignInModal } from "./Modals-PUPoXlMv.mjs";
//#region node_modules/.nitro/vite/services/ssr/assets/profile-DskEt5fR.js
var import_react = /* @__PURE__ */ __toESM(require_react());
var import_jsx_runtime = require_jsx_runtime();
function ProfilePage() {
	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, addresses, orders, addAddress, removeAddress } = useStore();
	const [addr, setAddr] = (0, import_react.useState)({
		name: "",
		phone: "",
		street: "",
		city: "",
		state: ""
	});
	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.jsx)("main", {
				className: "max-w-[1100px] mx-auto px-4 py-8",
				children: !user ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
					className: "bg-white rounded-lg border p-10 text-center",
					children: [
						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(User, { className: "w-12 h-12 text-orange-500 mx-auto mb-3" }),
						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
							className: "text-2xl font-bold",
							children: "Sign in to view your account"
						}),
						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
							onClick: () => setSignInOpen(true),
							className: "mt-5 bg-orange-500 hover:bg-orange-600",
							children: "Sign in"
						})
					]
				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
					className: "grid grid-cols-3 gap-6",
					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("aside", {
						className: "bg-white rounded-lg border p-5 h-fit",
						children: [
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
								className: "w-12 h-12 rounded-full bg-orange-100 text-orange-600 flex items-center justify-center font-bold text-lg mb-2",
								children: user.name.charAt(0).toUpperCase()
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
								className: "font-bold",
								children: user.name
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
								className: "text-xs text-neutral-500",
								children: user.email
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
								className: "text-xs mt-3 px-2 py-1 rounded bg-neutral-100 inline-block",
								children: user.role
							})
						]
					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "col-span-2 space-y-6",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
							className: "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 gap-2",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MapPin, { className: "w-4 h-4 text-orange-500" }), " Saved addresses"]
							}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "p-5 space-y-3",
								children: [
									addresses.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
										className: "text-sm text-neutral-500",
										children: "No addresses yet."
									}),
									addresses.map((a) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
										className: "border rounded-md p-3 flex items-start gap-3",
										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
											className: "flex-1 text-sm",
											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
												className: "font-medium",
												children: [
													a.name,
													" · ",
													a.phone
												]
											}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
												className: "text-neutral-500 text-xs",
												children: [
													a.street,
													", ",
													a.city,
													", ",
													a.state
												]
											})]
										}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
											onClick: () => removeAddress(a.id),
											className: "text-neutral-400 hover:text-red-500",
											children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trash2, { className: "w-4 h-4" })
										})]
									}, a.id)),
									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", {
										className: "border-t pt-3 space-y-2",
										onSubmit: (e) => {
											e.preventDefault();
											if (!addr.name || !addr.phone || !addr.street) return;
											addAddress(addr);
											setAddr({
												name: "",
												phone: "",
												street: "",
												city: "",
												state: ""
											});
											toast.success("Address added");
										},
										children: [
											/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
												className: "text-xs font-semibold text-neutral-600",
												children: "Add new address"
											}),
											/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
												className: "grid grid-cols-2 gap-2",
												children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
													placeholder: "Full name",
													value: addr.name,
													onChange: (e) => setAddr({
														...addr,
														name: e.target.value
													})
												}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
													placeholder: "Phone",
													value: addr.phone,
													onChange: (e) => setAddr({
														...addr,
														phone: e.target.value
													})
												})]
											}),
											/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
												placeholder: "Street address",
												value: addr.street,
												onChange: (e) => setAddr({
													...addr,
													street: e.target.value
												})
											}),
											/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
												className: "grid grid-cols-2 gap-2",
												children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
													placeholder: "City",
													value: addr.city,
													onChange: (e) => setAddr({
														...addr,
														city: e.target.value
													})
												}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
													placeholder: "State",
													value: addr.state,
													onChange: (e) => setAddr({
														...addr,
														state: e.target.value
													})
												})]
											}),
											/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, {
												type: "submit",
												size: "sm",
												className: "bg-orange-500 hover:bg-orange-600",
												children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, { className: "w-4 h-4 mr-1" }), " Add address"]
											})
										]
									})
								]
							})]
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
							className: "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 gap-2",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Package, { className: "w-4 h-4 text-orange-500" }), " Purchase history"]
							}), orders.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
								className: "p-10 text-center text-sm text-neutral-500",
								children: "You haven't placed any orders yet."
							}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
								className: "divide-y",
								children: orders.map((o) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
									to: "/orders/$id",
									params: { id: o.id },
									className: "flex items-center gap-4 p-4 hover:bg-neutral-50",
									children: [
										/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
											className: "flex-1 min-w-0",
											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
												className: "text-sm font-medium",
												children: o.id
											}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
												className: "text-xs text-neutral-500",
												children: [
													new Date(o.createdAt).toLocaleDateString(),
													" · ",
													o.items.length,
													" item",
													o.items.length === 1 ? "" : "s",
													" · ",
													statusLabel[o.status]
												]
											})]
										}),
										/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
											className: "text-sm font-bold",
											children: ["₦ ", fmt(o.total)]
										}),
										/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
											className: "text-orange-500 text-sm",
											children: "Track →"
										})
									]
								}, o.id))
							})]
						})]
					})]
				})
			})
		]
	});
}
//#endregion
export { ProfilePage as component };
