@burdenoff/microfe-hookmovies 2026.706.2 → 2026.706.4

package/dist/hookmovies/pages/social/ProfilesPage.js

@@ -0,0 +1,701 @@
+import { useHookMovies as e } from "../../context/HookMoviesContext.js";
+import { cn as t } from "../../utils/cn.js";
+import { useCreateProfile as n, useDeleteProfile as r, useMyProfiles as i, useUpdateProfile as a } from "../../hooks/useHookMoviesApi.js";
+import { uploadFileToFiles as o, useFileUrl as s } from "../../hooks/useFiles.js";
+import { EmptyState as c } from "../../components/EmptyState.js";
+import { ErrorState as l, LoadingState as u } from "../../components/StateViews.js";
+import "../../components/index.js";
+import { useCallback as d, useEffect as f, useMemo as p, useState as m } from "react";
+import { AlertCircle as h, Baby as g, Camera as _, Check as v, Loader2 as y, Lock as b, Pencil as x, Plus as S, ShieldCheck as C, Trash2 as w, X as T } from "lucide-react";
+import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
+import { GlassCard as k, Switch as A } from "@burdenoff/fe-libs/ui";
+//#region src/hookmovies/pages/social/ProfilesPage.tsx
+var j = "/HookMovies/Avatars", M = [
+	{
+		code: "en",
+		label: "English"
+	},
+	{
+		code: "es",
+		label: "Spanish"
+	},
+	{
+		code: "hi",
+		label: "Hindi"
+	},
+	{
+		code: "ta",
+		label: "Tamil"
+	},
+	{
+		code: "fr",
+		label: "French"
+	},
+	{
+		code: "de",
+		label: "German"
+	},
+	{
+		code: "pt",
+		label: "Portuguese"
+	},
+	{
+		code: "ja",
+		label: "Japanese"
+	},
+	{
+		code: "ko",
+		label: "Korean"
+	},
+	{
+		code: "zh",
+		label: "Chinese"
+	},
+	{
+		code: "ar",
+		label: "Arabic"
+	},
+	{
+		code: "ru",
+		label: "Russian"
+	}
+], N = [
+	{
+		value: "",
+		label: "No limit — all ratings"
+	},
+	{
+		value: "G",
+		label: "G — General audiences"
+	},
+	{
+		value: "PG",
+		label: "PG — Parental guidance"
+	},
+	{
+		value: "PG-13",
+		label: "PG-13 — Teens"
+	},
+	{
+		value: "R",
+		label: "R — Restricted"
+	},
+	{
+		value: "NC-17",
+		label: "NC-17 — Adults only"
+	}
+], P = "PG", F = 5, I = "block text-sm font-medium text-text-primary", L = "w-full rounded-lg border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-muted transition-colors focus:border-border-strong focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus", R = "inline-flex items-center justify-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-semibold text-action-primary-text transition-opacity hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus", z = "inline-flex items-center justify-center gap-2 rounded-lg border border-border-seam bg-bg-surface px-4 py-2 text-sm font-medium text-text-primary transition-colors hover:border-border-strong hover:bg-bg-sunken focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus";
+function B(e) {
+	let t = e.trim().split(/\s+/).filter(Boolean);
+	return t.length === 0 ? "?" : t.length === 1 ? t[0].slice(0, 2).toUpperCase() : (t[0][0] + t[t.length - 1][0]).toUpperCase();
+}
+var V = ({ fileId: e, overrideUrl: n, name: r, className: i }) => {
+	let { data: a, isLoading: o } = s(n ? void 0 : e), c = n ?? a ?? null;
+	return /* @__PURE__ */ D("div", {
+		className: t("relative flex aspect-square w-full items-center justify-center overflow-hidden rounded-2xl border border-border-seam bg-bg-sunken", i),
+		children: c ? /* @__PURE__ */ D("img", {
+			src: c,
+			alt: "",
+			className: "h-full w-full object-cover"
+		}) : o && e ? /* @__PURE__ */ D(y, {
+			className: "h-6 w-6 animate-spin text-text-muted",
+			"aria-hidden": "true"
+		}) : /* @__PURE__ */ D("span", {
+			className: "text-2xl font-semibold text-text-secondary sm:text-3xl",
+			children: B(r)
+		})
+	});
+}, H = ({ profile: e, isActive: n, manageMode: r, onSelect: i, onEdit: a }) => {
+	let o = r ? `Edit ${e.name}'s profile` : `Switch to ${e.name}'s profile`;
+	return /* @__PURE__ */ O("button", {
+		type: "button",
+		onClick: r ? a : i,
+		"aria-label": o,
+		"aria-pressed": !r && n,
+		className: t("group flex w-full flex-col items-center gap-3 rounded-2xl p-2 text-center transition-transform", "focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus", "hover:-translate-y-0.5 motion-reduce:transform-none"),
+		children: [/* @__PURE__ */ O("div", {
+			className: "relative w-full",
+			children: [
+				/* @__PURE__ */ D(k, {
+					treatment: n ? "insight" : "glass",
+					glow: n,
+					className: t("overflow-hidden !p-0", n && "ring-2 ring-action-primary-bg"),
+					children: /* @__PURE__ */ D(V, {
+						fileId: e.avatarFileId,
+						name: e.name
+					})
+				}),
+				e.isKids && /* @__PURE__ */ O("span", {
+					className: "absolute left-2 top-2 inline-flex items-center gap-1 rounded-full border border-border-seam bg-bg-surface/80 px-2 py-0.5 text-[0.65rem] font-semibold text-status-info-text backdrop-blur",
+					title: "Kids profile",
+					children: [/* @__PURE__ */ D(g, {
+						className: "h-3 w-3",
+						"aria-hidden": "true"
+					}), "Kids"]
+				}),
+				e.hasPin && /* @__PURE__ */ D("span", {
+					className: "absolute right-2 top-2 inline-flex h-6 w-6 items-center justify-center rounded-full border border-border-seam bg-bg-surface/80 text-text-secondary backdrop-blur",
+					title: "PIN protected",
+					children: /* @__PURE__ */ D(b, {
+						className: "h-3 w-3",
+						"aria-hidden": "true"
+					})
+				}),
+				r && /* @__PURE__ */ D("span", {
+					"aria-hidden": "true",
+					className: "pointer-events-none absolute inset-0 flex items-center justify-center rounded-2xl bg-bg-overlay/50 opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100",
+					children: /* @__PURE__ */ D("span", {
+						className: "inline-flex h-10 w-10 items-center justify-center rounded-full border border-border-seam bg-bg-surface text-text-primary",
+						children: /* @__PURE__ */ D(x, { className: "h-4 w-4" })
+					})
+				})
+			]
+		}), /* @__PURE__ */ O("div", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ D("p", {
+				className: t("truncate text-sm font-medium", n ? "text-text-primary" : "text-text-secondary group-hover:text-text-primary"),
+				children: e.name
+			}), n && !r && /* @__PURE__ */ D("p", {
+				className: "mt-0.5 text-[0.7rem] font-medium text-action-primary-bg",
+				children: "Watching now"
+			})]
+		})]
+	});
+}, U = ({ onClick: e }) => /* @__PURE__ */ O("button", {
+	type: "button",
+	onClick: e,
+	"aria-label": "Add a profile",
+	className: t("group flex w-full flex-col items-center gap-3 rounded-2xl p-2 text-center transition-transform", "focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus", "hover:-translate-y-0.5 motion-reduce:transform-none"),
+	children: [/* @__PURE__ */ D("div", {
+		className: "flex aspect-square w-full items-center justify-center rounded-2xl border border-dashed border-border-strong bg-bg-surface/40 text-text-muted transition-colors group-hover:border-action-primary-bg group-hover:text-action-primary-bg",
+		children: /* @__PURE__ */ D(S, {
+			className: "h-8 w-8",
+			"aria-hidden": "true"
+		})
+	}), /* @__PURE__ */ D("p", {
+		className: "text-sm font-medium text-text-secondary group-hover:text-text-primary",
+		children: "Add profile"
+	})]
+}), W = ({ profile: e, onClose: r, onDelete: i, isDeleting: s = !1 }) => {
+	let c = e !== null, l = n(), u = a(), [p, x] = m(() => ({
+		name: e?.name ?? "",
+		isKids: e?.isKids ?? !1,
+		maturityLimit: e?.maturityLimit ?? "",
+		languages: e?.languages ?? [],
+		pin: "",
+		avatarFileId: e?.avatarFileId ?? null
+	})), [S, E] = m(null), [k, F] = m(!1), [B, H] = m(null), U = l.isPending || u.isPending, W = U || k || s;
+	f(() => {
+		let e = (e) => {
+			e.key === "Escape" && !W && r();
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [W, r]);
+	let G = d((e, t) => {
+		x((n) => ({
+			...n,
+			[e]: t
+		}));
+	}, []), K = d((e) => {
+		x((t) => ({
+			...t,
+			languages: t.languages.includes(e) ? t.languages.filter((t) => t !== e) : [...t.languages, e]
+		}));
+	}, []), q = d((e) => {
+		x((t) => {
+			let n = e && (t.maturityLimit === "" || t.maturityLimit === "R" || t.maturityLimit === "NC-17") ? P : t.maturityLimit;
+			return {
+				...t,
+				isKids: e,
+				maturityLimit: n
+			};
+		});
+	}, []), J = d(async (e) => {
+		let t = e.target.files?.[0];
+		if (e.target.value = "", t) {
+			if (!t.type.startsWith("image/")) {
+				H("Please choose an image file for the avatar.");
+				return;
+			}
+			H(null), F(!0);
+			try {
+				let e = await o(t, j);
+				x((t) => ({
+					...t,
+					avatarFileId: e.id
+				})), E(e.url || null);
+			} catch (e) {
+				H(e instanceof Error ? e.message : "The avatar upload failed. Please try again.");
+			} finally {
+				F(!1);
+			}
+		}
+	}, []), Y = d(async (t) => {
+		t.preventDefault();
+		let n = p.name.trim();
+		if (!n) {
+			H("A profile name is required.");
+			return;
+		}
+		let i = p.pin.trim();
+		if (i && !/^\d{4}$/.test(i)) {
+			H("The PIN must be exactly 4 digits.");
+			return;
+		}
+		H(null);
+		let a = p.maturityLimit || void 0;
+		try {
+			if (c && e) {
+				let t = {
+					name: n,
+					isKids: p.isKids,
+					languages: p.languages,
+					maturityLimit: a,
+					avatarFileId: p.avatarFileId ?? void 0
+				};
+				i && (t.pin = i), await u.mutateAsync({
+					id: e.id,
+					input: t
+				});
+			} else {
+				let e = {
+					name: n,
+					isKids: p.isKids,
+					languages: p.languages,
+					maturityLimit: a,
+					avatarFileId: p.avatarFileId ?? void 0
+				};
+				i && (e.pin = i), await l.mutateAsync(e);
+			}
+			r();
+		} catch (e) {
+			H(e instanceof Error ? e.message : "Could not save the profile. Please try again.");
+		}
+	}, [
+		p,
+		c,
+		e,
+		u,
+		l,
+		r
+	]), X = "hok-profile-modal-title";
+	return /* @__PURE__ */ D("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-bg-canvas/90 p-4 backdrop-blur-sm",
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-labelledby": X,
+		onClick: () => {
+			W || r();
+		},
+		children: /* @__PURE__ */ O("div", {
+			className: "relative flex max-h-[90vh] w-full max-w-lg flex-col overflow-hidden rounded-2xl border border-border-seam bg-bg-surface shadow-2xl",
+			onClick: (e) => e.stopPropagation(),
+			children: [/* @__PURE__ */ O("div", {
+				className: "flex items-center justify-between gap-4 border-b border-border-seam px-5 py-4",
+				children: [/* @__PURE__ */ D("h2", {
+					id: X,
+					className: "text-lg font-semibold text-text-primary",
+					children: c ? "Edit profile" : "Add a profile"
+				}), /* @__PURE__ */ D("button", {
+					type: "button",
+					onClick: r,
+					disabled: W,
+					"aria-label": "Close",
+					className: "flex size-9 items-center justify-center rounded-full text-text-secondary transition-colors hover:bg-bg-sunken hover:text-text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:opacity-50",
+					children: /* @__PURE__ */ D(T, { className: "h-5 w-5" })
+				})]
+			}), /* @__PURE__ */ O("form", {
+				onSubmit: Y,
+				className: "flex min-h-0 flex-1 flex-col",
+				children: [/* @__PURE__ */ O("div", {
+					className: "flex-1 space-y-5 overflow-y-auto px-5 py-5",
+					children: [
+						/* @__PURE__ */ O("div", {
+							className: "flex items-start gap-4",
+							children: [/* @__PURE__ */ O("div", {
+								className: "relative w-24 shrink-0",
+								children: [/* @__PURE__ */ D(V, {
+									fileId: p.avatarFileId,
+									overrideUrl: S,
+									name: p.name || "New profile"
+								}), /* @__PURE__ */ O("label", {
+									className: t("absolute -bottom-2 -right-2 flex size-9 cursor-pointer items-center justify-center rounded-full", "border border-border-seam bg-bg-surface text-text-primary shadow-sm transition-colors", "hover:border-border-strong hover:bg-bg-sunken focus-within:ring-2 focus-within:ring-border-focus", k && "pointer-events-none opacity-70"),
+									title: "Upload avatar",
+									children: [
+										k ? /* @__PURE__ */ D(y, {
+											className: "h-4 w-4 animate-spin",
+											"aria-hidden": "true"
+										}) : /* @__PURE__ */ D(_, {
+											className: "h-4 w-4",
+											"aria-hidden": "true"
+										}),
+										/* @__PURE__ */ D("span", {
+											className: "sr-only",
+											children: "Upload avatar image"
+										}),
+										/* @__PURE__ */ D("input", {
+											type: "file",
+											accept: "image/*",
+											className: "sr-only",
+											onChange: J,
+											disabled: k
+										})
+									]
+								})]
+							}), /* @__PURE__ */ O("div", {
+								className: "min-w-0 flex-1 space-y-1.5",
+								children: [
+									/* @__PURE__ */ D("label", {
+										htmlFor: "hok-profile-name",
+										className: I,
+										children: "Name"
+									}),
+									/* @__PURE__ */ D("input", {
+										id: "hok-profile-name",
+										type: "text",
+										value: p.name,
+										onChange: (e) => G("name", e.target.value),
+										placeholder: "e.g. Alex",
+										maxLength: 60,
+										autoFocus: !0,
+										required: !0,
+										className: L
+									}),
+									/* @__PURE__ */ D("p", {
+										className: "text-xs text-text-muted",
+										children: "Shown on the “Who’s watching?” screen and personalises recommendations."
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ O("div", {
+							className: "flex items-center justify-between gap-4 rounded-lg border border-border-seam bg-bg-sunken px-4 py-3",
+							children: [/* @__PURE__ */ O("div", {
+								className: "flex items-start gap-3",
+								children: [/* @__PURE__ */ D(g, {
+									className: "mt-0.5 h-5 w-5 text-status-info-text",
+									"aria-hidden": "true"
+								}), /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("p", {
+									className: "text-sm font-medium text-text-primary",
+									children: "Kids profile"
+								}), /* @__PURE__ */ D("p", {
+									className: "text-xs text-text-muted",
+									children: "A simpler experience limited to age-appropriate titles."
+								})] })]
+							}), /* @__PURE__ */ D(A, {
+								checked: p.isKids,
+								onCheckedChange: q,
+								"aria-label": "Kids profile"
+							})]
+						}),
+						/* @__PURE__ */ O("div", {
+							className: "space-y-1.5",
+							children: [
+								/* @__PURE__ */ D("label", {
+									htmlFor: "hok-profile-maturity",
+									className: I,
+									children: "Maturity ceiling"
+								}),
+								/* @__PURE__ */ D("select", {
+									id: "hok-profile-maturity",
+									value: p.maturityLimit,
+									onChange: (e) => G("maturityLimit", e.target.value),
+									className: t(L, "appearance-none"),
+									children: N.map((e) => /* @__PURE__ */ D("option", {
+										value: e.value,
+										children: e.label
+									}, e.value || "none"))
+								}),
+								/* @__PURE__ */ D("p", {
+									className: "text-xs text-text-muted",
+									children: "Hides titles rated above this level from this profile."
+								})
+							]
+						}),
+						/* @__PURE__ */ O("fieldset", {
+							className: "space-y-2",
+							children: [
+								/* @__PURE__ */ D("legend", {
+									className: I,
+									children: "Preferred languages"
+								}),
+								/* @__PURE__ */ D("div", {
+									className: "flex flex-wrap gap-2",
+									children: M.map((e) => {
+										let n = p.languages.includes(e.code);
+										return /* @__PURE__ */ O("button", {
+											type: "button",
+											"aria-pressed": n,
+											onClick: () => K(e.code),
+											className: t("inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus", n ? "border-action-primary-bg bg-action-primary-bg/10 text-action-primary-bg" : "border-border-seam bg-bg-surface text-text-secondary hover:border-border-strong hover:text-text-primary"),
+											children: [n && /* @__PURE__ */ D(v, {
+												className: "h-3.5 w-3.5",
+												"aria-hidden": "true"
+											}), e.label]
+										}, e.code);
+									})
+								}),
+								/* @__PURE__ */ D("p", {
+									className: "text-xs text-text-muted",
+									children: "Prioritises audio & subtitle tracks in these languages."
+								})
+							]
+						}),
+						/* @__PURE__ */ O("div", {
+							className: "space-y-1.5",
+							children: [
+								/* @__PURE__ */ O("label", {
+									htmlFor: "hok-profile-pin",
+									className: I,
+									children: [
+										"Profile PIN",
+										" ",
+										/* @__PURE__ */ D("span", {
+											className: "font-normal text-text-muted",
+											children: "(optional, 4 digits)"
+										})
+									]
+								}),
+								/* @__PURE__ */ O("div", {
+									className: "relative",
+									children: [/* @__PURE__ */ D(b, {
+										className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-muted",
+										"aria-hidden": "true"
+									}), /* @__PURE__ */ D("input", {
+										id: "hok-profile-pin",
+										type: "password",
+										inputMode: "numeric",
+										autoComplete: "off",
+										pattern: "\\d{4}",
+										maxLength: 4,
+										value: p.pin,
+										onChange: (e) => G("pin", e.target.value.replace(/\D/g, "").slice(0, 4)),
+										placeholder: e?.hasPin ? "•••• (set — leave blank to keep)" : "Set a PIN",
+										className: t(L, "pl-9 tracking-[0.4em]")
+									})]
+								}),
+								e?.hasPin && /* @__PURE__ */ O("p", {
+									className: "inline-flex items-center gap-1.5 text-xs text-status-success-text",
+									children: [/* @__PURE__ */ D(C, {
+										className: "h-3.5 w-3.5",
+										"aria-hidden": "true"
+									}), "This profile is PIN protected. Leave blank to keep the current PIN."]
+								})
+							]
+						}),
+						B && /* @__PURE__ */ O("p", {
+							role: "alert",
+							className: "flex items-start gap-2 rounded-lg border border-status-error-border bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text",
+							children: [/* @__PURE__ */ D(h, {
+								className: "mt-0.5 h-4 w-4 shrink-0",
+								"aria-hidden": "true"
+							}), B]
+						})
+					]
+				}), /* @__PURE__ */ O("div", {
+					className: "flex items-center justify-between gap-3 border-t border-border-seam px-5 py-4",
+					children: [c && e && i ? /* @__PURE__ */ O("button", {
+						type: "button",
+						onClick: () => i(e),
+						disabled: W,
+						className: "inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium text-status-error-text transition-colors hover:bg-status-error-bg-subtle focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:opacity-50",
+						children: [s ? /* @__PURE__ */ D(y, {
+							className: "h-4 w-4 animate-spin",
+							"aria-hidden": "true"
+						}) : /* @__PURE__ */ D(w, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						}), "Delete"]
+					}) : /* @__PURE__ */ D("span", {}), /* @__PURE__ */ O("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ D("button", {
+							type: "button",
+							onClick: r,
+							disabled: W,
+							className: z,
+							children: "Cancel"
+						}), /* @__PURE__ */ O("button", {
+							type: "submit",
+							disabled: W,
+							className: R,
+							children: [U && /* @__PURE__ */ D(y, {
+								className: "h-4 w-4 animate-spin",
+								"aria-hidden": "true"
+							}), c ? "Save changes" : "Create profile"]
+						})]
+					})]
+				})]
+			})]
+		})
+	});
+}, G = ({ profile: e, onCancel: t, onConfirm: n, isDeleting: r }) => (f(() => {
+	let e = (e) => {
+		e.key === "Escape" && !r && t();
+	};
+	return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+}, [r, t]), /* @__PURE__ */ D("div", {
+	className: "fixed inset-0 z-[60] flex items-center justify-center bg-bg-canvas/90 p-4 backdrop-blur-sm",
+	role: "alertdialog",
+	"aria-modal": "true",
+	"aria-label": `Delete ${e.name}'s profile`,
+	onClick: () => {
+		r || t();
+	},
+	children: /* @__PURE__ */ O("div", {
+		className: "w-full max-w-sm rounded-2xl border border-border-seam bg-bg-surface p-6 shadow-2xl",
+		onClick: (e) => e.stopPropagation(),
+		children: [/* @__PURE__ */ O("div", {
+			className: "flex items-start gap-3",
+			children: [/* @__PURE__ */ D("span", {
+				className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-status-error-bg-subtle text-status-error-text",
+				children: /* @__PURE__ */ D(w, {
+					className: "h-5 w-5",
+					"aria-hidden": "true"
+				})
+			}), /* @__PURE__ */ O("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ D("h2", {
+					className: "text-base font-semibold text-text-primary",
+					children: "Delete this profile?"
+				}), /* @__PURE__ */ O("p", {
+					className: "mt-1 text-sm text-text-secondary",
+					children: [/* @__PURE__ */ D("span", {
+						className: "font-medium text-text-primary",
+						children: e.name
+					}), "'s viewing history and preferences will be permanently removed. This can't be undone."]
+				})]
+			})]
+		}), /* @__PURE__ */ O("div", {
+			className: "mt-6 flex items-center justify-end gap-3",
+			children: [/* @__PURE__ */ D("button", {
+				type: "button",
+				onClick: t,
+				disabled: r,
+				className: z,
+				children: "Cancel"
+			}), /* @__PURE__ */ O("button", {
+				type: "button",
+				onClick: n,
+				disabled: r,
+				className: "inline-flex items-center justify-center gap-2 rounded-lg bg-status-error-text px-4 py-2 text-sm font-semibold text-bg-surface transition-opacity hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus disabled:opacity-50",
+				children: [r && /* @__PURE__ */ D(y, {
+					className: "h-4 w-4 animate-spin",
+					"aria-hidden": "true"
+				}), "Delete profile"]
+			})]
+		})]
+	})
+})), K = () => {
+	let { activeProfileId: t, setActiveProfile: n, navigateTo: a } = e(), { data: o, isLoading: s, isError: f, refetch: h } = i(), g = r(), [_, y] = m(!1), [b, C] = m(null), w = p(() => o ?? [], [o]), T = w.length < F, k = d((e) => {
+		n(e.id), a("browse");
+	}, [n, a]), A = d(async (e) => {
+		try {
+			await g.mutateAsync(e.id), t === e.id && n(null), C(null);
+		} catch {
+			C({
+				kind: "edit",
+				profile: e
+			});
+		}
+	}, [
+		g,
+		t,
+		n
+	]), j;
+	return j = s ? /* @__PURE__ */ D(u, {
+		label: "Loading profiles…",
+		className: "min-h-[60vh]"
+	}) : f ? /* @__PURE__ */ D(l, {
+		title: "Couldn't load profiles",
+		message: "We couldn't reach your account profiles. Check your connection and try again.",
+		onRetry: () => void h(),
+		className: "min-h-[60vh]"
+	}) : w.length === 0 ? /* @__PURE__ */ D("div", {
+		className: "flex min-h-[50vh] items-center justify-center",
+		children: /* @__PURE__ */ D(c, {
+			illustration: "empty-data",
+			title: "No profiles yet",
+			description: "Create a profile for each person who shares this account — each gets its own recommendations, languages and parental controls.",
+			action: /* @__PURE__ */ O("button", {
+				type: "button",
+				onClick: () => C({ kind: "create" }),
+				className: R,
+				children: [/* @__PURE__ */ D(S, {
+					className: "h-4 w-4",
+					"aria-hidden": "true"
+				}), "Add your first profile"]
+			})
+		})
+	}) : /* @__PURE__ */ O("div", {
+		className: "mx-auto grid w-full max-w-4xl grid-cols-2 gap-4 sm:grid-cols-3 sm:gap-6 md:grid-cols-4 lg:grid-cols-5",
+		children: [w.map((e) => /* @__PURE__ */ D(H, {
+			profile: e,
+			isActive: t === e.id,
+			manageMode: _,
+			onSelect: () => k(e),
+			onEdit: () => C({
+				kind: "edit",
+				profile: e
+			})
+		}, e.id)), T && /* @__PURE__ */ D(U, { onClick: () => C({ kind: "create" }) })]
+	}), /* @__PURE__ */ O("div", {
+		className: "flex min-h-full w-full flex-col items-center bg-bg-canvas px-4 py-10 sm:py-16",
+		children: [
+			/* @__PURE__ */ O("div", {
+				className: "mb-8 text-center sm:mb-12",
+				children: [/* @__PURE__ */ D("h1", {
+					className: "text-2xl font-semibold tracking-tight text-text-primary sm:text-4xl",
+					children: _ ? "Manage profiles" : "Who's watching?"
+				}), /* @__PURE__ */ D("p", {
+					className: "mt-2 text-sm text-text-secondary",
+					children: _ ? "Select a profile to edit its details and parental controls." : "Pick a profile to personalise your HookMovies experience."
+				})]
+			}),
+			/* @__PURE__ */ D("div", {
+				className: "w-full",
+				children: j
+			}),
+			!s && !f && w.length > 0 && /* @__PURE__ */ D("div", {
+				className: "mt-10 sm:mt-14",
+				children: /* @__PURE__ */ D("button", {
+					type: "button",
+					onClick: () => y((e) => !e),
+					className: _ ? R : z,
+					children: _ ? /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D(v, {
+						className: "h-4 w-4",
+						"aria-hidden": "true"
+					}), "Done"] }) : /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D(x, {
+						className: "h-4 w-4",
+						"aria-hidden": "true"
+					}), "Manage profiles"] })
+				})
+			}),
+			b?.kind === "create" && /* @__PURE__ */ D(W, {
+				profile: null,
+				onClose: () => C(null)
+			}),
+			b?.kind === "edit" && /* @__PURE__ */ D(W, {
+				profile: b.profile,
+				onClose: () => C(null),
+				onDelete: (e) => C({
+					kind: "delete",
+					profile: e
+				}),
+				isDeleting: g.isPending
+			}),
+			b?.kind === "delete" && /* @__PURE__ */ D(G, {
+				profile: b.profile,
+				isDeleting: g.isPending,
+				onCancel: () => C({
+					kind: "edit",
+					profile: b.profile
+				}),
+				onConfirm: () => void A(b.profile)
+			})
+		]
+	});
+};
+//#endregion
+export { K as ProfilesPage };
+
+//# sourceMappingURL=ProfilesPage.js.map