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 { 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(
    () => (mistakes ? mistakeItems(answers, deckId) : dueItems(srs)),
    [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 (
      <main className="frost-bg grid min-h-dvh place-items-center px-4">
        <div className="w-full max-w-xl space-y-4" aria-busy="true" aria-label={title}>
          <div className="skeleton h-24 rounded-3xl" />
          <div className="skeleton h-12 rounded-2xl" />
        </div>
      </main>
    );
  }

  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 (
    <SessionFeed
      title={title}
      items={sessionItems}
      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>
      )}
    />
  );
}