'use client';

import { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/Table';
import { Modal } from '@/components/ui/Modal';
import { api } from '@/lib/api/client';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { toast } from 'react-hot-toast';
import { Pencil, Trash2, Plus } from 'lucide-react';

const guruSchema = z.object({
  username: z.string().min(3, 'Username minimal 3 karakter'),
  email: z.string().email('Email tidak valid'),
  password: z.string().min(6, 'Password minimal 6 karakter'),
  confirm_password: z.string().min(6, 'Konfirmasi password wajib diisi'),
  nip: z.string().min(1, 'NIP wajib diisi'),
  nama_lengkap: z.string().min(1, 'Nama lengkap wajib diisi'),
  jenis_kelamin: z.enum(['L', 'P']).optional(),
  tempat_lahir: z.string().optional(),
  tanggal_lahir: z.string().optional(),
  alamat: z.string().optional(),
  no_telepon: z.string().optional(),
  bidang_studi: z.string().optional(),
}).refine((data) => data.password === data.confirm_password, {
  message: 'Password tidak sama',
  path: ['confirm_password'],
});

type GuruFormData = z.infer<typeof guruSchema>;

interface Guru {
  id_guru: number;
  nip: string;
  nama_lengkap: string;
  username: string;
  email: string;
  jenis_kelamin?: string;
  bidang_studi?: string;
  status: string;
}

export default function GuruManagement() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingGuru, setEditingGuru] = useState<Guru | null>(null);
  const queryClient = useQueryClient();

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

  const { data: guruList, isLoading } = useQuery({
    queryKey: ['guru'],
    queryFn: async () => {
      const response = await api.get<{ data: Guru[] }>('/guru');
      return response.data;
    },
  });

  const createMutation = useMutation({
    mutationFn: (data: GuruFormData) => api.post('/guru', data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['guru'] });
      toast.success('Guru berhasil ditambahkan');
      setIsModalOpen(false);
      reset();
    },
    onError: (error: any) => {
      toast.error(error.response?.data?.message || 'Gagal menambahkan guru');
    },
  });

  const updateMutation = useMutation({
    mutationFn: ({ id, data }: { id: number; data: Partial<GuruFormData> }) =>
      api.put(`/guru/${id}`, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['guru'] });
      toast.success('Guru berhasil diupdate');
      setIsModalOpen(false);
      setEditingGuru(null);
      reset();
    },
    onError: (error: any) => {
      toast.error(error.response?.data?.message || 'Gagal mengupdate guru');
    },
  });

  const deleteMutation = useMutation({
    mutationFn: (id: number) => api.delete(`/guru/${id}`),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['guru'] });
      toast.success('Guru berhasil dihapus');
    },
    onError: (error: any) => {
      toast.error(error.response?.data?.message || 'Gagal menghapus guru');
    },
  });

  const onSubmit = (data: GuruFormData) => {
    if (editingGuru) {
      updateMutation.mutate({ id: editingGuru.id_guru, data });
    } else {
      createMutation.mutate(data);
    }
  };

  const handleEdit = (guru: Guru) => {
    setEditingGuru(guru);
    setIsModalOpen(true);
    // Populate form with existing data
    reset({
      username: guru.username,
      email: guru.email,
      nip: guru.nip,
      nama_lengkap: guru.nama_lengkap,
      jenis_kelamin: guru.jenis_kelamin as 'L' | 'P' | undefined,
      bidang_studi: guru.bidang_studi,
    });
  };

  const handleDelete = (id: number) => {
    if (confirm('Apakah Anda yakin ingin menghapus guru ini?')) {
      deleteMutation.mutate(id);
    }
  };

  if (isLoading) {
    return <div className="flex justify-center p-8">Loading...</div>;
  }

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold text-gray-900">Manajemen Guru</h1>
        <Button onClick={() => {
          setEditingGuru(null);
          reset();
          setIsModalOpen(true);
        }}>
          <Plus className="h-4 w-4 mr-2" />
          Tambah Guru
        </Button>
      </div>

      <Card>
        <CardContent className="p-0">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>NIP</TableHead>
                <TableHead>Nama Lengkap</TableHead>
                <TableHead>Username</TableHead>
                <TableHead>Email</TableHead>
                <TableHead>Bidang Studi</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Aksi</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {guruList?.map((guru) => (
                <TableRow key={guru.id_guru}>
                  <TableCell>{guru.nip}</TableCell>
                  <TableCell className="font-medium">{guru.nama_lengkap}</TableCell>
                  <TableCell>{guru.username}</TableCell>
                  <TableCell>{guru.email}</TableCell>
                  <TableCell>{guru.bidang_studi || '-'}</TableCell>
                  <TableCell>
                    <span className={`px-2 py-1 rounded-full text-xs ${
                      guru.status === 'aktif' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
                    }`}>
                      {guru.status}
                    </span>
                  </TableCell>
                  <TableCell className="text-right">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => handleEdit(guru)}
                    >
                      <Pencil className="h-4 w-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => handleDelete(guru.id_guru)}
                    >
                      <Trash2 className="h-4 w-4 text-red-500" />
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      <Modal
        isOpen={isModalOpen}
        onClose={() => {
          setIsModalOpen(false);
          setEditingGuru(null);
          reset();
        }}
        title={editingGuru ? 'Edit Guru' : 'Tambah Guru'}
      >
        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium mb-1">Username</label>
              <Input {...register('username')} />
              {errors.username && (
                <p className="text-sm text-red-500">{errors.username.message}</p>
              )}
            </div>
            <div>
              <label className="block text-sm font-medium mb-1">Email</label>
              <Input {...register('email')} type="email" />
              {errors.email && (
                <p className="text-sm text-red-500">{errors.email.message}</p>
              )}
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium mb-1">Password</label>
              <Input {...register('password')} type="password" />
              {errors.password && (
                <p className="text-sm text-red-500">{errors.password.message}</p>
              )}
            </div>
            <div>
              <label className="block text-sm font-medium mb-1">Konfirmasi Password</label>
              <Input {...register('confirm_password')} type="password" />
              {errors.confirm_password && (
                <p className="text-sm text-red-500">{errors.confirm_password.message}</p>
              )}
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium mb-1">NIP</label>
              <Input {...register('nip')} />
              {errors.nip && (
                <p className="text-sm text-red-500">{errors.nip.message}</p>
              )}
            </div>
            <div>
              <label className="block text-sm font-medium mb-1">Nama Lengkap</label>
              <Input {...register('nama_lengkap')} />
              {errors.nama_lengkap && (
                <p className="text-sm text-red-500">{errors.nama_lengkap.message}</p>
              )}
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium mb-1">Jenis Kelamin</label>
              <select
                {...register('jenis_kelamin')}
                className="w-full rounded-md border border-input bg-background px-3 py-2"
              >
                <option value="">Pilih</option>
                <option value="L">Laki-laki</option>
                <option value="P">Perempuan</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium mb-1">Bidang Studi</label>
              <Input {...register('bidang_studi')} />
            </div>
          </div>
          <div className="flex justify-end gap-2 mt-4">
            <Button
              type="button"
              variant="outline"
              onClick={() => {
                setIsModalOpen(false);
                setEditingGuru(null);
                reset();
              }}
            >
              Batal
            </Button>
            <Button type="submit">
              {editingGuru ? 'Update' : 'Simpan'}
            </Button>
          </div>
        </form>
      </Modal>
    </div>
  );
}