freezmo/components/StudyFeed.tsx

"use client";

import { AnimatePresence, motion } from "framer-motion";
import Link from "next/link";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";

import { ActivityRenderer } from "@/components/activities";
import { AiDisclaimer } from "@/components/AiDisclaimer";
import { celebrate } from "@/lib/confetti";
import { ApiError, generateDeck } from "@/lib/client-api";
import { materialiseActivities } from "@/lib/deck-ops";
import { haptic } from "@/lib/haptics";
import { recordAnswer } from "@/lib/history";
import { useI18n } from "@/lib/i18n";
import { withoutReported } from "@/lib/question-reports";
import type { Activity, Deck } from "@/lib/schemas";
import { recordAttempt, upsertDeck } from "@/lib/storage";
import { useWakeLock } from "@/lib/use-wake-lock";
import { cn } from "@/lib/utils";
import { BoltIcon, FlameIcon, XIcon } from "@/components/icons";
import { ReportQuestionButton } from "@/components/ReportQuestionButton";
import { Button, ProgressBar } from "@/components/ui";

import { ResultsScreen } from "./ResultsScreen";

export type AttemptResult = { correct: boolean; userAnswer?: string };

export function StudyFeed({ deck }: { deck: Deck }) {
  const { t } = useI18n();
  /* Keep the screen awake for the whole study session (feature-detected). */
  useWakeLock(true);
  const [currentDeck, setCurrentDeck] = useState(deck);
  // Reported questions never enter a session; a fully reported deck stays
  // studiable (withoutReported falls back to the full list).
  const [queue, setQueue] = useState<Activity[]>(() => withoutReported(deck.id, deck.activities));
  /** Ids reported during this run: skipped, so they are not "missed". */
  const [skipped, setSkipped] = useState<string[]>([]);
  const [index, setIndex] = useState(0);
  const [results, setResults] = useState<Record<string, AttemptResult>>({});
  const [xp, setXp] = useState(0);
  const [streak, setStreak] = useState(0);
  const [bestStreak, setBestStreak] = useState(0);
  const [retryMode, setRetryMode] = useState(false);
  const [regenerating, setRegenerating] = useState(false);
  const [regenerateError, setRegenerateError] = useState<string | null>(null);
  /** Bumped on every restart so the activity components remount fresh. */
  const [runId, setRunId] = useState(0);

  const scrollRef = useRef<HTMLDivElement>(null);
  const recordedRef = useRef(false);

  const total = queue.length;
  const slideCount = total + 1; // + results slide

  const goTo = useCallback((target: number) => {
    const container = scrollRef.current;
    if (!container) return;
    const clamped = Math.max(0, Math.min(target, slideCount - 1));
    container.scrollTo({ top: clamped * container.clientHeight, behavior: "smooth" });
  }, [slideCount]);

  const next = useCallback(() => goTo(index + 1), [goTo, index]);

  // Track which slide is visible (works for wheel, touch and programmatic
  // scroll). Re-attached whenever the scroller remounts on a new run (runId).
  useEffect(() => {
    const container = scrollRef.current;
    if (!container) return;
    let frame = 0;
    const onScroll = () => {
      cancelAnimationFrame(frame);
      frame = requestAnimationFrame(() => {
        const height = container.clientHeight || 1;
        const current = Math.round(container.scrollTop / height);
        setIndex((previous) => (previous === current ? previous : current));
      });
    };
    container.addEventListener("scroll", onScroll, { passive: true });
    return () => {
      container.removeEventListener("scroll", onScroll);
      cancelAnimationFrame(frame);
    };
  }, [runId]);

  // Keyboard navigation.
  useEffect(() => {
    const onKey = (event: KeyboardEvent) => {
      const target = event.target as HTMLElement | null;
      if (target && (/^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName) || target.isContentEditable)) return;
      if (event.metaKey || event.ctrlKey || event.altKey) return;
      if (event.key === "ArrowDown" || event.key === "PageDown" || event.key === "j") {
        event.preventDefault();
        next();
      } else if (event.key === "ArrowUp" || event.key === "PageUp" || event.key === "k") {
        event.preventDefault();
        goTo(index - 1);
      } else if (event.key === "Home") {
        event.preventDefault();
        goTo(0);
      } else if (event.key === "End") {
        event.preventDefault();
        goTo(slideCount - 1);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [goTo, index, next, slideCount]);

  const finished = index >= total;

  useEffect(() => {
    if (!finished) return;
    if (!retryMode && !recordedRef.current) {
      recordedRef.current = true;
      const answered = Object.values(results);
      const correct = answered.filter((entry) => entry.correct).length;
      const attempted = Math.max(0, total - skipped.length);
      const score = attempted > 0 ? (correct / attempted) * 100 : 0;
      // Only a run with at least one answer counts. Without this, the scroll
      // anchoring shift when a regenerated deck swaps in could fire a bogus
      // 0% attempt before the feed had snapped back to the first slide.
      if (answered.length > 0) {
        recordAttempt(currentDeck.id, { scorePercent: score, correct, total });
        haptic("celebrate");
        void celebrate("big");
      }
    }
  }, [finished, results, total, skipped.length, currentDeck.id, retryMode]);

  const handleAnswered = useCallback(
    (activity: Activity, correct: boolean, meta?: { userAnswer?: string }) => {
      setResults((current) => {
        if (current[activity.id]) return current; // first answer counts
        return { ...current, [activity.id]: { correct, userAnswer: meta?.userAnswer } };
      });
      // Every answer feeds the history, the SRS schedule and the mistakes set.
      recordAnswer({
        deckId: currentDeck.id,
        deckTitle: currentDeck.title,
        activityId: activity.id,
        type: activity.type,
        topic: activity.topic,
        correct,
      });
      if (correct) {
        haptic("success");
        const nextStreak = streak + 1;
        setStreak(nextStreak);
        setBestStreak((best) => Math.max(best, nextStreak));
        setXp((value) => value + activity.xp);
        if (nextStreak > 0 && nextStreak % 5 === 0) void celebrate("normal");
      } else {
        haptic("error");
        setStreak(0);
      }
    },
    [currentDeck.id, currentDeck.title, streak],
  );

  const missed = useMemo(
    () => queue.filter((activity) => !skipped.includes(activity.id) && !results[activity.id]?.correct),
    [queue, results, skipped],
  );

  /** What the results screen counts: reported cards were never attempted. */
  const attemptedTotal = Math.max(0, total - skipped.length);

  const correctCount = useMemo(
    () => queue.filter((activity) => results[activity.id]?.correct).length,
    [queue, results],
  );

  const restart = useCallback(
    (activities: Activity[], retry: boolean) => {
      setQueue(activities);
      setResults({});
      setSkipped([]);
      setStreak(0);
      setRetryMode(retry);
      recordedRef.current = retry; // don't overwrite the best score with a retry run
      // A new run: remount every activity (fresh state) and jump to the top
      // *before* the new slides render, so scroll anchoring can't hold the
      // old results position.
      const container = scrollRef.current;
      if (container) container.scrollTop = 0;
      setRunId((value) => value + 1);
      setIndex(0);
    },
    [],
  );

  // Whenever a run starts (including the first render), snap back to slide 1.
  useEffect(() => {
    const container = scrollRef.current;
    if (container) container.scrollTop = 0;
  }, [runId]);

  /** Rebuild the deck from its stored source notes and start it over. */
  const regenerate = useCallback(async () => {
    if (regenerating) return;
    const source = currentDeck.sourceText?.trim();
    if (!source) {
      setRegenerateError(t("deck.noSourceRegenerate"));
      return;
    }
    setRegenerating(true);
    setRegenerateError(null);
    try {
      const { deck: generated } = await generateDeck({
        text: source,
        difficulty: currentDeck.difficulty,
        language: currentDeck.language,
        count: Math.max(8, currentDeck.activities.length),
      });
      const activities = materialiseActivities(generated.activities, currentDeck.difficulty);
      const updated: Deck = {
        ...currentDeck,
        title: generated.title || currentDeck.title,
        subject: generated.subject ?? currentDeck.subject,
        summary: generated.summary ?? currentDeck.summary,
        language: generated.language ?? currentDeck.language,
        activities,
        attempts: 0,
        bestScore: undefined,
        updatedAt: Date.now(),
      };
      upsertDeck(updated);
      setCurrentDeck(updated);
      restart(activities, false);
    } catch (error) {
      setRegenerateError(error instanceof ApiError ? error.message : t("deck.couldNotRegenerate"));
    } finally {
      setRegenerating(false);
    }
  }, [currentDeck, regenerating, restart, t]);

  const progressValue = Math.min(index + 1, slideCount);
  const progressMax = slideCount;

  return (
    <div className="frost-bg overlay-open fixed inset-0 z-[45] flex flex-col fade-in-mobile">
      {/* Chrome ---------------------------------------------------- */}
      {/* One pill: round close button, title + position above the bar, and
          the streak/xp chips at the other end. Everything sits on the pill's
          centre line with even padding, so nothing crowds the rounded ends. */}
      <header className="pt-safe absolute inset-x-0 top-0 z-30 px-3">
        <div className="study-chrome mx-auto flex max-w-xl items-center gap-2.5 rounded-full px-2.5 py-2">
          <Link
            href="/"
            aria-label={t("feed.back")}
            title={t("feed.back")}
            className="grid size-10 shrink-0 place-items-center rounded-full bg-[var(--surface-sunken)] text-[var(--text)] transition hover:bg-[var(--hover)]"
          >
            <XIcon className="size-4" />
          </Link>

          <div className="min-w-0 flex-1">
            <div className="flex items-baseline justify-between gap-3">
              <span className="min-w-0 truncate text-[13px] font-semibold leading-tight text-[var(--text)]">
                {currentDeck.title}
              </span>
              <span className="shrink-0 text-[11.5px] font-bold tabular-nums text-[var(--text-muted)]">
                {retryMode ? t("feed.retry") : null}
                {Math.min(index + 1, total)}/{total}
              </span>
            </div>
            <ProgressBar
              className="mt-1.5"
              value={progressValue}
              max={progressMax}
              label={t("feed.activityOf", { n: progressValue, total: progressMax })}
            />
          </div>

          <div className="flex shrink-0 items-center gap-1.5">
            <span
              className={cn(
                "inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-extrabold tabular-nums transition",
                streak >= 3
                  ? "tint-peach"
                  : "bg-[var(--surface-sunken)] text-[var(--text-muted)]",
              )}
              title={t("feed.streak", { n: streak })}
              aria-label={t("feed.streak", { n: streak })}
            >
              <FlameIcon className="size-3.5" />
              {streak}
            </span>
            <span
              className="inline-flex items-center gap-1 rounded-full bg-[var(--surface-sunken)] px-2.5 py-1 text-xs font-extrabold tabular-nums text-[var(--text-muted)]"
              title={t("feed.xp", { n: xp })}
              aria-label={t("feed.xp", { n: xp })}
            >
              <BoltIcon className="size-3.5" />
              {xp}
            </span>
          </div>
        </div>
      </header>

      {/* Feed ------------------------------------------------------ */}
      {/* The scroller remounts on every run (key={runId}) so it always
          starts on the first slide with fresh scroll/snap state: a shrinking
          queue or an interrupted smooth scroll can never leave the feed on a
          stale, half-scrolled or blank position. */}
      <div
        key={runId}
        ref={scrollRef}
        data-testid="study-feed"
        className="no-scrollbar h-full snap-y snap-mandatory overflow-y-scroll overscroll-y-contain [overflow-anchor:none]"
      >
        {queue.map((activity, activityIndex) => (
          <section
            key={`${activity.id}-${runId}`}
            aria-label={t("feed.activityOf", { n: activityIndex + 1, total })}
            className="flex h-full snap-start snap-always items-stretch justify-center overflow-y-auto overscroll-y-contain"
          >
            <div className="mx-auto flex min-h-full w-full max-w-xl flex-col gap-4 px-4 pb-24 pt-24 [justify-content:safe_center]">
              <ActivityRenderer
                activity={activity}
                active={index === activityIndex}
                language={currentDeck.language}
                isLast={activityIndex === total - 1}
                onAnswered={(correct, meta) => handleAnswered(activity, correct, meta)}
                onNext={() => goTo(activityIndex + 1)}
              />
              {/* Under the card: disclaimer centred, report control in the
                  bottom-right corner (it used to sit in the top chrome). */}
              {!finished && index === activityIndex ? (
                <div className="grid grid-cols-[2.75rem_1fr_2.75rem] items-center gap-3">
                  <span aria-hidden />
                  <AiDisclaimer />
                  <div className="flex justify-end">
                    <ReportQuestionButton
                      deckId={currentDeck.id}
                      deckTitle={currentDeck.title}
                      activity={activity}
                      onSkip={() => {
                        setSkipped((current) => [...current, activity.id]);
                        goTo(activityIndex + 1);
                      }}
                    />
                  </div>
                </div>
              ) : (
                <AiDisclaimer />
              )}
            </div>
          </section>
        ))}

        <section
          aria-label={t("feed.results")}
          className="h-full snap-start snap-always overflow-y-auto overscroll-y-contain"
        >
          <div className="mx-auto flex min-h-full w-full max-w-xl flex-col gap-4 px-4 pb-24 pt-24 [justify-content:safe_center]">
            <ResultsScreen
              deck={currentDeck}
              xp={xp}
              bestStreak={bestStreak}
              total={attemptedTotal}
              correct={correctCount}
              missed={missed}
              results={results}
              retryMode={retryMode}
              onRetryMissed={() => restart(missed, true)}
              onRestart={() => restart(withoutReported(currentDeck.id, currentDeck.activities), false)}
              onRegenerate={regenerate}
              regenerating={regenerating}
              regenerateError={regenerateError}
            />
            <AiDisclaimer />
          </div>
        </section>
      </div>

      {/* Swipe hint on the very first screen ----------------------- */}
      <AnimatePresence>
        {index === 0 && Object.keys(results).length === 0 ? (
          <motion.div
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0 }}
            className="pointer-events-none absolute inset-x-0 bottom-6 z-20 flex justify-center sm:hidden"
          >
            <span className="rounded-full bg-frost-950/70 px-4 py-2 text-xs font-semibold text-white backdrop-blur">
              {t("feed.swipeUp")}
            </span>
          </motion.div>
        ) : null}
      </AnimatePresence>

      {/* Desktop next/prev buttons --------------------------------- */}
      <div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 hidden justify-center pb-4 sm:flex">
        <div className="study-chrome pointer-events-auto flex items-center gap-2 rounded-full px-2 py-1.5">
          <Button variant="ghost" size="sm" onClick={() => goTo(index - 1)} disabled={index === 0} aria-label={t("feed.prev")}>
            ↑
          </Button>
          <span className="px-2 text-xs font-semibold text-[var(--text)]">
            {index + 1} / {slideCount}
          </span>
          <Button variant="ghost" size="sm" onClick={() => goTo(index + 1)} disabled={index >= slideCount - 1} aria-label={t("feed.next")}>
            ↓
          </Button>
        </div>
      </div>
    </div>
  );
}