"use client";

import { useState, useEffect } from "react";
import { X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
import CountryPickerModal from "@/components/countrycode/page";
import countries from "@/utils/CountryCode.json";
import apis from "@/utils/apis";
import { useGlobalContext } from "@/context/Provider";
import { useRouter } from "next/navigation";
import Loader from "@/components/common/loader";
import { COOKIES_USER_ACCESS_TOKEN } from "@/context/actionTypes";
import { maskPhoneNumber } from "@/lib/utils";
import { logEvent } from "@/utils/analytics";


// Helper function to set cookie on client-side
const setClientCookie = (name: string, value: string, days: number = 30) => {
    const expires = new Date();
    expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
    document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
};

interface AuthDrawerProps {
    isOpen: boolean;
    onClose: () => void;
}

type AuthStep = "phone" | "otp" | "details" | "emailOtp";

const AuthDrawer = ({ isOpen, onClose }: AuthDrawerProps) => {
    const { setUserInfo, Toast, requestNotification, getProfile } = useGlobalContext();
    const router = useRouter();
    const [step, setStep] = useState<AuthStep>("phone");
    const [loading, setLoading] = useState(false);

    // Phone step
    const [countryValue, setCountryValue] = useState<any>(countries?.[97]);
    const [phoneNumber, setPhoneNumber] = useState("");
    const [phoneError, setPhoneError] = useState("");

    // OTP step
    const [otp, setOtp] = useState("");
    const [countdown, setCountdown] = useState(29);
    const [isResendDisabled, setIsResendDisabled] = useState(true);
    const [isSending, setIsSending] = useState(false);

    // Details step
    const [name, setName] = useState("");
    const [email, setEmail] = useState("");
    const [referralCode, setReferralCode] = useState("");
    const [nameError, setNameError] = useState("");
    const [emailError, setEmailError] = useState("");

    // Email OTP step
    const [emailOtp, setEmailOtp] = useState("");
    const [emailCountdown, setEmailCountdown] = useState(29);
    const [isEmailResendDisabled, setIsEmailResendDisabled] = useState(true);
    const [isEmailSending, setIsEmailSending] = useState(false);

    // Show referral code input
    const [showReferralInput, setShowReferralInput] = useState(false);

    // Countdown timer for OTP resend
    useEffect(() => {
        let timer: NodeJS.Timeout;
        if (isResendDisabled && countdown > 0 && step === "otp") {
            timer = setInterval(() => {
                setCountdown((prev) => prev - 1);
            }, 1000);
        } else if (countdown === 0) {
            setIsResendDisabled(false);
        }
        return () => clearInterval(timer);
    }, [countdown, isResendDisabled, step]);

    // Countdown timer for Email OTP resend
    useEffect(() => {
        let timer: NodeJS.Timeout;
        if (isEmailResendDisabled && emailCountdown > 0 && step === "emailOtp") {
            timer = setInterval(() => {
                setEmailCountdown((prev) => prev - 1);
            }, 1000);
        } else if (emailCountdown === 0) {
            setIsEmailResendDisabled(false);
        }
        return () => clearInterval(timer);
    }, [emailCountdown, isEmailResendDisabled, step]);

    const getDeviceType = () => {
        const userAgent = navigator.userAgent.toLowerCase();
        const width = window.screen.width;
        const height = window.screen.height;
        if (/mobile/i.test(userAgent)) {
            return "mobile";
        } else if (/tablet/i.test(userAgent)) {
            return "tablet";
        } else if (width > 1024 && height <= 800) {
            return "laptop";
        } else {
            return "computer";
        }
    };

    const validatePhoneNumber = (phone: string) => {
        if (!phone) {
            setPhoneError("Phone number is required!");
            return false;
        }

        const minLength = countryValue?.min_length || 6;
        const maxLength = countryValue?.max_length || 15;
        const phoneLength = phone.length;

        if (phoneLength < minLength) {
            setPhoneError(`Phone number must be at least ${minLength} digits for ${countryValue?.name}!`);
            return false;
        }

        if (phoneLength > maxLength) {
            setPhoneError(`Phone number must not exceed ${maxLength} digits for ${countryValue?.name}!`);
            return false;
        }

        setPhoneError("");
        return true;
    };

    const validateName = (val: string) => {
        if (!val || val.trim().length < 1) {
            setNameError("Enter your name!");
            return false;
        }
        if (val.length > 55) {
            setNameError("Name must not exceed 55 characters!");
            return false;
        }
        setNameError("");
        return true;
    };

    const validateEmail = (val: string) => {
        if (!val || val.trim().length < 1) {
            setEmailError("Enter a valid email!");
            return false;
        }
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(val)) {
            setEmailError("Enter a valid email!");
            return false;
        }
        setEmailError("");
        return true;
    };

    const handlePhoneSubmit = async () => {
        if (!validatePhoneNumber(phoneNumber)) {
            return;
        }

        if (phoneNumber?.length < 6) {
            Toast.error("Enter a valid number!");
            return;
        }

        try {
            let phone = phoneNumber || "";
            let dialCode = countryValue?.dial_code || "";

            if (phone.startsWith(dialCode)) {
                phone = phone.slice(dialCode.length);
            }

            let payload: any = {
                country_code: "+" + dialCode,
                phone: phone,
                type: "customer",
            };

            setLoading(true);
            const fcm_token = await requestNotification();
            if (fcm_token) {
                payload["fcm_token"] = fcm_token;
            }
            const system_type = getDeviceType();
            if (system_type) {
                payload["system_type"] = system_type;
            }

            const apiRes = await apis.Auth.login(payload);

            if (apiRes?.token) {
                sessionStorage.setItem("token", apiRes?.token);
                sessionStorage.setItem("phone", phone);
                sessionStorage.setItem("code", dialCode);
                apis.setToken(apiRes?.token);

                setStep("otp");
                setCountdown(29);
                setIsResendDisabled(true);
            }
        } catch (error) {
            Toast.error(error);
        } finally {
            setLoading(false);
        }
    };

    const handleOtpSubmit = async () => {
        if (!otp || otp.length !== 4) {
            Toast.error("Please enter the complete OTP");
            return;
        }

        try {
            let payload: any = {
                otp: otp,
                device_type: "WEB",
            };

            setLoading(true);
            const fcm_token = await requestNotification();
            if (fcm_token) {
                payload["fcm_token"] = fcm_token;
            }
            const system_type = getDeviceType();
            if (system_type) {
                payload["system_type"] = system_type;
            }

            const apiRes = await apis.Auth.verifyOtp(payload);

            sessionStorage.setItem("token", apiRes?.access_token);
            sessionStorage.removeItem("phone");
            sessionStorage.removeItem("code");
            apis.setToken(apiRes?.data?.access_token);

            if (!apiRes?.data?.is_email_verify) {
                setStep("details");
            } else {
                // Set cookies for persistent cross-MFE login
                const finalAccessToken = apiRes?.access_token || apiRes?.data?.access_token;
                if (finalAccessToken) {
                    setClientCookie(COOKIES_USER_ACCESS_TOKEN, finalAccessToken, 30);
                    setClientCookie("cookies_user_access_token", finalAccessToken, 30);
                    localStorage.setItem("auth_token", finalAccessToken);
                }
                const profileRes = await getProfile();
                setUserInfo((prev: any) => ({
                    ...prev,
                    ...profileRes,
                    access_token: finalAccessToken,
                }));
                if (typeof window !== "undefined") {
                    window.dispatchEvent(
                        new CustomEvent("READY_MFE_EVENT", {
                            detail: { type: "MFE_AUTH_LOGIN", payload: { token: finalAccessToken, user: profileRes } },
                        })
                    );
                }
                Toast.success("Login successful!");
                logEvent("login", { method: "phone" });
                onClose();
                router.refresh();
            }
        } catch (error) {
            Toast.error(error);
            setOtp("");
        } finally {
            setLoading(false);
        }
    };

    const handleDetailsSubmit = async () => {
        const isNameValid = validateName(name);
        const isEmailValid = validateEmail(email);

        if (!isNameValid || !isEmailValid) {
            return;
        }

        try {
            let payload: any = {
                email: email,
                name: name,
            };

            if (referralCode) {
                payload.referral_code = referralCode.toUpperCase();
            }

            setLoading(true);
            const apiRes = await apis.Profile.UpdateProfile(payload);

            sessionStorage.setItem("email", email);

            if (apiRes) {
                setStep("emailOtp");
                setEmailCountdown(29);
                setIsEmailResendDisabled(true);
            }
        } catch (error) {
            Toast.error(error);
        } finally {
            setLoading(false);
        }
    };

    const handleEmailOtpSubmit = async () => {
        if (!emailOtp || emailOtp.length !== 4) {
            Toast.error("Please enter the complete OTP");
            return;
        }

        try {
            setLoading(true);
            const apiRes = await apis.Auth.VerifyE({ otp: emailOtp });

            if (apiRes) {
                const storedToken = sessionStorage.getItem("token");

                // Set cookies for persistent cross-MFE login
                if (storedToken) {
                    setClientCookie(COOKIES_USER_ACCESS_TOKEN, storedToken, 30);
                    setClientCookie("cookies_user_access_token", storedToken, 30);
                    localStorage.setItem("auth_token", storedToken);
                }
                const profileRes = await getProfile();
                setUserInfo((prev: any) => ({
                    ...prev,
                    ...profileRes,
                    access_token: storedToken,
                }));
                if (typeof window !== "undefined") {
                    window.dispatchEvent(
                        new CustomEvent("READY_MFE_EVENT", {
                            detail: { type: "MFE_AUTH_LOGIN", payload: { token: storedToken, user: profileRes } },
                        })
                    );
                }
                Toast.success("Account created successfully!");
                logEvent("sign_up", { method: "email" });
                sessionStorage.removeItem("email");
                onClose();
                router.refresh();
            }
        } catch (error) {
            Toast.error(error);
            setEmailOtp("");
        } finally {
            setLoading(false);
        }
    };

    const resendOtp = async () => {
        if (isSending || isResendDisabled) return;

        setIsSending(true);
        try {
            setCountdown(29);
            const phone = sessionStorage.getItem("phone");
            const dialCode = sessionStorage.getItem("code");
            let payload: any = {
                country_code: "+" + dialCode,
                phone: phone,
                type: "customer",
            };
            const apiRes = await apis.Auth.login(payload);
            if (apiRes?.token) {
                sessionStorage.setItem("token", apiRes?.token);
            }
            setIsResendDisabled(true);
            Toast.success("OTP sent successfully!");
        } catch (error) {
            Toast.error(error);
        } finally {
            setIsSending(false);
        }
    };

    const resendEmailOtp = async () => {
        if (isEmailSending || isEmailResendDisabled) return;

        setIsEmailSending(true);
        try {
            setEmailCountdown(29);
            await apis.Auth.resendOtp({ email: sessionStorage.getItem("email") });
            setIsEmailResendDisabled(true);
            Toast.success("OTP sent successfully!");
        } catch (error) {
            Toast.error(error);
        } finally {
            setIsEmailSending(false);
        }
    };

    const handleClose = () => {
        setStep("phone");
        setPhoneNumber("");
        setOtp("");
        setName("");
        setEmail("");
        setReferralCode("");
        setEmailOtp("");
        setPhoneError("");
        setNameError("");
        setEmailError("");
        setShowReferralInput(false);
        setEmailCountdown(29);
        setIsEmailResendDisabled(true);
        onClose();
    };

    const handleBack = () => {
        if (step === "otp") {
            setStep("phone");
            setOtp("");
        } else if (step === "details") {
            setStep("otp");
            setName("");
            setEmail("");
            setReferralCode("");
            setNameError("");
            setEmailError("");
        } else if (step === "emailOtp") {
            setStep("details");
            setEmailOtp("");
        }
    };

    if (!isOpen) return null;

    return (
        <>
            {/* Backdrop */}
            <div
                className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50"
                onClick={handleClose}
            />

            {/* Drawer */}
            <div className="fixed right-0 top-0 h-full w-full max-w-md bg-white shadow-2xl z-50 transform transition-transform duration-300 ease-in-out overflow-y-auto">
                {/* Header */}
                <div className="sticky top-0 bg-white border-b border-gray-200 p-4 flex items-center justify-between z-10">
                    <button
                        onClick={handleClose}
                        className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors"
                    >
                        <X size={20} />
                    </button>
                    {/* {step !== "phone" && (
                        <button
                            onClick={handleBack}
                            className="text-sm text-gray-600 hover:text-gray-900 font-medium"
                        >
                            Back
                        </button>
                    )} */}
                </div>

                {/* Content */}
                <div className="p-6">
                    {/* Phone Step */}
                    {step === "phone" && (
                        <div>
                            <h2 className="text-3xl font-bold mb-2">Login</h2>
                            <p className="text-sm mb-1">
                                or{" "}
                                <span className="text-primary font-medium">
                                    create an account
                                </span>
                            </p>
                            <div className="w-12 h-1 mb-6"></div>

                            <label className="block text-sm text-gray-700 mb-2">
                                Phone number<span className="text-red-500 ml-1">*</span>
                            </label>

                            <div className="flex flex-row w-full gap-2 mb-4">
                                <CountryPickerModal setValue={setCountryValue} value={countryValue} />
                                <input
                                    type="tel"
                                    placeholder="Phone number"
                                    value={phoneNumber}
                                    onChange={(e: any) => {
                                        const numericValue = e.target.value.replace(/\D/g, "");
                                        setPhoneNumber(numericValue);
                                        if (phoneError) setPhoneError("");
                                    }}
                                    onBlur={() => {
                                        if (phoneNumber) validatePhoneNumber(phoneNumber);
                                    }}
                                    minLength={countryValue?.min_length || 6}
                                    maxLength={countryValue?.max_length || 15}
                                    className={`w-full border px-4 py-3 rounded-md focus:outline-none focus:ring-2 ${phoneError ? "border-red-500 focus:ring-red-400" : "focus:ring-primary"
                                        }`}
                                />
                            </div>

                            {phoneError && (
                                <p className="text-red-500 text-xs mb-4">{phoneError}</p>
                            )}

                            <Button
                                onClick={handlePhoneSubmit}
                                className="w-full bg-primary hover:bg-brand-400 text-white font-semibold py-3 rounded-md h-12"
                                disabled={loading}
                            >
                                <Loader loading={loading} />
                                LOGIN
                            </Button>

                            <p className="text-xs text-gray-500 mt-4">
                                By clicking on Login, I accept the{" "}
                                <a href="https://readyeats.henceforthsolutions.com/terms-condition/" target="_blank" className="font-semibold hover:text-primary transition-colors">Terms & Conditions</a> &{" "}
                                <a href="https://readyeats.henceforthsolutions.com/customer-policy/" target="_blank" className="font-semibold hover:text-primary transition-colors">Privacy Policy</a>
                            </p>
                        </div>
                    )}

                    {/* OTP Step */}
                    {step === "otp" && (
                        <div>
                            <h2 className="text-3xl font-bold mb-2">Sign up</h2>
                            <p className="text-sm mb-1">
                                or{" "}
                                <span className="text-primary font-medium cursor-pointer" onClick={() => setStep("phone")}>
                                    login to your account
                                </span>
                            </p>
                            <div className="w-12 h-1 mb-6"></div>

                            <p className="text-sm text-gray-600 mb-4">
                                Enter the 4-digit code sent to{" "}
                                <span className="font-semibold">
                                    +{sessionStorage.getItem("code")}
                                    {maskPhoneNumber(sessionStorage.getItem("phone"))}
                                </span>
                            </p>

                            <div className="flex justify-center w-full mb-6">
                                <InputOTP
                                    maxLength={4}
                                    value={otp}
                                    onChange={setOtp}
                                >
                                    <div className="flex gap-5">
                                        {[...Array(4)].map((_, index) => (
                                            <InputOTPGroup key={index}>
                                                <InputOTPSlot
                                                    index={index}
                                                    className="h-16 w-16 rounded-xl border border-gray-300 text-2xl font-semibold shadow-sm focus:border-primary focus:ring-1 focus:ring-primary"
                                                />
                                            </InputOTPGroup>
                                        ))}
                                    </div>
                                </InputOTP>
                            </div>

                            <div className="text-sm text-gray-600 mb-6">
                                {isResendDisabled ? (
                                    `Didn't receive the OTP? Retry in 00:${countdown.toString().padStart(2, "0")}`
                                ) : (
                                    <Button
                                        type="button"
                                        variant="link"
                                        className="p-0 h-auto font-semibold text-primary"
                                        disabled={isResendDisabled}
                                        onClick={resendOtp}
                                    >
                                        Resend OTP
                                    </Button>
                                )}
                            </div>

                            <Button
                                onClick={handleOtpSubmit}
                                className="w-full bg-primary hover:bg-brand-400 text-white font-semibold py-3 rounded-md h-12"
                                disabled={loading || otp.length !== 4}
                            >
                                <Loader loading={loading} />
                                CONTINUE
                            </Button>
                        </div>
                    )}

                    {/* Details Step */}
                    {step === "details" && (
                        <div>
                            <h2 className="text-3xl font-bold mb-2">Sign up</h2>
                            <p className="text-sm mb-1">
                                or{" "}
                                <span className="text-primary font-medium">
                                    login to your account
                                </span>
                            </p>
                            <div className="w-12 h-1 mb-6"></div>

                            {/* <p className="text-sm text-gray-600 mb-4">
                                Phone number: {sessionStorage.getItem("code")}
                                {sessionStorage.getItem("phone")}
                            </p> */}

                            <label className="block text-sm text-gray-700 mb-2">Name<span className="text-red-500 ml-1">*</span></label>
                            <input
                                type="text"
                                placeholder="Name"
                                value={name}
                                onChange={(e) => {
                                    setName(e.target.value);
                                    if (nameError) setNameError("");
                                }}
                                onBlur={() => {
                                    validateName(name);
                                }}
                                maxLength={55}
                                className={`w-full border px-4 py-3 rounded-md focus:outline-none focus:ring-2 ${nameError ? "border-red-500 focus:ring-red-400 mb-1" : "focus:ring-primary mb-4"
                                    }`}
                            />
                            {nameError && (
                                <p className="text-red-500 text-xs mb-4">{nameError}</p>
                            )}

                            <label className="block text-sm text-gray-700 mb-2">Email<span className="text-red-500 ml-1">*</span></label>
                            <input
                                type="email"
                                placeholder="Email"
                                value={email}
                                onChange={(e) => {
                                    setEmail(e.target.value);
                                    if (emailError) setEmailError("");
                                }}
                                onBlur={() => {
                                    validateEmail(email);
                                }}
                                className={`w-full border px-4 py-3 rounded-md focus:outline-none focus:ring-2 ${emailError ? "border-red-500 focus:ring-red-400 mb-1" : "focus:ring-primary mb-4"
                                    }`}
                            />
                            {emailError && (
                                <p className="text-red-500 text-xs mb-4">{emailError}</p>
                            )}

                            {showReferralInput ? (
                                <>
                                    <label className="block text-sm text-gray-700 mb-2">
                                        Referral code
                                    </label>
                                    <input
                                        type="text"
                                        placeholder="Referral code"
                                        value={referralCode}
                                        onChange={(e) => setReferralCode(e.target.value.toUpperCase())}
                                        className="w-full border px-4 py-3 mb-6 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                                    />
                                </>
                            ) : (
                                <button
                                    onClick={() => setShowReferralInput(true)}
                                    className="text-sm text-primary font-medium mb-6 hover:underline"
                                >
                                    Have a referral code?
                                </button>
                            )}

                            <Button
                                onClick={handleDetailsSubmit}
                                className="w-full bg-primary hover:bg-brand-400 text-white font-semibold py-3 rounded-md h-12 mt-4"
                                disabled={loading}
                            >
                                <Loader loading={loading} />
                                CONTINUE
                            </Button>

                            <p className="text-xs text-gray-500 mt-4">
                                By creating an account, I accept the{" "}
                                <a href="https://readyeats.henceforthsolutions.com/terms-condition/" target="_blank" className="font-semibold hover:text-primary transition-colors">Terms & Conditions</a> &{" "}
                                <a href="https://readyeats.henceforthsolutions.com/customer-policy/" target="_blank" className="font-semibold hover:text-primary transition-colors">Privacy Policy</a>
                            </p>
                        </div>
                    )}

                    {/* Email OTP Step */}
                    {step === "emailOtp" && (
                        <div>
                            <h2 className="text-3xl font-bold mb-2">Verify Email</h2>
                            <p className="text-sm mb-1">
                                <span className="text-primary font-medium">
                                    Complete your signup
                                </span>
                            </p>
                            <div className="w-12 h-1 mb-6"></div>

                            <p className="text-sm text-gray-600 mb-4">
                                Enter the 4-digit code sent to{" "}
                                <span className="font-semibold">{sessionStorage.getItem("email")}</span>
                            </p>

                            <div className="flex justify-center w-full mb-6">
                                <InputOTP
                                    maxLength={4}
                                    value={emailOtp}
                                    onChange={setEmailOtp}
                                >
                                    <div className="flex gap-5">
                                        {[...Array(4)].map((_, index) => (
                                            <InputOTPGroup key={index}>
                                                <InputOTPSlot
                                                    index={index}
                                                    className="h-16 w-16 rounded-xl border border-gray-300 text-2xl font-semibold shadow-sm focus:border-primary focus:ring-1 focus:ring-primary"
                                                />
                                            </InputOTPGroup>
                                        ))}
                                    </div>
                                </InputOTP>
                            </div>

                            <div className="text-sm text-gray-600 mb-6">
                                {isEmailResendDisabled ? (
                                    `Didn't receive the OTP? Retry in 00:${emailCountdown.toString().padStart(2, "0")}`
                                ) : (
                                    <Button
                                        type="button"
                                        variant="link"
                                        className="p-0 h-auto font-semibold text-primary"
                                        disabled={isEmailResendDisabled}
                                        onClick={resendEmailOtp}
                                    >
                                        Resend OTP
                                    </Button>
                                )}
                            </div>

                            <Button
                                onClick={handleEmailOtpSubmit}
                                className="w-full bg-primary hover:bg-brand-400 text-white font-semibold py-3 rounded-md h-12"
                                disabled={loading || emailOtp.length !== 4}
                            >
                                <Loader loading={loading} />
                                VERIFY & CONTINUE
                            </Button>
                        </div>
                    )}
                </div>
            </div>
        </>
    );
};

export default AuthDrawer;