"use client";
import React, { use } 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 } from "@/type/authType";
import { useRouter } from "next/navigation";
import CustomForm from "@/components/common/CustomForm";
import showCustomToast from "@/components/common/toaster/CustomToast";
import { useResendOtp } from "./hooks/useResentOtp";

const LoginOtpPage = () => {
  const router = useRouter();
  const dispatch = useDispatch();
  const { mutate: resendOtp, isPending } = useResendOtp();

  const {
    handleSubmit,
    register,

    watch,
    formState: { errors },
  } = useForm<AuthFormValues>();
  const onSubmit: SubmitHandler<AuthFormValues> = (data) => {
    localStorage.setItem("loginEmail", data.email);

    handleResendOtp(data);
  };

  const handleResendOtp = (data: AuthFormValues) => {
    if (!data.email) {
      showCustomToast({
        type: "error",
        message: "Phone not found",
      });
      return;
    }

    resendOtp({ email: data.email });
  };

  return (
    <div className="mx-6 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-2 flex flex-col gap-5">
          <div className="flex flex-col items-center gap-2">
            <div className="text-background font-bricolage text-6xl font-bold">
              Login with OTP
            </div>
            <div className="text-secondary-text font-bricolage text-sm font-normal">
              Enter your registered email
            </div>
          </div>
          {/* text form */}
          <div className="my-10 w-full">
            <form
              onSubmit={handleSubmit(onSubmit)}
              className="flex w-full justify-center"
            >
              <Field className="font-manrope max-w-sm">
                <CustomForm
                  type="otp"
                  register={register}
                  errors={errors}
                  isLoading={isPending}
                />
              </Field>
            </form>
            {/* rules and regulation       */}

            <div className="text-secondary-text font-manrope mt-20 flex justify-center text-lg font-light">
              Remember ID & Password?
              <Link href="/login" className="ml-2">
                <span className="text-background cursor-pointer font-bold underline">
                  Log in
                </span>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default LoginOtpPage;