import { zodResolver } from "@hookform/resolvers/zod"

import { useMutation, useQueryClient } from "@tanstack/react-query"

import { Plus } from "lucide-react"

import { useState } from "react"

import { useForm } from "react-hook-form"

import { z } from "zod"

import { type UserCreate, UsersService } from "@/client"

import { Button } from "@/components/ui/button"

import { Checkbox } from "@/components/ui/checkbox"

import {

  Dialog,

  DialogClose,

  DialogContent,

  DialogDescription,

  DialogFooter,

  DialogHeader,

  DialogTitle,

  DialogTrigger,

} from "@/components/ui/dialog"

import {

  Form,

  FormControl,

  FormField,

  FormItem,

  FormLabel,

  FormMessage,

} from "@/components/ui/form"

import { Input } from "@/components/ui/input"

import { LoadingButton } from "@/components/ui/loading-button"

import useCustomToast from "@/hooks/useCustomToast"

import { handleError } from "@/utils"

const formSchema = z

  .object({

    email: z.email({ message: "Invalid email address" }),

    full_name: z.string().optional(),

    password: z

      .string()

      .min(1, { message: "Password is required" })

      .min(8, { message: "Password must be at least 8 characters" }),

    confirm_password: z

      .string()

      .min(1, { message: "Please confirm your password" }),

    is_superuser: z.boolean(),

    is_active: z.boolean(),

  })

    message: "The passwords don't match",

    path: ["confirm_password"],

  })

type FormData = z.infer<typeof formSchema>

const AddUser = () => {

  const [isOpen, setIsOpen] = useState(false)

  const queryClient = useQueryClient()

  const { showSuccessToast, showErrorToast } = useCustomToast()

  const form = useForm<FormData>({

    resolver: zodResolver(formSchema),

    mode: "onBlur",

    criteriaMode: "all",

    defaultValues: {

      email: "",

      full_name: "",

      password: "",

      confirm_password: "",

      is_superuser: false,

      is_active: false,

    },

  })

  const mutation = useMutation({

    mutationFn: (data: UserCreate) =>

      UsersService.createUser({ requestBody: data }),

    onSuccess: () => {

      showSuccessToast("User created successfully")

      form.reset()

      setIsOpen(false)

    },

    onError: handleError.bind(showErrorToast),

    onSettled: () => {

      queryClient.invalidateQueries({ queryKey: ["users"] })

    },

  })

  const onSubmit = (data: FormData) => {

    mutation.mutate(data)

  }

  return (

    <Dialog open={isOpen} onOpenChange={setIsOpen}>

      <DialogTrigger asChild>

        <Button className="my-4">

          <Plus className="mr-2" />

          Add User

        </Button>

      </DialogTrigger>

      <DialogContent className="sm:max-w-md">

        <DialogHeader>

          <DialogTitle>Add User</DialogTitle>

          <DialogDescription>

            Fill in the form below to add a new user to the system.

          </DialogDescription>

        </DialogHeader>

        <Form {...form}>

          <form onSubmit={form.handleSubmit(onSubmit)}>

            <div className="grid gap-4 py-4">

              <FormField

                control={form.control}

                name="email"

                render={({ field }) => (

                  <FormItem>

                    <FormLabel>

                      Email <span className="text-destructive">*</span>

                    </FormLabel>

                    <FormControl>

                      <Input

                        placeholder="Email"

                        type="email"

                        {...field}

                        required

                      />

                    </FormControl>

                    <FormMessage />

                  </FormItem>

                )}

              />

              <FormField

                control={form.control}

                name="full_name"

                render={({ field }) => (

                  <FormItem>

                    <FormLabel>Full Name</FormLabel>

                    <FormControl>

                      <Input placeholder="Full name" type="text" {...field} />

                    </FormControl>

                    <FormMessage />

                  </FormItem>

                )}

              />

              <FormField

                control={form.control}

                name="password"

                render={({ field }) => (

                  <FormItem>

                    <FormLabel>

                      Set Password <span className="text-destructive">*</span>

                    </FormLabel>

                    <FormControl>

                      <Input

                        placeholder="Password"

                        type="password"

                        {...field}

                        required

                      />

                    </FormControl>

                    <FormMessage />

                  </FormItem>

                )}

              />

              <FormField

                control={form.control}

                name="confirm_password"

                render={({ field }) => (

                  <FormItem>

                    <FormLabel>

                      Confirm Password{" "}

                      <span className="text-destructive">*</span>

                    </FormLabel>

                    <FormControl>

                      <Input

                        placeholder="Password"

                        type="password"

                        {...field}

                        required

                      />

                    </FormControl>

                    <FormMessage />

                  </FormItem>

                )}

              />

              <FormField

                control={form.control}

                name="is_superuser"

                render={({ field }) => (

                  <FormItem className="flex items-center gap-3 space-y-0">

                    <FormControl>

                      <Checkbox

                        checked={field.value}

                        onCheckedChange={field.onChange}

                      />

                    </FormControl>

                    <FormLabel className="font-normal">Is superuser?</FormLabel>

                  </FormItem>

                )}

              />

              <FormField

                control={form.control}

                name="is_active"

                render={({ field }) => (

                  <FormItem className="flex items-center gap-3 space-y-0">

                    <FormControl>

                      <Checkbox

                        checked={field.value}

                        onCheckedChange={field.onChange}

                      />

                    </FormControl>

                    <FormLabel className="font-normal">Is active?</FormLabel>

                  </FormItem>

                )}

              />

            </div>

            <DialogFooter>

              <DialogClose asChild>

                <Button variant="outline" disabled={mutation.isPending}>

                  Cancel

                </Button>

              </DialogClose>

              <LoadingButton type="submit" loading={mutation.isPending}>

                Save

              </LoadingButton>

            </DialogFooter>

          </form>

        </Form>

      </DialogContent>

    </Dialog>

  )

}

export default AddUser