'use client'
import { useEffect, useRef, useState } from 'react';
import Cookies from 'js-cookie';
import { io } from 'socket.io-client';
import { useDispatch, useSelector } from 'react-redux';
import { useQueryClient } from '@tanstack/react-query';
import PrimaryButton from '@/Component/Common/Forms/PrimaryButton';
import WhatsAppVerifyModal from '@/Component/Common/Modal/WhatsAppVerifyModal';
import { RiWhatsappLine } from 'react-icons/ri';
import BorderButton from '@/Component/Common/Forms/BorderButton';
import { SelfAPI, SocketURL } from '@/Utils/APIRequest/Endpoints';
import { getUserDetails } from '@/lib/Features/UserDetails/userDetails';
import { AppStore } from '@/lib/store';

const getDismissCookieKey = (userId: string | number) => `whatsapp_stripe_dismissed_${userId}`;

const WhatsAppStripe = (props) => {
    const { translations, alwaysShow = false, hideDismissButton = false } = props;
    const dispatch = useDispatch();
    const queryClient = useQueryClient();
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
    const userDetailsRef = useRef(userDetails);
    const [modal, setModal] = useState(false);
    const [dismissed, setDismissed] = useState(false);
    const [verified, setVerified] = useState(false);

    userDetailsRef.current = userDetails;

    useEffect(() => {
        if (alwaysShow) {
            setDismissed(false);
            return;
        }

        if (userDetails?.id) {
            setDismissed(Cookies.get(getDismissCookieKey(userDetails.id)) === 'true');
        } else {
            setDismissed(false);
        }
    }, [userDetails?.id, alwaysShow]);

    useEffect(() => {
        if (!userDetails?.id) return;

        const socket = io(SocketURL, {
            withCredentials: true,
            transports: ['websocket'],
            query: {
                userId: userDetails?.id,
            },
        });

        socket.on("data", (data) => {
            if (data?.whatsapp_verified === true && userDetailsRef.current) {
                setVerified(true);
                dispatch(getUserDetails({
                    ...userDetailsRef.current,
                    is_whatsapp_verified: true,
                }));
                queryClient.setQueryData([SelfAPI], (old: any) => {
                    if (!old?.data) return old;
                    return { ...old, data: { ...old.data, is_whatsapp_verified: true } };
                });
            }
        });

        return () => {
            socket.disconnect();
        };
    }, [dispatch, queryClient, userDetails?.id]);

    const handleDismiss = () => {
        if (userDetails?.id) {
            Cookies.set(getDismissCookieKey(userDetails.id), 'true', { expires: 365 });
        }
        setDismissed(true);
    }

    if (userDetails?.is_whatsapp_verified || verified) return null;

    if (!alwaysShow && dismissed) return null;

    return (
        <>
            <div className='bg-green-500/20 rounded-xl p-3 text-white mb-4 mt-5'>
                <div className='flex items-center justify-between flex-wrap gap-2'>
                    <div className='flex items-center gap-2'>
                        <RiWhatsappLine className='text-xl text-green-600 min-w-5' />
                        <label className='text-sm font-medium text-green-600'>{translations?.getInstantUpdatesViaWhatsApp}</label>
                    </div>
                    <div className='flex items-center gap-2'>
                        {!hideDismissButton && (
                            <BorderButton buttonType='button' onClick={handleDismiss} title={translations?.dontShowAgain} customClass='!text-gray !border-gray !h-auto !py-2 !text-xs !rounded-lg' />
                        )}
                        <PrimaryButton
                            onClick={() => setModal(true)}
                            customClass='!h-auto !py-2 !text-xs bg-gradient-to-br from-secondary to-primary !rounded-lg !border-0 gap-2 flex items-center'
                        >
                            {translations?.connectWhatsApp}
                        </PrimaryButton>
                    </div>
                </div>
            </div>
            {modal && <WhatsAppVerifyModal modal={modal} setModal={setModal} />}
        </>
    )
}

export default WhatsAppStripe