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 { celebrate } from "@/lib/confetti";
import type { Activity, Deck } from "@/lib/schemas";
import { recordAttempt } from "@/lib/storage";
import { cn } from "@/lib/utils";
import { BoltIcon, FlameIcon } from "@/components/icons";
import { Button, ProgressBar } from "@/components/ui";

import { ResultsScreen } from "./ResultsScreen";

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

export function StudyFeed({ deck }: { deck: Deck }) {
  const [queue, setQueue] = useState<Activity[]>(deck.activities);
  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 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).
  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);
    };
  }, []);

  // 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 score = total > 0 ? (correct / total) * 100 : 0;
      recordAttempt(deck.id, { scorePercent: score, correct, total });
      void celebrate("big");
    }
  }, [finished, results, total, deck.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 } };
      });
      if (correct) {
        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 {
        setStreak(0);
      }
    },
    [streak],
  );

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

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

  const restart = useCallback(
    (activities: Activity[], retry: boolean) => {
      setQueue(activities);
      setResults({});
      setStreak(0);
      setRetryMode(retry);
      recordedRef.current = retry; // don't overwrite the best score with a retry run
      setIndex(0);
      requestAnimationFrame(() => goTo(0));
    },
    [goTo],
  );

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

  return (
    <div className="frost-bg fixed inset-0 flex flex-col">
      {/* Chrome ---------------------------------------------------- */}
      <header className="pt-safe absolute inset-x-0 top-0 z-30 px-3">
        <div className="glass mx-auto max-w-xl space-y-1.5 rounded-2xl px-3 py-2">
          <div className="flex items-center gap-3">
            <Link
              href="/"
              aria-label="Back to your library"
              className="grid size-9 shrink-0 place-items-center rounded-xl bg-white/80 text-sm font-bold text-frost-800 transition hover:bg-white dark:bg-white/10 dark:text-frost-100"
            >
              ✕
            </Link>
            <div className="min-w-0 flex-1">
              <ProgressBar
                value={progressValue}
                max={progressMax}
                label={`Activity ${progressValue} of ${progressMax}`}
              />
            </div>
            <div className="flex shrink-0 items-center gap-1.5">
              <span
                className={cn(
                  "inline-flex items-center gap-1 rounded-xl px-2 py-1 text-xs font-extrabold transition",
                  streak >= 3
                    ? "tint-peach"
                    : "glass-chip text-frost-600 dark:text-frost-200",
                )}
                title={`Answer streak: ${streak}`}
                aria-label={`Answer streak: ${streak}`}
              >
                <FlameIcon className="size-3.5" />
                {streak}
              </span>
              <span
                className="inline-flex items-center gap-1 rounded-xl bg-frost-500/15 px-2 py-1 text-xs font-extrabold text-frost-800 dark:text-frost-100"
                title={`XP earned: ${xp}`}
                aria-label={`XP earned: ${xp}`}
              >
                <BoltIcon className="size-3.5" />
                {xp}
              </span>
            </div>
          </div>
          <div className="flex items-center justify-between gap-2 text-[11px] font-semibold text-frost-600 dark:text-frost-300">
            <span className="min-w-0 truncate">{deck.title}</span>
            <span className="shrink-0">
              {retryMode ? "Retry · " : ""}
              {Math.min(index + 1, total)}/{total}
            </span>
          </div>
        </div>
      </header>

      {/* Feed ------------------------------------------------------ */}
      <div
        ref={scrollRef}
        data-testid="study-feed"
        className="no-scrollbar h-full snap-y snap-mandatory overflow-y-scroll overscroll-y-contain"
      >
        {queue.map((activity, activityIndex) => (
          <section
            key={activity.id}
            aria-label={`Activity ${activityIndex + 1} of ${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={deck.language}
                isLast={activityIndex === total - 1}
                onAnswered={(correct, meta) => handleAnswered(activity, correct, meta)}
                onNext={() => goTo(activityIndex + 1)}
              />
            </div>
          </section>
        ))}

        <section
          aria-label="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={deck}
              xp={xp}
              bestStreak={bestStreak}
              total={total}
              correct={correctCount}
              missed={missed}
              results={results}
              retryMode={retryMode}
              onRetryMissed={() => restart(missed, true)}
              onRestart={() => restart(deck.activities, false)}
            />
          </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"
          >
            <span className="rounded-full bg-frost-950/70 px-4 py-2 text-xs font-semibold text-white backdrop-blur">
              Swipe up for the next activity ↑
            </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="glass pointer-events-auto flex items-center gap-2 rounded-2xl px-2 py-1.5">
          <Button variant="ghost" size="sm" onClick={() => goTo(index - 1)} disabled={index === 0} aria-label="Previous activity">
            ↑
          </Button>
          <span className="px-2 text-xs font-semibold text-frost-600 dark:text-frost-300">
            {index + 1} / {slideCount}
          </span>
          <Button variant="ghost" size="sm" onClick={() => goTo(index + 1)} disabled={index >= slideCount - 1} aria-label="Next activity">
            ↓
          </Button>
        </div>
      </div>
    </div>
  );
}