"use client";
import { useMemo, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { usePathname, useRouter } from "next/navigation";
import { find, get, isEmpty, map, size } from "lodash";
import { useMutation } from "@tanstack/react-query";
import { zodResolver } from "@hookform/resolvers/zod";
import { useDispatch, useSelector } from "react-redux";
import { Controller, SubmitHandler, useForm } from "react-hook-form";

import Button from "@/components/custom-components/button";
import InputText from "@/components/custom-components/text-input";
import ValidationErrorMessage from "@/components/custom-components/validation-error-message";

import cn from "@/utils/class-names";
import { routes } from "@/config/routes";
import { RootState } from "@/redux/store";
import { setUser } from "@/redux/slice/user-slice";
import { setUnverifiedUser } from "@/redux/slice/unverified-user-slice";
import { LoginFormInput, loginformSchema, } from "@/utils/validators/auth-schema";

import useAuth from "@/server_api/hooks/useAuth";
import PostAPI from "@/server_api/api-functions/apipost";
import { apiEndpoints } from "@/server_api/config/api.endpoints";
import useApi from "@/server_api/hooks/use-api";
import { setCart } from "@/redux/slice/cart-slice";
import { valuesLogin } from "@/src/utils/form-utils/auth-form-utils";
import { UseMutationProps } from "@/src/constants/common";

export default function Login({ refetchAddress }: { refetchAddress: () => void }) {
    const checkout = useSelector((state: RootState) => state.basicDetails.checkout);
    const { setLogIn } = useAuth();
    const dispatch = useDispatch();
    const { push } = useRouter();
    const pathname = usePathname();

    const [isFetchCart, setIsFetchCart] = useState<boolean>(false);
    const [errorMessage, setErrorMessage] = useState<string>("");

    const loginCheckoutValues = useMemo(() => {
        if (!isEmpty(checkout) && size(checkout.additionalFields) > 0) {
            const loginCheckout = find(checkout.additionalFields, (field: any) => field.group === "2");
            if (!isEmpty(loginCheckout)) {
                return loginCheckout;
            }
        }
        return null;
    }, [checkout]);

    const methods = useForm<LoginFormInput>({
        resolver: zodResolver(loginformSchema),
        defaultValues: valuesLogin,
    });
    const {
        control,
        handleSubmit,
        formState: { errors },
    } = methods;

    const onSubmit: SubmitHandler<LoginFormInput> = (data) => {
        handle_login({
            ...data,
            apiEndpoint: apiEndpoints.auth.login,
        } as any);
    };

    const {
        mutate: handle_login,
        isPending: login_isLoading,
        error: login_error,
    } = useMutation<any, Error, UseMutationProps>({
        mutationFn: PostAPI.postAPI,
        onSuccess: async (response: any) => {
            if (response.status) {
                if (!isEmpty(response.requestedData)) {
                    if (response.requestedData.isVerified) {
                        dispatch(setUser(response.requestedData));
                        await setLogIn(response.requestedData, response.requestedData.token);
                        refetchAddress();
                        setIsFetchCart(true);
                        refetchCart();
                    } else {
                        dispatch(setUnverifiedUser({ ...response.requestedData, otpType: "email" }));
                        push(`${routes.auth.verifyOtp}?rd=${pathname}`);
                    }
                } else {
                    setErrorMessage("Something went wrong, please try again");
                }
            } else {
                setErrorMessage(response.message);
            }
        },
    });

    const { refetch: refetchCart } = useApi({
        apiEndpoint: apiEndpoints.cart.get_cart,
        enableFetchApi: isFetchCart,
        searchParams: {
            getattribute: "1",
            getbrand: "1",
        },
        onSuccessCallback: (result: any) => {
            if (result) {
                dispatch(setCart(result));
            }
        },
    });

    const handl_keyPressLogin = (e: any) => {
        if (e.key === "Enter") {
            e.preventDefault(); //
            handleSubmit(onSubmit)();
        }
    };

    return (
        <div className="space-y-4">
            <Controller
                control={control}
                name="email"
                render={({ field }) => (
                    <InputText
                        type="email"
                        placeholder="Enter email"
                        value={field.value}
                        replaceClassName={cn("w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-secondary focus:ring-secondary", {
                            "border-red-300": (errors as any).email?.message,
                        })}
                        onChange={field.onChange}
                        error={(errors as any).email?.message}
                        required={false}
                    />
                )}
            />
            <Controller
                control={control}
                name="password"
                render={({ field }) => (
                    <InputText
                        type="password"
                        placeholder="Password"
                        value={field.value}
                        replaceClassName={cn("w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-secondary focus:ring-secondary", {
                            "border-red-300": (errors as any).password?.message,
                        })}
                        onChange={field.onChange}
                        error={(errors as any).password?.message}
                        required={false}
                        onKeyPress={handl_keyPressLogin}
                    />
                )}
            />
            <div className="flex  flex-col lg:flex-row items-center justify-between ">
                <div className="flex items-center gap-2 text-sm text-gray-600">
                    <span>New here?</span>
                    <Link href={`${routes.auth.signup}?rd=${pathname}`} className="font-semibold text-primary hover:underline">
                        Create an account
                    </Link>
                </div>
                <div className="text-right">
                    <Link href={routes.auth.forgotPassword} className="text-sm text-primary hover:underline">
                        Forgot password?
                    </Link>
                </div>
            </div>


            <ValidationErrorMessage errorMessages={login_error || errorMessage} />

            <Button className="flex w-full items-center justify-center !rounded-md bg-secondary py-3 font-bold text-primary transition hover:opacity-90 disabled:opacity-60" onClick={handleSubmit(onSubmit)} isLoading={login_isLoading}>
                LOGIN & CONTINUE
            </Button>
        </div>
    );
}