spsays-admin/app/(dashboard)/quizzes/[id]/page.tsx

"use client";

import { useCallback, useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import Link from "next/link";
import { toast } from "sonner";
import { quizzes, AdminError, type Quiz } from "@/lib/api";
import { Button } from "@/components/ui/button";
import { useConfirm } from "@/components/confirm";
import { Can, useStaff } from "@/components/staff-context";
import { cn } from "@/lib/utils";
import { QuizEditor } from "../quiz-editor";
import { KIND_LABEL } from "../labels";
import { Participants, Responses } from "./results";
import { Clamp } from "@/components/ui/clamp";

type Tab = "edit" | "participants" | "responses";

export default function QuizDetailPage() {
  const { id } = useParams<{ id: string }>();
  const router = useRouter();
  const confirm = useConfirm();
  const { can } = useStaff();
  const [quiz, setQuiz] = useState<Quiz | null>(null);
  const [tab, setTab] = useState<Tab>("edit");
  const [busy, setBusy] = useState(false);

  const load = useCallback(() => {
    quizzes
      .get(id)
      .then(setQuiz)
      .catch((err) =>
        toast.error(
          err instanceof AdminError ? err.message : "Could not load the quiz",
        ),
      );
  }, [id]);

  useEffect(() => {
    load();
  }, [load]);

  if (!quiz) return <p className="text-sm text-muted-foreground">Loading…</p>;

  const togglePublish = async () => {
    const on = !quiz.published_at;
    if (
      !on &&
      !(await confirm({
        title: "Unpublish this quiz?",
        message:
          "It disappears from the app. Results so far are kept, and you can publish it again.",
        confirmLabel: "Unpublish",
      }))
    ) {
      return;
    }
    setBusy(true);
    try {
      setQuiz(await quizzes.setPublished(quiz.id, on));
      toast.success(on ? "Published" : "Unpublished");
    } catch (err) {
      toast.error(err instanceof AdminError ? err.message : "That didn't work");
    } finally {
      setBusy(false);
    }
  };

  const remove = async () => {
    if (
      !(await confirm({
        title: `Delete “${quiz.title}”?`,
        message:
          "It disappears from the app. Participants' results are kept on record.",
        confirmLabel: "Delete",
        destructive: true,
      }))
    ) {
      return;
    }
    try {
      await quizzes.remove(quiz.id);
      toast.success("Quiz deleted");
      router.replace("/quizzes");
    } catch (err) {
      toast.error(
        err instanceof AdminError ? err.message : "Could not delete the quiz",
      );
    }
  };

  const tabs: { key: Tab; label: string; show: boolean }[] = [
    {
      key: "edit",
      label: can("quizzes:write") ? "Edit" : "Questions",
      show: true,
    },
    {
      key: "participants",
      label: `Participants (${quiz.attempt_count ?? 0})`,
      show: can("quizzes:results"),
    },
    { key: "responses", label: "Responses", show: can("quizzes:results") },
  ];

  return (
    <div className="space-y-6">
      <header className="flex flex-wrap items-start justify-between gap-4">
        <div className="min-w-0 flex-1 basis-64">
          <Link
            href="/quizzes"
            className="text-xs text-muted-foreground hover:text-foreground"
          >
            ← Quizzes
          </Link>
          <h1 className="mt-1 text-xl font-semibold text-foreground">
            <Clamp lines={2}>{quiz.title}</Clamp>
          </h1>
          <Clamp
            lines={2}
            className="mt-1 text-sm text-muted-foreground"
            title={[quiz.target_title, quiz.target_path]
              .filter(Boolean)
              .join(" — ")}
          >
            {KIND_LABEL[quiz.target_kind]}
            {quiz.target_title && ` · ${quiz.target_title}`}
            {quiz.target_path && (
              <span className="ml-1 font-mono text-xs">
                ({quiz.target_path})
              </span>
            )}
          </Clamp>
        </div>
        <div className="flex shrink-0 gap-2">
          <Can perm="quizzes:write">
            <Button
              variant={quiz.published_at ? "outline" : "primary"}
              disabled={busy}
              onClick={() => void togglePublish()}
            >
              {quiz.published_at ? "Unpublish" : "Publish"}
            </Button>
          </Can>
          <Can perm="quizzes:delete">
            <Button variant="ghost" onClick={() => void remove()}>
              Delete
            </Button>
          </Can>
        </div>
      </header>

      <div className="flex gap-1 border-b border-border">
        {tabs
          .filter((t) => t.show)
          .map((t) => (
            <button
              key={t.key}
              type="button"
              onClick={() => setTab(t.key)}
              className={cn(
                "-mb-px border-b-2 px-3 py-2 text-sm transition-colors",
                tab === t.key
                  ? "border-primary font-medium text-foreground"
                  : "border-transparent text-muted-foreground hover:text-foreground",
              )}
            >
              {t.label}
            </button>
          ))}
      </div>

      {tab === "edit" && (
        <QuizEditor
          key={quiz.updated_at}
          initial={quiz}
          onSaved={setQuiz}
          readOnly={!can("quizzes:write")}
        />
      )}
      {tab === "participants" && <Participants quizId={quiz.id} />}
      {tab === "responses" && <Responses quizId={quiz.id} />}
    </div>
  );
}