freezmo/components/homework/HomeworkGuide.tsx

"use client";

import { motion } from "framer-motion";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";

import { ActivityRenderer } from "@/components/activities";
import { PromptCard, QuestionText } from "@/components/activities/shared";
import { XIcon } from "@/components/icons";
import { Button, ProgressBar } from "@/components/ui";
import { assembleSolution } from "@/lib/homework";
import { useI18n } from "@/lib/i18n";
import type { HomeworkGuideRecord, HomeworkStep } from "@/lib/schemas";
import { useWakeLock } from "@/lib/use-wake-lock";

import { CopyButton } from "./CopyButton";

/**
 * Mode 2: one step per screen in the same snap-feed as the study feed.
 * Each step explains what to do, reveals hints one at a time (nudge → hint →
 * the full answer), and can carry a checkpoint rendered by the shared activity
 * components. The last screen assembles the solution from the step answers.
 */
export function HomeworkGuide({
  record,
  onClose,
  onAgain,
  onNew,
  againLoading,
}: {
  record: HomeworkGuideRecord;
  onClose: () => void;
  onAgain: () => void;
  onNew: () => void;
  againLoading: boolean;
}) {
  const { t } = useI18n();
  /* Keep the screen awake while working through the guide. */
  useWakeLock(true);
  const steps = record.steps;
  const slideCount = steps.length + 1; // + the solution slide
  const [index, setIndex] = useState(0);
  const [revealed, setRevealed] = useState<Record<number, number>>({});
  const scrollRef = useRef<HTMLDivElement>(null);

  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],
  );

  // Track the visible slide (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, like the study feed.
  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();
        goTo(index + 1);
      } else if (event.key === "ArrowUp" || event.key === "PageUp" || event.key === "k") {
        event.preventDefault();
        goTo(index - 1);
      } else if (event.key === "Escape") {
        onClose();
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [goTo, index, onClose]);

  const solution = useMemo(() => assembleSolution(record), [record]);
  const progressValue = Math.min(index + 1, slideCount);
  const onSolution = index >= steps.length;

  const revealedCount = (stepIndex: number) => revealed[stepIndex] ?? 0;

  const revealNext = (stepIndex: number, hints: string[]) =>
    setRevealed((current) => ({
      ...current,
      [stepIndex]: Math.min((current[stepIndex] ?? 0) + 1, hints.length),
    }));

  const hintButtonLabel = (step: HomeworkStep, stepIndex: number) => {
    const count = revealedCount(stepIndex);
    if (count === 0) return t("homework.guide.hint");
    if (count === step.hints.length - 1) return t("homework.guide.hintAnswer");
    return t("homework.guide.hintMore");
  };

  return (
    <div className="frost-bg fixed inset-0 z-[45] flex flex-col">
      {/* chrome ------------------------------------------------------- */}
      <header className="pt-safe absolute inset-x-0 top-0 z-30 px-3">
        <div className="study-chrome mx-auto max-w-xl space-y-1.5 rounded-full px-3 py-2">
          <div className="flex items-center gap-3">
            <button
              type="button"
              onClick={onClose}
              aria-label={t("homework.guide.close")}
              className="grid size-9 shrink-0 place-items-center rounded-xl bg-[var(--surface-sunken)] text-[var(--text)] transition hover:bg-[var(--hover)]"
            >
              <XIcon className="size-4" />
            </button>
            <div className="min-w-0 flex-1">
              <ProgressBar
                value={progressValue}
                max={slideCount}
                label={t("homework.guide.stepOf", { n: progressValue, total: slideCount })}
              />
            </div>
          </div>
          <div className="flex items-center justify-between gap-2 text-[11px] font-semibold text-[var(--text-muted)]">
            <span className="min-w-0 truncate">{record.title}</span>
            <span className="shrink-0">
              {onSolution ? t("homework.guide.solution") : t("homework.guide.stepOf", { n: index + 1, total: steps.length })}
            </span>
          </div>
        </div>
      </header>

      {/* slides ------------------------------------------------------- */}
      <div
        ref={scrollRef}
        data-testid="homework-guide"
        className="no-scrollbar h-full snap-y snap-mandatory overflow-y-scroll overscroll-y-contain [overflow-anchor:none]"
      >
        {steps.map((step, stepIndex) => (
          <section
            key={stepIndex}
            aria-label={t("homework.guide.stepOf", { n: stepIndex + 1, total: steps.length })}
            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]">
              <div className="flex flex-wrap items-center gap-2">
                <span className="tint-sky inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold ring-1 ring-white/50 backdrop-blur-sm">
                  {t("homework.guide.stepOf", { n: stepIndex + 1, total: steps.length })}
                </span>
              </div>

              <PromptCard>
                <QuestionText>{step.title}</QuestionText>
                <p className="mt-2 text-[15px] leading-relaxed text-frost-700 dark:text-frost-200">
                  {step.explanation}
                </p>
              </PromptCard>

              {/* progressive hints */}
              <div className="space-y-2">
                {step.hints.slice(0, revealedCount(stepIndex)).map((hint, hintIndex) => (
                  <motion.div
                    key={hintIndex}
                    initial={{ opacity: 0, y: 8 }}
                    animate={{ opacity: 1, y: 0 }}
                    className="glass-chip rounded-2xl p-3 text-sm leading-relaxed text-[var(--text)]"
                  >
                    <span className="font-bold">{t("homework.guide.hintN", { n: hintIndex + 1 })}: </span>
                    {hint}
                  </motion.div>
                ))}
                {revealedCount(stepIndex) < step.hints.length ? (
                  <Button
                    variant="secondary"
                    className="touch-target"
                    onClick={() => revealNext(stepIndex, step.hints)}
                  >
                    {hintButtonLabel(step, stepIndex)}
                  </Button>
                ) : null}
              </div>

              {/* checkpoint or a plain next button */}
              {step.checkpoint ? (
                <div className="space-y-2">
                  <p className="text-[11px] font-semibold uppercase tracking-wider text-[var(--text-subtle)]">
                    {t("homework.guide.tryIt")}
                  </p>
                  <ActivityRenderer
                    activity={step.checkpoint}
                    active={index === stepIndex}
                    language={record.language}
                    isLast={stepIndex === steps.length - 1}
                    nextLabel={
                      stepIndex === steps.length - 1 ? t("homework.guide.showSolution") : t("homework.guide.next")
                    }
                    onAnswered={() => {
                      /* checkpoints are for the student, not for scoring */
                    }}
                    onNext={() => goTo(stepIndex + 1)}
                  />
                </div>
              ) : (
                <Button className="touch-target self-start" onClick={() => goTo(stepIndex + 1)}>
                  {stepIndex === steps.length - 1 ? t("homework.guide.showSolution") : t("homework.guide.next")}
                  <span aria-hidden>→</span>
                </Button>
              )}
            </div>
          </section>
        ))}

        {/* the assembled solution -------------------------------------- */}
        <section
          aria-label={t("homework.guide.solution")}
          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]">
            <div className="flex flex-wrap items-center gap-2">
              <span className="tint-mint inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold ring-1 ring-white/50 backdrop-blur-sm">
                {t("homework.guide.solution")}
              </span>
            </div>
            <PromptCard>
              <p className="whitespace-pre-wrap break-words text-[14.5px] leading-relaxed text-[var(--text)]">
                {solution}
              </p>
            </PromptCard>
            <p className="text-[12.5px] text-[var(--text-subtle)]">{t("homework.guide.solutionNote")}</p>
            <div className="flex flex-wrap items-start gap-2">
              <CopyButton text={solution} />
              <Button variant="secondary" className="touch-target" onClick={onAgain} loading={againLoading}>
                {t("homework.result.again")}
              </Button>
              <Button variant="ghost" className="touch-target" onClick={onNew}>
                {t("homework.result.new")}
              </Button>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}