'use client';

declare global {
    interface Window {
        google: any;
    }
}

import { GOOGLE_CLIENT_ID } from "@/config/env";
import { useRouterNavigation } from "@/hooks/useRouterNavigation";
import { getProfile, userLoginGoogle } from "@/libs/axios/modules/user";
import { setLoading, setLoggedIn, setToken } from "@/libs/redux/reducers/global";
import { setUser } from "@/libs/redux/reducers/user";
import { useRouter } from "next/navigation";
import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { Bounce, toast } from "react-toastify";

const GoogleLogin = ({ platform }: { platform: any }) => {
    const dispatch = useDispatch();
    const { navigate } = useRouterNavigation();

    function generateRandomString(length = 64) {
        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789`~!@#$%^&*()-_=+|]}[{;:,<.>/?';
        let result = '';
        const charactersLength = characters.length;

        for (let i = 0; i < length; i++) {
            result += characters.charAt(Math.floor(Math.random() * charactersLength));
        }

        return result;
    }

    const signInGoogle = async (email: string, idToken: string) => {
        try {
            dispatch(setLoading(true));
            const device_token = generateRandomString();
            const { data: responseLogin } = await userLoginGoogle({
                email: email,
                device_token: device_token,
                id_token: idToken,
                platform: platform,
                timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
            });
            if (responseLogin && responseLogin.data) {
                const token = responseLogin.data.token;
                const { data: responseProfile } = await getProfile(token);
                if (responseProfile) {
                    dispatch(setUser(responseProfile.data));
                    setTimeout(() => {
                        dispatch(setToken(responseLogin.data.token));
                        dispatch(setLoggedIn(true));
                        navigate('/');
                    }, 1500);
                }
                dispatch(setLoading(false));
            } else {
                dispatch(setLoading(false));                // sign in was cancelled by user
            }
        } catch (error: any) {
            dispatch(setLoading(false));                // sign in was cancelled by user
            let message: string = error.data.message;
            if (error && error.data) {
                message = error.data.message;
                if (error.data.errors) {
                    return;
                }
            }
            toast.error(message, {
                position: "top-center",
                autoClose: 2000,
                hideProgressBar: false,
                closeOnClick: true,
                pauseOnHover: true,
                draggable: true,
                progress: undefined,
                theme: "colored",
                transition: Bounce,
            });
        }
    };


    useEffect(() => {
        // Pastikan script sudah ada
        const scriptExists = document.querySelector(
            'script[src="https://accounts.google.com/gsi/client"]'
        );

        if (!scriptExists) {
            const script = document.createElement("script");
            script.src = "https://accounts.google.com/gsi/client";
            script.async = true;
            script.defer = true;
            document.body.appendChild(script);
        }

        const initializeGoogle = () => {
            if (window.google) {
                window.google.accounts.id.initialize({
                    client_id: GOOGLE_CLIENT_ID,
                    callback: handleCredentialResponse,
                });

                window.google.accounts.id.renderButton(
                    document.getElementById("google-login-button")!,
                    {
                        theme: "outline",
                        size: "large",
                        width: "100%",
                        shape:"pill"
                    }
                );
            }
        };

        const handleCredentialResponse = (response: any) => {
            const idToken = response.credential;
            const base64Url = idToken.split('.')[1];
            const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
            const jsonPayload = decodeURIComponent(
                atob(base64)
                    .split('')
                    .map((c) => {
                        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
                    })
                    .join('')
            );

            const userData = JSON.parse(jsonPayload);

            signInGoogle(userData.email, idToken);
        };

        const checkGoogleLoaded = () => {
            if (window.google && window.google.accounts) {
                initializeGoogle();
            } else {
                setTimeout(checkGoogleLoaded, 100);
            }
        };

        checkGoogleLoaded();
    }, []);

    return <div id="google-login-button" className="w-full mb-4 " />;
};

export default GoogleLogin;