learnharness/components/practice-exam.tsx

"use client";

/**
 * The exam page (practice slice 5, one-attempt redesign 2026-09-29):
 * one problem set, numbered problems, markdown statements, a textarea +
 * dictation per problem (the bar renders only on the FOCUSED box —
 * thinking out loud is the primary answering mode). ONE ATTEMPT: each
 * problem has its OWN submit button; once submitted the box locks and
 * the MODEL SOLUTION reveals instantly (rubric collapsed by default).
 * The grade (score 0–10 + brief reasoning) lands via the events channel and
 * updates live — no reload.
 *
 * TOP BAR (owner, UI round 2026-09-29): the chat pattern — an h-15
 * lh-drag header in flow above the scroller, the sidebar reopen toggle
 * first (it clears the traffic lights via .lh-closed-toggle), the set
 * title truncating beside it. The levels + status stay in the body.
 *
 * DISPLAY-SEAM MATH HEALING: statements/solutions/rubrics/reasoning ride
 * the same streaming-args parse as quiz/ask strings — restoreMathEscapes
 * heals them at render (the same helper the tool-part seam uses).
 *
 * POLLING: 2s while the set isn't ready (stubs → filled), and while a
 * grading run is live for this set (activity feed practice rows are
 * keyed setId:grade:problemId — the LIVE rows name exactly which
 * problems' grades are pending). A settled page goes quiet; a dropped
 * grade shows "grade interrupted" honestly.
 */

import { useCallback, useEffect, useRef, useState } from "react";
import { useServerEvent, useServerResync } from "@/components/server-events";
import type { Problem, ProblemSet } from "@/src/core";
import { CUE_LEVELS, LADDER_RUNGS, PRESENTATIONS } from "@/src/core";
import { restoreMathEscapes } from "@/src/core";
import { MessageResponse } from "@/components/ai-elements/message";
import { TopBar } from "@/components/top-bar";
import { BrailleSpinner } from "@/components/braille-spinner";
import { DictationBar, useDictation } from "@/components/dictation";

/** One answerable problem: textarea + focus-gated dictation bar. */
export function ProblemBox({
	problem,
	draft,
	onDraft,
}: {
	problem: Pick<Problem, "id">;
	draft: string;
	onDraft: (text: string) => void;
}) {
	const [focused, setFocused] = useState(false);
	// The dictation appends into THIS box only (per-box instance).
	const dictation = useDictation({
		append: (text) => onDraft(text),
	});
	return (
		<div
			className="flex flex-col gap-1.5"
			data-testid={`problem-box-${problem.id}`}
		>
			<textarea
				data-testid={`answer-${problem.id}`}
				value={draft}
				rows={5}
				placeholder="Think out loud — dictation or typing, both fine."
				onChange={(e) => onDraft(e.target.value)}
				onFocus={() => setFocused(true)}
				onBlur={() => setFocused(false)}
				className="w-full resize-y rounded-lg border bg-background px-3 py-2 text-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
			/>
			{focused && <DictationBar dictation={dictation} />}
		</div>
	);
}

/** The exam page's pure body — exported for SSR pins. */
export function PracticeExamBody({
	set,
	drafts,
	onDraft,
	onSubmit,
	submittingId,
	submitErrors,
	liveGradeIds,
}: {
	set: ProblemSet;
	drafts: Record<string, string>;
	onDraft: (problemId: string, text: string) => void;
	/** Per-problem submit (owner 2026-09-29): ONE attempt per problem. */
	onSubmit: (problemId: string) => void;
	/** The problem whose submit POST is in flight. */
	submittingId: string | null;
	/** Per-problem submit failures, keyed by problem id. */
	submitErrors: Record<string, string>;
	/** Problems whose grade rows are LIVE (the activity feed read). */
	liveGradeIds: ReadonlySet<string>;
}) {
	return (
		<div className="flex h-dvh">
			<div className="flex min-w-0 flex-1 flex-col">
				{/* The top bar (owner, UI round 2026-09-29): the new-session
				    pattern — h-15, lh-drag (the Electron window-drag surface, so
				    the traffic lights never cover content), the sidebar reopen
				    toggle first, the set title truncating beside it. */}
				<TopBar>
					<div
						className="min-w-0 flex-1 truncate font-title text-3xl tracking-tight"
						data-testid="practice-exam-title"
					>
						{set.title}
					</div>
				</TopBar>
				<div className="relative flex min-h-0 flex-1">
					<div
						className="h-full min-w-0 flex-1 overflow-y-auto"
						data-testid="practice-exam-scroll"
					>
						<div
							className="mx-auto flex w-full max-w-3xl flex-col gap-6 p-6"
							data-testid="practice-exam"
						>
							<div className="flex flex-col gap-1">
								<p
									className="text-xs text-muted-foreground/80"
									data-testid="practice-exam-levels"
								>
									{LADDER_RUNGS[set.params.ladderRung].name} ·{" "}
									{CUE_LEVELS[set.params.cueDistance].name} ·{" "}
									{PRESENTATIONS[set.params.presentation].name}
								</p>
								<p
									className="text-sm text-muted-foreground"
									data-testid="practice-exam-status"
								>
									{set.status === "partitioning" && "Partitioning the chains…"}
									{set.status === "generating" &&
										`Generating — ${set.problems.filter((p) => p.status === "ready").length}/${set.problems.length} problems ready`}
									{set.status === "error" &&
										(set.error ?? "Something went wrong")}
									{set.status === "ready" &&
										(liveGradeIds.size > 0
											? "Grading your answers…"
											: `${set.problems.length} problems · ${set.problems.filter((p) => p.grade).length} graded`)}
								</p>
							</div>

							{set.problems.map((problem, i) => (
								<section
									key={problem.id}
									className="rounded-xl border bg-card p-4"
									data-testid={`problem-${problem.id}`}
								>
									<h2 className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
										Problem {i + 1}
									</h2>
									{problem.status === "generating" ? (
										// The stub: propositions NEVER surface (never-announce law).
										<div
											className="flex items-center gap-2 text-sm text-muted-foreground"
											data-testid={`generating-${problem.id}`}
										>
											<BrailleSpinner className="size-4" />
											Generating problem…
										</div>
									) : problem.status === "error" ? (
										<p
											className="text-sm text-destructive"
											data-testid={`problem-error-${problem.id}`}
										>
											This problem failed to generate
											{problem.error ? ` — ${problem.error}` : ""}.
										</p>
									) : (
										<>
											<div className="lh-prose text-sm">
												<MessageResponse mode="static">
													{restoreMathEscapes(problem.statement)}
												</MessageResponse>
											</div>
											{problem.answer === undefined ? (
												// ANSWERABLE (owner 2026-09-29): the box + its OWN submit
												// button — one attempt, submitted the moment it's clicked.
												<div className="flex flex-col items-start gap-2">
													<div className="w-full">
														<ProblemBox
															problem={problem}
															draft={drafts[problem.id] ?? ""}
															onDraft={(text) => onDraft(problem.id, text)}
														/>
													</div>
													<button
														type="button"
														data-testid={`practice-submit-${problem.id}`}
														onClick={() => onSubmit(problem.id)}
														disabled={
															set.status !== "ready" ||
															(drafts[problem.id] ?? "").trim() === "" ||
															submittingId !== null
														}
														className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-40"
													>
														{submittingId === problem.id
															? "Submitting…"
															: "Submit answer"}
													</button>
													{submitErrors[problem.id] && (
														<p
															data-testid={`practice-submit-error-${problem.id}`}
															className="text-sm text-destructive"
														>
															{submitErrors[problem.id]}
														</p>
													)}
												</div>
											) : (
												// SUBMITTED (owner 2026-09-29): the answer locks, the
												// model solution reveals INSTANTLY, the rubric stays
												// collapsed, and the grade lands live when it lands.
												<div className="mt-4 flex flex-col gap-3">
													<textarea
														data-testid={`answer-${problem.id}`}
														value={problem.answer}
														readOnly
														rows={5}
														className="w-full resize-y rounded-lg border bg-muted/40 px-3 py-2 text-sm text-muted-foreground"
													/>
													<div
														className="rounded-lg border bg-background p-3"
														data-testid={`reveal-${problem.id}`}
													>
														{problem.grade ? (
															<div className="flex flex-col gap-1.5">
																<div className="flex items-baseline gap-2">
																	<span
																		data-testid={`grade-${problem.id}`}
																		className="font-mono text-sm font-medium"
																	>
																		{problem.grade.score}/10
																	</span>
																</div>
																<div
																	className="lh-prose text-sm"
																	data-testid={`reasoning-${problem.id}`}
																>
																	<MessageResponse mode="static">
																		{restoreMathEscapes(
																			problem.grade.reasoning,
																		)}
																	</MessageResponse>
																</div>
															</div>
														) : liveGradeIds.has(problem.id) ? (
															<div
																className="flex items-center gap-2 text-sm text-muted-foreground"
																data-testid={`grading-${problem.id}`}
															>
																<BrailleSpinner className="size-4" />
																Grading…
															</div>
														) : (
															<p
																className="text-sm text-muted-foreground"
																data-testid={`grade-interrupted-${problem.id}`}
															>
																Grade interrupted — the answer stands.
															</p>
														)}
														<div className="mt-3 text-xs uppercase tracking-wide text-muted-foreground">
															Model solution
														</div>
														<div
															className="lh-prose text-sm"
															data-testid={`solution-${problem.id}`}
														>
															<MessageResponse mode="static">
																{restoreMathEscapes(problem.solution)}
															</MessageResponse>
														</div>
														<details
															className="mt-3"
															data-testid={`rubric-${problem.id}`}
														>
															<summary className="cursor-pointer select-none text-xs uppercase tracking-wide text-muted-foreground">
																Rubric
															</summary>
															<div className="mt-2 lh-prose text-sm">
																<MessageResponse mode="static">
																	{restoreMathEscapes(problem.rubric)}
																</MessageResponse>
															</div>
														</details>
													</div>
												</div>
											)}
										</>
									)}
								</section>
							))}
						</div>
					</div>
				</div>
			</div>
		</div>
	);
}

export function PracticeExam({ initial }: { initial: ProblemSet }) {
	const [set, setSet] = useState<ProblemSet>(initial);
	const [drafts, setDrafts] = useState<Record<string, string>>({});
	const [submittingId, setSubmittingId] = useState<string | null>(null);
	const [submitErrors, setSubmitErrors] = useState<Record<string, string>>({});
	// Which problems' grade rows are LIVE (activity feed) — drives the
	// per-problem "Grading…" spinners and the status line.
	const [liveGradeIds, setLiveGradeIds] = useState<Set<string>>(new Set());
	// True from a successful submit until the feed shows no live grade
	// rows for this set — kept fresh across refetches (S7: the tick).
	const mounted = useRef(true);
	useEffect(() => {
		mounted.current = true;
		return () => {
			mounted.current = false;
		};
	}, []);

	const refetch = useCallback(async () => {
		try {
			const res = await fetch(`/api/practice/sets/${initial.id}`, {
				cache: "no-store",
			});
			if (!res.ok) return;
			const d = (await res.json()) as { set: ProblemSet };
			if (mounted.current) setSet(d.set);
		} catch {
			// transient fetch failures keep the last snapshot
		}
	}, [initial.id]);

	// PUSH (S7, 2026-10-02): the 2s grading-liveness interval is RETIRED —
	// the practice registry announces every grade-row transition
	// (activity-changed), and tick() reads exactly that liveness, so it
	// fires when truth moved: debounced (the S4 law) + on mount + on
	// resync. Ungated by design: a fresh grade registration must be seen
	// even from a fully-settled page (the old needsPoll gate would have
	// missed it — gradingLive fed the gate, and registration is what
	// flips it). The activity feed's practice rows are ROW-KEYED
	// (setId:grade:problemId) — the live rows name exactly which grades
	// are pending; a dropped grade (no live row) settles the page.
	const tick = useCallback(async () => {
		await refetch();
		try {
			const res = await fetch("/api/activity", { cache: "no-store" });
			if (!res.ok) return;
			const feed = (await res.json()) as {
				practice?: Array<{ id: string; kind: string }>;
			};
			if (mounted.current) {
				const prefix = `${initial.id}:grade:`;
				const pids = (feed.practice ?? [])
					.filter((row) => row.id.startsWith(prefix))
					.map((row) => row.id.slice(prefix.length));
				setLiveGradeIds(new Set(pids));
			}
		} catch {
			// keep the last liveness read
		}
	}, [refetch, initial.id]);
	const tickRef = useRef(tick);
	tickRef.current = tick;
	const tickDebounceRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
	useEffect(() => {
		void tickRef.current();
		return () => {
			if (tickDebounceRef.current) clearTimeout(tickDebounceRef.current);
		};
	}, []);
	useServerEvent("activity-changed", () => {
		if (tickDebounceRef.current) clearTimeout(tickDebounceRef.current);
		tickDebounceRef.current = setTimeout(() => {
			tickDebounceRef.current = undefined;
			void tickRef.current();
		}, 250);
	});
	useServerResync(() => void tickRef.current());

	// ONE attempt per problem (owner 2026-09-29): the submit posts THAT
	// problem's answer alone; the server refuses a second submission
	// forever after. On success the box locks (answer persisted) and the
	// reveal shows instantly; the grade arrives via the events channel.
	const submit = useCallback(
		async (problemId: string) => {
			if (submittingId !== null) return;
			const p = set.problems.find((q) => q.id === problemId);
			if (!p || p.answer !== undefined) return; // done problems never resubmit
			const text = drafts[problemId] ?? "";
			if (text.trim() === "") return;
			setSubmittingId(problemId);
			setSubmitErrors((prev) => {
				const next = { ...prev };
				delete next[problemId];
				return next;
			});
			try {
				const res = await fetch(`/api/practice/sets/${set.id}/answers`, {
					method: "POST",
					headers: { "content-type": "application/json" },
					body: JSON.stringify({ answers: [{ problemId, text }] }),
				});
				if (!res.ok) {
					const body = (await res.json().catch(() => ({}))) as {
						error?: string;
					};
					setSubmitErrors((prev) => ({
						...prev,
						[problemId]: body.error ?? `Submit failed (${res.status})`,
					}));
					setSubmittingId(null);
					return;
				}
				setSubmittingId(null);
				// The grade lands via the events channel: the grade row's register
				// announces activity-changed (S7), which triggers tick() above.
				await refetch();
			} catch {
				setSubmitErrors((prev) => ({
					...prev,
					[problemId]: "Submit failed — network error. Try again.",
				}));
				setSubmittingId(null);
			}
		},
		[submittingId, set, drafts, refetch],
	);

	return (
		<PracticeExamBody
			set={set}
			drafts={drafts}
			onDraft={(problemId, text) =>
				setDrafts((prev) => ({ ...prev, [problemId]: text }))
			}
			onSubmit={(problemId) => void submit(problemId)}
			submittingId={submittingId}
			submitErrors={submitErrors}
			liveGradeIds={liveGradeIds}
		/>
	);
}