"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { toast } from "sonner";
import { ArrowLeft, Loader2, Save } from "lucide-react";

interface MateriFormProps {
  initialData?: any;
  isEdit?: boolean;
}

export function MateriForm({ initialData, isEdit = false }: MateriFormProps) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  // Master Data
  const [mapels, setMapels] = useState<{ id: string; namaMapel: string }[]>([]);
  const [rombels, setRombels] = useState<{ id: string; namaRombel: string }[]>([]);

  const [formData, setFormData] = useState(() => {
    if (initialData) {
      return {
        judul: initialData.judul || "",
        mapelId: initialData.mapelId || "",
        rombelId: initialData.rombelId || "",
        content: initialData.content || "",
        linkDrive: initialData.linkDrive || "",
        youtubeId: initialData.youtubeId || "",
        tanggalSelesai: initialData.tanggalSelesai
          ? new Date(initialData.tanggalSelesai).toISOString().split("T")[0]
          : "",
      };
    }
    return {
      judul: "",
      mapelId: "",
      rombelId: "",
      content: "",
      linkDrive: "",
      youtubeId: "",
      tanggalSelesai: "",
    };
  });

  useEffect(() => {
    fetchMasterData();
  }, []);

  const fetchMasterData = async () => {
    try {
      const [mRes, rRes] = await Promise.all([fetch("/api/mapel"), fetch("/api/rombel")]);
      const mData = await mRes.json();
      const rData = await rRes.json();
      if (mData.success) setMapels(mData.data);
      if (rData.success) setRombels(rData.data);
    } catch (e) {
      console.error("Failed to fetch master data");
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    try {
      const url = isEdit ? `/api/guru/materi/${initialData.id}` : "/api/guru/materi";
      const method = isEdit ? "PUT" : "POST";

      const res = await fetch(url, {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData),
      });
      const json = await res.json();
      if (json.success) {
        toast.success(isEdit ? "Materi berhasil diperbarui" : "Materi berhasil dibuat");
        router.push("/dashboard/guru/materi");
        router.refresh();
      } else {
        toast.error(json.message);
      }
    } catch (error) {
      toast.error("Terjadi kesalahan");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="mx-auto max-w-4xl space-y-6 p-6">
      <div className="flex items-center gap-4">
        <Button variant="ghost" onClick={() => router.back()}>
          <ArrowLeft className="mr-2 h-4 w-4" /> Kembali
        </Button>
        <h1 className="text-2xl font-bold">{isEdit ? "Edit Materi" : "Tambah Materi Baru"}</h1>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Form Materi Belajar</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="grid gap-4 md:grid-cols-2">
              <div className="space-y-2">
                <Label>Mata Pelajaran</Label>
                <Select value={formData.mapelId} onValueChange={(v) => setFormData({ ...formData, mapelId: v })}>
                  <SelectTrigger>
                    <SelectValue placeholder="Pilih Mapel" />
                  </SelectTrigger>
                  <SelectContent>
                    {mapels.map((m) => (
                      <SelectItem key={m.id} value={m.id}>
                        {m.namaMapel}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>Kelas</Label>
                <Select value={formData.rombelId} onValueChange={(v) => setFormData({ ...formData, rombelId: v })}>
                  <SelectTrigger>
                    <SelectValue placeholder="Pilih Kelas" />
                  </SelectTrigger>
                  <SelectContent>
                    {rombels.map((r) => (
                      <SelectItem key={r.id} value={r.id}>
                        {r.namaRombel}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

            <div className="space-y-2">
              <Label>Judul Materi</Label>
              <Input
                value={formData.judul}
                onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
                placeholder="Contoh: Bab 1 - Pendahuluan"
                required
              />
            </div>

            <div className="space-y-2">
              <Label>Materi Belajar (Isi)</Label>
              <Textarea
                className="min-h-[200px]"
                value={formData.content}
                onChange={(e) => setFormData({ ...formData, content: e.target.value })}
                placeholder="Tuliskan materi di sini..."
                required
              />
            </div>

            <div className="grid gap-4 md:grid-cols-2">
              <div className="space-y-2">
                <Label>Berlaku Sampai Tanggal</Label>
                <Input
                  type="date"
                  value={formData.tanggalSelesai}
                  onChange={(e) => setFormData({ ...formData, tanggalSelesai: e.target.value })}
                />
              </div>
              <div className="space-y-2">
                <Label>Link Google Drive (Opsional)</Label>
                <Input
                  value={formData.linkDrive}
                  onChange={(e) => setFormData({ ...formData, linkDrive: e.target.value })}
                  placeholder="https://drive.google.com/..."
                />
              </div>
            </div>

            <div className="space-y-2">
              <Label>Youtube ID (Opsional)</Label>
              <Input
                value={formData.youtubeId}
                onChange={(e) => setFormData({ ...formData, youtubeId: e.target.value })}
                placeholder="Contoh: 42cqGZY9VTc"
              />
              <p className="text-muted-foreground text-xs">Masukkan ID video saja, bukan link penuh.</p>
            </div>

            <div className="flex justify-end pt-4">
              <Button type="submit" disabled={loading}>
                {loading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Save className="mr-2 h-4 w-4" />}
                {isEdit ? "Simpan Perubahan" : "Simpan Materi"}
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}