"use client";

import * as React from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import {
  Plus,
  Search,
  ClipboardList,
  Clock,
  CheckCircle2,
  Users,
  Paperclip,
  ArrowRight,
  Filter,
} 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, getDeadlineStatus } from "@/lib/utils";

interface TeacherAssignmentsClientProps {
  initialAssignments: any[];
  teacherSubjects: any[];
}

export default function TeacherAssignmentsClient({
  initialAssignments,
  teacherSubjects,
}: TeacherAssignmentsClientProps) {
  const router = useRouter();
  const [assignments, setAssignments] = React.useState(initialAssignments);
  const [selectedTS, setSelectedTS] = React.useState("ALL");
  const [search, setSearch] = React.useState("");

  // Modal Create
  const [createModalOpen, setCreateModalOpen] = React.useState(false);
  const [tsId, setTsId] = React.useState(teacherSubjects[0]?.id || "");
  const [title, setTitle] = React.useState("");
  const [description, setDescription] = React.useState("");
  const [instructions, setInstructions] = React.useState("");
  const [dueDate, setDueDate] = React.useState("");
  const [maxScore, setMaxScore] = React.useState("100");
  const [submissionType, setSubmissionType] = React.useState("COMBINATION");
  const [fileToUpload, setFileToUpload] = React.useState<File | null>(null);
  const [isLoading, setIsLoading] = React.useState(false);
  const [errorMsg, setErrorMsg] = React.useState("");

  const filteredAssignments = assignments.filter((a) => {
    const matchTS = selectedTS === "ALL" || a.teacherSubjectId === selectedTS;
    const matchSearch =
      a.title.toLowerCase().includes(search.toLowerCase()) ||
      (a.description || "").toLowerCase().includes(search.toLowerCase());
    return matchTS && matchSearch;
  });

  const handleCreateAssignment = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    setErrorMsg("");

    try {
      let attachments: any[] = [];
      if (fileToUpload) {
        const formData = new FormData();
        formData.append("file", fileToUpload);
        formData.append("folder", "assignments");
        const uploadRes = await fetch("/api/upload", {
          method: "POST",
          body: formData,
        });
        const uploadData = await uploadRes.json();
        if (uploadData.success) {
          attachments.push(uploadData.data);
        }
      }

      const res = await fetch("/api/assignments", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          teacherSubjectId: tsId,
          title,
          description,
          instructions,
          dueDate: new Date(dueDate).toISOString(),
          maxScore: parseFloat(maxScore) || 100,
          submissionType,
          attachments,
        }),
      });

      const data = await res.json();
      if (!res.ok || !data.success) {
        setErrorMsg(data.error || "Gagal membuat tugas.");
        setIsLoading(false);
        return;
      }

      setCreateModalOpen(false);
      window.location.reload();
    } catch (err) {
      setErrorMsg("Terjadi gangguan koneksi server.");
      setIsLoading(false);
    }
  };

  return (
    <div className="space-y-6">
      {/* Top Filter and Actions */}
      <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">
          <Select
            value={selectedTS}
            onChange={(e) => setSelectedTS(e.target.value)}
            className="w-full sm:w-64"
          >
            <option value="ALL">Semua Kelas & Mapel</option>
            {teacherSubjects.map((ts) => (
              <option key={ts.id} value={ts.id}>
                {ts.subject.name} - Kelas {ts.class.name}
              </option>
            ))}
          </Select>

          <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 judul tugas..."
              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>

        <Button
          size="sm"
          onClick={() => setCreateModalOpen(true)}
          className="w-full sm:w-auto font-bold text-xs"
        >
          <Plus className="mr-1.5 h-4 w-4" />
          Buat Tugas Baru
        </Button>
      </div>

      {/* Grid of Assignments */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
        {filteredAssignments.map((a) => {
          const deadline = getDeadlineStatus(a.dueDate);
          const totalMembers = a.teacherSubject.class.members.length;
          const submittedCount = a.submissions.length;
          const gradedCount = a.submissions.filter((s: any) => s.status === "GRADED").length;

          return (
            <Card
              key={a.id}
              className="hover:border-blue-400 hover:shadow-md transition-all flex flex-col justify-between"
            >
              <CardHeader className="pb-2">
                <div className="flex items-center justify-between">
                  <Badge variant="primary">{a.teacherSubject.class.name}</Badge>
                  <span
                    className={`text-[10px] font-bold px-2 py-0.5 rounded-full border ${deadline.badgeClass}`}
                  >
                    {deadline.label}
                  </span>
                </div>
                <p className="text-[11px] font-bold text-blue-600 mt-1">
                  {a.teacherSubject.subject.name}
                </p>
                <CardTitle className="text-base text-slate-900 line-clamp-2">
                  {a.title}
                </CardTitle>
              </CardHeader>

              <CardContent className="space-y-3 pt-2">
                {a.description && (
                  <p className="text-xs text-slate-500 line-clamp-2 leading-relaxed">
                    {a.description}
                  </p>
                )}

                <div className="flex items-center gap-1.5 text-xs text-slate-500">
                  <Clock className="h-3.5 w-3.5 text-slate-400 shrink-0" />
                  <span>Batas: {formatDateID(a.dueDate, true)}</span>
                </div>

                {/* Submission Progress bar */}
                <div className="p-3 rounded-xl bg-slate-50 border border-slate-100 space-y-1.5 text-xs">
                  <div className="flex justify-between font-semibold">
                    <span className="text-slate-600">Progres Pengumpulan</span>
                    <span className="text-blue-600 font-bold">
                      {submittedCount} / {totalMembers} Siswa
                    </span>
                  </div>
                  <div className="h-2 w-full rounded-full bg-slate-200 overflow-hidden">
                    <div
                      className="h-full bg-blue-600 rounded-full"
                      style={{
                        width: `${Math.min(100, (submittedCount / (totalMembers || 1)) * 100)}%`,
                      }}
                    />
                  </div>
                  <div className="flex justify-between text-[10px] text-slate-400">
                    <span>{gradedCount} sudah dinilai</span>
                    <span>{submittedCount - gradedCount} menunggu koreksi</span>
                  </div>
                </div>

                {/* Actions */}
                <div className="pt-2 border-t border-slate-100">
                  <Link href={`/teacher/assignments/${a.id}/submissions`}>
                    <Button size="sm" className="w-full text-xs font-bold">
                      Periksa Lembar Jawaban ({submittedCount})
                      <ArrowRight className="ml-1.5 h-3.5 w-3.5" />
                    </Button>
                  </Link>
                </div>
              </CardContent>
            </Card>
          );
        })}
      </div>

      {/* Modal Buat Tugas */}
      <Modal
        isOpen={createModalOpen}
        onClose={() => setCreateModalOpen(false)}
        title="Buat Tugas Pembelajaran Baru"
        description="Atur petunjuk pengerjaan, batas akhir (deadline), dan tipe pengumpulan."
        maxWidth="2xl"
      >
        <form onSubmit={handleCreateAssignment} className="space-y-4">
          {errorMsg && (
            <div className="p-3 rounded-lg bg-rose-50 border border-rose-200 text-rose-700 text-xs">
              {errorMsg}
            </div>
          )}

          <Select
            label="Mata Pelajaran & Kelas"
            value={tsId}
            onChange={(e) => setTsId(e.target.value)}
          >
            {teacherSubjects.map((ts) => (
              <option key={ts.id} value={ts.id}>
                {ts.subject.name} - Kelas {ts.class.name}
              </option>
            ))}
          </Select>

          <Input
            label="Judul Tugas"
            placeholder="Contoh: Tugas 3: Lembar Kerja Praktik Analisis Titrasi Asam Basa"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            required
          />

          <Input
            label="Deskripsi Singkat"
            placeholder="Ringkasan tugas..."
            value={description}
            onChange={(e) => setDescription(e.target.value)}
          />

          <Textarea
            label="Instruksi / Petunjuk Pengerjaan Lengkap"
            placeholder="Tuliskan petunjuk teknis langkah kerja, format file, dan kriteria penilaian..."
            rows={4}
            value={instructions}
            onChange={(e) => setInstructions(e.target.value)}
          />

          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
            <div>
              <Input
                label="Batas Waktu (Deadline)"
                type="datetime-local"
                value={dueDate}
                onChange={(e) => setDueDate(e.target.value)}
                required
              />
            </div>
            <div>
              <Input
                label="Skor Maksimal"
                type="number"
                value={maxScore}
                onChange={(e) => setMaxScore(e.target.value)}
                required
              />
            </div>
            <div>
              <Select
                label="Jenis Pengumpulan"
                value={submissionType}
                onChange={(e) => setSubmissionType(e.target.value)}
              >
                <option value="COMBINATION">Kombinasi (File / Teks / Link)</option>
                <option value="FILE">Upload Dokumen Berkas</option>
                <option value="TEXT">Jawaban Teks Online</option>
                <option value="LINK">Tautan Link Eksternal</option>
              </Select>
            </div>
          </div>

          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1">
              Lampiran Soal / LKPD (Opsional - PDF / Word / Gambar)
            </label>
            <input
              type="file"
              onChange={(e) => setFileToUpload(e.target.files?.[0] || null)}
              className="w-full text-xs text-slate-500 file:mr-3 file:py-2 file:px-3 file:rounded-xl file:border-0 file:text-xs file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
            />
          </div>

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