"use client";
import React, { useEffect, useState, useRef } from "react";
import Link from "next/link";
import AuthFooter from "@/components/auth/AuthFooter";
import AuthHeader from "@/components/auth/AuthHeader";
import Button from "@/components/common/Button";
import { zodResolver } from "@hookform/resolvers/zod";
import {
  registerSchema,
  RegisterSchemaType,
} from "@/lib/validations/authSchema";
import { useForm, FormProvider } from "react-hook-form";
import axios from "axios";
import { useTranslations } from "next-intl";
import Input from "@/components/common/CustomInputField";
import { toast, ToastContainer } from "react-toastify";
// import ReCAPTCHA from "react-google-recaptcha";
import { useGoogleReCaptcha } from "react-google-recaptcha-v3";
import { useRouter } from "next/navigation";
import { signIn } from "next-auth/react";
import { getStoredLocale } from "@/lib/getLocale";
import { encryptData } from "@/lib/cryptoUtils";

// const SITE_KEY = process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY || "";

export default function Register() {
  const t = useTranslations();
  const [countryCode, setCountryCode] = useState("");
  const router = useRouter();
  const { executeRecaptcha } = useGoogleReCaptcha();
  // const recaptchaRef = useRef<ReCAPTCHA>(null);
  // const [recaptchaToken, setRecaptchaToken] = useState<string | null>(null);
  const locale = getStoredLocale();
  const [isSubmitting, setIsSubmitting] = useState(false);
  // for bg-img
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    const handleResize = () => setIsMobile(window.innerWidth < 580);
    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  const methods = useForm<RegisterSchemaType>({
    resolver: zodResolver(registerSchema(t)),
  });
  const {
    handleSubmit,
    reset,
    formState: { errors },
  } = methods;

  const onSubmit = async (data: any) => {
    // if (!recaptchaToken) {
    //   toast.error(t(`validation.recaptcha_req`));
    //   return;
    // }
    if (!executeRecaptcha) {
      toast.error(t(`validation.recaptcha_req`));
      return;
    }
    setIsSubmitting(true);
    const recaptchaToken = await executeRecaptcha("submitForm");
    try {
      const mobileNumber = extractMobileNumber(data.phone_number, countryCode);
      const payload = {
        ...data,
        phone_number: mobileNumber ?? "",
        country_code: countryCode,
        recaptchaToken,
      };
      // `${process.env.NEXT_PUBLIC_API_URL}/register`,
      const response = await axios.post(`/api/register`, payload, {
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
          "Accept-Language": locale, // Make sure locale is defined in your component
        },
      });

      const searchParams = new URLSearchParams({
        email_or_phone: response?.data?.data?.data?.email,
        type: encryptData("register"),
        token: "",
        extra: "register_success",
      }).toString();
      const redurectTimer = setTimeout(() => {
        router.push(`/otpverification?${searchParams}`);
      }, 2000);
      reset({
        first_name: "",
        last_name: "",
        username: "",
        phone_number: "",
        email: "",
        password: "",
        password_confirmation: "",
      });
      return () => clearTimeout(redurectTimer);
    } catch (error: any) {
      if (error.response?.data?.error) {
        const serverErrors = error.response.data.error;
        Object.entries(serverErrors).forEach(([key, value]: [string, any]) => {
          methods.setError(key as keyof RegisterSchemaType, {
            type: "server",
            message: Array.isArray(value) ? value[0] : value,
          });
        });
      } else if (error.response?.data?.error_reCaptcha) {
        toast.error(t(error.response?.data?.error_reCaptcha));
      } else {
        const errMessage =
          error?.response?.data?.message ?? t(`validation.error_msg`);
        toast.error(errMessage);
      }
    } finally {
      setIsSubmitting(false);
      // recaptchaRef.current?.reset();
      // setRecaptchaToken(null);
    }
  };

  function extractMobileNumber(
    fullNumber: string,
    countryCode: string,
  ): string {
    const cleanNumber = fullNumber.replace(/^\+/, "");
    const cleanCode = countryCode.replace(/^\+/, "");
    const regex = new RegExp(`^${cleanCode}`);
    return cleanNumber.replace(regex, "");
  }

  return (
    <>
      <ToastContainer position="top-right" />
      <div
        className="login-wrapper bg-BlueZodiac text-white bg-cover bg-left lg:bg-center px-4 md:px-6 dark:bg-background"
        style={{
          backgroundImage: isMobile ? "none" : 'url("/login-bg.webp")',
        }}
      >
        <div className="max-w-w1660 mx-auto">
          <div className="flex min-h-screen">
            <div className="w-1/2 hidden lg:flex items-end py-8">
              <div className="hidden lg:block">
                <Link href="/" className="text-4xl font-bold">
                  {t("kanzy")}
                </Link>
                <p className="text-sm mt-2">{t("kanzy_description")}</p>
              </div>
            </div>

            <div className="w-full lg:w-1/2 flex items-center justify-center lg:justify-end pt-16 lg:pt-12 py-8 relative  max-md:pb-1 max-md:pt-[70px] max-md:justify-center max-md:items-start">
              <AuthHeader />
              <div className="w-full max-w-2xl bg-white/30 backdrop-blur-2xl rounded-2xl px-4 sm:px-5 py-8 md:p-10 shadow-xl dark:bg-cardfooter">
                <div className="mb-5 md:mb-8">
                  <h2 className="text-xl md:text-2xl lg:text-3xl font-bold mb-2.5 text-center">
                    {t("register_page.title")}
                  </h2>
                  <p className="text-sm md:text-base text-center">
                    {t("register_page.description")}
                  </p>
                </div>
                <FormProvider {...methods}>
                  <form
                    onSubmit={handleSubmit(onSubmit)}
                    noValidate
                    className="space-y-5 md:space-y-8"
                  >
                    <div className="space-y-4 md:space-y-5">
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-7.5 sm:gap-5">
                        <Input
                          label={t("register_page.first_name_label")}
                          name="first_name"
                          placeholder={t(
                            "register_page.first_name_placeholder",
                          )}
                          labelClassName="text-white"
                          required
                        />
                        <Input
                          label={t("register_page.last_name_label")}
                          name="last_name"
                          placeholder={t("register_page.last_name_placeholder")}
                          labelClassName="text-white"
                          required
                        />
                      </div>
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-7.5 sm:gap-5">
                        <Input
                          label={t("register_page.username_label")}
                          name="username"
                          placeholder={t("register_page.username_placeholder")}
                          labelClassName="text-white"
                          required
                        />
                        <div className="relative z-10">
                          <Input
                            label={t("register_page.contact_number_label")}
                            type="country_code_phone"
                            name="phone_number"
                            placeholder={t(
                              "register_page.contact_number_placeholder",
                            )}
                            labelClassName="text-white"
                            setCountryCode={setCountryCode}
                            required
                          />
                        </div>
                      </div>
                      <Input
                        label={t("register_page.email_label")}
                        name="email"
                        placeholder={t("register_page.email_placeholder")}
                        labelClassName="text-white"
                        required
                      />
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-7.5 sm:gap-5">
                        <Input
                          label={t("register_page.password_label")}
                          name="password"
                          type="password"
                          placeholder={t("register_page.password_placeholder")}
                          labelClassName="text-white"
                          required
                        />
                        <Input
                          label={t("register_page.confirm_password_label")}
                          name="password_confirmation"
                          type="password"
                          placeholder={t(
                            "register_page.confirm_password_placeholder",
                          )}
                          labelClassName="text-white"
                          required
                        />
                      </div>
                    </div>
                    {/* <div className="flex items-center gap-2 recaptcha">
                      <ReCAPTCHA
                        ref={recaptchaRef}
                        sitekey={SITE_KEY}
                        onChange={(token: any) => setRecaptchaToken(token)}
                        theme="light"
                      />
                    </div> */}
                    <Button
                      type="submit"
                      label={
                        isSubmitting
                          ? t("button.signing_up")
                          : t("button.sign_up")
                      }
                      variant="secondary"
                      className="w-full justify-center"
                      disabled={isSubmitting}
                    >
                      {isSubmitting ? (
                        <div
                          role="status"
                          className="flex items-center justify-center"
                        >
                          <svg
                            className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                          >
                            <circle
                              className="opacity-25"
                              cx="12"
                              cy="12"
                              r="10"
                              stroke="currentColor"
                              strokeWidth="4"
                            ></circle>
                            <path
                              className="opacity-75"
                              fill="currentColor"
                              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                            ></path>
                          </svg>
                          <span className="sr-only">{t("button.loading")}</span>
                        </div>
                      ) : null}
                    </Button>
                  </form>
                </FormProvider>
                <AuthFooter
                  termsHref="/terms-and-conditions"
                  privacyHref="/privacy-policy"
                  signUpHref="/login"
                  by_sign_to={t("login_page.by_sign_to")}
                  by_sign_and={t("login_page.by_sign_and")}
                  termsText={t("login_page.by_sign_tc")}
                  privacyText={t("login_page.by_sign_pc")}
                  signUpText={t("register_page.button.sign_in")}
                  noAccountText={t("register_page.have_account")}
                  orText={t("login_page.or")}
                  loginAsText={t("register_page.register_as")}
                  onGoogleLogin={() => console.log("Google login")}
                  onFacebookLogin={() => console.log("Facebook login")}
                  socialLogins={[
                    {
                      label: t("button.sign_up_with_google"),
                      iconSrc: "/google-icon.svg",
                      alt: "Google",
                      onClick: () => signIn("google"),
                    },
                    {
                      label: t("button.sign_up_with_facebook"),
                      iconSrc: "/facebook-icon.svg",
                      alt: "Facebook",
                      onClick: () => signIn("facebook"),
                    },
                  ]}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}