"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Plus, Edit, Trash2, Search, Loader2 } from "lucide-react";
import {
  useMapel,
  createMapel,
  updateMapel,
  deleteMapel,
  type CreateMapelData,
  type UpdateMapelData,
} from "@/hooks/use-mapel";
import { ImportMapel } from "./import-mapel";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { toast } from "sonner";

const MapelFormSchema = z.object({
  kodeMapel: z.string().min(1, "Kode mata pelajaran tidak boleh kosong"),
  namaMapel: z.string().min(1, "Nama mata pelajaran tidak boleh kosong"),
});

type MapelFormData = z.infer<typeof MapelFormSchema>;

export function MapelManagement() {
  const { mapel, isLoading, mutate } = useMapel();
  const [searchTerm, setSearchTerm] = useState("");
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm<MapelFormData>({
    resolver: zodResolver(MapelFormSchema),
  });

  // Filter mapel based on search term
  const filteredMapel = mapel.filter(
    (item) =>
      item.kodeMapel.toLowerCase().includes(searchTerm.toLowerCase()) ||
      item.namaMapel.toLowerCase().includes(searchTerm.toLowerCase()),
  );

  const handleAdd = () => {
    setEditingId(null);
    reset({ kodeMapel: "", namaMapel: "" });
    setIsDialogOpen(true);
  };

  const handleEdit = (item: { id: string; kodeMapel: string; namaMapel: string }) => {
    setEditingId(item.id);
    reset({
      kodeMapel: item.kodeMapel,
      namaMapel: item.namaMapel,
    });
    setIsDialogOpen(true);
  };

  const onSubmit = async (data: MapelFormData) => {
    setIsSubmitting(true);
    try {
      let result;
      if (editingId) {
        result = await updateMapel(editingId, data as UpdateMapelData);
      } else {
        result = await createMapel(data as CreateMapelData);
      }

      if (result.success) {
        toast.success(result.message);
        setIsDialogOpen(false);
        mutate();
        reset();
      } else {
        toast.error(result.message);
      }
    } catch {
      toast.error("Terjadi kesalahan yang tidak terduga");
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleDelete = async (id: string, namaMapel: string) => {
    if (window.confirm(`Apakah Anda yakin ingin menghapus mata pelajaran "${namaMapel}"?`)) {
      try {
        const result = await deleteMapel(id);
        if (result.success) {
          toast.success(result.message);
          mutate();
        } else {
          toast.error(result.message);
        }
      } catch {
        toast.error("Terjadi kesalahan yang tidak terduga");
      }
    }
  };

  if (isLoading) {
    return (
      <Card>
        <CardContent className="flex items-center justify-center py-10">
          <Loader2 className="h-8 w-8 animate-spin" />
        </CardContent>
      </Card>
    );
  }

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle>Data Mata Pelajaran</CardTitle>
            <CardDescription>Kelola data mata pelajaran sekolah</CardDescription>
          </div>
          <div className="flex gap-2">
            <ImportMapel onImportComplete={mutate} />
            <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
              <DialogTrigger asChild>
                <Button onClick={handleAdd}>
                  <Plus className="mr-2 h-4 w-4" />
                  Tambah Mata Pelajaran
                </Button>
              </DialogTrigger>
              <DialogContent className="max-w-md">
                <DialogHeader>
                  <DialogTitle>{editingId ? "Edit Mata Pelajaran" : "Tambah Mata Pelajaran"}</DialogTitle>
                  <DialogDescription>
                    {editingId ? "Perbarui data mata pelajaran" : "Tambahkan mata pelajaran baru ke sistem"}
                  </DialogDescription>
                </DialogHeader>

                <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="kodeMapel">Kode Mata Pelajaran</Label>
                    <Input id="kodeMapel" {...register("kodeMapel")} placeholder="Contoh: MAT001" />
                    {errors.kodeMapel && <p className="text-destructive text-sm">{errors.kodeMapel.message}</p>}
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="namaMapel">Nama Mata Pelajaran</Label>
                    <Input id="namaMapel" {...register("namaMapel")} placeholder="Contoh: Matematika" />
                    {errors.namaMapel && <p className="text-destructive text-sm">{errors.namaMapel.message}</p>}
                  </div>

                  <div className="flex justify-end space-x-2">
                    <Button
                      type="button"
                      variant="outline"
                      onClick={() => setIsDialogOpen(false)}
                      disabled={isSubmitting}
                    >
                      Batal
                    </Button>
                    <Button type="submit" disabled={isSubmitting}>
                      {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                      {editingId ? "Perbarui" : "Simpan"}
                    </Button>
                  </div>
                </form>
              </DialogContent>
            </Dialog>
          </div>
        </div>

        <div className="flex items-center space-x-2">
          <div className="relative max-w-sm flex-1">
            <Search className="text-muted-foreground absolute top-2.5 left-2 h-4 w-4" />
            <Input
              placeholder="Cari mata pelajaran..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-8"
            />
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <div className="rounded-md border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-16">No</TableHead>
                <TableHead>Kode</TableHead>
                <TableHead>Nama Mata Pelajaran</TableHead>
                <TableHead className="text-right">Aksi</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredMapel.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={4} className="h-24 text-center">
                    {searchTerm ? "Tidak ditemukan mata pelajaran yang cocok" : "Belum ada data mata pelajaran"}
                  </TableCell>
                </TableRow>
              ) : (
                filteredMapel.map((item, index) => (
                  <TableRow key={item.id}>
                    <TableCell className="font-medium">{index + 1}</TableCell>
                    <TableCell className="font-mono">{item.kodeMapel}</TableCell>
                    <TableCell>{item.namaMapel}</TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end space-x-2">
                        <Button variant="outline" size="sm" onClick={() => handleEdit(item)}>
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => handleDelete(item.id, item.namaMapel)}
                          className="text-destructive hover:bg-destructive hover:text-destructive-foreground"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </div>
      </CardContent>
    </Card>
  );
}