"use client";

import * as React from "react";
import {
  Award,
  Clock,
  CheckCircle2,
  AlertCircle,
  HelpCircle,
  FileCheck,
  Search,
} 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";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { formatDateID } from "@/lib/utils";

interface QuizResultsClientProps {
  quiz: any;
}

export default function QuizResultsClient({ quiz }: QuizResultsClientProps) {
  const [search, setSearch] = React.useState("");
  const [selectedAttempt, setSelectedAttempt] = React.useState<any | null>(null);

  // Scoring Modal state
  const [activeAnswerToScore, setActiveAnswerToScore] = React.useState<any | null>(null);
  const [essayScore, setEssayScore] = React.useState("");
  const [essayFeedback, setEssayFeedback] = React.useState("");
  const [isSaving, setIsSaving] = React.useState(false);

  const students = quiz.teacherSubject.class.members.map((m: any) => m.student);
  const attemptsMap = new Map();
  quiz.attempts.forEach((att: any) => {
    attemptsMap.set(att.studentId, att);
  });

  const rows = students.map((s: any) => {
    const att = attemptsMap.get(s.id);
    return {
      student: s,
      attempt: att || null,
      isCompleted: att?.isCompleted || false,
      score: att?.totalScore,
      isPassed: att ? (att.totalScore || 0) >= quiz.passingScore : false,
    };
  });

  const filteredRows = rows.filter(
    (r: any) =>
      r.student.fullName.toLowerCase().includes(search.toLowerCase()) ||
      r.student.nis.includes(search)
  );

  const handleSaveEssayScore = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!activeAnswerToScore) return;
    setIsSaving(true);

    try {
      const res = await fetch(`/api/quizzes/${quiz.id}/essay-score`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          answerId: activeAnswerToScore.id,
          scoreEarned: parseFloat(essayScore),
          feedback: essayFeedback,
        }),
      });

      const data = await res.json();
      setIsSaving(false);
      if (res.ok && data.success) {
        setActiveAnswerToScore(null);
        window.location.reload();
      } else {
        alert(data.error || "Gagal menyimpan nilai esai.");
      }
    } catch (err) {
      setIsSaving(false);
      alert("Terjadi kesalahan jaringan.");
    }
  };

  return (
    <div className="space-y-6">
      {/* Top filter and summary */}
      <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
        <div className="relative w-full sm:w-72">
          <Search className="absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
          <input
            type="text"
            placeholder="Cari nama atau NIS siswa..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="w-full pl-9 pr-3 py-2 rounded-xl border border-slate-200 text-xs bg-white text-slate-800 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>

        <div className="flex items-center gap-3 text-xs font-semibold text-slate-600">
          <span>Mengikuti: {quiz.attempts.length} / {students.length} Siswa</span>
          <span className="h-4 w-px bg-slate-200" />
          <span>KKM: {quiz.passingScore}</span>
        </div>
      </div>

      {/* Results Table */}
      <Card>
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <table className="w-full text-xs text-left">
              <thead className="bg-slate-50 text-slate-600 font-bold border-b border-slate-200">
                <tr>
                  <th className="py-3 px-4">No</th>
                  <th className="py-3 px-4">NIS</th>
                  <th className="py-3 px-4">Nama Siswa</th>
                  <th className="py-3 px-4">Status Ujian</th>
                  <th className="py-3 px-4">Waktu Submit</th>
                  <th className="py-3 px-4">Skor Akhir</th>
                  <th className="py-3 px-4">Kelulusan KKM</th>
                  <th className="py-3 px-4 text-right">Aksi</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {filteredRows.map((row: any, idx: number) => {
                  const att = row.attempt;

                  return (
                    <tr key={row.student.id} className="hover:bg-slate-50 transition-colors">
                      <td className="py-3 px-4 text-slate-400 font-mono">{idx + 1}</td>
                      <td className="py-3 px-4 font-mono font-semibold text-slate-700">
                        {row.student.nis}
                      </td>
                      <td className="py-3 px-4 font-bold text-slate-900">
                        {row.student.fullName}
                      </td>
                      <td className="py-3 px-4">
                        {att ? (
                          att.isCompleted ? (
                            <Badge variant="success">Selesai</Badge>
                          ) : (
                            <Badge variant="warning">Sedang Mengerjakan</Badge>
                          )
                        ) : (
                          <span className="text-slate-400 italic">Belum Mengikuti</span>
                        )}
                      </td>
                      <td className="py-3 px-4 text-slate-500 font-mono">
                        {att?.submittedAt ? formatDateID(att.submittedAt, true) : "-"}
                      </td>
                      <td className="py-3 px-4 font-black text-sm text-blue-600">
                        {att?.totalScore !== null && att?.totalScore !== undefined ? att.totalScore : "-"}
                      </td>
                      <td className="py-3 px-4">
                        {att?.totalScore !== null && att?.totalScore !== undefined ? (
                          row.isPassed ? (
                            <span className="text-xs font-bold text-emerald-600">Tuntas</span>
                          ) : (
                            <span className="text-xs font-bold text-rose-600">Remedial</span>
                          )
                        ) : (
                          "-"
                        )}
                      </td>
                      <td className="py-3 px-4 text-right">
                        {att ? (
                          <Button
                            size="sm"
                            variant="outline"
                            className="text-xs"
                            onClick={() => setSelectedAttempt(att)}
                          >
                            <FileCheck className="mr-1 h-3.5 w-3.5 text-blue-600" />
                            Rincian Lembar Jawaban
                          </Button>
                        ) : (
                          "-"
                        )}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>

      {/* Modal Detail Jawaban Siswa & Koreksi Esai */}
      {selectedAttempt && (
        <Modal
          isOpen={!!selectedAttempt}
          onClose={() => setSelectedAttempt(null)}
          title={`Lembar Jawaban: ${selectedAttempt.student.fullName}`}
          description={`Total Skor: ${selectedAttempt.totalScore} Poin • Ujian: ${quiz.title}`}
          maxWidth="2xl"
        >
          <div className="space-y-4 max-h-[70vh] overflow-y-auto pr-1">
            {quiz.questions.map((q: any, idx: number) => {
              const answer = selectedAttempt.answers?.find((a: any) => a.questionId === q.id);

              return (
                <div
                  key={q.id}
                  className="p-4 rounded-xl border border-slate-200 bg-white space-y-2 text-xs"
                >
                  <div className="flex items-center justify-between border-b border-slate-100 pb-1.5">
                    <span className="font-bold text-slate-800">
                      Soal No. {idx + 1} ({q.type})
                    </span>
                    <span className="font-mono font-bold text-blue-600">
                      Skor Didapat: {answer?.scoreEarned !== null && answer?.scoreEarned !== undefined ? answer.scoreEarned : 0} / {q.scoreWeight}
                    </span>
                  </div>

                  <p className="font-semibold text-slate-900 leading-relaxed whitespace-pre-wrap">
                    {q.question}
                  </p>

                  {/* Multiple Choice Answer display */}
                  {(q.type === "MULTIPLE_CHOICE" || q.type === "TRUE_FALSE") && (
                    <div className="space-y-1 pt-1">
                      {q.options.map((opt: any) => {
                        const isChosen = answer?.selectedOptionId === opt.id;
                        return (
                          <div
                            key={opt.id}
                            className={`p-2 rounded-lg border flex items-center gap-2 ${
                              isChosen
                                ? opt.isCorrect
                                  ? "bg-emerald-50 border-emerald-300 text-emerald-900 font-bold"
                                  : "bg-rose-50 border-rose-300 text-rose-900 font-bold"
                                : opt.isCorrect
                                ? "bg-slate-50 border-emerald-200 text-emerald-700"
                                : "bg-slate-50/50 border-slate-200 text-slate-600"
                            }`}
                          >
                            <span className="h-5 w-5 rounded-full bg-slate-200 text-slate-700 flex items-center justify-center font-bold text-[10px]">
                              {opt.label}
                            </span>
                            <span>{opt.content}</span>
                            {isChosen && (
                              <span className="text-[10px] ml-auto font-mono">
                                (Jawaban Siswa)
                              </span>
                            )}
                          </div>
                        );
                      })}
                    </div>
                  )}

                  {/* Essay Answer Display & Grading button */}
                  {q.type === "ESSAY" && (
                    <div className="space-y-2 pt-1">
                      <div className="p-3 rounded-lg bg-slate-50 border border-slate-200 text-slate-800 whitespace-pre-wrap">
                        {answer?.textAnswer || <span className="italic text-slate-400">Tidak ada jawaban</span>}
                      </div>

                      {answer?.feedback && (
                        <p className="text-[11px] text-amber-700 italic">
                          Feedback: "{answer.feedback}"
                        </p>
                      )}

                      <div className="flex justify-end">
                        <Button
                          size="sm"
                          variant="outline"
                          className="text-xs"
                          onClick={() => {
                            setActiveAnswerToScore(answer);
                            setEssayScore(answer?.scoreEarned !== null && answer?.scoreEarned !== undefined ? String(answer.scoreEarned) : "");
                            setEssayFeedback(answer?.feedback || "");
                          }}
                        >
                          {answer?.scoreEarned !== null ? "Ubah Nilai Esai" : "Beri Nilai Esai"}
                        </Button>
                      </div>
                    </div>
                  )}
                </div>
              );
            })}

            <div className="flex justify-end pt-2">
              <Button size="sm" onClick={() => setSelectedAttempt(null)}>
                Tutup Rincian
              </Button>
            </div>
          </div>
        </Modal>
      )}

      {/* Modal Input Nilai Esai */}
      {activeAnswerToScore && (
        <Modal
          isOpen={!!activeAnswerToScore}
          onClose={() => setActiveAnswerToScore(null)}
          title="Koreksi Jawaban Esai Siswa"
          description="Masukkan skor numerik dan umpan balik."
          maxWidth="sm"
        >
          <form onSubmit={handleSaveEssayScore} className="space-y-4">
            <Input
              label="Skor Esai (Maks: 20)"
              type="number"
              step="0.5"
              min="0"
              placeholder="Contoh: 18"
              value={essayScore}
              onChange={(e) => setEssayScore(e.target.value)}
              required
            />

            <Textarea
              label="Catatan Umpan Balik Esai"
              placeholder="Komentar apresiasi atau koreksi..."
              rows={3}
              value={essayFeedback}
              onChange={(e) => setEssayFeedback(e.target.value)}
            />

            <div className="flex justify-end gap-2 pt-2 border-t border-slate-100">
              <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={() => setActiveAnswerToScore(null)}
              >
                Batal
              </Button>
              <Button type="submit" size="sm" isLoading={isSaving}>
                Simpan Nilai
              </Button>
            </div>
          </form>
        </Modal>
      )}
    </div>
  );
}