freezmo/components/ReviewClient.tsx

"use client";

import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
import { useRouter } from "next/navigation";

import { SessionFeed, type SessionItem } from "@/components/SessionFeed";
import { isReported } from "@/lib/question-reports";
import { RouteLoading } from "@/components/RouteLoading";
import { Button } from "@/components/ui";
import { haptic } from "@/lib/haptics";
import { ensureLearningHydrated, learningStore, recordAnswer } from "@/lib/history";
import { useI18n } from "@/lib/i18n";
import { dueItems, mistakeItems, type ReviewItem } from "@/lib/learning";

/**
 * Review / mistakes session: built from due items (SRS) across every deck, or
 * from the activities whose latest answer was wrong. Every answer is recorded,
 * so mistakes clear themselves once answered correctly.
 */
export function ReviewClient({ mistakes, deckId }: { mistakes: boolean; deckId?: string }) {
  const { t } = useI18n();
  const router = useRouter();
  const answers = useSyncExternalStore(
    learningStore.subscribe,
    learningStore.getAnswersSnapshot,
    learningStore.getServerAnswers,
  );
  const srs = useSyncExternalStore(
    learningStore.subscribe,
    learningStore.getSrsSnapshot,
    learningStore.getServerSrs,
  );
  const [ready, setReady] = useState(false);
  /** Frozen at session start: answering must not shrink the live queue. */
  const [session, setSession] = useState<ReviewItem[] | null>(null);

  useEffect(() => {
    void ensureLearningHydrated().then(() => setReady(true));
  }, []);

  const items = useMemo(
    // Reported questions are out of rotation (see lib/question-reports).
    () =>
      (mistakes ? mistakeItems(answers, deckId) : dueItems(srs)).filter(
        (item) => !isReported(item.deck.id, item.activity.id),
      ),
    [mistakes, deckId, answers, srs],
  );

  useEffect(() => {
    if (!ready || session || items.length === 0) return;
    setSession(items);
  }, [ready, session, items]);

  const title = mistakes
    ? deckId
      ? t("review.mistakesDeck")
      : t("review.mistakesTitle")
    : t("review.title");

  if (!ready) {
    return <RouteLoading messageKey="review.preparing" />;
  }

  if (!session) {
    return (
      <main className="frost-bg grid min-h-dvh place-items-center px-4">
        <div className="card max-w-md space-y-3 p-6 text-center">
          <h1 className="text-xl font-extrabold text-[var(--text)]">{title}</h1>
          <p className="text-sm leading-relaxed text-[var(--text-muted)]">
            {mistakes ? t("review.noMistakes") : t("review.nothingDue")}
          </p>
          <Button size="lg" className="touch-target" onClick={() => router.push("/")}>
            {t("review.done")}
          </Button>
        </div>
      </main>
    );
  }

  const sessionItems: SessionItem[] = session.map(({ deck, activity }) => ({ deck, activity }));

  return (
    // The feed is a fixed overlay, but its content still needs a landmark.
    <main>
      <SessionFeed
        title={title}
        items={sessionItems}
        showDeck={!deckId}
        testId="review-feed"
        onExit={() => router.push("/")}
        onAnswered={(item, correct) => {
          haptic(correct ? "success" : "error");
          recordAnswer({
            deckId: item.deck.id,
            deckTitle: item.deck.title,
            activityId: item.activity.id,
            type: item.activity.type,
            topic: item.activity.topic,
            correct,
          });
        }}
        renderResults={({ correct, total, score }) => (
          <div className="card space-y-4 p-5 text-center">
            <p className="text-[11px] font-semibold uppercase tracking-wider text-[var(--text-subtle)]">{title}</p>
            <p className="text-[42px] font-extrabold leading-none text-[var(--text)]">{score}%</p>
            <p className="text-sm font-medium text-[var(--text-muted)]">
              {t("results.gotOf", { correct, total, retry: "" })}
            </p>
            <div className="flex flex-wrap justify-center gap-2">
              <Button size="lg" className="touch-target" onClick={() => router.push("/")}>
                {t("review.done")}
              </Button>
            </div>
          </div>
        )}
      />
    </main>
  );
}