"use client";
import React, { use, useEffect, useState } from "react";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
import { ArrowRight, Eye, EyeOffIcon } from "lucide-react";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/redux/store";
import { toggleState } from "@/redux/feature/toggleSlice";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { useForm, SubmitHandler } from "react-hook-form";
import { AuthFormValues, loginResponseType, loginType } from "@/type/authType";
import CustomForm from "@/components/common/CustomForm";
import { useMutation } from "@tanstack/react-query";
import { APIResponseType } from "@/type/comonType";
import { otpType } from "@/app/(auth)/register/code/type/otpType";
import { AxiosError, AxiosResponse } from "axios";
import {
  sandLoginOtp,
  verifyLoginSandOtp,
  verifySandOtp,
} from "@/lib/services/auth.services";
import showCustomToast from "@/components/common/toaster/CustomToast";
import router from "next/router";
import { useApiToast } from "@/hooks/use-apiToast";
import { login } from "@/redux/feature/authSlice";
import { useTimer } from "@/hooks/use-timer";
import { useResendOtp } from "../hooks/useResentOtp";

const LoginOtpCodePage = () => {
  const { getToastData } = useApiToast();
  const [registrationEmail, setRegistrationEmail] = useState("");
  const isLoggedIn = useSelector((state: RootState) => state.auth.isLoggedIn);
  const dispatch = useDispatch();

  useEffect(() => {
    const phone = localStorage.getItem("loginEmail") || "";
    setRegistrationEmail(phone);
  }, []);

  const { seconds, isActive, startTimer, formatTime } = useTimer(120);

  useEffect(() => {
    startTimer(); // Start timer on mount
  }, [startTimer]);

  const { mutate: resendOtp, isPending: isResending } = useResendOtp();

  const handleResend = () => {
    if (isActive || isResending) return;
    resendOtp(
      { email: registrationEmail },
      {
        onSuccess: () => {
          startTimer(); // Restart timer on success
        },
      },
    );
  };

  const {
    handleSubmit,
    register,
    watch,
    control,
    formState: { errors },
  } = useForm<AuthFormValues>();

  const {
    mutate: verifyOTP,
    data: registerResponse,
    error,
    isPending,
    isSuccess,
  } = useMutation<
    APIResponseType<loginResponseType>,
    AxiosError<{ message: string }>,
    otpType // Change to object type
  >({
    mutationFn: verifyLoginSandOtp,
    onSuccess: (data) => {
      // router.push("/login/otp/code");

      showCustomToast({
        type: "success",
        message: data.message,
      });

      if (typeof window !== "undefined") {
        localStorage.setItem("isLoggedIn", "true");
        localStorage.setItem("accessToken", data.data.access_token);
        localStorage.removeItem("loginEmail");
        document.cookie = `token=${data.data.access_token}; path=/; max-age=86400; samesite=lax`;
        // Dispatch login LAST so RedirectIfLoggedIn has everything ready
        dispatch(login());
      }
    },
    onError: (error) => {
      console.log(
        "Registration error----------------:",
        error.response?.data.message,
      );

      showCustomToast({
        type: "error",
        message: error.response?.data.message ?? "Something went wrong",
      });
    },
  });

  const onSubmit: SubmitHandler<AuthFormValues> = (data) => {

    const OtpData: otpType = {
      otp: data.code,
      email: registrationEmail,
    };

    verifyOTP(OtpData);
  };

  return (
    <div className="mx-5 flex flex-col items-center justify-center">
      {/* login text */}
      <div className="border-border mt-18 flex min-h-[85vh] w-full flex-col items-center justify-center gap-5 rounded-2xl border py-20">
        <div className="mx-5 flex flex-col gap-5">
          <div className="text-background font-bricolage text-5xl font-bold md:text-6xl">
            Enter OTP code{" "}
          </div>
          <div className="text-secondary-text font-bricolage text-sm font-normal">
            Enter the confirmation code we just send you in your Email. <br />{" "}
            Don&apos;t receive a code?
            <span
              onClick={handleResend}
              className={`text-background font-bold underline ${isActive || isResending ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:scale-105"}`}
            >
              {" "}
              {isActive ? `Resend in ${formatTime()}` : "Resend"}
            </span>
          </div>
          {/* text form */}
          <div className="my-10 w-full">
            <form
              action=""
              onSubmit={handleSubmit(onSubmit)}
              className="flex w-full justify-center"
            >
              <Field className="font-manrope max-w-sm">
                <CustomForm
                  type="code"
                  register={register}
                  errors={errors}
                  control={control}
                  isLoading={isPending}
                />
              </Field>
            </form>
            {/* rules and regulation       */}
          </div>
        </div>
      </div>
    </div>
  );
};

export default LoginOtpCodePage;