"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, UserPlus } from "lucide-react";
import {
  useGuru,
  createGuru,
  updateGuru,
  deleteGuru,
  generateGuruAccount,
  type CreateGuruData,
  type UpdateGuruData,
} from "@/hooks/use-guru";
import { ImportGuru } from "./import-guru";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { toast } from "sonner";

const GuruFormSchema = z.object({
  nip: z.string().min(1, "NIP tidak boleh kosong"),
  nama: z.string().min(1, "Nama tidak boleh kosong"),
  noWa: z.string().optional(),
  createUser: z.boolean().optional(),
});

type GuruFormData = z.infer<typeof GuruFormSchema>;

export function GuruManagement() {
  const { guru, isLoading, mutate } = useGuru();
  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,
    setValue,
  } = useForm<GuruFormData>({
    resolver: zodResolver(GuruFormSchema),
    defaultValues: {
      createUser: true,
    },
  });

  const filteredGuru = guru.filter(
    (item) => item.nama.toLowerCase().includes(searchTerm.toLowerCase()) || item.nip.includes(searchTerm),
  );

  const handleAdd = () => {
    reset({ createUser: true, nip: "", nama: "", noWa: "" });
    setEditingId(null);
    setIsDialogOpen(true);
  };

  const handleEdit = (item: any) => {
    reset();
    setEditingId(item.id);
    setValue("nip", item.nip);
    setValue("nama", item.nama);
    setValue("noWa", item.noWa || "");
    // User creation not supported in edit mode here
    setIsDialogOpen(true);
  };

  const handleGenerateAccount = async (id: string) => {
    if (!confirm("Buat akun user untuk guru ini? Password default adalah NIP.")) return;
    try {
      const res = await generateGuruAccount(id);
      toast.success(res.message);
      mutate();
    } catch (error: any) {
      toast.error(error.message);
    }
  };

  const handleDelete = async (id: string) => {
    if (!confirm("Apakah Anda yakin ingin menghapus data guru ini?")) return;

    try {
      await deleteGuru(id);
      toast.success("Guru berhasil dihapus");
      mutate();
    } catch (error: any) {
      toast.error(error.message || "Gagal menghapus guru");
    }
  };

  const onSubmit = async (data: GuruFormData) => {
    setIsSubmitting(true);
    try {
      if (editingId) {
        // Exclude createUser from update if present
        const { createUser, ...updateData } = data;
        await updateGuru(editingId, updateData as UpdateGuruData);
        toast.success("Guru berhasil diperbarui");
      } else {
        await createGuru(data as CreateGuruData);
        toast.success(
          data.createUser ? "Guru dan Akun User (Password: NIP) berhasil ditambahkan" : "Guru berhasil ditambahkan",
        );
      }

      setIsDialogOpen(false);
      reset();
      mutate();
    } catch (error: any) {
      toast.error(error.message || "Terjadi kesalahan");
    } finally {
      setIsSubmitting(false);
    }
  };

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

                <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="nip">NIP</Label>
                    <Input id="nip" {...register("nip")} placeholder="Masukkan NIP" />
                    {errors.nip && <p className="text-destructive text-sm">{errors.nip.message}</p>}
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="nama">Nama Lengkap</Label>
                    <Input id="nama" {...register("nama")} placeholder="Masukkan nama lengkap" />
                    {errors.nama && <p className="text-destructive text-sm">{errors.nama.message}</p>}
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="noWa">No. WhatsApp</Label>
                    <Input id="noWa" {...register("noWa")} placeholder="Masukkan nomor WhatsApp (opsional)" />
                  </div>

                  {!editingId && (
                    <div className="flex items-start space-x-2 rounded-md border p-3">
                      <input
                        type="checkbox"
                        id="createUser"
                        className="mt-1 h-4 w-4 rounded border-gray-300"
                        {...register("createUser")}
                      />
                      <div className="grid gap-1.5 leading-none">
                        <Label
                          htmlFor="createUser"
                          className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                        >
                          Buat Akun User Otomatis?
                        </Label>
                        <p className="text-muted-foreground text-xs">Username dan Password akan diset sesuai NIP.</p>
                      </div>
                    </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 guru..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-8"
            />
          </div>
        </div>
      </CardHeader>

      <CardContent>
        {isLoading ? (
          <div className="flex items-center justify-center py-6">
            <Loader2 className="h-6 w-6 animate-spin" />
            <span className="ml-2">Memuat data...</span>
          </div>
        ) : (
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-[60px]">No</TableHead>
                  <TableHead>NIP</TableHead>
                  <TableHead>Nama</TableHead>
                  <TableHead>No. WhatsApp</TableHead>
                  <TableHead className="w-[100px]">Aksi</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredGuru.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={5} className="py-6 text-center">
                      {searchTerm ? "Tidak ada guru yang sesuai dengan pencarian" : "Belum ada data guru"}
                    </TableCell>
                  </TableRow>
                ) : (
                  filteredGuru.map((item, index) => (
                    <TableRow key={item.id}>
                      <TableCell className="font-medium">{index + 1}</TableCell>
                      <TableCell>{item.nip}</TableCell>
                      <TableCell className="font-medium">{item.nama}</TableCell>
                      <TableCell>{item.noWa || "-"}</TableCell>
                      <TableCell>
                        <div className="flex items-center space-x-1">
                          {!item.userId && (
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleGenerateAccount(item.id)}
                              title="Buat Akun User"
                              className="text-blue-600 hover:text-blue-700"
                            >
                              <UserPlus className="h-4 w-4" />
                            </Button>
                          )}
                          <Button variant="ghost" size="sm" onClick={() => handleEdit(item)}>
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handleDelete(item.id)}
                            className="text-destructive hover:text-destructive"
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
        )}
      </CardContent>
    </Card>
  );
}