freezmo/components/ResultsScreen.tsx

"use client";

import Link from "next/link";
import { motion } from "framer-motion";

import type { Activity, Deck } from "@/lib/schemas";
import { downloadDeck } from "@/lib/storage";
import { cn } from "@/lib/utils";
import { BoltIcon, DownloadIcon, FlameIcon, HomeIcon, RefreshIcon, SnowflakeIcon } from "@/components/icons";
import { Button, Chip } from "@/components/ui";

import type { AttemptResult } from "./StudyFeed";

export function answerFor(activity: Activity): string {
  switch (activity.type) {
    case "flashcard":
      return activity.back;
    case "multiple_choice":
      return activity.options[activity.correctIndex];
    case "true_false":
      return activity.answer ? "True" : "False";
    case "fill_blank":
      return activity.answer;
    case "matching":
      return activity.pairs.map((pair) => `${pair.term} → ${pair.definition}`).join("; ");
    case "ordering":
      return activity.items.map((item, index) => `${index + 1}. ${item}`).join("  ");
    case "short_answer":
      return activity.referenceAnswer;
  }
}

export function promptFor(activity: Activity): string {
  switch (activity.type) {
    case "flashcard":
      return activity.front;
    case "multiple_choice":
      return activity.question;
    case "true_false":
      return activity.statement;
    case "fill_blank":
      return activity.sentence.replace(/_{2,}/, "____");
    case "matching":
      return activity.instruction;
    case "ordering":
      return activity.instruction;
    case "short_answer":
      return activity.question;
  }
}

export function ResultsScreen({
  deck,
  xp,
  bestStreak,
  total,
  correct,
  missed,
  results,
  retryMode,
  onRetryMissed,
  onRestart,
}: {
  deck: Deck;
  xp: number;
  bestStreak: number;
  total: number;
  correct: number;
  missed: Activity[];
  results: Record<string, AttemptResult>;
  retryMode: boolean;
  onRetryMissed: () => void;
  onRestart: () => void;
}) {
  const percent = total > 0 ? Math.round((correct / total) * 100) : 0;
  const perfect = missed.length === 0 && total > 0;
  const tone = percent >= 80 ? "emerald" : percent >= 50 ? "frost" : "amber";

  return (
    <div className="space-y-4">
      <motion.div
        initial={{ opacity: 0, scale: 0.96 }}
        animate={{ opacity: 1, scale: 1 }}
        className="card flex flex-col items-center gap-3 p-6 text-center"
      >
        <ScoreRing percent={percent} tone={tone} />
        <h1 className="text-2xl font-semibold text-frost-950 text-balance dark:text-frost-50">
          {perfect ? "Perfect freeze! 🧊" : percent >= 60 ? "Nicely done!" : "Good start — keep going!"}
        </h1>
        <p className="text-sm text-frost-600 dark:text-frost-300">
          {perfect
            ? `You aced all ${total} activities in “${deck.title}”.`
            : `You got ${correct} of ${total} right${retryMode ? " on the retry run" : ""}.`}
        </p>

        <div className="mt-1 flex flex-wrap justify-center gap-2">
          <Chip tone="accent">
            <BoltIcon className="size-3.5" /> {xp} XP earned
          </Chip>
          <Chip tone="warning">
            <FlameIcon className="size-3.5" /> Best streak {bestStreak}
          </Chip>
          <Chip tone="neutral">
            {[deck.difficulty].map((value) => value[0].toUpperCase() + value.slice(1))[0]} difficulty
          </Chip>
          {deck.bestScore !== undefined && !retryMode ? (
            <Chip tone="success">🏆 Best {deck.bestScore}%</Chip>
          ) : null}
        </div>
      </motion.div>

      {missed.length > 0 ? (
        <div className="card space-y-3 p-5">
          <h2 className="flex items-center gap-2 text-base font-bold text-frost-950 dark:text-frost-50">
            <SnowflakeIcon className="size-4" /> Missed items ({missed.length})
          </h2>
          <ul className="space-y-3">
            {missed.map((activity) => (
              <li
                key={activity.id}
                className="rounded-2xl border border-white/50 bg-white/45 backdrop-blur-xl p-3 text-sm dark:border-white/10 dark:bg-white/5"
              >
                <p className="font-semibold text-frost-950 dark:text-frost-50">{promptFor(activity)}</p>
                {results[activity.id]?.userAnswer ? (
                  <p className="mt-1 text-xs text-rose-600 dark:text-rose-300">
                    Your answer: {results[activity.id]?.userAnswer}
                  </p>
                ) : null}
                <p className="mt-1 text-xs text-emerald-700 dark:text-emerald-300">
                  <span className="font-bold">Answer: </span>
                  {answerFor(activity)}
                </p>
              </li>
            ))}
          </ul>
        </div>
      ) : null}

      <div className="flex flex-col gap-2">
        {missed.length > 0 ? (
          <Button size="lg" onClick={onRetryMissed}>
            <RefreshIcon className="size-5" /> Retry missed ones ({missed.length})
          </Button>
        ) : (
          <Button size="lg" variant="secondary" onClick={onRestart}>
            <RefreshIcon className="size-5" /> Study this deck again
          </Button>
        )}
        {missed.length > 0 ? (
          <Button size="lg" variant="secondary" onClick={onRestart}>
            <RefreshIcon className="size-5" /> Study the whole deck again
          </Button>
        ) : null}
        <div className="grid grid-cols-2 gap-2">
          <Button variant="ghost" onClick={() => downloadDeck(deck)}>
            <DownloadIcon className="size-4" /> Export JSON
          </Button>
          <Link
            href="/"
            className="inline-flex items-center justify-center gap-2 rounded-2xl bg-white/80 px-4 py-2.5 text-sm font-semibold text-frost-800 transition hover:bg-white dark:bg-white/10 dark:text-frost-100 dark:hover:bg-white/20"
          >
            <HomeIcon className="size-4" /> Library
          </Link>
        </div>
      </div>
    </div>
  );
}

function ScoreRing({ percent, tone }: { percent: number; tone: "emerald" | "frost" | "amber" }) {
  const radius = 52;
  const circumference = 2 * Math.PI * radius;
  const offset = circumference * (1 - Math.min(100, Math.max(0, percent)) / 100);
  const colors: Record<string, string> = {
    emerald: "stroke-emerald-500",
    frost: "stroke-accent-500",
    amber: "stroke-amber-500",
  };

  return (
    <div className="relative grid size-32 place-items-center">
      <svg viewBox="0 0 120 120" className="size-32 -rotate-90" aria-hidden>
        <circle cx="60" cy="60" r={radius} className="fill-none stroke-[var(--surface-sunken)]" strokeWidth="10" />
        <motion.circle
          cx="60"
          cy="60"
          r={radius}
          strokeWidth="10"
          strokeLinecap="round"
          className={cn("fill-none", colors[tone])}
          strokeDasharray={circumference}
          initial={{ strokeDashoffset: circumference }}
          animate={{ strokeDashoffset: offset }}
          transition={{ duration: 1, ease: "easeOut" }}
        />
      </svg>
      <div className="absolute flex flex-col items-center">
        <span className="text-3xl font-extrabold text-frost-950 dark:text-frost-50">{percent}%</span>
        <span className="text-[11px] font-semibold uppercase tracking-wide text-frost-500 dark:text-frost-400">
          score
        </span>
      </div>
    </div>
  );
}