import { Button } from "@/components/ui/button";
import {
  Dialog,
  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 { Textarea } from "@/components/ui/textarea";
import { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod";
import { AlertTriangle } from "lucide-react";
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";

const addCertificate = z.object({
  name: z.string().min(1, "Name is required"),
  certificateData: z.string().min(1, "Certificate data is required"),
  privateKey: z.string().min(1, "Private key is required"),
  autoRenew: z.boolean().optional(),
});

type AddCertificate = z.infer<typeof addCertificate>;

export const AddCertificate = () => {
  const utils = api.useUtils();

  const { mutateAsync, isError, error, isLoading } =
    api.certificates.create.useMutation();

  const form = useForm<AddCertificate>({
    defaultValues: {
      name: "",
      certificateData: "",
      privateKey: "",
      autoRenew: false,
    },
    resolver: zodResolver(addCertificate),
  });
  useEffect(() => {
    form.reset();
  }, [form, form.formState.isSubmitSuccessful, form.reset]);

  const onSubmit = async (data: AddCertificate) => {
    await mutateAsync({
      name: data.name,
      certificateData: data.certificateData,
      privateKey: data.privateKey,
      autoRenew: data.autoRenew,
    })
      .then(async () => {
        toast.success("Certificate Created");
        await utils.certificates.all.invalidate();
      })
      .catch(() => {
        toast.error("Error to create the Certificate");
      });
  };
  return (
    <Dialog>
      <DialogTrigger className="" asChild>
        <Button>Add Certificate</Button>
      </DialogTrigger>
      <DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
        <DialogHeader>
          <DialogTitle>Add Certificate</DialogTitle>
          <DialogDescription>Add a new certificate</DialogDescription>
        </DialogHeader>
        {isError && (
          <div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
            <AlertTriangle className="text-red-600 dark:text-red-400" />
            <span className="text-sm text-red-600 dark:text-red-400">
              {error?.message}
            </span>
          </div>
        )}

        <Form {...form}>
          <form
            id="hook-form-add-certificate"
            onSubmit={form.handleSubmit(onSubmit)}
            className="grid w-full gap-4 "
          >
            <FormField
              control={form.control}
              name="name"
              render={({ field }) => {
                return (
                  <FormItem>
                    <FormLabel>Certificate Name</FormLabel>
                    <FormControl>
                      <Input placeholder={"My Certificate"} {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                );
              }}
            />
            <FormField
              control={form.control}
              name="certificateData"
              render={({ field }) => (
                <FormItem>
                  <div className="space-y-0.5">
                    <FormLabel>Certificate Data</FormLabel>
                  </div>
                  <FormControl>
                    <Textarea
                      className="h-32"
                      placeholder={`-----BEGIN CERTIFICATE-----\nMIIFRDCCAyygAwIBAgIUEPOR47ys6VDwMVB9tYoeEka83uQwDQYJKoZIhvcNAQELBQAwGTEXMBUGA1UEAwwObWktZG9taW5pby5jb20wHhcNMjQwMzExMDQyNzU3WhcN\n------END CERTIFICATE-----`}
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="privateKey"
              render={({ field }) => (
                <FormItem>
                  <div className="space-y-0.5">
                    <FormLabel>Private Key</FormLabel>
                  </div>
                  <FormControl>
                    <Textarea
                      className="h-32"
                      placeholder={`-----BEGIN CERTIFICATE-----\nMIIFRDCCAyygAwIBAgIUEPOR47ys6VDwMVB9tYoeEka83uQwDQYJKoZIhvcNAQELBQAwGTEXMBUGA1UEAwwObWktZG9taW5pby5jb20wHhcNMjQwMzExMDQyNzU3WhcN\n------END CERTIFICATE-----`}
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          </form>

          <DialogFooter className="flex w-full flex-row !justify-between pt-3">
            <Button
              isLoading={isLoading}
              form="hook-form-add-certificate"
              type="submit"
            >
              Create
            </Button>
          </DialogFooter>
        </Form>
      </DialogContent>
    </Dialog>
  );
};