"use client";

import * as React from "react";
import { useRouter } from "next/navigation";
import {
  Plus,
  Search,
  BookOpen,
  FileText,
  Video,
  Link as LinkIcon,
  Download,
  Trash2,
  Eye,
  Paperclip,
  CheckCircle2,
} 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 { ConfirmModal } from "@/components/common/ConfirmModal";
import { formatDateID, formatBytes } from "@/lib/utils";

interface MaterialsClientProps {
  initialMaterials: any[];
  teacherSubjects: any[];
}

export default function MaterialsClient({
  initialMaterials,
  teacherSubjects,
}: MaterialsClientProps) {
  const router = useRouter();
  const [materials, setMaterials] = React.useState(initialMaterials);
  const [selectedTS, setSelectedTS] = React.useState("ALL");
  const [search, setSearch] = React.useState("");

  // Create Modal
  const [createModalOpen, setCreateModalOpen] = React.useState(false);
  const [tsId, setTsId] = React.useState(teacherSubjects[0]?.id || "");
  const [meetingNumber, setMeetingNumber] = React.useState("1");
  const [title, setTitle] = React.useState("");
  const [description, setDescription] = React.useState("");
  const [content, setContent] = React.useState("");
  const [youtubeUrl, setYoutubeUrl] = React.useState("");
  const [driveUrl, setDriveUrl] = React.useState("");
  const [isPublished, setIsPublished] = React.useState(true);
  const [fileToUpload, setFileToUpload] = React.useState<File | null>(null);
  const [isLoading, setIsLoading] = React.useState(false);
  const [errorMsg, setErrorMsg] = React.useState("");

  // Preview Modal
  const [previewMaterial, setPreviewMaterial] = React.useState<any | null>(null);

  // Delete State
  const [deleteTarget, setDeleteTarget] = React.useState<any | null>(null);
  const [deleteLoading, setDeleteLoading] = React.useState(false);

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

  const handleCreateMaterial = 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", "materials");
        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/materials", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          teacherSubjectId: tsId,
          meetingNumber: parseInt(meetingNumber) || 1,
          title,
          description,
          content,
          youtubeUrl,
          driveUrl,
          isPublished,
          attachments,
        }),
      });

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

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

  const handleDeleteMaterial = async () => {
    if (!deleteTarget) return;
    setDeleteLoading(true);
    try {
      const res = await fetch(`/api/materials/${deleteTarget.id}`, {
        method: "DELETE",
      });
      if (res.ok) {
        setMaterials((prev) => prev.filter((m) => m.id !== deleteTarget.id));
        setDeleteTarget(null);
      }
    } catch (err) {
      console.error(err);
    } finally {
      setDeleteLoading(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 materi..."
              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" />
          Terbitkan Materi Baru
        </Button>
      </div>

      {/* Grid of Materials */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
        {filteredMaterials.map((m) => (
          <Card key={m.id} className="hover:border-blue-300 hover:shadow-md transition-all flex flex-col justify-between">
            <CardHeader className="pb-2">
              <div className="flex items-center justify-between">
                <Badge variant="primary">
                  Pertemuan ke-{m.meetingNumber}
                </Badge>
                <span className="text-[10px] text-slate-400 font-mono">
                  {formatDateID(m.createdAt)}
                </span>
              </div>
              <p className="text-[11px] font-bold text-blue-600 mt-1">
                {m.teacherSubject.subject.name} ({m.teacherSubject.class.name})
              </p>
              <CardTitle className="text-base text-slate-900 line-clamp-2">
                {m.title}
              </CardTitle>
            </CardHeader>

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

              {/* Badges for attachments / links */}
              <div className="flex flex-wrap gap-1.5 pt-1">
                {m.attachments?.length > 0 && (
                  <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-slate-600 bg-slate-100 px-2 py-0.5 rounded">
                    <FileText className="h-3 w-3 text-blue-500" />
                    {m.attachments.length} Dokumen
                  </span>
                )}
                {m.youtubeUrl && (
                  <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-rose-600 bg-rose-50 px-2 py-0.5 rounded">
                    <Video className="h-3 w-3" />
                    Video YouTube
                  </span>
                )}
                {m.driveUrl && (
                  <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded">
                    <LinkIcon className="h-3 w-3" />
                    Google Drive
                  </span>
                )}
              </div>

              {/* Action Buttons */}
              <div className="pt-2 border-t border-slate-100 flex items-center justify-between">
                <Button
                  size="sm"
                  variant="outline"
                  className="text-xs"
                  onClick={() => setPreviewMaterial(m)}
                >
                  <Eye className="mr-1 h-3.5 w-3.5 text-blue-600" />
                  Buka Modul
                </Button>

                <button
                  type="button"
                  onClick={() => setDeleteTarget(m)}
                  className="p-1.5 text-rose-500 hover:bg-rose-50 rounded-lg transition-colors"
                  title="Hapus Materi"
                >
                  <Trash2 className="h-4 w-4" />
                </button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Modal Buat Materi */}
      <Modal
        isOpen={createModalOpen}
        onClose={() => setCreateModalOpen(false)}
        title="Terbitkan Materi Pembelajaran Baru"
        description="Lengkapi informasi materi kurikulum untuk siswa."
        maxWidth="2xl"
      >
        <form onSubmit={handleCreateMaterial} 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>
          )}

          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
            <div className="sm:col-span-2">
              <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>
            </div>
            <div>
              <Input
                label="Pertemuan Ke-"
                type="number"
                min="1"
                value={meetingNumber}
                onChange={(e) => setMeetingNumber(e.target.value)}
                required
              />
            </div>
          </div>

          <Input
            label="Judul Materi / Topik Pembelajaran"
            placeholder="Contoh: Pertemuan 3: Persamaan Trigonometri Sudut Rangkap"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            required
          />

          <Input
            label="Ringkasan / Deskripsi Singkat"
            placeholder="Rangkuman 1-2 kalimat tentang materi ini..."
            value={description}
            onChange={(e) => setDescription(e.target.value)}
          />

          <Textarea
            label="Isi / Konten Artikel Pembelajaran"
            placeholder="Tuliskan materi, panduan belajar, rumus, atau konsep penting di sini..."
            rows={5}
            value={content}
            onChange={(e) => setContent(e.target.value)}
          />

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-2 border-t border-slate-100">
            <Input
              label="Tautan Video YouTube (Opsional)"
              placeholder="https://www.youtube.com/watch?v=..."
              value={youtubeUrl}
              onChange={(e) => setYoutubeUrl(e.target.value)}
            />
            <Input
              label="Tautan Google Drive (Opsional)"
              placeholder="https://drive.google.com/..."
              value={driveUrl}
              onChange={(e) => setDriveUrl(e.target.value)}
            />
          </div>

          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1">
              Lampiran Dokumen Modul (PDF, Word, PPT, Excel, Video, 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 items-center gap-2 pt-1">
            <input
              type="checkbox"
              id="isPublished"
              checked={isPublished}
              onChange={(e) => setIsPublished(e.target.checked)}
              className="h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
            />
            <label htmlFor="isPublished" className="text-xs text-slate-700 font-medium cursor-pointer">
              Langsung publikasikan materi ini ke siswa
            </label>
          </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 Materi
            </Button>
          </div>
        </form>
      </Modal>

      {/* Modal Preview Materi */}
      {previewMaterial && (
        <Modal
          isOpen={!!previewMaterial}
          onClose={() => setPreviewMaterial(null)}
          title={previewMaterial.title}
          description={`Pertemuan ke-${previewMaterial.meetingNumber} • ${previewMaterial.teacherSubject.subject.name} (${previewMaterial.teacherSubject.class.name})`}
          maxWidth="2xl"
        >
          <div className="space-y-4 text-xs text-slate-700 leading-relaxed">
            {previewMaterial.description && (
              <div className="p-3.5 rounded-xl bg-blue-50/60 border border-blue-100 text-blue-900 font-medium">
                {previewMaterial.description}
              </div>
            )}

            {previewMaterial.content && (
              <div className="whitespace-pre-wrap p-4 rounded-xl bg-slate-50 border border-slate-200 font-sans">
                {previewMaterial.content}
              </div>
            )}

            {/* External Links */}
            <div className="space-y-2 pt-2">
              {previewMaterial.youtubeUrl && (
                <div className="flex items-center justify-between p-3 rounded-xl bg-rose-50 border border-rose-100">
                  <div className="flex items-center gap-2 text-rose-700 font-bold">
                    <Video className="h-4 w-4" />
                    <span>Video Pembelajaran YouTube</span>
                  </div>
                  <a
                    href={previewMaterial.youtubeUrl}
                    target="_blank"
                    rel="noreferrer"
                    className="text-blue-600 hover:underline font-bold"
                  >
                    Buka Video &rarr;
                  </a>
                </div>
              )}

              {previewMaterial.driveUrl && (
                <div className="flex items-center justify-between p-3 rounded-xl bg-emerald-50 border border-emerald-100">
                  <div className="flex items-center gap-2 text-emerald-700 font-bold">
                    <LinkIcon className="h-4 w-4" />
                    <span>Berkas Google Drive</span>
                  </div>
                  <a
                    href={previewMaterial.driveUrl}
                    target="_blank"
                    rel="noreferrer"
                    className="text-blue-600 hover:underline font-bold"
                  >
                    Buka Drive &rarr;
                  </a>
                </div>
              )}
            </div>

            {/* Attachments */}
            {previewMaterial.attachments?.length > 0 && (
              <div className="space-y-1.5 pt-2 border-t border-slate-100">
                <p className="font-bold text-slate-800">Lampiran Dokumen Modul:</p>
                {previewMaterial.attachments.map((att: any) => (
                  <div
                    key={att.id}
                    className="flex items-center justify-between p-2.5 rounded-xl border border-slate-200 bg-white"
                  >
                    <div className="flex items-center gap-2 truncate">
                      <Paperclip 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.5 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 transition-colors shrink-0"
                      title="Unduh Berkas"
                    >
                      <Download className="h-3.5 w-3.5" />
                    </a>
                  </div>
                ))}
              </div>
            )}

            <div className="flex justify-end pt-4 border-t border-slate-100">
              <Button size="sm" onClick={() => setPreviewMaterial(null)}>
                Tutup Modul
              </Button>
            </div>
          </div>
        </Modal>
      )}

      {/* Confirm Delete Modal */}
      {deleteTarget && (
        <ConfirmModal
          isOpen={!!deleteTarget}
          onClose={() => setDeleteTarget(null)}
          onConfirm={handleDeleteMaterial}
          title="Hapus Materi Pembelajaran"
          message={`Apakah Anda yakin ingin menghapus materi "${deleteTarget.title}"? Seluruh berkas lampiran yang terkait juga akan dihapus.`}
          confirmLabel="Hapus Materi"
          isDestructive
          isLoading={deleteLoading}
        />
      )}
    </div>
  );
}