'use client'
import { useEffect } from 'react'
import {
    Dialog,
    DialogContent,
    DialogTitle,
} from "@/components/ui/dialog"
import { MdOutlineClose } from "react-icons/md";
import { MdCheck } from "react-icons/md";
import { useSelector } from 'react-redux'
import { settingsSelector } from '../store/reducers/settingsReducer';
import { userDataSelector } from '../store/reducers/userReducer';
import {
    currentLanguageLabelSelector,
    currentLanguageSelector,
    languagesListSelector,
    setCurrentLanguageLabelData,
    setLanguageChangeData,
    setLanguagesListData,
} from '../store/reducers/languageReducer';
import { getLanguageJsonDataApi, getLanguagesApi, registertokenApi } from '@/utils/api/api';
import { isManualRefresh, setCateOffset } from '@/utils/helpers';
import { isLangChangeState } from '../store/reducers/helperReducer';
import { useRouter } from 'next/router';
import moment from 'moment';
import { translate } from '@/utils/translation';

export default function LanguageModal({
    open = false,
    onClose = () => { },
    setMorePagesOffset = () => { },
    setIsLoadMorePages = () => { },
}) {
    const router = useRouter();

    const settingsData = useSelector(settingsSelector);
    const languagesList = useSelector(languagesListSelector);
    const currentLanguage = useSelector(currentLanguageSelector);
    const currentLanguageLabelsData = useSelector(currentLanguageLabelSelector);
    const userData = useSelector(userDataSelector);

    const languagesLabelDiffInMinutes = currentLanguageLabelsData?.lastFetch
        ? moment().diff(moment(currentLanguageLabelsData?.lastFetch), 'minutes')
        : process.env.NEXT_PUBLIC_LOAD_MIN + 1;

    const storedLatitude = settingsData?.lat;
    const storedLongitude = settingsData?.long;

    const fetchLanguages = async () => {
        try {
            const { data } = await getLanguagesApi.getLanguages();
            const languageList = data?.data?.data;
            setLanguagesListData({ data: languageList });

            if (currentLanguage?.code == null) {
                const index = languageList?.find(item =>
                    item?.code === settingsData?.data?.default_language?.code
                );
                if (index) {
                    setLanguageChangeData(index.language, index.code, index.id);
                }
            }
        } catch (error) {
            console.error('Error:', error);
        }
    };

    const fetchLanguagesJsonData = async (code) => {
        try {
            const response = await getLanguageJsonDataApi.getLanguageJsonData({
                language_code: code,
                platform_type: 'web'
            });
            setCurrentLanguageLabelData(response.data?.data, Date.now());
        } catch (error) {
            console.error('Error:', error);
        }
    };

    const registerToken = async (fcmId, userId) => {
        if (!fcmId) return;
        try {
            await registertokenApi.registertoken({
                language_code: currentLanguage?.code,
                token: fcmId,
                latitude: storedLatitude,
                longitude: storedLongitude,
                user_id: userId,
            });
        } catch (error) {
            console.error('registerFcmTokenApi Error:', error);
        }
    };

    const languageChange = async (name, code, id, display_name) => {
        fetchLanguagesJsonData(code);
        setLanguageChangeData(name, code, id, display_name);
        onClose();
        if (settingsData?.fcmtoken) {
            registerToken(settingsData?.fcmtoken, userData?.data?.id);
        }
    };

    const handleLanguageChange = (e, language, code, id, display_name) => {
        e?.preventDefault();
        languageChange(language, code, id, display_name);
        router.push(`/${code}/category-preferences`);
        setCateOffset(0);
        setMorePagesOffset(0);
        setIsLoadMorePages(false);
        isLangChangeState({ change: true });
        setTimeout(() => {
            isLangChangeState({ change: false });
        }, 1000);
    };

    useEffect(() => {
        if (settingsData) {
            fetchLanguages();
        }
    }, [currentLanguage]);

    useEffect(() => {
        if (languagesList?.length < 2 && languagesLabelDiffInMinutes || isManualRefresh()) {
            fetchLanguagesJsonData(settingsData?.data?.default_language?.code);
            setLanguageChangeData(
                settingsData?.data?.default_language?.language,
                settingsData?.data?.default_language?.code,
                settingsData?.data?.default_language?.id,
                settingsData?.data?.default_language?.display_name
            );
        }
    }, [settingsData]);

    return (
        <Dialog open={open}>
            <DialogContent className="!w-[90vw] sm:!w-[520px] max-h-[80vh] p-0 overflow-hidden rounded-2xl border-0 shadow-2xl bodyBgColor loginModal gap-2">
                <DialogTitle className="hidden" />

                {/* Header */}
                <div className="flex items-center justify-between px-5 py-4 border-b borderColor dark:border-gray-800">
                    <h2 className="text-lg font-semibold tracking-tight">{translate('chooseLanLbl')}</h2>
                </div>

                {/* Language grid */}
                <div className="overflow-y-auto max-h-[60vh] p-4 pb-6">
                    <div className="flex items-center flex-wrap gap-4 sm:grid grid-cols-3 sm:gap-2">
                        {languagesList?.map((lang, index) => {
                            const isActive = currentLanguage?.code === lang?.code;
                            const label = lang?.display_name || lang?.language;

                            return (
                                <button
                                    key={index}
                                    onClick={(e) => handleLanguageChange(e, lang.language, lang.code, lang.id, lang.display_name)}
                                    className={`
                    flex items-center justify-between gap-2 px-4 py-3 rounded-xl
                    border text-sm font-semibold capitalize text-left transition-all duration-200
                    ${isActive
                                            ? 'primaryBg text-white border-transparent shadow-md scale-[1.02]'
                                            : 'borderColor  hover:bg-gray-50 dark:hover:bg-gray-800'
                                        }
                  `}
                                >
                                    <span className="truncate">{label}</span>
                                    {isActive && <MdCheck size={16} className="shrink-0" />}
                                </button>
                            );
                        })}
                    </div>
                </div>
            </DialogContent>
        </Dialog>
    );
}