import { prisma } from "@/lib/prisma";
import { notFound } from "next/navigation";
import Link from "next/link";

interface Props {
  params: Promise<{ quizId: string }>;
}

export default async function AdminQuizAttemptsPage({ params }: Props) {
  const { quizId } = await params;

  const quiz = await prisma.quiz.findUnique({
    where: { id: quizId },
    include: {
      questions: { orderBy: { order: "asc" } },
      attempts: { orderBy: { completedAt: "desc" } },
      lesson: {
        select: {
          title: true,
          module: {
            select: {
              course: { select: { title: true } },
            },
          },
        },
      },
    },
  });

  if (!quiz) notFound();

  const userIds = [...new Set(quiz.attempts.map((a) => a.userId))];
  const users = await prisma.user.findMany({
    where: { id: { in: userIds } },
    select: { id: true, name: true, email: true },
  });
  const userMap = Object.fromEntries(users.map((u) => [u.id, u]));

  return (
    <div className="p-8 max-w-4xl">
      <nav
        className="text-xs mb-6 uppercase tracking-widest"
        style={{ color: "var(--muted-foreground)" }}
      >
        <Link href="/admin/quizzes" className="hover:underline">
          Тесты
        </Link>
        <span className="mx-2">/</span>
        <span style={{ color: "var(--foreground)" }}>{quiz.lesson.title}</span>
      </nav>

      <div className="mb-6">
        <h1 className="text-lg font-bold">{quiz.lesson.title}</h1>
        <p className="text-xs mt-1 uppercase tracking-widest" style={{ color: "var(--muted-foreground)" }}>
          {quiz.lesson.module.course.title} · {quiz.questions.length} вопросов · {quiz.attempts.length} ответов
        </p>
      </div>

      {quiz.attempts.length === 0 ? (
        <p className="text-sm" style={{ color: "var(--muted-foreground)" }}>
          Ответов пока нет
        </p>
      ) : (
        <div className="space-y-4">
          {quiz.attempts.map((attempt) => {
            const answers = attempt.answers as Record<string, string>;
            const user = userMap[attempt.userId];
            const date = new Date(attempt.completedAt).toLocaleString("ru-RU", {
              day: "2-digit",
              month: "2-digit",
              year: "numeric",
              hour: "2-digit",
              minute: "2-digit",
            });

            return (
              <div
                key={attempt.id}
                className="px-4 py-4 space-y-3"
                style={{ border: "2px solid var(--border)" }}
              >
                <div className="flex items-center justify-between gap-2">
                  <div>
                    <p className="text-sm font-medium">{user?.name ?? "—"}</p>
                    <p className="text-xs" style={{ color: "var(--muted-foreground)" }}>
                      {user?.email ?? attempt.userId}
                    </p>
                  </div>
                  <span className="text-xs" style={{ color: "var(--muted-foreground)" }}>
                    {date}
                  </span>
                </div>

                <div className="space-y-2 pt-2" style={{ borderTop: "1px solid var(--border)" }}>
                  {quiz.questions.map((q, idx) => (
                    <div key={q.id}>
                      <p
                        className="text-xs font-medium mb-0.5"
                        style={{ color: "var(--muted-foreground)" }}
                      >
                        {idx + 1}. {q.text}
                      </p>
                      <p className="text-sm whitespace-pre-wrap">
                        {answers[q.id]?.trim() || <span style={{ color: "var(--muted-foreground)" }}>—</span>}
                      </p>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}