"use client";
import { useState } from "react";
import { Input } from "@/app/_components/ui/input";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { Button } from "@/app/_components/ui/button";
import { useMutation } from "@tanstack/react-query";
import { useToast } from "@/app/_components/ui/use-toast";
import { useRouter } from "next/navigation";
import { z } from "zod";
import { GET } from "@/app/api/rainha/routes";
import { validarCPF } from "../validate/cpf";
import { ChevronLeftIcon } from "lucide-react";
import Link from "next/link";
import CreateRainha from "../_components/create-mirim";
import UpdateRainha from "./[id]/page";

const formSchema = z.object({
  email: z.string().refine((val) => val.length >= 3, {
    message: "Tem que ter no minimo 3 caracteres",
  }),
  cpf: z.string().refine(
    (val) => {
      return validarCPF(val);
    },
    {
      message: "CPF inválido",
    },
  ),
});

type FormData = z.infer<typeof formSchema>;

const UpatePage = () => {
  const [showCreateRainha, setShowCreateRainha] = useState(false);
  const [dataCandidato, setDataCandidato] = useState<any>(null);
  const router = useRouter();
  const { toast } = useToast();
  const {
    handleSubmit,
    register,
    formState: { errors },
  } = useForm<FormData>({
    mode: "onBlur",
    resolver: zodResolver(formSchema),
  });

  const mutation = useMutation({
    mutationFn: async (data: any) => {
      let dataResponse = data;
      return GET(dataResponse).then((response) => response);
    },
    onError: (error) => {
      toast({
        title: error.message,
      });
    },
    onSuccess: (data) => {
      if (data.error) {
        toast({
          variant: "destructive",
          title: data.error,
        });
      } else {
        if (data.tipo !== "Rainha") {
          toast({
            variant: "destructive",
            title:
              "Você não está registrado para e categoria Rainha tente a Mirim",
          });
          return;
        }
        toast({
          title: "Redirecionando...",
        });
        setShowCreateRainha(true);
        setDataCandidato(data);
      }
    },
  });

  const onSubmit = async (data: FormData) => {
    mutation.mutate(data);
  };

  return (
    <>
      {!showCreateRainha ? (
        <>
          <Link
            href="/"
            className="flex items-center px-4 py-6 text-blue-500 hover:text-blue-700"
          >
            <ChevronLeftIcon size={24} className="mr-2" /> Voltar
          </Link>

          <div className="mb-5 flex flex-col items-center justify-center px-4">
            <form onSubmit={handleSubmit(onSubmit)} className="w-full md:w-1/2">
              <h1 className="mb-4 bg-gradient-to-r from-pink-500 to-purple-600 bg-clip-text text-center text-2xl font-bold text-transparent">
                Buscar Dados
              </h1>
              <div className="mb-4">
                <label
                  htmlFor="cpf"
                  className="block text-sm font-medium text-black"
                >
                  CPF:
                </label>
                <Input
                  type="text"
                  id="cpf"
                  {...register("cpf")}
                  required
                  className="mb-2 mt-1 w-full rounded-md border bg-transparent p-2"
                  placeholder="Digite o cpf"
                />
                {errors.cpf?.message && (
                  <p className="text-sm text-red-400">{errors.cpf?.message}</p>
                )}
              </div>
              <div className="mb-4">
                <label
                  htmlFor="email"
                  className="block text-sm font-medium text-black"
                >
                  E-mail:
                </label>
                <Input
                  type="email"
                  id="email"
                  {...register("email")}
                  className="mb-2 mt-1 w-full rounded-md border bg-transparent p-2"
                />
                {errors.email?.message && (
                  <p className="text-sm text-red-400">
                    {errors.email?.message}
                  </p>
                )}
              </div>
              <div className="flex items-center justify-center">
                <Button className="bg-pink-500 font-bold text-white">
                  Buscar
                </Button>
              </div>
            </form>
          </div>
        </>
      ) : (
        <UpdateRainha candidato={dataCandidato} />
      )}
    </>
  );
};

export default UpatePage;