"use client";

import * as React from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import {
  Clock,
  Flag,
  ChevronLeft,
  ChevronRight,
  CheckCircle2,
  AlertTriangle,
  Award,
  HelpCircle,
  Sparkles,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Modal } from "@/components/ui/modal";

interface CbtRunnerClientProps {
  quizId: string;
  quizInfo: any;
  studentName: string;
}

export default function CbtRunnerClient({
  quizId,
  quizInfo,
  studentName,
}: CbtRunnerClientProps) {
  const router = useRouter();

  // State
  const [loading, setLoading] = React.useState(true);
  const [quiz, setQuiz] = React.useState<any | null>(null);
  const [attempt, setAttempt] = React.useState<any | null>(null);
  const [currentIndex, setCurrentIndex] = React.useState(0);
  const [answers, setAnswers] = React.useState<{ [qId: string]: { selectedOptionId?: string; textAnswer?: string } }>({});
  const [flagged, setFlagged] = React.useState<Set<string>>(new Set());
  const [remainingSeconds, setRemainingSeconds] = React.useState(3600);
  const [confirmModalOpen, setConfirmModalOpen] = React.useState(false);
  const [isFinishing, setIsFinishing] = React.useState(false);
  const [finalResult, setFinalResult] = React.useState<any | null>(null);

  // Initialize Exam Session
  React.useEffect(() => {
    async function startQuiz() {
      try {
        const res = await fetch(`/api/quizzes/${quizId}/start`, { method: "POST" });
        const data = await res.json();
        if (res.ok && data.success) {
          setQuiz(data.data.quiz);
          setAttempt(data.data.attempt);
          setRemainingSeconds(data.data.attempt.remainingSeconds || 3600);

          // Populate existing answers
          const ansMap: any = {};
          data.data.attempt.answers?.forEach((a: any) => {
            ansMap[a.questionId] = {
              selectedOptionId: a.selectedOptionId || undefined,
              textAnswer: a.textAnswer || undefined,
            };
          });
          setAnswers(ansMap);

          if (data.data.attempt.isCompleted) {
            setFinalResult({
              totalScore: data.data.attempt.totalScore,
              passingScore: data.data.quiz.passingScore,
              isPassed: (data.data.attempt.totalScore || 0) >= data.data.quiz.passingScore,
            });
          }
        } else {
          alert(data.error || "Gagal memulai ujian.");
        }
      } catch (err) {
        alert("Terjadi kesalahan jaringan.");
      } finally {
        setLoading(false);
      }
    }
    startQuiz();
  }, [quizId]);

  // Countdown timer
  React.useEffect(() => {
    if (loading || finalResult || remainingSeconds <= 0) return;

    const timer = setInterval(() => {
      setRemainingSeconds((prev) => {
        if (prev <= 1) {
          clearInterval(timer);
          // auto submit
          handleFinishQuiz();
          return 0;
        }
        return prev - 1;
      });
    }, 1000);

    return () => clearInterval(timer);
  }, [loading, finalResult, remainingSeconds]);

  // Auto-save answer to server
  const saveAnswerToServer = async (questionId: string, payload: { selectedOptionId?: string; textAnswer?: string }) => {
    if (!attempt?.id) return;
    try {
      await fetch(`/api/quizzes/${quizId}/answer`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          attemptId: attempt.id,
          questionId,
          selectedOptionId: payload.selectedOptionId,
          textAnswer: payload.textAnswer,
        }),
      });
    } catch (e) {
      console.error("Auto save failed:", e);
    }
  };

  const handleSelectOption = (questionId: string, optionId: string) => {
    const updated = { ...answers, [questionId]: { ...answers[questionId], selectedOptionId: optionId } };
    setAnswers(updated);
    saveAnswerToServer(questionId, { selectedOptionId: optionId });
  };

  const handleTextAnswerChange = (questionId: string, text: string) => {
    const updated = { ...answers, [questionId]: { ...answers[questionId], textAnswer: text } };
    setAnswers(updated);
    saveAnswerToServer(questionId, { textAnswer: text });
  };

  const toggleFlag = (questionId: string) => {
    setFlagged((prev) => {
      const next = new Set(prev);
      if (next.has(questionId)) next.delete(questionId);
      else next.add(questionId);
      return next;
    });
  };

  const handleFinishQuiz = async () => {
    if (!attempt?.id) return;
    setIsFinishing(true);

    try {
      const res = await fetch(`/api/quizzes/${quizId}/finish`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ attemptId: attempt.id }),
      });

      const data = await res.json();
      setIsFinishing(false);
      setConfirmModalOpen(false);

      if (res.ok && data.success) {
        setFinalResult(data.data);
      } else {
        alert(data.error || "Gagal mengakhiri ujian.");
      }
    } catch (err) {
      setIsFinishing(false);
      alert("Terjadi gangguan saat mengirim ujian.");
    }
  };

  if (loading) {
    return (
      <div className="p-16 text-center text-xs text-slate-500 flex flex-col items-center justify-center gap-3">
        <span className="h-8 w-8 border-3 border-blue-600 border-t-transparent rounded-full animate-spin" />
        <p className="font-semibold text-slate-700">Mempersiapkan Lembar Soal Ujian CBT...</p>
      </div>
    );
  }

  // If already finished / showing results
  if (finalResult) {
    return (
      <Card className="max-w-xl mx-auto p-8 text-center space-y-6">
        <div className="h-16 w-16 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center mx-auto shadow-inner">
          <Award className="h-8 w-8" />
        </div>

        <div className="space-y-2">
          <h2 className="text-2xl font-black text-slate-900">
            Ujian Telah Selesai!
          </h2>
          <p className="text-xs text-slate-500">
            Jawaban Anda telah tersimpan secara aman di server CBT SMAN 3 OKU.
          </p>
        </div>

        <div className="p-6 rounded-2xl bg-slate-50 border border-slate-200 space-y-3">
          <span className="text-xs font-semibold text-slate-500 uppercase tracking-wider">
            Total Perolehan Skor
          </span>
          <p className="text-5xl font-black text-blue-600">
            {finalResult.totalScore}
          </p>
          <div className="flex items-center justify-center gap-2 pt-1">
            <Badge variant={finalResult.isPassed ? "success" : "warning"}>
              {finalResult.isPassed ? "LULUS KKM" : "REMEDIAL"}
            </Badge>
            <span className="text-xs text-slate-500">
              (Batas KKM: {finalResult.passingScore} Poin)
            </span>
          </div>
        </div>

        <div className="pt-2 flex justify-center gap-3">
          <Link href="/student/quizzes">
            <Button size="md" className="font-bold text-xs">
              Kembali ke Daftar Kuis
            </Button>
          </Link>
        </div>
      </Card>
    );
  }

  const questions = quiz?.questions || [];
  const currentQuestion = questions[currentIndex];
  if (!currentQuestion) return null;

  const currentAnswer = answers[currentQuestion.id] || {};
  const isCurrentFlagged = flagged.has(currentQuestion.id);

  // Stats for palette
  const answeredCount = questions.filter((q: any) => {
    const a = answers[q.id];
    return a && (a.selectedOptionId || (a.textAnswer && a.textAnswer.trim()));
  }).length;

  // Format Time
  const hours = Math.floor(remainingSeconds / 3600);
  const minutes = Math.floor((remainingSeconds % 3600) / 60);
  const seconds = remainingSeconds % 60;
  const timeStr = `${hours > 0 ? `${hours}:` : ""}${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
  const isTimeLow = remainingSeconds < 300; // < 5 minutes

  return (
    <div className="space-y-4">
      {/* TOP CBT HEADER BAR */}
      <div className="p-4 rounded-2xl bg-white border border-slate-200 shadow-sm flex flex-col sm:flex-row sm:items-center justify-between gap-3">
        <div className="flex items-center gap-3">
          <div className="h-10 w-10 rounded-xl bg-blue-950 p-1 flex items-center justify-center shadow-sm shrink-0">
            <img
              src="/images/logo-sman3oku.svg"
              alt="Logo"
              className="h-8 w-8 object-contain"
            />
          </div>
          <div>
            <h3 className="text-sm font-black text-slate-900 tracking-tight">
              {quiz.title}
            </h3>
            <p className="text-[11px] text-slate-500">
              Peserta: <strong className="text-slate-800">{studentName}</strong> • {quizInfo.teacherSubject.subject.name}
            </p>
          </div>
        </div>

        {/* TIMER DISPLAY */}
        <div
          className={`flex items-center gap-2 px-4 py-2 rounded-xl border font-mono font-bold text-sm shadow-sm transition-all ${
            isTimeLow
              ? "bg-rose-50 border-rose-300 text-rose-700 animate-pulse"
              : "bg-blue-50 border-blue-200 text-blue-900"
          }`}
        >
          <Clock className="h-4 w-4" />
          <span>Sisa Waktu: {timeStr}</span>
        </div>
      </div>

      {/* MAIN 2-COLUMN CBT WORKSPACE */}
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
        {/* LEFT 3 COLS: Question Display Area */}
        <div className="lg:col-span-3 space-y-4">
          <Card className="min-h-[420px] flex flex-col justify-between">
            <div>
              {/* Question Header */}
              <div className="flex items-center justify-between border-b border-slate-100 p-5 pb-3">
                <div className="flex items-center gap-2">
                  <span className="h-7 w-7 rounded-lg bg-blue-600 text-white font-black text-xs flex items-center justify-center">
                    {currentIndex + 1}
                  </span>
                  <span className="text-xs font-bold text-slate-700">
                    Soal No. {currentIndex + 1} dari {questions.length}
                  </span>
                </div>

                <div className="flex items-center gap-2">
                  <span className="text-xs font-mono text-slate-400">
                    Bobot: {currentQuestion.scoreWeight} Poin
                  </span>
                  <Button
                    size="sm"
                    variant={isCurrentFlagged ? "gold" : "outline"}
                    onClick={() => toggleFlag(currentQuestion.id)}
                    className="text-xs font-bold"
                  >
                    <Flag className="mr-1.5 h-3.5 w-3.5" />
                    {isCurrentFlagged ? "Ragu-ragu (Ditandai)" : "Tandai Ragu-ragu"}
                  </Button>
                </div>
              </div>

              {/* Question Content */}
              <div className="p-6 space-y-6">
                <div className="text-sm font-semibold text-slate-800 leading-relaxed whitespace-pre-wrap">
                  {currentQuestion.question}
                </div>

                {/* Options: Multiple Choice / True-False */}
                {(currentQuestion.type === "MULTIPLE_CHOICE" ||
                  currentQuestion.type === "TRUE_FALSE") && (
                  <div className="space-y-2.5">
                    {currentQuestion.options?.map((opt: any) => {
                      const isSelected = currentAnswer.selectedOptionId === opt.id;
                      return (
                        <button
                          key={opt.id}
                          type="button"
                          onClick={() => handleSelectOption(currentQuestion.id, opt.id)}
                          className={`w-full text-left p-3.5 rounded-xl border flex items-center gap-3 transition-all ${
                            isSelected
                              ? "bg-blue-50 border-blue-500 shadow-sm text-blue-950 font-bold"
                              : "bg-white border-slate-200 text-slate-700 hover:bg-slate-50 hover:border-slate-300"
                          }`}
                        >
                          <span
                            className={`h-6 w-6 rounded-full flex items-center justify-center text-xs font-bold shrink-0 transition-colors ${
                              isSelected
                                ? "bg-blue-600 text-white"
                                : "bg-slate-100 text-slate-600"
                            }`}
                          >
                            {opt.label}
                          </span>
                          <span className="text-xs leading-relaxed flex-1">
                            {opt.content}
                          </span>
                        </button>
                      );
                    })}
                  </div>
                )}

                {/* Option: Short Answer */}
                {currentQuestion.type === "SHORT_ANSWER" && (
                  <div className="space-y-1.5">
                    <label className="text-xs font-bold text-slate-700">
                      Tuliskan Jawaban Singkat Anda:
                    </label>
                    <input
                      type="text"
                      placeholder="Ketik jawaban singkat di sini..."
                      value={currentAnswer.textAnswer || ""}
                      onChange={(e) => handleTextAnswerChange(currentQuestion.id, e.target.value)}
                      className="w-full text-xs p-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-blue-500 font-semibold"
                    />
                  </div>
                )}

                {/* Option: Essay */}
                {currentQuestion.type === "ESSAY" && (
                  <div className="space-y-1.5">
                    <label className="text-xs font-bold text-slate-700">
                      Tuliskan Jawaban Uraian / Esai Anda:
                    </label>
                    <textarea
                      rows={6}
                      placeholder="Ketik uraian jawaban secara terstruktur di sini..."
                      value={currentAnswer.textAnswer || ""}
                      onChange={(e) => handleTextAnswerChange(currentQuestion.id, e.target.value)}
                      className="w-full text-xs p-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-blue-500 leading-relaxed"
                    />
                  </div>
                )}
              </div>
            </div>

            {/* Bottom Navigation Buttons */}
            <div className="flex items-center justify-between border-t border-slate-100 p-4">
              <Button
                size="sm"
                variant="outline"
                disabled={currentIndex === 0}
                onClick={() => setCurrentIndex(currentIndex - 1)}
                className="text-xs font-bold"
              >
                <ChevronLeft className="mr-1 h-4 w-4" />
                Soal Sebelumnya
              </Button>

              {currentIndex < questions.length - 1 ? (
                <Button
                  size="sm"
                  onClick={() => setCurrentIndex(currentIndex + 1)}
                  className="text-xs font-bold"
                >
                  Soal Selanjutnya
                  <ChevronRight className="ml-1 h-4 w-4" />
                </Button>
              ) : (
                <Button
                  size="sm"
                  variant="gold"
                  onClick={() => setConfirmModalOpen(true)}
                  className="text-xs font-bold"
                >
                  Selesaikan Ujian
                  <CheckCircle2 className="ml-1 h-4 w-4" />
                </Button>
              )}
            </div>
          </Card>
        </div>

        {/* RIGHT 1 COL: Question Number Palette Grid */}
        <div className="space-y-4">
          <Card className="p-4 space-y-4">
            <div className="border-b border-slate-100 pb-2">
              <span className="text-xs font-bold text-slate-800">
                Nomor Soal
              </span>
              <p className="text-[10px] text-slate-400">
                Dijawab: {answeredCount} dari {questions.length}
              </p>
            </div>

            {/* Number grid */}
            <div className="grid grid-cols-5 gap-2">
              {questions.map((q: any, idx: number) => {
                const ans = answers[q.id];
                const isAnswered = ans && (ans.selectedOptionId || (ans.textAnswer && ans.textAnswer.trim()));
                const isFlag = flagged.has(q.id);
                const isCurrent = currentIndex === idx;

                let colorClass = "bg-slate-100 text-slate-700 border-slate-200 hover:bg-slate-200";
                if (isFlag) {
                  colorClass = "bg-amber-500 text-white border-amber-600 shadow-sm";
                } else if (isAnswered) {
                  colorClass = "bg-blue-600 text-white border-blue-700 shadow-sm";
                }

                return (
                  <button
                    key={q.id}
                    type="button"
                    onClick={() => setCurrentIndex(idx)}
                    className={`h-9 rounded-xl font-bold text-xs flex items-center justify-center border transition-all ${colorClass} ${
                      isCurrent ? "ring-2 ring-blue-500 ring-offset-2 scale-105" : ""
                    }`}
                  >
                    {idx + 1}
                  </button>
                );
              })}
            </div>

            {/* Legend */}
            <div className="space-y-1.5 pt-2 border-t border-slate-100 text-[11px] text-slate-500">
              <div className="flex items-center gap-2">
                <span className="h-3 w-3 rounded-full bg-blue-600" />
                <span>Sudah Dijawab</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="h-3 w-3 rounded-full bg-amber-500" />
                <span>Ragu-ragu (Ditandai)</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="h-3 w-3 rounded-full bg-slate-200" />
                <span>Belum Dijawab</span>
              </div>
            </div>

            {/* Final Submit Trigger */}
            <div className="pt-2 border-t border-slate-100">
              <Button
                size="md"
                variant="gold"
                onClick={() => setConfirmModalOpen(true)}
                className="w-full text-xs font-bold shadow-md shadow-amber-600/20"
              >
                Selesaikan Ujian
              </Button>
            </div>
          </Card>
        </div>
      </div>

      {/* Modal Konfirmasi Selesai Ujian */}
      <Modal
        isOpen={confirmModalOpen}
        onClose={() => setConfirmModalOpen(false)}
        title="Konfirmasi Pengakhiran Ujian"
        description="Periksa kembali rekapitulasi jawaban Anda sebelum mengakhiri ujian."
        maxWidth="sm"
      >
        <div className="space-y-4">
          <div className="p-3.5 rounded-xl bg-slate-50 border border-slate-200 text-xs space-y-1.5">
            <div className="flex justify-between font-semibold text-slate-700">
              <span>Total Soal:</span>
              <span>{questions.length} Butir</span>
            </div>
            <div className="flex justify-between font-semibold text-blue-600">
              <span>Sudah Dijawab:</span>
              <span>{answeredCount} Soal</span>
            </div>
            <div className="flex justify-between font-semibold text-amber-600">
              <span>Ditandai Ragu-ragu:</span>
              <span>{flagged.size} Soal</span>
            </div>
            <div className="flex justify-between font-semibold text-rose-600">
              <span>Belum Dijawab:</span>
              <span>{questions.length - answeredCount} Soal</span>
            </div>
          </div>

          <p className="text-xs text-slate-600 leading-relaxed">
            Apakah Anda yakin ingin mengakhiri sesi ujian ini sekarang? Setelah dikonfirmasi, Anda tidak dapat mengubah jawaban kembali.
          </p>

          <div className="flex justify-end gap-2.5 pt-2 border-t border-slate-100">
            <Button
              type="button"
              variant="outline"
              size="sm"
              onClick={() => setConfirmModalOpen(false)}
            >
              Kembali Memeriksa
            </Button>
            <Button
              type="button"
              variant="primary"
              size="sm"
              onClick={handleFinishQuiz}
              isLoading={isFinishing}
            >
              Ya, Selesaikan Ujian
            </Button>
          </div>
        </div>
      </Modal>
    </div>
  );
}