spsays-training/app/(app)/quizzes/quizzes-list.tsx

"use client";

/**
 * /quizzes — every published quiz, with where you are in each.
 *
 * Reached from the Quizzes card on the search page. Quizzes are deliberately
 * not in search results: they're something to do, not something to look up.
 * Signed in only: visitors get the sign-in modal, and home if they dismiss it.
 */

import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { ClipboardCheck } from "lucide-react";
import { useSignedInPage } from "@/components/auth/use-signed-in-page";
import { quiz, quizActionLabel, type QuizCard } from "@/lib/quiz";
import { cn } from "@/lib/utils";

const KIND: Record<QuizCard["target_kind"], string> = {
  chapter: "Book chapter",
  lecture: "Lecture",
  conversation: "Conversation",
  standalone: "Quiz",
};

type Filter = "all" | "todo" | "done";

export function QuizzesList() {
  const { user } = useSignedInPage();
  const userId = user?.id;
  const [list, setList] = useState<QuizCard[] | null>(null);
  const [filter, setFilter] = useState<Filter>("all");

  useEffect(() => {
    if (!userId) return;
    let cancelled = false;
    quiz
      .list()
      .then((l) => !cancelled && setList(l))
      .catch(() => !cancelled && setList([]));
    return () => {
      cancelled = true;
    };
  }, [userId]);

  const shown = useMemo(
    () =>
      (list ?? []).filter((q) =>
        filter === "all"
          ? true
          : filter === "done"
            ? q.my.state === "completed"
            : q.my.state !== "completed",
      ),
    [list, filter],
  );

  return (
    <main className="mx-auto w-full max-w-3xl flex-1 px-4 py-6 sm:px-6 sm:py-10">
      <header className="mb-6">
        <h1 className="font-[family-name:var(--font-title)] text-2xl font-semibold text-foreground sm:text-3xl">
          Quizzes
        </h1>
        <p className="mt-1 text-sm text-muted-foreground">
          Test what you&apos;ve read and heard. Each quiz can be taken once, and
          only you can see your results.
        </p>
      </header>

      {user && (
        // Phones: three equal, thumb-sized tabs across the width. From sm up
        // they shrink back to compact pills.
        <div className="mb-4 grid grid-cols-3 gap-1.5 sm:flex sm:gap-1">
          {(
            [
              ["all", "All"],
              ["todo", "To do"],
              ["done", "Finished"],
            ] as const
          ).map(([k, label]) => (
            <button
              key={k}
              type="button"
              onClick={() => setFilter(k)}
              className={cn(
                "min-h-10 rounded-full px-4 py-2 text-[15px] font-medium transition-colors sm:min-h-0 sm:px-3 sm:py-1 sm:text-sm sm:font-normal",
                filter === k
                  ? "bg-primary text-primary-foreground dark:text-white"
                  : "bg-muted/60 text-muted-foreground hover:bg-muted hover:text-foreground sm:bg-transparent",
              )}
            >
              {label}
            </button>
          ))}
        </div>
      )}

      {!user ? null : list === null ? (
        <p className="text-sm text-muted-foreground">Loading…</p>
      ) : shown.length === 0 ? (
        <p className="text-sm text-muted-foreground">
          {list.length === 0
            ? "No quizzes yet — check back soon."
            : "Nothing here."}
        </p>
      ) : (
        // minmax(0,1fr) + min-w-0: grid items otherwise refuse to shrink
        // below their content, so one long word pushes a card off-screen.
        <ul className="grid grid-cols-1 gap-3 sm:grid-cols-2">
          {shown.map((q) => {
            const done = q.my.state === "completed";
            return (
              <li key={q.id} className="min-w-0">
                <Link
                  href={`/quizzes/${q.id}`}
                  className="flex h-full min-w-0 flex-col rounded-2xl border border-border bg-card p-4 transition-colors hover:border-primary/40 hover:bg-muted/30"
                >
                  <p className="text-xs font-medium text-primary">
                    {KIND[q.target_kind]}
                  </p>
                  <p className="mt-1 break-words font-semibold leading-snug text-foreground [overflow-wrap:anywhere]">
                    {q.title}
                  </p>
                  {q.target_title && (
                    <p className="mt-0.5 truncate text-sm text-muted-foreground">
                      {q.target_title}
                    </p>
                  )}
                  <div className="mt-auto flex flex-wrap items-center justify-between gap-x-3 gap-y-1 pt-4 text-xs">
                    <span className="text-muted-foreground">
                      {q.question_count}{" "}
                      {q.question_count === 1 ? "question" : "questions"}
                    </span>
                    <span
                      className={cn(
                        "inline-flex items-center gap-1 whitespace-nowrap font-medium",
                        done ? "text-muted-foreground" : "text-primary",
                      )}
                    >
                      <ClipboardCheck className="size-3.5" />
                      {quizActionLabel(q.my.state)}
                      {done &&
                        q.my.score !== undefined &&
                        ` · ${q.my.score}/${q.my.total}`}
                    </span>
                  </div>
                </Link>
              </li>
            );
          })}
        </ul>
      )}
    </main>
  );
}