// Lalaluxe booking — components/steps/subscription-existing.jsx
// Pages: "subcode" (enter a subscription code → lookup remaining visits) and "subdone"
// (success after a prepaid visit is booked). These power the EXISTING-subscription
// redemption flow: code → calendar → confirm → redeem. No payment/consent (prepaid).
// One screen per file. Load before app.jsx (see CLAUDE.md "multi-file Babel contract").
function SubCodeStep({ cfg, s, set, go }) {
	const [busy, setBusy] = useState(false);
	const [error, setError] = useState("");
	const lookup = s.subLookup;

	const check = async () => {
		const code = (s.subCode || "").trim();
		if (!code) {
			setError("Enter your subscription code.");
			return;
		}
		setBusy(true);
		setError("");
		try {
			const resp = await fetch("/api/subscriptions/lookup", {
				method: "POST",
				headers: { "Content-Type": "application/json" },
				body: JSON.stringify({ code }),
			});
			const d = await resp.json();
			if (!resp.ok || !d.ok) {
				const err = new Error(
					resp.status === 404
						? "We couldn't find that subscription."
						: (d && d.error) || "We couldn't find that subscription.",
				);
				err.fromServer = true;
				throw err;
			}
			set({ subLookup: d });
			if (d.remaining <= 0)
				setError(`This subscription has used all ${d.visitsAllowed} of its visits.`);
		} catch (e) {
			set({ subLookup: null });
			setError(e.fromServer ? e.message : "We couldn't find that subscription.");
		} finally {
			setBusy(false);
		}
	};

	const canBook = lookup && lookup.remaining > 0;

	return (
		<div className="screen">
			<h2 className="h-question">
				Your <span className="swirl">code.</span>
			</h2>
			<p className="h-sub">
				Enter the subscription code from your confirmation to book your next
				visit.
			</p>

			<div className="body">
				<div className="field">
					<label className="lab" htmlFor="sub-code">
						Subscription code
					</label>
					<input
						id="sub-code"
						type="text"
						placeholder="SUB…"
						autoComplete="off"
						autoCapitalize="characters"
						value={s.subCode || ""}
						onChange={(e) =>
							set({
								subCode: e.target.value.toUpperCase(),
								subLookup: null,
							})
						}
						onKeyDown={(e) => {
							if (e.key === "Enter") check();
						}}
					/>
				</div>

				<button
					className="cta"
					onClick={check}
					disabled={busy || !(s.subCode || "").trim()}
				>
					{busy ? "Checking…" : "Check my subscription"}{" "}
					<span className="arrow"></span>
				</button>

				{error && (
					<div className="sub-error" role="alert">
						{error}
					</div>
				)}

				{lookup && (
					<div className="sub-status">
						<div className="ss-row">
							<span className="ss-k">Plan</span>
							<span className="ss-v">
								{cfg.labels?.plan?.[lookup.plan] || lookup.plan || "Subscription"}
							</span>
						</div>
						<div className="ss-row">
							<span className="ss-k">Visits remaining</span>
							<span className="ss-v">
								{lookup.remaining} of {lookup.visitsAllowed}
							</span>
						</div>
					</div>
				)}

				{canBook && (
					<button className="cta cherry" onClick={() => go("calendar")}>
						Pick a time <span className="arrow"></span>
					</button>
				)}
			</div>
		</div>
	);
}

function SubDoneStep({ cfg, s, reset }) {
	const r = s.subResult || {};
	const day = s.date
		? parseYmd(s.date).toLocaleDateString(undefined, { weekday: "long" })
		: null;
	return (
		<div className="screen">
			<h2 className="h-question">
				You're <span className="swirl">booked.</span>
			</h2>
			<p className="h-sub">
				{day
					? `See you ${day} — nothing more to pay today.`
					: "Your included visit is confirmed — nothing more to pay today."}
			</p>

			<div className="body">
				<div className="receipt">
					<div className="rcpt-head">
						<span className="rcpt-title">Subscription visit</span>
					</div>
					<dl className="rcpt-list">
						<div className="rcpt-row">
							<dt className="l">When</dt>
							<dd className="r">
								{s.date ? prettyDateShort(s.date) : "—"} ·{" "}
								{s.time ? fmtTime(s.time) : "—"}
							</dd>
						</div>
						<div className="rcpt-row">
							<dt className="l">Confirmation</dt>
							<dd className="r">{r.confirmation || "—"}</dd>
						</div>
						<div className="rcpt-row">
							<dt className="l">Visits remaining</dt>
							<dd className="r">{r.remaining == null ? "—" : r.remaining}</dd>
						</div>
						{r.remaining > 0 && (
							<div className="rcpt-row">
								<dt className="l">Your code</dt>
								<dd className="r mono">{s.subCode}</dd>
							</div>
						)}
					</dl>
					<div className="rcpt-note">
						{r.remaining > 0
							? `Keep your code — return any time to book your remaining ${
									r.remaining === 1 ? "visit" : "visits"
								}.`
							: "That was your last subscription visit. Thank you!"}
					</div>
				</div>

				<button className="cta cherry" onClick={reset} style={{ marginTop: 4 }}>
					Done <span className="arrow"></span>
				</button>
			</div>
		</div>
	);
}