freezmo/components/activities/Flashcard.tsx

"use client";

import { motion } from "framer-motion";
import { useAppReducedMotion as useReducedMotion } from "@/lib/motion-pref";
import { useState } from "react";

import { useI18n } from "@/lib/i18n";
import type { Activity } from "@/lib/schemas";
import { Button } from "@/components/ui";
import { SpeakButton } from "@/components/SpeakButton";

import {
  ActivityHeader,
  FeedbackPanel,
  Hint,
  PromptCard,
  QuestionText,
  type ActivityComponentProps,
} from "./shared";

type FlashcardActivity = Extract<Activity, { type: "flashcard" }>;

export function Flashcard({ activity, language, onAnswered, onNext, isLast, nextLabel }: ActivityComponentProps<FlashcardActivity>) {
  const { t } = useI18n();
  const reduceMotion = useReducedMotion();
  const [flipped, setFlipped] = useState(false);
  const [result, setResult] = useState<boolean | null>(null);
  /**
   * Which face is painted. The swap happens at the 90° edge-on moment instead
   * of relying on backface-visibility: a backdrop-filter layer (the card
   * glass) keeps rendering its backface on some GPU/compositing paths, which
   * showed the question mirrored over the answer.
   */
  const [face, setFace] = useState<"front" | "back">("front");

  const showFaceFor = (angle: number) => {
    const next = angle > 90 && angle < 270 ? "back" : "front";
    setFace((current) => (current === next ? current : next));
  };

  const settle = (correct: boolean) => {
    if (result !== null) return;
    setResult(correct);
    onAnswered(correct);
  };

  return (
    <>
      <ActivityHeader type="flashcard" topic={activity.topic} />
      <div className="flex items-center justify-between gap-2">
        <Hint>{flipped ? t("flashcard.didYouKnow") : t("flashcard.tapToFlip")}</Hint>
        <SpeakButton text={flipped ? activity.back : activity.front} language={language} />
      </div>

      <button
        type="button"
        onClick={() => setFlipped((value) => !value)}
        className="group relative block w-full text-left [perspective:1400px]"
        aria-label={flipped ? t("flashcard.flipBack") : t("flashcard.reveal")}
      >
        <motion.div
          animate={{ rotateX: flipped ? 180 : 0 }}
          transition={reduceMotion ? { duration: 0 } : { type: "spring", stiffness: 220, damping: 24 }}
          onUpdate={(latest) => showFaceFor(Number(latest.rotateX ?? 0))}
          onAnimationComplete={() => showFaceFor(flipped ? 180 : 0)}
          className="relative min-h-56 w-full [transform-style:preserve-3d]"
        >
          <PromptCard
            className="absolute inset-0 flex flex-col justify-center gap-3 group-hover:border-frost-300"
            style={{ visibility: face === "front" ? "visible" : "hidden" }}
          >
            <span className="text-xs font-bold uppercase tracking-widest text-frost-600 dark:text-frost-200">
              {t("flashcard.question")}
            </span>
            <QuestionText>{activity.front}</QuestionText>
            <span className="mt-2 text-xs font-semibold text-frost-400 dark:text-frost-400">
              {t("flashcard.tapFlip")}
            </span>
          </PromptCard>

          <div className="[transform:rotateX(180deg)]" style={{ visibility: face === "back" ? "visible" : "hidden" }}>
            <div className="card flex min-h-56 flex-col justify-center gap-3 px-5 py-6 sm:px-6">
              <span className="text-xs font-bold uppercase tracking-widest text-frost-600 dark:text-frost-200">
                {t("flashcard.answer")}
              </span>
              <p className="text-lg font-semibold leading-relaxed text-frost-950 dark:text-frost-50">
                {activity.back}
              </p>
            </div>
          </div>
        </motion.div>
      </button>

      {flipped && result === null ? (
        <div className="grid grid-cols-2 gap-3">
          <Button variant="secondary" size="lg" onClick={() => settle(false)}>
            {t("flashcard.notYet")}
          </Button>
          <Button variant="success" size="lg" onClick={() => settle(true)}>
            {t("flashcard.knewIt")}
          </Button>
        </div>
      ) : null}

      {result !== null ? (
        <FeedbackPanel
          activity={activity}
          correct={result}
          explanation={activity.explanation}
          xp={activity.xp}
          isLast={isLast}
          nextLabel={nextLabel}
          headline={result ? t("flashcard.frozenSolid") : t("flashcard.keepPile")}
          onNext={onNext}
        />
      ) : null}
    </>
  );
}