// Lalaluxe booking — components/steps/base.jsx
// Page: "base" — base nail service PLUS arrival prep (soak-off removal). The service list
// renders from config (labels.service / content.order.service), so nail repair — its own
// category since 2026-06-10 (owner call; it used to hide as a prep add-on under fill-in/
// overlay/gel) — and any admin-created service appear here without code changes. Pricing
// kind is derived from the shape of cfg.base[id]: per-length tiers → "From $min", { flat }
// → "$n"; overlay/gel keep their special flat keys.
// Prep is about the STATE you arrive in, not your look (decisions.md F21), and applicability
// is per-service so the offer never contradicts the service: you don't soak off a set you're
// filling, and a repair visit IS the arrival problem. Prep selections still live in s.addons
// → pricing/duration math is unchanged.
// One screen per file. Load before app.jsx (see CLAUDE.md "multi-file Babel contract").
const PREP_FOR = {
	fullset: ["removal"],
	overlay: ["removal"],
	gel: ["removal"],
};
const PREP_IDS = ["removal"];

function BaseStep({ cfg, s, set, toggleArr }) {
	const price = (id) => {
		const tiers = cfg.base[id];
		if (!tiers)
			// overlay/gel skip length → flat, not "from"
			return priceTag(id === "gel" ? cfg.gelAdult : cfg.overlay, "flat");
		return tiers.flat != null
			? priceTag(tiers.flat, "flat")
			: priceTag(Math.min(...Object.values(tiers)), "from");
	};
	// gel is the standalone fork below, not an acrylic-list row (orderedKeys would otherwise
	// re-append it since it still lives in labels.service for pricing/summary).
	const opts = orderedKeys(cfg.content.order?.service, cfg.labels.service)
		.filter((id) => id !== "gel")
		.map((id) => ({
		id,
		name: cfg.labels.service[id],
		desc: cfg.content.serviceDesc[id],
		img: cfg.content.serviceImg[id],
		price: price(id),
	}));

	const prep = (PREP_FOR[s.service] || []).map((id) => ({
		id,
		name: cfg.labels.addon[id],
		desc: cfg.content.addonDesc[id],
		price: priceTag(cfg.addon[id]),
	}));

	// Switching service drops prep picks that don't apply to the new service; aesthetic
	// add-ons persist — except into repair, which skips the look screen entirely, so a
	// stale look pick could never be reviewed or removed there: clear them all.
	const pickService = (id) =>
		set({
			service: id,
			length: null,
			...(id === "repair"
				? { finish: null, design: null, addons: [] }
				: {
						addons: s.addons.filter(
							(a) => !PREP_IDS.includes(a) || (PREP_FOR[id] || []).includes(a),
						),
					}),
		});

	// Top-level fork: an acrylic-based service (full set/fill/overlay/repair, each with its own
	// base price + length) vs. gel polish — the standalone no-acrylic service that replaces the
	// whole base ($40 flat, skips length). Gel used to sit in the acrylic list; pulled out so the
	// "what kind of set?" question reads clearly. Default to acrylic so the common path is one tap.
	const mode = s.setType || (s.service === "gel" ? "gel" : "acrylic");
	const pickAcrylic = () =>
		set({ setType: "acrylic", ...(s.service === "gel" ? { service: null, length: null } : {}) });
	const pickGel = () => set({ setType: "gel", service: "gel", length: null });

	return (
		<div className="screen">
			<h2 className="h-question">
				Where are you <span className="swirl">starting?</span>
			</h2>
			<p className="h-sub">
				Sets your base price. Your look comes next — full sets and fills pick a
				length first.
			</p>
			<div className="body">
				<div className="svc-fork">
					<button
						className={"svc-fork-btn " + (mode === "acrylic" ? "sel" : "")}
						aria-pressed={mode === "acrylic"}
						onClick={pickAcrylic}
					>
						<span className="sf-name">Acrylic set</span>
						<span className="sf-sub">Full set, fill, overlay or repair</span>
					</button>
					<button
						className={"svc-fork-btn " + (mode === "gel" ? "sel" : "")}
						aria-pressed={mode === "gel"}
						onClick={pickGel}
					>
						<span className="sf-name">Gel polish</span>
						<span className="sf-sub">
							{priceTag(cfg.gelAdult, "flat")} · no acrylic
						</span>
					</button>
				</div>

				{mode === "acrylic" ? (
					<div className="opt-list">
						{opts.map((o) => (
							<button
								key={o.id}
								className={
									"opt opt-lg opt-dark " + (s.service === o.id ? "sel" : "")
								}
								aria-pressed={s.service === o.id}
								onClick={() => pickService(o.id)}
							>
								<img className="thumb" src={o.img} alt="" />
								<div className="meta">
									<div className="name">{o.name}</div>
									<div className="desc">{o.desc}</div>
								</div>
								<div className="price">{o.price}</div>
							</button>
						))}
					</div>
				) : (
					<p className="gel-note">
						{cfg.content.serviceDesc.gel} — your look comes next.
					</p>
				)}

				{prep.length > 0 && (
					<>
						<div className="co-section">Arriving with an old set?</div>
						<div className="addon-list">
							{prep.map((o) => {
								const on = s.addons.indexOf(o.id) > -1;
								return (
									<button
										key={o.id}
										className={"addbtn addon-row prep-row " + (on ? "sel" : "")}
										aria-pressed={on}
										onClick={() => toggleArr("addons", o.id)}
									>
										<span className="addon-copy">
											<span className="addon-name">{o.name}</span>
											<span className="addon-desc">{o.desc}</span>
										</span>
										<span className="ap">{o.price}</span>
										<span className="plus">{on ? "On" : "+"}</span>
									</button>
								);
							})}
						</div>
					</>
				)}
			</div>
		</div>
	);
}