import React, { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import Swal from "sweetalert2";
import UseFullScreenLoader from "../../../hooks/UseFullScreenLoader";
import {
  useGetTokenForVNINVerification,
  useGetVnnStatus,
  useUpdateVnnStatus,
  useVNINVerification,
} from "../../../utils/hooks";
import { useGetCandidateProfilePicture } from "../../../utils/hooks/useGetCandidateProfilePicture";
import { Button } from "@mui/material";
import Link from "next/link";
import { useSaveVninProfilePic } from "../../../utils/hooks/useSaveVninProfilePic";

const VninForm = () => {
  const [isProfilePictureAvailable, setIsProfilePictureAvailable] =
    useState<boolean>(false);
  const [vnnStatus, setVnnStatus] = useState<boolean>(false);
  const [getLoading, setLoading] = useState<boolean>(false);
  const {
    register,
    formState: { errors },
    handleSubmit,
    reset,
    watch,
  } = useForm();
  const router = useRouter();
  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()}`;

  useEffect(() => {
    (async function () {
      setLoading(true);
      try {
        const { resp, status } =
          (await useGetCandidateProfilePicture()) as candidateProfilePictureResp;

        if (
          resp &&
          resp.candidate_profile_picture[0].profilePictureUrl !== null
        ) {
          setIsProfilePictureAvailable(true);
        }
      } catch (error) {
        console.log(
          "Error Occured when fetching the candidate profile picture",
          error
        );
        setLoading(false);
      } finally {
        setLoading(false);
      }
    })();
  }, []);

  const verifyVNINNumber = async (data: any) => {
    try {
      setLoading(true);
      const VNINVerificationToken =
        (await useGetTokenForVNINVerification()) as VNINVerificationTokenResp;
      if (VNINVerificationToken.resp.data.auth_token) {
        const { resp, status } = (await useVNINVerification(
          VNINVerificationToken.resp.data.auth_token as string,
          data.vnin_number
        )) as VNINVerificationResp;
        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.trustedNumber === data.trustedNumber &&
          resp.data.vNIN.toLowerCase() === data.vnin_number.toLowerCase()
            ? true
            : false;
        if (isMatched) {
          await useUpdateVnnStatus();
          await useSaveVninProfilePic(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.trustedNumber !== data.trustedNumber
                    ? `<tr>
                        <td class="text-left">
                        <strong>Trusted Number</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",
              }).then(() => router.push("/dashboard/"))
            : await Swal.fire({
                title: "Failed",
                html: unmatchedContent,
                icon: "error",
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Ok",
              }).then(() => router.refresh());
        } else {
          await Swal.fire({
            title: "Failed",
            text: "VNIN Verification failed",
            icon: "error",
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Ok",
          }).then(() => router.refresh());
        }
      } else {
        setLoading(false);
        await Swal.fire({
          title: "Failed",
          text: "VNIN Verification failed",
          icon: "error",
          confirmButtonColor: "#3085d6",
          cancelButtonColor: "#d33",
          confirmButtonText: "Ok",
        }).then(() => router.refresh());
      }
    } catch (e) {
      setLoading(false);
      await Swal.fire({
        title: "Verification Failed",
        text: "VNIN Verification failed",
        icon: "error",
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Ok",
      }).then(() => router.refresh());
      console.log("Error in Verifying VNIN", e);
    } finally {
      reset();
    }
  };

  const FetchVnnStatus = async () => {
    try {
      setLoading(true);
      const { resp, status } = (await useGetVnnStatus("self")) as Response;
      if (status === 200) {
        setVnnStatus(resp.isVerified);
      }
    } catch (error) {
      console.error("Error fetching Vnn Status:", error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    FetchVnnStatus();
  }, []);

  return (
    <>
      {getLoading && <UseFullScreenLoader text={"Verifying VNIN..."} />}
      {vnnStatus ? (
        <>
          <div className="row h4 col-lg-12 text-center pt-4 pb-4 bg-white rounded-5">
            <h3 className="text-success">Your VNIN is verified!</h3>
          </div>
        </>
      ) : (
        <div className="row">
          <div className="col-lg-12">
            <form
              className="default-form"
              method="POST"
              onSubmit={handleSubmit(verifyVNINNumber)}
            >
              <div className="ls-widget">
                <div className="tabs-box">
                  <div
                    className={`vnin-form-wrapper ${!isProfilePictureAvailable ? "overlay-active" : ""}`}
                  >
                    <div className="widget-content pt-1">
                      <div className="row pb-3">
                        {/* <!-- Input --> */}
                        <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="form-group col-lg-6 col-md-12">
                          <label>Enter your Agent ID</label>
                          <input
                            type="text"
                            placeholder="Enter your Agent ID"
                            {...register("agentId", {
                              required: true,
                            })}
                          />
                          {errors.agentId &&
                            errors.agentId.type == "required" && (
                              <span className="text-danger">
                                Agent ID is required
                              </span>
                            )}
                        </div> */}
                        <div className="form-group col-lg-6 col-md-12">
                          <label>Enter your Gender</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="form-group col-lg-6 col-md-12">
                          <label>Enter your Date of Birth</label>
                          <input
                            type="date"
                            placeholder="Enter your Date of Birth"
                            {...register("dob", {
                              required: true,
                            })}
                          />
                          {errors.dob && errors.dob.type == "required" && (
                            <span className="text-danger">
                              Date of Birth is required
                            </span>
                          )}
                        </div>
                        <div className="form-group col-lg-6 col-md-12">
                          <label>Enter your Registered Number</label>
                          <input
                            type="text"
                            pattern="[0-9]*"
                            placeholder="Enter your Registered Number"
                            {...register("trustedNumber", {
                              required: true,
                              pattern: /^[0-9]+$/,
                            })}
                          />
                          {errors.trustedNumber &&
                            errors.trustedNumber.type == "required" && (
                              <span className="text-danger">
                                Registered Number is required
                              </span>
                            )}
                          {errors.trustedNumber &&
                            errors.trustedNumber.type == "pattern" && (
                              <span className="text-danger">
                                Trusted Number should only contain numbers
                              </span>
                            )}
                        </div>
                        <div className="form-group col-lg-6 col-md-12">
                          <label>Enter your VNIN Number</label>
                          <input
                            type="text"
                            pattern="[a-zA-Z0-9]*"
                            placeholder="Enter your VNIN Number"
                            {...register("vnin_number", {
                              required: true,
                              pattern: /^[a-zA-Z0-9]+$/,
                            })}
                          />
                          {errors.vnin_number &&
                            errors.vnin_number.type == "required" && (
                              <span className="text-danger">
                                VNIN Number is required
                              </span>
                            )}
                          {errors.vnin_number &&
                            errors.vnin_number.type == "pattern" && (
                              <span className="text-danger">
                                VNIN Number should only contain letters and
                                numbers
                              </span>
                            )}
                        </div>
                      </div>
                      <div className="d-flex justify-content-center pb-2 ">
                        <button
                          type="submit"
                          className="theme-btn btn-style-one"
                        >
                          Verify
                        </button>
                      </div>
                    </div>
                  </div>

                  {!isProfilePictureAvailable && (
                    <div className="overlay">
                      <p className="overlay-text-one">
                        Profile Picture not found :(
                      </p>
                      <p className="overlay-text-two">
                        Please upload your profile picture by editing your
                        profile:
                      </p>
                      <Link href={"/dashboard/profile"}>
                        <button className="theme-btn btn-style-one">
                          Edit Profile
                        </button>
                      </Link>
                    </div>
                  )}
                </div>
              </div>
            </form>
          </div>
        </div>
      )}
    </>
  );
};

export default VninForm;