import { i as __toESM } from "../_runtime.mjs";
import { c as createServerFn } from "./createServerFn-CIHAFgYl.mjs";
import { b as require_react, y as require_jsx_runtime } from "../_libs/@radix-ui/react-accordion+[...].mjs";
import { n as useServerFn, t as createSsrRpc } from "./createSsrRpc-CQD-iuId.mjs";
import { t as supabase } from "./client-DL1N1MJt.mjs";
import { a as cn, i as buttonVariants, o as formatDuration, r as SITE, s as formatPrice, t as Button } from "./button-BJ7sUxAL.mjs";
import { n as Label, t as Input } from "./label-BJlqMHkc.mjs";
import { a as objectType, o as stringType, r as literalType } from "../_libs/zod.mjs";
import { i as useQuery, t as useMutation } from "../_libs/tanstack__react-query.mjs";
import { n as toast } from "../_libs/sonner.mjs";
import { _ as Check, g as ChevronDown, h as ChevronLeft, i as Pencil, l as LoaderCircle, m as ChevronRight, p as CircleCheck, s as MapPin } from "../_libs/lucide-react.mjs";
import { i as SiteLayout, r as PageHeader } from "./SiteLayout-BB0n_2xh.mjs";
import { n as CheckboxIndicator, t as Checkbox$1 } from "../_libs/@radix-ui/react-checkbox+[...].mjs";
import { t as srLatn } from "../_libs/date-fns.mjs";
import { n as getDefaultClassNames, t as DayPicker } from "../_libs/react-day-picker.mjs";
//#region node_modules/.nitro/vite/services/ssr/assets/zakazivanje-Dwl3TdqA.js
var import_react = /* @__PURE__ */ __toESM(require_react());
var import_jsx_runtime = require_jsx_runtime();
var Textarea = import_react.forwardRef(({ className, ...props }, ref) => {
	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", {
		className: cn("flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className),
		ref,
		...props
	});
});
Textarea.displayName = "Textarea";
var Checkbox = import_react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Checkbox$1, {
	ref,
	className: cn("grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", className),
	...props,
	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxIndicator, {
		className: cn("grid place-content-center text-current"),
		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Check, { className: "h-4 w-4" })
	})
}));
Checkbox.displayName = Checkbox$1.displayName;
function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, ...props }) {
	const defaultClassNames = getDefaultClassNames();
	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DayPicker, {
		showOutsideDays,
		className: cn("bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
		captionLayout,
		formatters: {
			formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
			...formatters
		},
		classNames: {
			root: cn("w-fit", defaultClassNames.root),
			months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
			month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
			nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
			button_previous: cn(buttonVariants({ variant: buttonVariant }), "h-(--cell-size) w-(--cell-size) select-none p-0 aria-disabled:opacity-50", defaultClassNames.button_previous),
			button_next: cn(buttonVariants({ variant: buttonVariant }), "h-(--cell-size) w-(--cell-size) select-none p-0 aria-disabled:opacity-50", defaultClassNames.button_next),
			month_caption: cn("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption),
			dropdowns: cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
			dropdown_root: cn("has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border", defaultClassNames.dropdown_root),
			dropdown: cn("bg-popover absolute inset-0 opacity-0", defaultClassNames.dropdown),
			caption_label: cn("select-none font-medium", captionLayout === "label" ? "text-sm" : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5", defaultClassNames.caption_label),
			table: "w-full border-collapse",
			weekdays: cn("flex", defaultClassNames.weekdays),
			weekday: cn("text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal", defaultClassNames.weekday),
			week: cn("mt-2 flex w-full", defaultClassNames.week),
			week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
			week_number: cn("text-muted-foreground select-none text-[0.8rem]", defaultClassNames.week_number),
			day: cn("group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md", defaultClassNames.day),
			range_start: cn("bg-accent rounded-l-md", defaultClassNames.range_start),
			range_middle: cn("rounded-none", defaultClassNames.range_middle),
			range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
			today: cn("bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none", defaultClassNames.today),
			outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
			disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
			hidden: cn("invisible", defaultClassNames.hidden),
			...classNames
		},
		components: {
			Root: ({ className, rootRef, ...props }) => {
				return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
					"data-slot": "calendar",
					ref: rootRef,
					className: cn(className),
					...props
				});
			},
			Chevron: ({ className, orientation, ...props }) => {
				if (orientation === "left") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronLeft, {
					className: cn("size-4", className),
					...props
				});
				if (orientation === "right") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRight, {
					className: cn("size-4", className),
					...props
				});
				return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, {
					className: cn("size-4", className),
					...props
				});
			},
			DayButton: CalendarDayButton,
			WeekNumber: ({ children, ...props }) => {
				return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
					...props,
					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
						className: "flex size-(--cell-size) items-center justify-center text-center",
						children
					})
				});
			},
			...components
		},
		...props
	});
}
function CalendarDayButton({ className, day, modifiers, ...props }) {
	const defaultClassNames = getDefaultClassNames();
	const ref = import_react.useRef(null);
	import_react.useEffect(() => {
		if (modifiers.focused) ref.current?.focus();
	}, [modifiers.focused]);
	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
		ref,
		variant: "ghost",
		size: "icon",
		"data-day": day.date.toLocaleDateString(),
		"data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
		"data-range-start": modifiers.range_start,
		"data-range-end": modifiers.range_end,
		"data-range-middle": modifiers.range_middle,
		className: cn("data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-(--cell-size) flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
		...props
	});
}
/** Fallback when a service has no duration entered yet. */
var dayInput = objectType({
	providerId: stringType().uuid(),
	serviceId: stringType().uuid(),
	date: stringType().regex(/^\d{4}-\d{2}-\d{2}$/)
});
/** Offset of a time zone from UTC at a given instant, in milliseconds. */
/** Convert Belgrade wall-clock time to a UTC instant, independent of server TZ. */
/**
* Returns available slot start times (ISO) for a provider on a given day.
* Slots come exclusively from admin-entered `availability` ranges for that
* date (15-min grid), minus existing appointments and blocked times.
*/
var getAvailableSlots = createServerFn({ method: "POST" }).inputValidator((d) => dayInput.parse(d)).handler(createSsrRpc("aaeade12c1b9ad0ca1955de7f9d4fbb7848b4fe7f8732dfbf247220aabaa9f7c"));
var createInput = objectType({
	providerId: stringType().uuid(),
	serviceId: stringType().uuid(),
	startTime: stringType(),
	clientName: stringType().trim().min(2).max(100),
	clientPhone: stringType().trim().min(5).max(30),
	note: stringType().trim().max(500).optional().nullable(),
	consent: literalType(true)
});
var createAppointment = createServerFn({ method: "POST" }).inputValidator((d) => createInput.parse(d)).handler(createSsrRpc("37d6f876d7bed51f21dabcff93ddcc677c0366eb401205a19670a6588607880b"));
var TOTAL_STEPS = 3;
function BookingPage() {
	const [step, setStep] = (0, import_react.useState)(1);
	const [service, setService] = (0, import_react.useState)(null);
	const [date, setDate] = (0, import_react.useState)();
	const [slot, setSlot] = (0, import_react.useState)(null);
	const [form, setForm] = (0, import_react.useState)({
		name: "",
		phone: "",
		note: "",
		consent: false
	});
	const [confirmed, setConfirmed] = (0, import_react.useState)(null);
	const providersQ = useQuery({
		queryKey: ["providers"],
		queryFn: async () => {
			const { data, error } = await supabase.from("providers").select("id, name, role, sort_order").eq("active", true).order("sort_order");
			if (error) throw error;
			return data;
		}
	});
	const servicesQ = useQuery({
		queryKey: ["services-all"],
		queryFn: async () => {
			const { data, error } = await supabase.from("services").select("id, category, name, duration_minutes, price, provider_id").eq("active", true).order("sort_order");
			if (error) throw error;
			return data;
		}
	});
	const provider = (0, import_react.useMemo)(() => {
		if (!service || !providersQ.data) return null;
		return providersQ.data.find((p) => p.id === service.provider_id) ?? null;
	}, [service, providersQ.data]);
	const slotsFn = useServerFn(getAvailableSlots);
	const createFn = useServerFn(createAppointment);
	const slotsQ = useQuery({
		queryKey: [
			"slots",
			service?.id,
			date?.toDateString()
		],
		enabled: !!service && !!date,
		queryFn: async () => {
			const d = date;
			const iso = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
			return await slotsFn({ data: {
				providerId: service.provider_id,
				serviceId: service.id,
				date: iso
			} });
		}
	});
	const createMut = useMutation({
		mutationFn: async () => {
			return await createFn({ data: {
				providerId: service.provider_id,
				serviceId: service.id,
				startTime: slot,
				clientName: form.name,
				clientPhone: form.phone,
				note: form.note || null,
				consent: true
			} });
		},
		onSuccess: (res) => {
			setConfirmed({
				startTime: res.startTime,
				endTime: res.endTime
			});
			setStep(4);
		},
		onError: (e) => toast.error(e.message || "Greška pri zakazivanju")
	});
	const reset = () => {
		setStep(1);
		setService(null);
		setDate(void 0);
		setSlot(null);
		setForm({
			name: "",
			phone: "",
			note: "",
			consent: false
		});
		setConfirmed(null);
	};
	const grouped = (0, import_react.useMemo)(() => {
		if (!providersQ.data || !servicesQ.data) return [];
		return providersQ.data.map((p) => ({
			provider: p,
			services: servicesQ.data.filter((s) => s.provider_id === p.id)
		})).filter((g) => g.services.length > 0);
	}, [providersQ.data, servicesQ.data]);
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SiteLayout, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageHeader, {
		eyebrow: step <= TOTAL_STEPS ? `Korak ${step} / ${TOTAL_STEPS}` : "Gotovo",
		title: "Zakaži termin"
	}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
		className: cn("mx-auto px-4 py-10", step === 1 ? "max-w-5xl" : "max-w-2xl"),
		children: [
			step <= TOTAL_STEPS && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
				className: "mb-8 h-1.5 w-full overflow-hidden rounded-full bg-secondary",
				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
					className: "h-full bg-primary transition-all",
					style: { width: `${step / TOTAL_STEPS * 100}%` }
				})
			}),
			step === 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Step, {
				title: "Izaberite uslugu",
				children: [(providersQ.isLoading || servicesQ.isLoading) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Loading, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
					className: "grid gap-8 md:grid-cols-2 md:items-start",
					children: grouped.map(({ provider: p, services }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
							className: "text-lg font-medium",
							children: p.role
						}),
						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
							className: "mb-3 text-xs text-muted-foreground",
							children: ["Kod: ", p.name]
						}),
						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
							className: "grid gap-1.5",
							children: services.map((s) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
								onClick: () => {
									setService(s);
									setDate(void 0);
									setSlot(null);
									setStep(2);
								},
								className: "flex flex-wrap items-center justify-between gap-x-3 gap-y-0.5 rounded-lg border border-border/60 bg-card px-3 py-2 text-left transition-all hover:border-primary/40 hover:bg-primary/5",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
									className: "min-w-0",
									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
										className: "text-sm font-medium",
										children: s.name
									}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
										className: "text-xs text-muted-foreground",
										children: [s.category, s.duration_minutes ? ` · ${formatDuration(s.duration_minutes)}` : ""]
									})]
								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
									className: "text-xs text-muted-foreground",
									children: formatPrice(s.price != null ? Number(s.price) : null)
								})]
							}, s.id))
						})
					] }, p.id))
				})]
			}),
			step === 2 && service && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Step, {
				title: "Izaberite datum i vreme",
				children: [
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SummaryChip, {
						text: `${service.name} · ${formatPrice(service.price != null ? Number(service.price) : null)}${provider ? ` · ${provider.name}` : ""}`,
						onEdit: () => setStep(1)
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
						className: "mt-4 rounded-2xl border border-border/60 bg-card p-2 sm:p-4",
						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Calendar, {
							mode: "single",
							locale: srLatn,
							selected: date,
							onSelect: (d) => {
								setDate(d);
								setSlot(null);
							},
							disabled: (d) => d < new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0)),
							className: "pointer-events-auto mx-auto"
						})
					}),
					date && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "mt-6",
						children: [
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
								className: "mb-2 text-sm font-medium",
								children: "Slobodni termini"
							}),
							slotsQ.isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Loading, {}),
							slotsQ.data && slotsQ.data.slots.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
								className: "text-sm text-muted-foreground",
								children: slotsQ.data.note || "Nema slobodnih termina za izabrani dan."
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
								className: "grid grid-cols-3 gap-2 sm:grid-cols-4",
								children: (slotsQ.data?.slots ?? []).map((s) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
									onClick: () => {
										setSlot(s);
										setStep(3);
									},
									className: cn("rounded-lg border p-2 text-sm transition-all", slot === s ? "border-primary bg-primary text-primary-foreground" : "border-border/60 hover:border-primary/40"),
									children: new Date(s).toLocaleTimeString("sr-Latn-RS", {
										hour: "2-digit",
										minute: "2-digit"
									})
								}, s))
							})
						]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
						className: "mt-8",
						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
							variant: "ghost",
							onClick: () => setStep(1),
							children: "← Nazad"
						})
					})
				]
			}),
			step === 3 && service && slot && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Step, {
				title: "Vaši podaci",
				children: [
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SummaryChip, {
						text: `${service.name} · ${new Date(slot).toLocaleDateString("sr-Latn-RS", {
							weekday: "short",
							day: "numeric",
							month: "numeric"
						})} u ${new Date(slot).toLocaleTimeString("sr-Latn-RS", {
							hour: "2-digit",
							minute: "2-digit"
						})}`,
						onEdit: () => setStep(2)
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "mt-4 space-y-4",
						children: [
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, {
								htmlFor: "name",
								children: "Ime i prezime"
							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
								id: "name",
								value: form.name,
								onChange: (e) => setForm({
									...form,
									name: e.target.value
								}),
								maxLength: 100
							})] }),
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, {
								htmlFor: "phone",
								children: "Broj telefona *"
							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
								id: "phone",
								type: "tel",
								value: form.phone,
								onChange: (e) => setForm({
									...form,
									phone: e.target.value
								}),
								maxLength: 30
							})] }),
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, {
								htmlFor: "note",
								children: "Napomena (opciono)"
							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Textarea, {
								id: "note",
								value: form.note,
								onChange: (e) => setForm({
									...form,
									note: e.target.value
								}),
								maxLength: 500
							})] }),
							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
								className: "flex items-start gap-2",
								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Checkbox, {
									id: "consent",
									checked: form.consent,
									onCheckedChange: (v) => setForm({
										...form,
										consent: !!v
									})
								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, {
									htmlFor: "consent",
									className: "text-sm font-normal leading-snug",
									children: "Saglasan/na sam da me salon kontaktira u vezi termina."
								})]
							})
						]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "mt-8 flex justify-between gap-3",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
							variant: "ghost",
							onClick: () => setStep(2),
							children: "← Nazad"
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
							disabled: !form.name || form.phone.length < 5 || !form.consent || createMut.isPending,
							onClick: () => createMut.mutate(),
							children: createMut.isPending ? "Zakazivanje…" : "Potvrdi termin"
						})]
					})
				]
			}),
			step === 4 && confirmed && provider && service && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
				className: "rounded-3xl border border-border/60 bg-card p-8 text-center",
				children: [
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CircleCheck, { className: "mx-auto h-14 w-14 text-primary" }),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
						className: "mt-4 text-3xl",
						children: "Hvala, vaš termin je zakazan!"
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
						className: "mt-2 text-muted-foreground",
						children: "Poslaćemo vam SMS potvrdu na uneti broj telefona."
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "mt-6 grid gap-3 rounded-2xl bg-secondary/40 p-6 text-left",
						children: [
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Row, {
								label: "Usluga",
								value: service.name
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Row, {
								label: "Osoba",
								value: provider.name
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Row, {
								label: "Datum",
								value: new Date(confirmed.startTime).toLocaleDateString("sr-Latn-RS", {
									weekday: "long",
									day: "numeric",
									month: "long",
									year: "numeric"
								})
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Row, {
								label: "Vreme",
								value: new Date(confirmed.startTime).toLocaleTimeString("sr-Latn-RS", {
									hour: "2-digit",
									minute: "2-digit"
								})
							}),
							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Row, {
								label: "Adresa",
								value: SITE.address,
								icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MapPin, { className: "h-4 w-4 text-primary" })
							})
						]
					}),
					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
						className: "mt-6 flex flex-wrap justify-center gap-3",
						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
							asChild: true,
							variant: "outline",
							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
								href: buildIcs({
									start: confirmed.startTime,
									end: confirmed.endTime,
									title: `Švonja Beauty – ${service.name}`,
									address: SITE.address
								}),
								download: "termin.ics",
								children: "Dodaj u kalendar"
							})
						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
							variant: "ghost",
							onClick: reset,
							children: "Zakaži još jedan"
						})]
					})
				]
			})
		]
	})] });
}
function Step({ title, children }) {
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
		className: "text-2xl md:text-3xl",
		children: title
	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
		className: "mt-6",
		children
	})] });
}
function SummaryChip({ text, onEdit }) {
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
		onClick: onEdit,
		className: "inline-flex max-w-full items-center gap-2 rounded-full border border-border/60 bg-secondary/40 px-4 py-2 text-sm transition-colors hover:border-primary/40",
		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
			className: "truncate",
			children: text
		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pencil, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" })]
	});
}
function Row({ label, value, icon }) {
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
		className: "grid grid-cols-[100px_1fr] items-start gap-3",
		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
			className: "text-xs uppercase tracking-wide text-muted-foreground",
			children: label
		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
			className: "flex items-center gap-2",
			children: [icon, /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: value })]
		})]
	});
}
function Loading() {
	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
		className: "flex items-center gap-2 text-sm text-muted-foreground",
		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoaderCircle, { className: "h-4 w-4 animate-spin" }), " Učitavanje…"]
	});
}
function buildIcs(o) {
	const fmt = (s) => new Date(s).toISOString().replace(/[-:]/g, "").replace(/\.\d{3}/, "");
	const body = [
		"BEGIN:VCALENDAR",
		"VERSION:2.0",
		"PRODID:-//Svonja Beauty//Booking//SR",
		"BEGIN:VEVENT",
		`UID:${crypto.randomUUID?.() ?? Date.now()}@svonja`,
		`DTSTAMP:${fmt((/* @__PURE__ */ new Date()).toISOString())}`,
		`DTSTART:${fmt(o.start)}`,
		`DTEND:${fmt(o.end)}`,
		`SUMMARY:${o.title}`,
		`LOCATION:${o.address}`,
		"END:VEVENT",
		"END:VCALENDAR"
	].join("\r\n");
	return "data:text/calendar;charset=utf-8," + encodeURIComponent(body);
}
//#endregion
export { BookingPage as component };
