"use client";
import { z } from "zod";
import { Input } from "@/components/ui/input";

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { Button } from "@/components/ui/button";

import { useMutation } from "@tanstack/react-query";
import { useToast } from "@/components/ui/use-toast";
import { useRouter } from "next/navigation";

import { UsuarioLogadoI } from "@/interfaces/usuario/interface";

import { CreateProcesso } from "@/app/api/processo/routes";
import { Label } from "@radix-ui/react-label";
import { Textarea } from "@/components/ui/textarea";

const formSchema = z.object({
  numerocontrato: z.string().refine((val) => val.length >= 1, {
    message: "Tem que ter no minimo 1 caracteres",
  }),
  nomefiscal: z.string().refine((val) => val.length >= 1, {
    message: "Tem que ter no minimo 1 caracteres",
  }),
  secretaria: z.string().refine((val) => val.length >= 1, {
    message: "Tem que ter no minimo 1 caracteres",
  }),
  objeto: z.string().refine((val) => val.length >= 1, {
    message: "Tem que ter no minimo 1 caracteres",
  }),
  modalidade: z.string().refine((val) => val.length >= 1, {
    message: "Tem que ter no minimo 1 caracteres",
  }),
  situacao: z.string().refine((val) => val.length >= 1, {
    message: "Tem que ter no minimo 1 caracteres",
  }),

  IdUsuario: z.string().optional(),
});

type FormData = z.infer<typeof formSchema>;

interface CriarModalidadeProps {
  usuario: UsuarioLogadoI;
}

function CriarProcesso({ usuario }: CriarModalidadeProps) {
  const router = useRouter();
  const { toast } = useToast();

  const {
    handleSubmit,
    register,
    setValue,
    getValues,
    formState: { errors },
  } = useForm<FormData>({
    mode: "onBlur",
    resolver: zodResolver(formSchema),
  });

  const mutation = useMutation({
    mutationFn: async (data: FormData) => {
      let dataResponse = data;

      return CreateProcesso(usuario, dataResponse).then((response) => response);
    },
    onError: (error) => {
      toast({
        title: error.message,
      });
    },
    onSuccess: (data) => {
      if (data.error) {
        toast({
          variant: "destructive",
          title: data.error,
        });
      } else {
        toast({
          title: "Processo cadastrado com sucesso",
        });

        router.push("/processo");
      }
    },
  });

  const onSubmit = async (data: FormData) => {
    const idusuario = usuario.user.id.toString();
    const dataResponse = {
      ...data,
      IdUsuario: idusuario,
    };
    mutation.mutate(dataResponse);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <h1 className="text-center font-bold text-2xl mb-4 mt-10">
        Cadastro de Processo
      </h1>
      <div className=" mx-auto p-4 gap-4">
        {/* Coluna 1 */}
        <div>
          <div className="flex w-full gap-4">
            <div className="mb-4 flex-1">
              <label
                htmlFor="numerocontrato"
                className="block text-sm font-medium text-white"
              >
                Numero do Contrato:
              </label>
              <Input
                type="text"
                id="numerocontrato"
                {...register("numerocontrato")}
                required
                className="mt-1 p-2 w-full border rounded-md mb-2 bg-transparent"
                placeholder="Digite o Numero do Contrato"
              />
              {errors.numerocontrato?.message && (
                <p className="text-sm text-red-400">
                  {errors.numerocontrato?.message}
                </p>
              )}
            </div>

            <div className="mb-4 flex-1">
              <label
                htmlFor="nomefiscal"
                className="block text-sm font-medium text-white"
              >
                Nomde do Fiscal:
              </label>
              <Input
                type="text"
                id="nomefiscal"
                {...register("nomefiscal")}
                required
                className="mt-1 p-2 w-full border rounded-md mb-2 bg-transparent"
                placeholder="Digite o Numero do Contrato"
              />
              {errors.nomefiscal?.message && (
                <p className="text-sm text-red-400">
                  {errors.nomefiscal?.message}
                </p>
              )}
            </div>
          </div>

          <div className="flex w-full gap-4">
            <div className="mb-4 flex-1">
              <label
                htmlFor="secretaria"
                className="block text-sm font-medium text-white"
              >
                Secretaria do Contrato:
              </label>
              <Input
                type="text"
                id="secretaria"
                {...register("secretaria")}
                required
                className="mt-1 p-2 w-full border rounded-md mb-2 bg-transparent"
                placeholder="Digite o Numero do Contrato"
              />
              {errors.secretaria?.message && (
                <p className="text-sm text-red-400">
                  {errors.secretaria?.message}
                </p>
              )}
            </div>

            <div className="mb-4 flex-1">
              <label
                htmlFor="modalidade"
                className="block text-sm font-medium text-white"
              >
                Modalidade:
              </label>
              <Input
                type="text"
                id="modalidade"
                {...register("modalidade")}
                required
                className="mt-1 p-2 w-full border rounded-md mb-2 bg-transparent"
                placeholder="Digite o Numero do Contrato"
              />
              {errors.modalidade?.message && (
                <p className="text-sm text-red-400">
                  {errors.modalidade?.message}
                </p>
              )}
            </div>

            <div className="mb-4 flex-1">
              <label
                htmlFor="situacao"
                className="block text-sm font-medium text-white"
              >
                Situacao:
              </label>
              <Input
                type="text"
                id="situacao"
                {...register("situacao")}
                required
                className="mt-1 p-2 w-full border rounded-md mb-2 bg-transparent"
                placeholder="Digite o Numero do Contrato"
              />
              {errors.situacao?.message && (
                <p className="text-sm text-red-400">
                  {errors.situacao?.message}
                </p>
              )}
            </div>
          </div>

          <div className="grid w-full gap-1.5">
            <Label htmlFor="message">Objeto</Label>
            <Textarea
              id="objeto"
              {...register("objeto")}
              placeholder="Observação"
              className="mt-1 p-2 w-full border rounded-md mb-2  bg-transparent"
            />
            {errors.objeto?.message && (
              <p className="text-sm text-red-400">{errors.objeto?.message}</p>
            )}
          </div>
        </div>

        <Button className="text-white font-bold mt-2">Cadastrar</Button>
      </div>
    </form>
  );
}

export default CriarProcesso;