"use client";

import { useRouter, useParams } from "next/navigation";
import {
  ArrowLeft,
  User,
  Mail,
  CheckCircle,
  XCircle,
  MinusCircle,
  ClipboardList,
  Award,
  Calendar,
  Trophy,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";
import { useAdminStudentExamDetail } from "@/lib/api/hooks/useExam";
import type { ReviewQuestion } from "@/types/api";

const OPTION_LABELS = ["", "A", "B", "C", "D"];

function getAnswerText(q: ReviewQuestion, answer: number): string {
  if (answer === 0) return "Skipped";
  if (answer === 1) return q.optionA;
  if (answer === 2) return q.optionB;
  if (answer === 3) return q.optionC;
  if (answer === 4) return q.optionD;
  return "Unknown";
}

const GRADE_COLORS: Record<string, string> = {
  A: "border-green-500",
  B: "border-blue-500",
  C: "border-yellow-500",
  D: "border-orange-500",
  F: "border-red-500",
};

const GRADE_TEXT_COLORS: Record<string, string> = {
  A: "text-green-400",
  B: "text-blue-400",
  C: "text-yellow-400",
  D: "text-orange-400",
  F: "text-red-400",
};

export default function StudentExamDetailPage() {
  const router = useRouter();
  const params = useParams();
  const examId = params.examId as string;
  const studentId = params.studentId as string;

  const { data, isLoading, isError } = useAdminStudentExamDetail(examId, studentId);

  if (isLoading) {
    return (
      <div className="flex justify-center py-20">
        <Spinner className="size-8 text-blue-500" />
      </div>
    );
  }

  if (isError || !data) {
    return (
      <div className="flex flex-col items-center justify-center py-20 gap-4 text-center">
        <XCircle className="size-12 text-red-400" />
        <p className="text-red-400 text-lg">Result not found</p>
        <Button onClick={() => router.back()} variant="secondary">
          Go Back
        </Button>
      </div>
    );
  }

  const { exam, student, result, review } = data;
  const passed = result.status === "Passed";
  const totalQuestions = review.length;
  const correct = result.correctAnswers;
  const unanswered = review.filter((q) => q.studentAnswer === 0).length;
  const incorrect = totalQuestions - correct - unanswered;

  const gradeColor = GRADE_COLORS[result.grade] ?? GRADE_COLORS.F;
  const gradeTextColor = GRADE_TEXT_COLORS[result.grade] ?? GRADE_TEXT_COLORS.F;

  return (
    <div className="space-y-6 sm:space-y-8">
      {/* Back */}
      <button
        onClick={() => router.push(`/admin/course/exam/${examId}/results`)}
        className="flex items-center gap-1.5 text-gray-400 hover:text-white text-sm transition-colors"
      >
        <ArrowLeft className="size-4" />
        Back to Exam Results
      </button>

      {/* Student + Exam Header */}
      <div className="flex flex-col lg:flex-row gap-4 sm:gap-6">
        {/* Student Info */}
        <div className="flex-1 p-6 bg-gradient-to-br from-gray-900 to-black border border-gray-800 rounded-xl">
          <div className="flex items-center gap-4 mb-4">
            <div className="w-14 h-14 bg-blue-500/20 rounded-full flex items-center justify-center">
              <User className="size-7 text-blue-400" />
            </div>
            <div className="min-w-0">
              <h1 className="text-xl sm:text-2xl font-bold text-white truncate">{student.fullName}</h1>
              <p className="text-gray-400 text-sm flex items-center gap-1.5">
                <Mail className="size-3.5" />
                {student.email}
              </p>
            </div>
          </div>
          <div className="flex items-center gap-4 flex-wrap text-sm text-gray-400">
            <span className="flex items-center gap-1.5">
              <ClipboardList className="size-4" />
              {exam.title}
            </span>
            <span className="flex items-center gap-1.5">
              <Calendar className="size-4" />
              {new Date(result.submittedAt).toLocaleDateString()}
            </span>
          </div>
        </div>

        {/* Grade Card */}
        <div className={`w-full lg:w-48 p-6 bg-gradient-to-br from-gray-900 to-black border rounded-xl text-center flex flex-col items-center justify-center ${gradeColor}`}>
          <Trophy className={`size-8 mb-2 ${gradeTextColor}`} />
          <p className="text-5xl font-black text-white">{result.grade}</p>
          <p className="text-white text-lg font-semibold mt-1">{result.percentage}%</p>
          <StatusBadgeInline status={result.status} />
        </div>
      </div>

      {/* Stats Row */}
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4">
        <div className="p-4 bg-gradient-to-br from-gray-900 to-black border border-gray-800 rounded-xl text-center">
          <p className="text-gray-500 text-xs mb-1">Score</p>
          <p className="text-white text-xl font-bold">{result.score}/{result.totalMarks}</p>
        </div>
        <div className="p-4 bg-gradient-to-br from-gray-900 to-black border border-green-500/30 rounded-xl text-center">
          <CheckCircle className="size-5 text-green-500 mx-auto mb-1" />
          <p className="text-gray-500 text-xs mb-1">Correct</p>
          <p className="text-white text-xl font-bold">{correct}</p>
        </div>
        <div className="p-4 bg-gradient-to-br from-gray-900 to-black border border-red-500/30 rounded-xl text-center">
          <XCircle className="size-5 text-red-500 mx-auto mb-1" />
          <p className="text-gray-500 text-xs mb-1">Incorrect</p>
          <p className="text-red-400 text-xl font-bold">{incorrect}</p>
        </div>
        <div className="p-4 bg-gradient-to-br from-gray-900 to-black border border-gray-700 rounded-xl text-center">
          <MinusCircle className="size-5 text-gray-500 mx-auto mb-1" />
          <p className="text-gray-500 text-xs mb-1">Unanswered</p>
          <p className="text-white text-xl font-bold">{unanswered}</p>
        </div>
      </div>

      {/* Detailed Review */}
      <div>
        <h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
          <ClipboardList className="size-5 text-gray-400" />
          Question-by-Question Review
        </h2>
        <div className="space-y-3">
          {review.map((q) => {
            const skipped = q.studentAnswer === 0;
            return (
              <div
                key={q.id}
                className={`p-4 sm:p-5 bg-gradient-to-br from-gray-900 to-black border rounded-xl ${
                  q.isCorrect
                    ? "border-green-500/30"
                    : skipped
                    ? "border-gray-700"
                    : "border-red-500/30"
                }`}
              >
                {/* Question header */}
                <div className="flex items-start justify-between gap-3 mb-3">
                  <div className="flex items-start gap-2 min-w-0">
                    {q.isCorrect ? (
                      <CheckCircle className="size-5 text-green-500 shrink-0 mt-0.5" />
                    ) : (
                      <XCircle className={`size-5 shrink-0 mt-0.5 ${skipped ? "text-gray-500" : "text-red-500"}`} />
                    )}
                    <div>
                      <p className="text-white font-medium text-sm">
                        Q{q.number}. {q.question}
                      </p>
                    </div>
                  </div>
                  <span className="text-gray-500 text-xs shrink-0">{q.marks} marks</span>
                </div>

                {/* Options */}
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 ml-7">
                  {[
                    { key: 1, label: "A", val: q.optionA },
                    { key: 2, label: "B", val: q.optionB },
                    { key: 3, label: "C", val: q.optionC },
                    { key: 4, label: "D", val: q.optionD },
                  ].filter(o => o.val).map((o) => {
                    const isCorrectAnswer = q.correctAnswer === o.key;
                    const isStudentAnswer = q.studentAnswer === o.key;
                    let bg = "bg-gray-800/50 text-gray-400";
                    if (isCorrectAnswer) bg = "bg-green-500/15 border border-green-500/40 text-green-400";
                    if (isStudentAnswer && !q.isCorrect) bg = "bg-red-500/15 border border-red-500/40 text-red-400";
                    if (isStudentAnswer && q.isCorrect) bg = "bg-green-500/15 border border-green-500/40 text-green-400";

                    return (
                      <div key={o.key} className={`px-3 py-2 rounded-lg text-xs flex items-center gap-2 ${bg}`}>
                        <span className="font-bold">{o.label}.</span>
                        <span className="flex-1">{o.val}</span>
                        {isCorrectAnswer && <CheckCircle className="size-3.5 text-green-500 shrink-0" />}
                        {isStudentAnswer && !q.isCorrect && <XCircle className="size-3.5 text-red-500 shrink-0" />}
                      </div>
                    );
                  })}
                </div>

                {/* Summary line */}
                <div className="ml-7 mt-3 text-xs">
                  {skipped ? (
                    <p className="text-gray-500">Student did not answer this question</p>
                  ) : q.isCorrect ? (
                    <p className="text-green-400">
                      Answered correctly: {OPTION_LABELS[q.studentAnswer]}. {getAnswerText(q, q.studentAnswer)}
                    </p>
                  ) : (
                    <p className="text-red-400">
                      Student answered: {OPTION_LABELS[q.studentAnswer]}. {getAnswerText(q, q.studentAnswer)}
                      <span className="text-gray-500"> — Correct: </span>
                      <span className="text-green-400">
                        {OPTION_LABELS[q.correctAnswer]}. {getAnswerText(q, q.correctAnswer)}
                      </span>
                    </p>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function StatusBadgeInline({ status }: { status: "Passed" | "Failed" }) {
  const passed = status === "Passed";
  return (
    <span
      className={`mt-2 px-3 py-1 rounded-full text-xs font-semibold ${
        passed
          ? "bg-green-500/20 text-green-400"
          : "bg-red-500/20 text-red-400"
      }`}
    >
      {status}
    </span>
  );
}