"use client";

import { defineStepper } from "@stepperize/react";
import { useState } from "react";

const flow = defineStepper(
	[{ id: "details" }, { id: "payment" }, { id: "review" }],
	{ linear: true },
);
const buttonClass =
	"rounded-md border px-3 py-2 text-sm hover:bg-muted disabled:opacity-40";

export function PolicyDemo() {
	const [guardAllows, setGuardAllows] = useState(true);
	const [result, setResult] = useState("No request yet");
	const [guardCalls, setGuardCalls] = useState(0);
	const stepper = flow.useStepper({
		beforeStepChange: ({ direction }) => {
			if (direction === "reset") return true;
			setGuardCalls((count) => count + 1);
			return guardAllows;
		},
	});
	return (
		<section
			aria-label="Linear policy demo"
			className="not-prose my-6 space-y-4 rounded-xl border bg-card p-5"
		>
			<label className="flex items-center gap-2 text-sm">
				<input
					type="checkbox"
					checked={guardAllows}
					onChange={(event) => setGuardAllows(event.target.checked)}
				/>
				Guard allows navigation
			</label>
			<p role="status">
				Current: {stepper.id} · canGoTo("review"):{" "}
				{String(stepper.canGoTo("review"))}
			</p>
			<div className="flex flex-wrap gap-2">
				<button
					type="button"
					className={buttonClass}
					disabled={stepper.isPending}
					onClick={async () =>
						setResult(JSON.stringify(await stepper.goTo("review")))
					}
				>
					Go to review
				</button>
				<button
					type="button"
					className={buttonClass}
					disabled={stepper.isPending}
					onClick={async () =>
						setResult(
							JSON.stringify(
								await stepper.goTo("review", { bypassPolicy: true }),
							),
						)
					}
				>
					Bypass policy
				</button>
				<button
					type="button"
					className={buttonClass}
					disabled={stepper.isPending}
					onClick={async () => {
						await stepper.reset();
						setGuardCalls(0);
						setResult("No request yet");
					}}
				>
					Reset demo
				</button>
			</div>
			<p role="status" className="break-all text-sm" aria-label="Policy result">
				{result}
			</p>
			<p className="text-sm">Guard calls: {guardCalls}</p>
			<p className="text-sm text-muted-foreground">
				The first button intentionally stays enabled so you can inspect a policy
				rejection. Bypassing policy still runs the guard.
			</p>
		</section>
	);
}

"use client";

import { defineStepper, type ResetOptions } from "@stepperize/react";
import { useState } from "react";

const flow = defineStepper(
	[
		{ id: "details", title: "Details" },
		{ id: "review", title: "Review" },
	],
	{ defaultData: { details: "Initial draft" } },
);
const buttonClass =
	"rounded-md border px-3 py-2 text-sm hover:bg-muted disabled:opacity-40";

export function ResetDemo() {
	const stepper = flow.useStepper();
	const [before, setBefore] = useState(
		"Change the draft, complete a step, then choose a reset.",
	);
	const snapshot = JSON.stringify(
		{
			step: stepper.id,
			data: stepper.data.all(),
			completed: stepper.completed,
		},
		null,
		2,
	);
	async function reset(options?: ResetOptions) {
		setBefore(snapshot);
		await stepper.reset(options);
	}
	return (
		<section
			aria-label="Reset demo"
			className="not-prose my-6 space-y-4 rounded-xl border bg-card p-5"
		>
			<label className="grid gap-2 text-sm">
				Saved draft
				<input
					className="rounded-md border bg-background px-3 py-2"
					value={String(stepper.data.get("details") ?? "")}
					onChange={(event) => stepper.data.set("details", event.target.value)}
				/>
			</label>
			<button
				type="button"
				className={buttonClass}
				disabled={!stepper.canNext}
				onClick={() => void stepper.next({ complete: true })}
			>
				Complete details and advance
			</button>
			<div className="flex flex-wrap gap-2">
				<button
					type="button"
					className={buttonClass}
					onClick={() => void reset()}
				>
					Reset everything
				</button>
				<button
					type="button"
					className={buttonClass}
					onClick={() => void reset({ keepData: true })}
				>
					Keep data
				</button>
				<button
					type="button"
					className={buttonClass}
					onClick={() => void reset({ keepCompleted: true })}
				>
					Keep completion
				</button>
				<button
					type="button"
					className={buttonClass}
					onClick={() => void reset({ keepData: true, keepCompleted: true })}
				>
					Keep both
				</button>
			</div>
			<div className="grid gap-3 sm:grid-cols-2">
				<div>
					<h3 className="mb-2 text-sm font-medium">Before reset</h3>
					<section aria-label="Before reset">
						<pre className="overflow-auto whitespace-pre-wrap rounded-lg bg-muted p-3 text-xs">
							{before}
						</pre>
					</section>
				</div>
				<div>
					<h3 className="mb-2 text-sm font-medium">Current state</h3>
					<section aria-label="After reset">
						<pre className="overflow-auto rounded-lg bg-muted p-3 text-xs">
							{snapshot}
						</pre>
					</section>
				</div>
			</div>
			<p className="text-sm text-muted-foreground">
				Reset restores the initial draft. It does not necessarily empty the
				data. Every option returns to the initial step.
			</p>
		</section>
	);
}