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

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

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

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

import { GetProcessoById, UpdateProcesso } from "@/app/api/processo/routes";
import { Label } from "@radix-ui/react-label";

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 EditProcessoProps {
  IdProcesso: string;
  usuario: UsuarioLogadoI;
}

function EditarProcesso({ usuario, IdProcesso }: EditProcessoProps) {
  const router = useRouter();
  const { toast } = useToast();
  const {
    handleSubmit,
    register,
    setValue,
    formState: { errors },
  } = useForm<FormData>({
    mode: "onBlur",
    resolver: zodResolver(formSchema),
  });

  const { data, isLoading } = useQuery({
    queryKey: ["processo", IdProcesso],
    queryFn: () => GetProcessoById(usuario, IdProcesso as string),
  });

  useEffect(() => {
    setValue("numerocontrato", data ? data.numerocontrato : "", {
      shouldValidate: true,
    });
    setValue("nomefiscal", data ? data.nomefiscal : "", {
      shouldValidate: true,
    });
    setValue("secretaria", data ? data.secretaria : "", {
      shouldValidate: true,
    });
    setValue("objeto", data ? data.objeto : "", {
      shouldValidate: true,
    });
    setValue("modalidade", data ? data.modalidade : "", {
      shouldValidate: true,
    });
    setValue("situacao", data ? data.situacao : "", {
      shouldValidate: true,
    });

    setValue("IdUsuario", data ? data.IdUsuario : "", { shouldValidate: true });
  }, [data, setValue]);

  const mutation = useMutation({
    mutationFn: (data: FormData) => {
      return UpdateProcesso(usuario, IdProcesso, data).then(
        (response) => response
      );
    },
    onError: (error) => {
      toast({
        title: error.message,
      });
    },
    onSuccess: (data) => {
      if (data.error) {
        toast({
          variant: "destructive",
          title: data.error,
        });
      } else {
        toast({
          title: "Atualizado 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 (
    <>
      {!isLoading ? (
        <form onSubmit={handleSubmit(onSubmit)}>
          <h1 className="text-center font-bold text-2xl mb-4 mt-10">
            Atualização 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>
      ) : (
        <h1 className="text-center text-4xl font-bold mt-9">Loading</h1>
      )}
    </>
  );
}

export default EditarProcesso;