"use client";

import * as React from "react";
import {
  FileText,
  Clock,
  CheckCircle2,
  AlertCircle,
  ExternalLink,
  Download,
  Award,
  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 { Select } from "@/components/ui/select";
import { formatDateID, formatBytes } from "@/lib/utils";

interface SubmissionsGradingClientProps {
  assignment: any;
}

export default function SubmissionsGradingClient({
  assignment,
}: SubmissionsGradingClientProps) {
  const [search, setSearch] = React.useState("");
  const [statusFilter, setStatusFilter] = React.useState("ALL");

  // Grading Modal State
  const [gradingModalOpen, setGradingModalOpen] = React.useState(false);
  const [selectedSubmission, setSelectedSubmission] = React.useState<any | null>(null);
  const [score, setScore] = React.useState("");
  const [feedback, setFeedback] = React.useState("");
  const [subStatus, setSubStatus] = React.useState("GRADED");
  const [isSubmitting, setIsSubmitting] = React.useState(false);

  const students = assignment.teacherSubject.class.members.map((m: any) => m.student);
  const submissionsMap = new Map();
  assignment.submissions.forEach((sub: any) => {
    submissionsMap.set(sub.studentId, sub);
  });

  const studentSubmissionRows = students.map((s: any) => {
    const sub = submissionsMap.get(s.id);
    return {
      student: s,
      submission: sub || null,
      status: sub ? sub.status : "PENDING",
      score: sub ? sub.score : null,
      submittedAt: sub ? sub.submittedAt : null,
    };
  });

  const filteredRows = studentSubmissionRows.filter((row: any) => {
    const matchSearch =
      row.student.fullName.toLowerCase().includes(search.toLowerCase()) ||
      row.student.nis.includes(search);
    const matchStatus =
      statusFilter === "ALL" ||
      (statusFilter === "PENDING" && !row.submission) ||
      (statusFilter === "SUBMITTED" && row.submission && row.submission.status !== "GRADED") ||
      (statusFilter === "GRADED" && row.submission?.status === "GRADED");
    return matchSearch && matchStatus;
  });

  const openGradingModal = (row: any) => {
    setSelectedSubmission(row);
    setScore(row.submission?.score !== null && row.submission?.score !== undefined ? String(row.submission.score) : "");
    setFeedback(row.submission?.feedback || "");
    setSubStatus(row.submission?.status === "REVISION_REQUESTED" ? "REVISION_REQUESTED" : "GRADED");
    setGradingModalOpen(true);
  };

  const handleSaveGrade = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedSubmission?.submission) return;
    setIsSubmitting(true);

    try {
      const res = await fetch(`/api/assignments/${assignment.id}/grade`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          submissionId: selectedSubmission.submission.id,
          studentId: selectedSubmission.student.id,
          score: parseFloat(score),
          feedback,
          status: subStatus,
        }),
      });

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

  return (
    <div className="space-y-6">
      {/* Top Filter and Stats Summary */}
      <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
        <div className="flex flex-wrap items-center gap-2 w-full sm:w-auto">
          <div className="relative flex-1 sm:w-64">
            <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>

          <Select
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
            className="w-full sm:w-48"
          >
            <option value="ALL">Semua Status</option>
            <option value="SUBMITTED">Menunggu Penilaian</option>
            <option value="GRADED">Sudah Dinilai</option>
            <option value="PENDING">Belum Mengumpulkan</option>
          </Select>
        </div>

        <div className="text-xs font-semibold text-slate-600">
          Total: {assignment.submissions.length} / {students.length} Siswa Mengumpulkan
        </div>
      </div>

      {/* Submissions 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 Pengumpulan</th>
                  <th className="py-3 px-4">Waktu Dikirim</th>
                  <th className="py-3 px-4">Nilai</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 sub = row.submission;
                  let badgeVariant: any = "secondary";
                  let badgeLabel = "Belum Mengumpulkan";

                  if (sub) {
                    if (sub.status === "GRADED") {
                      badgeVariant = "success";
                      badgeLabel = "Sudah Dinilai";
                    } else if (sub.status === "LATE") {
                      badgeVariant = "danger";
                      badgeLabel = "Terlambat";
                    } else if (sub.status === "REVISION_REQUESTED") {
                      badgeVariant = "warning";
                      badgeLabel = "Perlu Revisi";
                    } else {
                      badgeVariant = "primary";
                      badgeLabel = "Sudah Dikumpulkan";
                    }
                  }

                  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">
                        <Badge variant={badgeVariant}>{badgeLabel}</Badge>
                      </td>
                      <td className="py-3 px-4 text-slate-500 font-mono">
                        {sub ? formatDateID(sub.submittedAt, true) : "-"}
                      </td>
                      <td className="py-3 px-4 font-black text-sm text-blue-600">
                        {sub?.score !== null && sub?.score !== undefined ? sub.score : "-"}
                      </td>
                      <td className="py-3 px-4 text-right">
                        {sub ? (
                          <Button
                            size="sm"
                            variant="outline"
                            className="text-xs font-bold"
                            onClick={() => openGradingModal(row)}
                          >
                            <Award className="mr-1 h-3.5 w-3.5 text-blue-600" />
                            {sub.score !== null ? "Ubah Nilai" : "Beri Nilai"}
                          </Button>
                        ) : (
                          <span className="text-[11px] text-slate-400 italic">
                            Belum submit
                          </span>
                        )}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>

      {/* Modal Beri Nilai & Feedback */}
      {selectedSubmission?.submission && (
        <Modal
          isOpen={gradingModalOpen}
          onClose={() => setGradingModalOpen(false)}
          title={`Evaluasi Tugas: ${selectedSubmission.student.fullName}`}
          description={`NIS: ${selectedSubmission.student.nis} • Batas Skor: ${assignment.maxScore}`}
          maxWidth="xl"
        >
          <form onSubmit={handleSaveGrade} className="space-y-4">
            {/* Jawaban Siswa */}
            <div className="space-y-2 p-3.5 rounded-xl bg-slate-50 border border-slate-200">
              <span className="text-xs font-bold text-slate-800 block">
                Lembar Jawaban Siswa:
              </span>

              {selectedSubmission.submission.content && (
                <div className="whitespace-pre-wrap text-xs text-slate-700 bg-white p-3 rounded-lg border border-slate-200">
                  {selectedSubmission.submission.content}
                </div>
              )}

              {selectedSubmission.submission.linkUrl && (
                <div className="flex items-center justify-between p-2 rounded-lg bg-white border border-slate-200 text-xs">
                  <span className="font-semibold text-slate-700 truncate mr-2">
                    Tautan: {selectedSubmission.submission.linkUrl}
                  </span>
                  <a
                    href={selectedSubmission.submission.linkUrl}
                    target="_blank"
                    rel="noreferrer"
                    className="text-blue-600 font-bold hover:underline shrink-0 flex items-center gap-1"
                  >
                    Buka Link <ExternalLink className="h-3 w-3" />
                  </a>
                </div>
              )}

              {selectedSubmission.submission.attachments?.map((att: any) => (
                <div
                  key={att.id}
                  className="flex items-center justify-between p-2 rounded-lg bg-white border border-slate-200 text-xs"
                >
                  <div className="flex items-center gap-2 truncate">
                    <FileText className="h-4 w-4 text-blue-500 shrink-0" />
                    <span className="font-medium text-slate-800 truncate">
                      {att.fileName}
                    </span>
                    <span className="text-slate-400 font-mono">
                      ({formatBytes(att.fileSize)})
                    </span>
                  </div>
                  <a
                    href={att.filePath}
                    target="_blank"
                    rel="noreferrer"
                    className="p-1 rounded bg-blue-50 text-blue-600 hover:bg-blue-100 font-bold flex items-center gap-1 shrink-0"
                  >
                    <Download className="h-3.5 w-3.5" />
                    Unduh File
                  </a>
                </div>
              ))}
            </div>

            {/* Input Nilai Numerik */}
            <div className="grid grid-cols-2 gap-3">
              <Input
                label={`Nilai Angka (Maks: ${assignment.maxScore})`}
                type="number"
                step="0.1"
                min="0"
                max={assignment.maxScore}
                placeholder="Contoh: 95"
                value={score}
                onChange={(e) => setScore(e.target.value)}
                required
              />

              <Select
                label="Status Evaluasi"
                value={subStatus}
                onChange={(e) => setSubStatus(e.target.value)}
              >
                <option value="GRADED">Telah Dinilai (Selesai)</option>
                <option value="REVISION_REQUESTED">Perlu Perbaikan / Revisi</option>
              </Select>
            </div>

            {/* Feedback / Komentar */}
            <Textarea
              label="Catatan Umpan Balik (Feedback Guru)"
              placeholder="Berikan saran perbaikan atau apresiasi terhadap hasil pengerjaan siswa..."
              rows={3}
              value={feedback}
              onChange={(e) => setFeedback(e.target.value)}
            />

            <div className="flex justify-end gap-2.5 pt-4 border-t border-slate-100">
              <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={() => setGradingModalOpen(false)}
              >
                Batal
              </Button>
              <Button type="submit" size="sm" isLoading={isSubmitting}>
                Simpan Penilaian
              </Button>
            </div>
          </form>
        </Modal>
      )}
    </div>
  );
}