import { useRouter } from "next/router";
import { useRouter as useRouterFormNextRouter } from "next/router";
import { useState } from "react";
import { useForm } from "react-hook-form";
import Seo from "../../components/common/Seo";
import Footer from "../../components/footer/Footer";
import DefaulHeader2 from "../../components/header/DefaulHeader2";
import MobileMenu from "../../components/header/MobileMenu";
import UseFullScreenLoader from "../../hooks/UseFullScreenLoader";
import Wrapper from "../../layout/Wrapper";
import { useVerifyGuarantor } from "../../utils/hooks/useVerifyGuarantor";
import React from "react";
import Swal from "sweetalert2";
import {
  useGetTokenForVNINVerification,
  useVNINVerification,
  useUpdateVnnStatus,
} from "../../utils/hooks";
import { useSaveVninProfilePic } from "../../utils/hooks/useSaveVninProfilePic";
import { useSaveGuarantorVninProfilePic } from "../../utils/hooks/useSaveGuarantorVninProfilePic";

const GuarantorVerification = () => {
  const routerFormNextRouter = useRouterFormNextRouter();
  const id = routerFormNextRouter.query.id;
  const [getLoading, setLoading] = useState(false);
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
    setError,
    setValue,
    watch,
  } = useForm();

  const dob = watch("dob");
  const date = new Date(dob);
  const month = date.toLocaleString("default", { month: "short" });
  const day = `0${date.getDate()}`.slice(-2);
  const formattedDob = `${day} ${month.toUpperCase()} ${date.getFullYear()}`;

  const verifyVNINNumber = async (data: any) => {
    try {
      setLoading(true);
      const VNINVerificationToken =
        (await useGetTokenForVNINVerification()) as VNINVerificationTokenResp;
      console.log("VNINVerificationToken", VNINVerificationToken);
      if (VNINVerificationToken.resp.data.auth_token) {
        const { resp, status } = (await useVNINVerification(
          VNINVerificationToken.resp.data.auth_token as string,
          data.vnin_number
        )) as VNINVerificationResp;
        console.log("VNINVerificationToken Response", resp);
        const isMatched =
          resp.data.firstName.toLowerCase() === data.firstName.toLowerCase() &&
          resp.data.middleName.toLowerCase() ===
            data.middleName.toLowerCase() &&
          resp.data.surname.toLowerCase() === data.surname.toLowerCase() &&
          resp.data.dateOfBirth === formattedDob &&
          resp.data.gender.toLowerCase() === data.gender.toLowerCase() &&
          resp.data.vNIN.toLowerCase() === data.vnin_number.toLowerCase()
            ? true
            : false;

        if (isMatched) {
          await useVerifyGuarantor(id as string);
          await useSaveGuarantorVninProfilePic(
            id as string,
            data.photo[0],
            resp.data.photo
          );
        }

        setLoading(false);
        let unmatchedContent = `
            <table class="table table-striped">
                ${
                  resp.data.firstName.toLowerCase() !==
                  data.firstName.toLowerCase()
                    ? `<tr>
                        <td class="text-left">
                        <strong>First Name</strong>
                        </td>
                        <td class="text-left">Mismatched</td>
                    </tr>`
                    : ""
                }
                ${
                  resp.data.middleName.toLowerCase() !==
                  data.middleName.toLowerCase()
                    ? `<tr>
                        <td class="text-left">
                        <strong>Middle Name</strong>
                        </td>
                        <td class="text-left">Mismatched</td>
                    </tr>`
                    : ""
                }
                ${
                  resp.data.surname.toLowerCase() !== data.surname.toLowerCase()
                    ? `<tr>
                        <td class="text-left">
                        <strong>Surname</strong>
                        </td>
                        <td class="text-left">Mismatched</td>
                    </tr>`
                    : ""
                }
                ${
                  resp.data.dateOfBirth !== formattedDob
                    ? ` <tr>
                        <td class="text-left">
                        <strong>Date Of Birth</strong>
                        </td>
                        <td class="text-left">Mismatched</td>
                    </tr>`
                    : ""
                }
                ${
                  resp.data.gender !== data.gender
                    ? ` <tr>
                        <td class="text-left">
                        <strong>Gender</strong>
                        </td>
                        <td class="text-left">Mismatched</td>
                    </tr>`
                    : ""
                }
              
                ${
                  resp.data.vNIN.toLowerCase() !==
                  data.vnin_number.toLowerCase()
                    ? `<tr>
                        <td class="text-left">
                        <strong>VNIN</strong>
                        </td>
                        <td class="text-left">Mismatched</td>
                    </tr>`
                    : ""
                }
                
            </table>
                `;
        let content = `
        <table class="table table-striped">
            <tr>
                <td class="text-left"><strong>First Name</strong></td>
                <td class="text-left">${resp.data.firstName}</td>
            </tr>
            <tr>
                <td class="text-left"><strong>Middle Name</strong></td>
                <td class="text-left">${resp.data.middleName}</td>
            </tr>
            <tr>
                <td class="text-left"><strong>Surname</strong></td>
                <td class="text-left">${resp.data.surname}</td>
            </tr>
            <tr>
                <td class="text-left"><strong>Date Of Birth</strong></td>
                <td class="text-left">${resp.data.dateOfBirth}</td>
            </tr>
            <tr>
                <td class="text-left"><strong>Gender</strong></td>
                <td class="text-left">
                    ${resp.data.gender == "M" ? "Male" : resp.data.gender == "F" ? "Female" : resp.data.gender}
                </td>
            </tr>
            <tr>
                <td class="text-left"><strong>Trusted Number</strong></td>
                <td class="text-left">${resp.data.trustedNumber}</td>
            </tr>
            <tr>
                <td class="text-left"><strong>TS</strong></td>
                <td class="text-left">${resp.data.ts}</td>
            </tr>
            <tr>
                <td class="text-left"><strong>TX ID</strong></td>
                <td class="text-left">${resp.data.txid}</td>
            </tr>
            <tr>
                <td class="text-left"><strong>User ID</strong></td>
                <td class="text-left">${resp.data.userid}</td>
            </tr>
            <tr>
                <td class="text-left"><strong>VNIN</strong></td>
                <td class="text-left">${resp.data.vNIN}</td>
            </tr>
        </table>`;

        if (resp.success) {
          isMatched
            ? await Swal.fire({
                title: "Success",
                html: content,
                icon: "success",
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Ok",
              })
            : await Swal.fire({
                title: "Failed",
                html: unmatchedContent,
                icon: "error",
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Ok",
              });
        } else {
          await Swal.fire({
            title: "Failed",
            text: "VNIN Verification failed",
            icon: "error",
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Ok",
          });
        }
      } else {
        setLoading(false);
        await Swal.fire({
          title: "Failed",
          text: "VNIN Verification failed",
          icon: "error",
          confirmButtonColor: "#3085d6",
          cancelButtonColor: "#d33",
          confirmButtonText: "Ok",
        });
      }
    } catch (e) {
      setLoading(false);
      await Swal.fire({
        title: "Verification Failed",
        text: "VNIN Verification failed",
        icon: "error",
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Ok",
      });
      console.log("Error in Verifying VNIN", e);
    } finally {
    }
  };

  // const onSubmit = async (data: any) => {
  //   console.log("data is=>>>>", data); return;
  //   try {
  //     setGetLoading(true);
  //     const { resp } = (await useVerifyGuarantor(id as string)) as Response;
  //     setGetLoading(false);
  //     const ok = await Swal.fire({
  //       title: "Success",
  //       text: "Guarantor Verified Successfully",
  //       icon: "success",
  //       confirmButtonColor: "#3085d6",
  //       cancelButtonColor: "#d33",
  //       confirmButtonText: "Ok",
  //     });
  //     if (ok.isConfirmed || ok.isDismissed) {
  //       router.push("/");
  //     }
  //   } catch (e) {
  //     console.error(e);
  //     setGetLoading(false);
  //     const ok = await Swal.fire({
  //       title: "Failed",
  //       text: "Something went wrong",
  //       icon: "error",
  //       confirmButtonColor: "#3085d6",
  //       cancelButtonColor: "#d33",
  //       confirmButtonText: "Ok",
  //     });
  //     if (ok.isConfirmed || ok.isDismissed) {
  //       router.push("/");
  //     }
  //   }
  // };
  return (
    <>
      <Wrapper>
        {getLoading && <UseFullScreenLoader text={"Verifying Guarantor"} />}
        <Seo pageTitle="Guarantor Verification" />

        <span className="header-span"></span>

        <DefaulHeader2 />

        <MobileMenu />
        <div className="container my-5">
          <div className="text-center fs-2 mb-5">Guarantor Verification</div>
          <form
            method="post"
            className="default-form"
            onSubmit={handleSubmit(verifyVNINNumber)}
          >
            <div className="row form-group">
              <div className="col-md-9">
                <div className="row">
                  <div className="form-group col-lg-6 col-md-12">
                    <label>Enter your First Name</label>
                    <input
                      type="text"
                      pattern="[a-zA-Z\s]*"
                      placeholder="Enter your First Name"
                      {...register("firstName", {
                        required: true,
                        pattern: /^[a-zA-Z\s]+$/,
                      })}
                    />
                    {errors.firstName &&
                      errors.firstName.type == "required" && (
                        <span className="text-danger">
                          First Name is required
                        </span>
                      )}
                    {errors.firstName && errors.firstName.type == "pattern" && (
                      <span className="text-danger">
                        First Name should not contain numbers
                      </span>
                    )}
                  </div>
                  <div className="form-group col-lg-6 col-md-12">
                    <label>Enter your Middle Name</label>
                    <input
                      type="text"
                      pattern="[a-zA-Z\s]*"
                      placeholder="Enter your Middle Name"
                      {...register("middleName", {
                        pattern: /^[a-zA-Z\s]+$/,
                      })}
                    />
                    {errors.middleName &&
                      errors.middleName.type == "pattern" && (
                        <span className="text-danger">
                          Middle Name should not contain numbers or special
                          characters
                        </span>
                      )}
                  </div>
                  <div className="form-group col-lg-6 col-md-12">
                    <label>Enter your Surname</label>
                    <input
                      type="text"
                      pattern="[a-zA-Z\s]*"
                      placeholder="Enter your Surname"
                      {...register("surname", {
                        required: true,
                        pattern: /^[a-zA-Z\s]+$/,
                      })}
                    />
                    {errors.surname && errors.surname.type == "required" && (
                      <span className="text-danger">Surname is required</span>
                    )}
                    {errors.surname && errors.surname.type == "pattern" && (
                      <span className="text-danger">
                        Surname should not contain numbers or special characters
                      </span>
                    )}
                  </div>
                  <div className="col-md-6">
                    <label>
                      Date of Birth:<span className="text-danger">*</span>
                    </label>
                    <input
                      type="date"
                      {...register("dob", {
                        required: "Date of Birth is required",
                      })}
                    />
                    {errors.dob && (
                      <span className="text-danger">
                        {errors.dob.message?.toString()}
                      </span>
                    )}
                  </div>
                  <div className="col-md-6">
                    <label>
                      Gender:<span className="text-danger">*</span>
                    </label>
                    <select
                      {...register("gender", {
                        required: true,
                      })}
                    >
                      <option value="">Select Gender</option>
                      <option value="M">Male</option>
                      <option value="F">Female</option>
                    </select>
                    {errors.gender && errors.gender.type == "required" && (
                      <span className="text-danger">Gender is required</span>
                    )}
                  </div>
                  <div className="col-md-6">
                    <label>
                      Address: <span className="text-danger">*</span>
                    </label>
                    <input
                      type="text"
                      autoComplete="address"
                      {...register("address", {
                        required: "Address is required",
                      })}
                    />
                    {errors.address && (
                      <span className="text-danger">
                        {errors.address.message?.toString()}
                      </span>
                    )}
                  </div>
                  <div className="col-md-6">
                    <label>
                      Registered Phone Number:
                      <span className="text-danger">*</span>
                    </label>
                    <input
                      type="text"
                      {...register("phoneNumber", {
                        required: "Phone Number is required",
                        minLength: {
                          value: 10,
                          message:
                            "Phone Number must be at least 10 characters",
                        },
                        onChange: (e) => {
                          const phoneNumber = e.target.value;
                          const phoneNumberHasNumbers = /^\+?\d{10,15}$/.test(
                            phoneNumber
                          );

                          if (!phoneNumberHasNumbers) {
                            setError("phoneNumber", {
                              type: "custom",
                              message: "Please provide a valid number.",
                            });
                            e.target.value = phoneNumberHasNumbers
                              ? phoneNumber
                              : phoneNumber.replace(/[^0-9]/g, "");
                          } else {
                            setError("phoneNumber", { type: "disabled" });
                            setValue("phone", phoneNumber);
                          }
                        },
                      })}
                    />
                    {errors.phoneNumber && (
                      <span className="text-danger">
                        {errors.phoneNumber.message?.toString()}
                      </span>
                    )}
                  </div>
                  <div className="col-md-6">
                    <label>
                      Email: <span className="text-danger">*</span>
                    </label>
                    <input
                      type="text"
                      {...register("email", { required: "Email is required" })}
                    />
                    {errors.email && (
                      <span className="text-danger">
                        {errors.email.message?.toString()}
                      </span>
                    )}
                  </div>
                  <div className="col-md-12">
                    <label>
                      VNIN:
                      <span className="text-danger">*</span>
                    </label>
                    <input
                      type="text"
                      {...register("vnin_number", {
                        required: "VNIN is required",
                      })}
                    />
                    {errors.vnin_number && (
                      <span className="text-danger">
                        {errors.vnin_number.message?.toString()}
                      </span>
                    )}
                  </div>
                </div>
              </div>
              <div className="col-md-3">
                <div>
                  <label>
                    Please upload your photo{" "}
                    <span className="text-danger">*</span>
                  </label>
                  <input
                    type="file"
                    className="form-control"
                    accept="image/*"
                    {...register("photo", {
                      // required: "Photo is required",
                      validate: (value) => value.length > 0,
                    })}
                  />
                  {errors.photo && (
                    <span className="text-danger">
                      {errors.photo.message?.toString()}
                    </span>
                  )}
                </div>
                <div>
                  <label>
                    Please upload your proof of ID{" "}
                    <span className="text-danger">*</span>
                  </label>
                  <input
                    type="file"
                    className="form-control"
                    accept="image/*"
                    {...register("idProof", {
                      // required: "ID Proof is required",
                      validate: (value) => value.length > 0,
                    })}
                  />
                  {errors.idProof && (
                    <span className="text-danger">
                      {errors.idProof.message?.toString()}
                    </span>
                  )}
                </div>
              </div>
            </div>
            <div>Candidate Information</div>
            <div className="row form-group">
              <div className="col-md-6">
                <label>
                  Full Name: <span className="text-danger">*</span>
                </label>
                <input
                  type="text"
                  {...register("candidateName", {
                    required: "Name is required",
                  })}
                />
                {errors.candidateName && (
                  <span className="text-danger">
                    {errors.candidateName.message?.toString()}
                  </span>
                )}
              </div>
              <div className="col-md-6">
                <label>
                  Address <span className="text-danger">*</span>
                </label>
                <input
                  type="text"
                  autoComplete="address"
                  {...register("candidateAddress", {
                    required: "Address is required",
                  })}
                />
                {errors.candidateAddress && (
                  <span className="text-danger">
                    {errors.candidateAddress.message?.toString()}
                  </span>
                )}
              </div>
              <div className="col-md-6">
                <label>
                  Contact Number: <span className="text-danger">*</span>
                </label>
                <input
                  type="text"
                  {...register("candidatePhoneNumber", {
                    required: "Contact Number is required",
                    minLength: {
                      value: 10,
                      message: "Contact Number must be at least 10 characters",
                    },
                    onChange: (e) => {
                      const phoneNumber = e.target.value;
                      const phoneNumberHasNumbers = /^\+?\d{10,15}$/.test(
                        phoneNumber
                      );

                      if (!phoneNumberHasNumbers) {
                        setError("candidatePhoneNumber", {
                          type: "custom",
                          message: "Please provide a valid number.",
                        });
                        e.target.value = phoneNumberHasNumbers
                          ? phoneNumber
                          : phoneNumber.replace(/[^0-9]/g, "");
                      } else {
                        setError("candidatePhoneNumber", { type: "disabled" });
                        setValue("candidatePhoneNumber", phoneNumber);
                      }
                    },
                  })}
                />
                {errors.candidatePhoneNumber && (
                  <span className="text-danger">
                    {errors.candidatePhoneNumber.message?.toString()}
                  </span>
                )}
              </div>
              <div className="col-md-6">
                <label>
                  Email: <span className="text-danger">*</span>
                </label>

                <input
                  type="text"
                  {...register("candidateEmail", {
                    required: "Email is required",
                    validate: (value) => {
                      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                      return emailRegex.test(value) || "Invalid email format";
                    },
                  })}
                />

                {errors.candidateEmail && (
                  <span className="text-danger">
                    {errors.candidateEmail.message?.toString()}
                  </span>
                )}
              </div>
            </div>
            <div className="row form-group">
              <div className="col-md-12">
                <label>
                  Relationship with Candidate:{" "}
                  <span className="text-danger">*</span>
                </label>
                <input
                  type="text"
                  {...register("relationship", {
                    required: "Relationship is required",
                  })}
                />
                {errors.relationship && (
                  <span className="text-danger">
                    {errors.relationship.message?.toString()}
                  </span>
                )}
              </div>
              <div className="col-md-12">
                <label>
                  {" "}
                  Guarantor's Declaration:{" "}
                  <span className="text-danger">*</span>
                </label>
                <input
                  type="text"
                  {...register("guarantorDeclaration", {
                    required: "Guarantor Declaration is required",
                  })}
                />
                {errors.guarantorDeclaration && (
                  <span className="text-danger">
                    {errors.guarantorDeclaration.message?.toString()}
                  </span>
                )}
              </div>
            </div>
            <div className="row form-group">
              <div className="col-md-6">
                <label>
                  Signature: <span className="text-danger">*</span>
                </label>
                <input
                  type="text"
                  {...register("signature", {
                    required: "Signature is required",
                  })}
                />
                <span>Type your Name here to sign this form digitally</span>
                <br />
                {errors.signature && (
                  <span className="text-danger">
                    {errors.signature.message?.toString()}
                  </span>
                )}
              </div>
              <div className="col-md-6">
                <label>
                  Date: <span className="text-danger">*</span>
                </label>
                <input
                  type="date"
                  {...register("date", { required: "Date is required" })}
                />
                {errors.date && (
                  <span className="text-danger">
                    {errors.date.message?.toString()}
                  </span>
                )}
              </div>
            </div>
            <div className="form-group ">
              <input
                type="checkbox"
                id="consent"
                {...register("consent", {
                  required: "Please agree to the consent to submit the form",
                })}
              />
              <label htmlFor="consent" className="ms-2">
                I consent that me details are verified.{" "}
                <span className="text-danger">*</span>
              </label>
              {errors.consent && (
                <>
                  {" "}
                  <br />
                  <span className="text-danger">
                    {errors.consent.message?.toString()}
                  </span>
                </>
              )}
            </div>
            <button type="submit" className="theme-btn btn-style-one">
              Submit
            </button>
          </form>
        </div>
        <Footer />
      </Wrapper>
    </>
  );
};

export default GuarantorVerification;