spsays-training/components/quiz/quiz-result-view.tsx

"use client";

/**
 * Your finished attempt: the score, then every question with your answer,
 * the correct one, its explanation, and how long you took.
 *
 * Correct options are filled solid so they read at a glance; a wrong pick is
 * outlined in red. "Your answer" marks whatever you chose either way.
 */

import Link from "next/link";
import { Check, Clock, X } from "lucide-react";
import { RichText } from "@/lib/rich-text";
import type { QuizResult } from "@/lib/quiz";
import { cn } from "@/lib/utils";

/**
 * "8.4s" / "1m 12s" / "3h 20m" / "2d 4h". Hours past 23h 59m roll up into
 * days. Mirrors fmtMs in the admin's quizzes/labels.ts.
 */
export function fmtMs(ms?: number | null): string {
  if (ms == null) return "—";
  // Below 59.95s: one decimal place (anything higher would print "60.0s").
  if (ms < 59_950) return `${(ms / 1000).toFixed(1)}s`;
  // Whole seconds from here, so rounding can't print "1m 60s".
  const total = Math.round(ms / 1000);
  const d = Math.floor(total / 86_400);
  const h = Math.floor((total % 86_400) / 3600);
  const m = Math.floor((total % 3600) / 60);
  const s = total % 60;
  // The two largest units: 2d 4h · 3h 20m · 12m 5s.
  if (d > 0) return `${d}d ${h}h`;
  if (h > 0) return `${h}h ${m}m`;
  return `${m}m ${s}s`;
}

export function QuizResultView({ result }: { result: QuizResult }) {
  const pct = result.total
    ? Math.round((result.score / result.total) * 100)
    : 0;

  return (
    <div className="space-y-6">
      <section className="rounded-2xl border border-border bg-card p-5 text-center">
        <p className="text-xs font-medium uppercase tracking-wide text-primary">
          Your result
        </p>
        <p className="mt-2 text-4xl font-semibold tabular-nums text-foreground">
          {result.score}
          <span className="text-2xl text-muted-foreground">
            /{result.total}
          </span>
        </p>
        <p className="mt-1 text-sm text-muted-foreground">
          {pct}% correct · {fmtMs(result.total_ms)} in total
        </p>
        {result.quiz.target_path && (
          <Link
            href={result.quiz.target_path}
            className="mt-3 inline-block text-sm font-medium text-primary hover:underline"
          >
            Back to {result.quiz.target_title || "the reading"}
          </Link>
        )}
      </section>

      <ol className="space-y-4">
        {result.items.map((it, i) => (
          <li key={it.id} className="rounded-xl border border-border p-4">
            <div className="flex items-start justify-between gap-3">
              <p className="text-sm font-medium text-foreground">
                <span className="text-muted-foreground">{i + 1}. </span>
                <RichText text={it.prompt} />
              </p>
              <span
                className={cn(
                  "inline-flex shrink-0 items-center gap-1 text-xs",
                  it.is_correct ? "text-primary" : "text-destructive",
                )}
              >
                {it.is_correct ? (
                  <Check className="size-3.5" />
                ) : (
                  <X className="size-3.5" />
                )}
                {it.is_correct ? "Correct" : "Incorrect"}
              </span>
            </div>
            {it.multi && (
              <p className="mt-1 text-xs text-muted-foreground">
                Select all that apply
              </p>
            )}
            <ul className="mt-3 space-y-1.5">
              {it.options.map((o) => {
                const chosen = it.chosen_option_ids.includes(o.id);
                return (
                  <li
                    key={o.id}
                    className={cn(
                      "flex items-start gap-2 rounded-lg border px-3 py-2 text-sm",
                      o.is_correct
                        ? "border-primary bg-primary font-medium text-primary-foreground dark:text-white"
                        : chosen
                          ? "border-destructive/50 bg-destructive/10 text-foreground"
                          : "border-border text-muted-foreground",
                    )}
                  >
                    {o.is_correct ? (
                      <Check className="mt-0.5 size-3.5 shrink-0" strokeWidth={3} />
                    ) : chosen ? (
                      <X className="mt-0.5 size-3.5 shrink-0 text-destructive" />
                    ) : (
                      <span className="size-3.5 shrink-0" />
                    )}
                    <span className="min-w-0 flex-1">
                      <RichText text={o.body} />
                    </span>
                    {chosen && (
                      <span
                        className={cn(
                          "shrink-0 text-xs font-normal",
                          o.is_correct ? "opacity-85" : "text-muted-foreground",
                        )}
                      >
                        Your answer
                      </span>
                    )}
                  </li>
                );
              })}
            </ul>
            {it.explanation && (
              <p className="mt-3 rounded-lg bg-muted/40 px-3 py-2 text-sm text-muted-foreground">
                <RichText text={it.explanation} />
              </p>
            )}
            <p className="mt-2 flex items-center gap-1 text-xs text-muted-foreground">
              <Clock className="size-3" /> {fmtMs(it.response_ms)}
            </p>
          </li>
        ))}
      </ol>
    </div>
  );
}