import apiFetch from "@/lib/apiFetch";
import {
   ActionIcon,
   Button,
   Divider,
   Flex,
   Group,
   Input,
   Modal,
   Select,
   Stack,
   Table,
   Text,
   Title,
   Tooltip
} from "@mantine/core";
import { useDisclosure, useShallowEffect } from "@mantine/hooks";
import { IconEdit, IconPlus, IconTrash } from "@tabler/icons-react";
import { useState } from "react";
import useSWR from "swr";
import notification from "./notificationGlobal";

export default function UserSetting() {
   const [btnDisable, setBtnDisable] = useState(true);
   const [btnLoading, setBtnLoading] = useState(false);
   const [opened, { open, close }] = useDisclosure(false);
   const [openedDelete, { open: openDelete, close: closeDelete }] = useDisclosure(false);
   const [dataDelete, setDataDelete] = useState("")
   const { data: dataRole, mutate: mutateRole, isLoading: isLoadingRole } = useSWR("user-role", () =>
      apiFetch.api.user.role.get(),
   );
   const [openedTambah, { open: openTambah, close: closeTambah }] = useDisclosure(false);
   const { data, mutate, isLoading } = useSWR("user-list", () =>
      apiFetch.api.user.list.get(),
   );
   const list = data?.data || [];
   const listRole = dataRole?.data || [];
   const [dataEdit, setDataEdit] = useState({
      id: "",
      name: "",
      phone: "",
      email: "",
      roleId: "",
   });
   const [dataTambah, setDataTambah] = useState({
      name: "",
      email: "",
      roleId: "",
      password: "",
      phone: "",
   })
   const [error, setError] = useState({
      name: false,
      email: false,
      roleId: false,
      password: false,
      phone: false,
   })

   useShallowEffect(() => {
      mutate();
   }, []);

   async function handleCreate() {
      try {
         setBtnLoading(true);
         const res = await apiFetch.api.user.create.post(dataTambah);
         if (res.status === 200) {
            mutate();
            closeTambah();
            setDataTambah({
               name: "",
               email: "",
               roleId: "",
               password: "",
               phone: "",
            });
            notification({
               title: "Success",
               message: "Your user have been saved",
               type: "success",
            })
         } else {
            notification({
               title: "Error",
               message: "Failed to create user ",
               type: "error",
            })
         }
      } catch (error) {
         console.error(error);
         notification({
            title: "Error",
            message: "Failed to create user",
            type: "error",
         })
      } finally {
         setBtnLoading(false);
      }
   }

   async function handleEdit() {
      try {
         setBtnLoading(true);
         const res = await apiFetch.api.pengaduan.category.update.post(dataEdit);
         if (res.status === 200) {
            mutate();
            close();
            notification({
               title: "Success",
               message: "Your category have been saved",
               type: "success",
            })
         } else {
            notification({
               title: "Error",
               message: "Failed to edit category",
               type: "error",
            })
         }
      } catch (error) {
         console.error(error);
         notification({
            title: "Error",
            message: "Failed to edit category",
            type: "error",
         })
      } finally {
         setBtnLoading(false);
      }
   }

   async function handleDelete() {
      try {
         setBtnLoading(true);
         const res = await apiFetch.api.user.delete.post({ id: dataDelete });
         if (res.status === 200) {
            mutate();
            closeDelete();
            notification({
               title: "Success",
               message: "Your user have been deleted",
               type: "success",
            })
         } else {
            notification({
               title: "Error",
               message: "Failed to delete user",
               type: "error",
            })
         }
      } catch (error) {
         console.error(error);
         notification({
            title: "Error",
            message: "Failed to delete user",
            type: "error",
         })
      } finally {
         setBtnLoading(false);
      }
   }

   function chooseEdit({ data }: { data: { id: string, name: string, phone: string, email: string, roleId: string } }) {
      setDataEdit(data);
      open();
   }

   function onValidation({ kat, value, aksi }: { kat: 'name' | 'email' | 'roleId' | 'password' | 'phone', value: string | null, aksi: 'edit' | 'tambah' }) {
      if (value == null || value.length < 1) {
         setBtnDisable(true);
         setError({ ...error, [kat]: true });
      } else {
         setBtnDisable(false);
         setError({ ...error, [kat]: false });
      }


      if (aksi === 'edit') {
         setDataEdit({ ...dataEdit, [kat]: value });
      } else {
         setDataTambah({ ...dataTambah, [kat]: value });
      }
   }

   useShallowEffect(() => {
      if (dataEdit.name.length > 0) {
         setBtnDisable(false);
      }
   }, [dataEdit.id]);


   return (
      <>
         {/* Modal Edit */}
         <Modal
            opened={opened}
            onClose={close}
            title={"Edit"}
            centered
            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
         >
            <Stack gap="ld">
               <Input.Wrapper label="Edit Kategori">
                  <Input value={dataEdit.name} onChange={(e) => onValidation({ kat: 'name', value: e.target.value, aksi: 'edit' })} />
               </Input.Wrapper>
               <Group justify="center" grow>
                  <Button variant="light" onClick={close}>
                     Batal
                  </Button>
                  <Button variant="filled" onClick={handleEdit} disabled={btnDisable} loading={btnLoading}>
                     Simpan
                  </Button>
               </Group>
            </Stack>
         </Modal>

         {/* Modal Tambah */}
         <Modal
            opened={openedTambah}
            onClose={closeTambah}
            title={"Tambah"}
            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
         >
            <Stack gap="ld">
               <Input.Wrapper label="Nama" description="" error={error.name ? "Field is required" : ""}>
                  <Input value={dataTambah.name} onChange={(e) => onValidation({ kat: 'name', value: e.target.value, aksi: 'tambah' })} />
               </Input.Wrapper>
               <Select
                  label="Role"
                  placeholder="Pilih Role"
                  data={listRole.map((r: any) => ({
                     value: r.id,
                     label: r.name,
                  }))}
                  value={dataTambah.roleId || null}
                  error={error.roleId ? "Field is required" : ""}
                  onChange={(_value, option) => { onValidation({ kat: 'roleId', value: option?.value, aksi: 'tambah' }) }}
               />
               <Input.Wrapper label="Phone" description="">
                  <Input value={dataTambah.phone} onChange={(e) => onValidation({ kat: 'phone', value: e.target.value, aksi: 'tambah' })} />
               </Input.Wrapper>
               <Input.Wrapper label="Email" description="" error={error.email ? "Field is required" : ""}>
                  <Input value={dataTambah.email} onChange={(e) => onValidation({ kat: 'email', value: e.target.value, aksi: 'tambah' })} />
               </Input.Wrapper>
               <Input.Wrapper label="Password" description="" error={error.password ? "Field is required" : ""}>
                  <Input value={dataTambah.password} onChange={(e) => onValidation({ kat: 'password', value: e.target.value, aksi: 'tambah' })} />
               </Input.Wrapper>

               <Group justify="center" grow>
                  <Button variant="light" onClick={closeTambah}>
                     Batal
                  </Button>
                  <Button variant="filled" onClick={handleCreate} disabled={btnDisable || dataTambah.name.length < 1 || dataTambah.email.length < 1 || dataTambah.password.length < 1 || dataTambah.roleId.length < 1 || dataTambah.phone.length < 1} loading={btnLoading}>
                     Simpan
                  </Button>
               </Group>
            </Stack>
         </Modal>


         {/* Modal Delete */}
         <Modal
            opened={openedDelete}
            onClose={closeDelete}
            title={"Delete"}
            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
         >
            <Stack gap="md">
               <Text size="md" color="gray.6">
                  Apakah anda yakin ingin menghapus user ini?
               </Text>
               <Group justify="center" grow>
                  <Button variant="light" onClick={closeDelete}>
                     Batal
                  </Button>
                  <Button variant="filled" color="red" onClick={handleDelete} loading={btnLoading}>
                     Hapus
                  </Button>
               </Group>
            </Stack>
         </Modal>


         <Stack gap={"md"}>
            <Flex align="center" justify="space-between">
               <Title order={4} c="gray.2">
                  Daftar User
               </Title>
               <Tooltip label="Tambah User">
                  <Button
                     variant="light"
                     leftSection={<IconPlus size={20} />}
                     onClick={openTambah}
                  >
                     Tambah
                  </Button>
               </Tooltip>
            </Flex>
            <Divider my={0} />
            <Stack gap={"md"}>
               <Table highlightOnHover>
                  <Table.Thead>
                     <Table.Tr>
                        <Table.Th>Nama</Table.Th>
                        <Table.Th>Telepon</Table.Th>
                        <Table.Th>Email</Table.Th>
                        <Table.Th>Role</Table.Th>
                        <Table.Th>Aksi</Table.Th>
                     </Table.Tr>
                  </Table.Thead>
                  <Table.Tbody>
                     {
                        list.length > 0 ? (
                           list?.map((v: any) => (
                              <Table.Tr key={v.id}>
                                 <Table.Td>{v.name}</Table.Td>
                                 <Table.Td>{v.phone}</Table.Td>
                                 <Table.Td>{v.email}</Table.Td>
                                 <Table.Td>{v.roleId}</Table.Td>
                                 <Table.Td>
                                    <Group>
                                       <Tooltip label="Edit User">
                                          <ActionIcon
                                             variant="light"
                                             size="sm"
                                             style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
                                             onClick={() => chooseEdit({ data: v })}
                                          >
                                             <IconEdit size={20} />
                                          </ActionIcon>
                                       </Tooltip>
                                       <Tooltip label="Delete User">
                                          <ActionIcon
                                             variant="light"
                                             size="sm"
                                             color="red"
                                             style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
                                             onClick={() => {
                                                setDataDelete(v.id)
                                                openDelete()
                                             }}
                                          >
                                             <IconTrash size={20} />
                                          </ActionIcon>
                                       </Tooltip>
                                    </Group>
                                 </Table.Td>
                              </Table.Tr>
                           ))
                        ) : (
                           <Table.Tr>
                              <Table.Td colSpan={5} align="center">
                                 Data User Tidak Ditemukan
                              </Table.Td>
                           </Table.Tr>
                        )
                     }
                  </Table.Tbody>
               </Table>
            </Stack>
         </Stack>
      </>
   );
}