"use client";

import { Button, Form, Image } from "react-bootstrap";
import { FormikContext, useFormik, Form as FormikForm } from "formik";
import * as Yup from "yup";
import { useRouter } from "next/navigation";
import {
  CxPassword,
  CxTextInput
} from "@/components/default/Field/CxTextInput";
import { useRequest } from "@/components/App/request";
import { setHeader, toastr, toastrC } from "@/utils/helpers";
import styles from "@/styles/Component/Login/Login.module.scss";

import Link from "next/link";
import { useEffect, useState } from "react";
import TermsAndConditionModal from "./components/TermsAndConditionModal";
import { useApp } from "@/components/App";

// import {
//   GoogleReCaptcha,
//   GoogleReCaptchaProvider
// } from "react-google-recaptcha-v3";

interface LoginResponse {
  status: boolean;
  message: string;
  data?: {
    id: number;
    account_number: string;
    name: string;
    business_name: string;
    leads_per_day: number;
    landline_number: string;
    mobile_number: string;
    second_mobile_number: string;
    business_address: string;
    business_address_line_two: string;
    business_post_code: string;
    business_district_code: string;
    business_area_code: string;
    company_name: string;
    company_number: string;
    company_vat_number: string;
    company_address: string;
    company_address_line_two: string;
    company_post_code: string;
    person_significate_control: string;
    balance: string;
    minimum_account_balance: number;
    suspend_unsuspend_status: number;
    email: string;
    mobile: string;
    forgot_password_token: string;
    profile_image: string;
    is_pause_admin: number;
    status: number;
    reason_id: number;
    nature_id: number;
    pause_unpause_status: number;
    permanent_active_action: number;
    created_at: string;
    areas?: Array<{ id: number; code: string }>;
    otpcheck?: {
      status: boolean;
    };
    terms_and_conditions_agreed?: boolean;
    terms_and_conditions_template?: string;
    api_token?: string;
  };
}

const LoginPage = () => {
  const [data, setData] = useState<string | null>(null);
  const { state, dispatch, setUserDetail } = useApp();
  const [showTermsAndConditionModal, setShowTermsAndConditionModal] =
    useState(false);
  const { request } = useRequest();
  const router = useRouter();
  // const [passwordVisible, setPasswordVisible] = useState(false);

  // const togglePasswordVisibility = () => {
  //   setPasswordVisible(prevState => !prevState);
  // };
  const formik = useFormik({
    initialValues: {
      email: "",
      password: "",
      rememberme: false,
      terms_and_conditions_agreed: 0
    },
    validationSchema: Yup.object({
      email: Yup.string().email("Invalid email").required("Email is required"),
      password: Yup.string()
        // .min(6, "Password must be at least 6 characters")
        .required("Password is required")
      // captcha: Yup.string().required("Captcha is required")
    }),
    onSubmit: async (values, { setSubmitting }) => {
      try {
        setSubmitting(true);
        const res = await request("LOGIN", values) as LoginResponse;

        if (res.status == false) {
          toastrC(res.message, "error", "");
          return;
        }

        // Save to localStorage if "Remember Me" is checked
        if (values.rememberme) {
          localStorage.setItem("email", values.email);
          localStorage.setItem("password", values.password);
          localStorage.setItem("rememberMe", "true");
        } else {
          localStorage.removeItem("email");
          localStorage.removeItem("password");
          localStorage.setItem("rememberMe", "false");
        }

        if (res.data?.otpcheck?.status) {
          dispatch({
            ...state,
            email: values.email,
            mobile_number: res.data?.mobile_number
          });
          console.log("sd", state);
          router.push("/auth/otp-verify");
        } else if (!res.data?.terms_and_conditions_agreed) {
          setData(res.data?.terms_and_conditions_template ?? null);
          setShowTermsAndConditionModal(true);
        } else {
          setUserDetail(res.data);
          setHeader(res.data?.api_token ?? "", "accessToken");
          setHeader(values.rememberme, "rememberme");
          if (res.status) {
            toastr(res.message, "success", "Success");
            router.replace("/member/dashboard");
            if(typeof window !== "undefined") window.location.reload();
          }
        }
      } catch (error) {
        toastrC(error.message, "error", "error");
        console.log(error);
      } finally {
        console.log("Finally running");
        setSubmitting(false);
      }
    }
  });

  // Get stored credentials from localStorage
  useEffect(() => {
    const storedEmail = localStorage.getItem("email");
    const storedPassword = localStorage.getItem("password");
    const rememberMe = localStorage.getItem("rememberMe") === "true";

    if (rememberMe && storedEmail && storedPassword) {
      formik.setValues({
        email: storedEmail,
        password: storedPassword,
        rememberme: rememberMe,
        terms_and_conditions_agreed: 0
      });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [formik.setValues]);

  return (
    <div className={styles.LoginCard}>
      <h1>Welcome to your Online Member Account</h1>
      <FormikContext value={formik}>
        <FormikForm onSubmit={formik.handleSubmit}>
          <CxTextInput
            name="email"
            label="Email Address"
            placeholder="Enter your email"
            contClassName="mb-3"
            required={true}
          />
          <CxPassword
            name="password"
            type="password"
            label="Password"
            placeholder="Enter your password"
            contClassName="mb-3"
            required={true}
          />
          <div className={styles.CaptchaCard}>
            {/* <GoogleReCaptchaProvider
              reCaptchaKey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}
            >
              <GoogleReCaptcha onVerify={handleVerify} />
            </GoogleReCaptchaProvider> */}
          </div>

          <Form.Group
            controlId="formPassword"
            className="formGroupList d-flex align-items-center justify-content-between"
          >
            <Form.Check
              type="checkbox"
              id="default-checkbox"
              label="Remember Me"
              name="rememberme"
              checked={formik.values.rememberme}
              onChange={e => {
                formik.setFieldValue("rememberme", e.target.checked);
              }}
            />
            <Link href="/auth/forgot-password" className="linkTag">
              Forgot password?
            </Link>
          </Form.Group>
          <Button
            type="submit"
            disabled={formik.isSubmitting}
            className="btn-custom"
          >
            {formik.isSubmitting ? (
              "Submitting ..."
            ) : (
              <>
                Log in
                <Image src="../assets/cursor-icon.png" alt="cursor-icon" />
              </>
            )}
          </Button>

          <TermsAndConditionModal
            data={data}
            show={showTermsAndConditionModal}
            setFieldValue={formik.setFieldValue}
            handleClose={() => setShowTermsAndConditionModal(false)}
          />
        </FormikForm>
      </FormikContext>
    </div>
  );
};

export default LoginPage;