import { useAppDispatch, useAppSelector } from "../../../../app/redux/hooks";
import { loginAsync } from "../../../../app/slices/loginSlice/loginSlice";
import CustomButton from "../../../components/custom/button";
import LoginIcon from "@mui/icons-material/Login";
import CustomInput from "../../../components/custom/input";
import { useState, useEffect, useRef } from "react";
import { Checkbox, FormControlLabel } from "@mui/material";

import { LoginValues } from "./loginTypes";

import VerifyOtp from "./verifyOtp/verifyOtp";
import { loginValidation } from "./loginValidation";

import { showSnackbar } from "../../../../app/slices/common/customSnackBar/customSnackbarSlice";
export const LoginPart = ({ onClose, isModal, isFromAccount, isFromCustomOrder }: LoginValues) => {
  const initialState: LoginValues = {
    mobileNumber: "+91 ",
  };
  const dispatch = useAppDispatch();

  const [verifyOtpVisible, setVerifyOtpVisible] = useState<boolean>(false);
  const [isMobileReadOnly, setIsMobileReadOnly] = useState<boolean>(false);

  // Resend OTP timer (seconds)
  const RESEND_OTP_SECONDS = 60;
  const [resendTimer, setResendTimer] = useState<number>(0);
  const timerRef = useRef<number | null>(null);

  const [loginData, setLoginData] = useState(initialState);
  const [errors, setErrors] = useState<Partial<LoginValues>>({});
  const loginSelector = useAppSelector((state: any) => state.login.login);

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    navigateNow();
    event.preventDefault();
  };
  const navigateNow = () => {
    const errorCheck = loginValidation(loginData);

    if (Object.keys(errorCheck).length === 0) {
      let payload: any = {
        mobile_number: loginData?.mobileNumber?.replace(" ", ""),
      };
      dispatch(loginAsync(payload)).then((response: any) => {
        if (response.payload?.status === 200) {
          setVerifyOtpVisible(true);
          setIsMobileReadOnly(true);

          // start resend OTP timer
          setResendTimer(RESEND_OTP_SECONDS);
          if (timerRef.current) {
            window.clearInterval(timerRef.current);
          }
          timerRef.current = window.setInterval(() => {
            setResendTimer((prev) => {
              if (prev <= 1) {
                if (timerRef.current) {
                  window.clearInterval(timerRef.current);
                  timerRef.current = null;
                }
                return 0;
              }
              return prev - 1;
            });
          }, 1000) as unknown as number;

          dispatch(
            showSnackbar({
              message:
                "Enter OTP sent to your WhatsApp number",
              severity: "success",
            })
          );

          // setTimeout(() => {
          //   dispatch(
          //     showSnackbar({
          //       message: `Your one-time password (OTP) is ${response.payload?.data?.otp}`,
          //       severity: "info",
          //     })
          //   );
          // });
        } else {
          dispatch(
            showSnackbar({
              message: "Please try again later.",
              severity: "error",
              autoHide: 3000,
            })
          );
        }
      });
    } else {
      setErrors(errorCheck);
    }
  };

  const inputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    let curErrors: any = { ...errors };
    delete curErrors[name];
    setErrors(curErrors);
    setLoginData({
      ...loginData,
      [name]: value,
    });
  };

  useEffect(() => {
    return () => {
      if (timerRef.current) window.clearInterval(timerRef.current);
    };
  }, []);

  const handleResendOtp = () => {
    if (resendTimer > 0) return;
    const payload: any = {
      mobile_number: loginData?.mobileNumber?.replace(" ", ""),
      opt_in: loginData?.opt_in ?? true,
    };
    dispatch(loginAsync(payload)).then((response: any) => {
      if (response.payload?.status === 200) {
        setResendTimer(RESEND_OTP_SECONDS);
        if (timerRef.current) window.clearInterval(timerRef.current);
        timerRef.current = window.setInterval(() => {
          setResendTimer((prev) => {
            if (prev <= 1) {
              if (timerRef.current) {
                window.clearInterval(timerRef.current);
                timerRef.current = null;
              }
              return 0;
            }
            return prev - 1;
          });
        }, 1000) as unknown as number;

        dispatch(
          showSnackbar({
            message: "OTP resent. Please check your device.",
            severity: "success",
          })
        );
      } else {
        dispatch(
          showSnackbar({
            message: "Failed to resend OTP. Please try again.",
            severity: "error",
            autoHide: 3000,
          })
        );
      }
    });
  };

  return (
    <form
      onSubmit={handleSubmit}
      className=""
      id="login-form"
      // action="#"
      // method="post"
      acceptCharset="utf-8"
      data-mailchimp="true"
      style={{ margin: "20px" }}
    >
      <div className="tf-field style-1 mb_15">
        <CustomInput
          type="tel"
          label="Mobile Number"
          name="mobileNumber"
          size="small"
          readOnly={isMobileReadOnly}
          onChange={inputChange}
          variant="outlined"
          value={loginData.mobileNumber}
          error={!!errors?.mobileNumber}
          fullWidth
          helperText={errors?.mobileNumber}
        />
      </div>
      <div className="tf-field style-1 mb_30">
        {verifyOtpVisible && (
          <>
            <VerifyOtp
              isModal={isModal}
              onClose={onClose}
              mobileNumber={loginData.mobileNumber}
              isFromAccount={isFromAccount}
              isFromCustomOrder={isFromCustomOrder}
            />

            <div className="d-flex justify-content-end align-items-center gap-2 mt-2">
              <small className="fw-bold mb-0">
                {resendTimer > 0 ? "OTP will expire in" : "Didn't Receive Code?"}
              </small>
              <button
                type="button"
                className="btn p-0 fw-bold text-danger"
                onClick={handleResendOtp}
                disabled={resendTimer > 0}
                aria-disabled={resendTimer > 0}
              >
                {resendTimer > 0 ? `${resendTimer}s` : "Resend Code"}
              </button>
            </div>
          </>
        )}
      </div>

      <div className="tf-field style-1 mb_30">
        {!verifyOtpVisible && (
          <CustomButton
            size="large"
            fullWidth
            className=" btn-fill animate-hover-btn "
            loader={loginSelector.loader}
            endIcon={<LoginIcon />}
            name="Login"
            onClick={navigateNow}
          />
        )}
      </div>
    </form>
  );
};