import { useEffect, useState, useRef } from "react";
import { checkIsStandalone, isAndroid, localStorageGet, localStorageSet } from "@utils/helpers";
import MuiDrawer from "@mui/material/Drawer";
import styles from "./styles.module.scss";
import img_hand from "@assets/shortcut/pointer.avif";
import { reqFreeWithdraw, reqGetRoutes } from "@features/api";
import { useDispatch } from "react-redux";

const i18n = global.i18n;

const objInfo = {
    count: 0,
    timer: null
};

const WShortcutGuide = () => {
    const [isShow, setIsShow] = useState(false);
    const [iconUrl, setIconUrl] = useState("/icon-512.png");

    // const isStandalone = checkIsStandalone();
    const dispatch = useDispatch();



    // pwa
    const deferredPromptRef = useRef(null); // 用 ref 存事件对象

    useEffect(() => {
        const handler = (e) => {
            e.preventDefault();   // 阻止浏览器自动弹窗
            deferredPromptRef.current = e; // 立即存储
        };
        window.addEventListener('beforeinstallprompt', handler);
        return () => window.removeEventListener('beforeinstallprompt', handler);
    }, []);

    const handleClick = async () => {
        const event = deferredPromptRef.current;
        if (!event) return;

        event.prompt();
        const { outcome } = await event.userChoice;
        console.log('result:', outcome);
        deferredPromptRef.current = null; // 清空
        if (outcome === 'accepted') {
            // console.log('用户同意安装');
            handleDownloadSuccess();
            dispatch(reqGetRoutes());
        }

        setIsShow(false);
    };

    const handleDownloadSuccess = () => {
        // console.log("用户下载成功");
        localStorageSet("isDownload", true);
    };

    const openPWA = async () => {
        let isDownload = localStorageGet("isDownload", false);
        isDownload = JSON.parse(isDownload);
        if (isDownload) {
            window.open(window.location.href, '_blank', 'pwa=1');
        } else {
            setIsShow(true); // 没有事件对象，就显示自定义引导
        }
    };

    const show = () => {
        if (deferredPromptRef.current && isAndroid()) {
            handleClick();
        } else {
            openPWA();
        }
    };

    const hide = () => {
        setIsShow(false);
    };
    const clearTimer = () => {
        if (objInfo.timer != null) {
            clearInterval(objInfo.timer);
            objInfo.timer = null;
            objInfo.count = 0;
        }
    };
    useEffect(() => {
        const shortcutGuide = {
            show,
            hide,
            // openPWA: handleClick,
        };
        global.shortcutGuide = shortcutGuide;
        if (window.progressier != null) {
            let iconUrl = "/icon-512.png";
            let initIconUrl = () => {
                // if (window.progressier.data != null) {
                //     let params = window.progressier.data.params;
                //     if (params != null) {
                //         // setIconUrl(params.icon180);
                //         iconUrl = params.icon180;
                //     }
                // }
                iconUrl = "/icon-512.png";
            };
            clearTimer();
            if (iconUrl == null || iconUrl === "") {
                objInfo.timer = setInterval(() => {
                    if (objInfo.count >= 10) {
                        clearTimer();
                        return;
                    }
                    initIconUrl();
                    if (iconUrl != null && iconUrl !== "") {
                        setIconUrl(iconUrl);
                        clearTimer();
                    }
                    objInfo.count++;
                }, 200);
            }
            else {
                setIconUrl(iconUrl);
            }
        }
        return () => {
            clearTimer();
        };
    }, []);
    const getMainDomain = () => {
        // 获取完整的域名
        const fullDomain = window.location.hostname;

        // 将域名分割成部分
        const parts = fullDomain.split('.');

        // 如果域名部分少于2个，直接返回完整域名
        if (parts.length <= 2) {
            return parts[0]; // 返回第一个部分（如 localhost）
        }

        // 提取主域名并去除后缀（最后一部分）
        return parts.slice(-2, -1).join('');
    };
    const renderAndroidContent = () => {
        let mainDomain = getMainDomain();
        if (mainDomain != null) mainDomain = mainDomain.toUpperCase();
        return (
            <div className={styles.container}>
                <div className={styles.header}>
                    <span className={styles.title}>
                        {i18n.t("installBox.shortcut.title")}
                    </span>
                </div>
                <div className={styles.content}>
                    <span className={styles.sub_title}>{i18n.t("installBox.shortcut.sub_1")}</span>
                    <div className={styles.android_op_1}>
                        <span>{i18n.t("installBox.shortcut.android_op_1")}</span>
                        <span>{i18n.t("installBox.shortcut.android_op_2")}</span>
                        <span>{i18n.t("installBox.shortcut.android_op_3")}</span>
                        <span>{i18n.t("installBox.shortcut.android_op_4")}</span>
                    </div>
                    <span className={styles.sub_title}>{i18n.t("installBox.shortcut.sub_2")}</span>
                    <div className={styles.android_op_2}>
                        <span className={styles.header}>{i18n.t("installBox.shortcut.title")}</span>
                        <div className={styles.app_info_con}>
                            <img className={styles.icon} src={iconUrl} />
                            <span>{mainDomain}</span>
                        </div>
                        <div className={styles.app_btns}>
                            <span>{i18n.t("installBox.shortcut.cancel")}</span>
                            <span>{i18n.t("installBox.shortcut.add")}</span>
                        </div>
                    </div>
                </div>
                <div className={styles.t_guide_con}>
                    <img className={styles.t_hand} src={img_hand} />
                </div>
            </div>
        );
    };
    const renderAndroid = () => {
        if (deferredPromptRef.current != null && isShow) {
            return <></>;
        } else {
            return (
                <MuiDrawer open={isShow}
                    anchor={"top"}
                    sx={{
                        pointerEvents: 'auto',
                        zIndex: 'var(--zIndex-popup)',
                        "& .MuiDrawer-paper": {
                            boxSizing: "border-box",
                            overflow: 'visible !important',
                            backgroundColor: 'var(--standard);',
                            boxShadow: 'var(--widget-shadow);',
                            borderBottomLeftRadius: '0.71rem',
                            borderBottomRightRadius: '0.71rem',
                            padding: '1.42rem'
                        },
                    }}
                    variant="temporary"
                    onClose={() => {
                        setIsShow(false);
                    }}>
                    {renderAndroidContent()}
                </MuiDrawer>
            );
        };
    };
    const renderIOSContent = () => {
        let mainDomain = getMainDomain();
        mainDomain = "USSlot777";
        if (mainDomain != null) mainDomain = mainDomain.toUpperCase();
        const origin = window.location.origin;
        return (
            <div className={styles.container}>
                <div className={styles.header}>
                    <span className={styles.title}>
                        {i18n.t("installBox.shortcut.title")}
                    </span>
                </div>
                <div className={styles.content}>
                    <span className={styles.sub_title}>{i18n.t("installBox.shortcut.sub_1")}</span>
                    <div className={styles.ios_op_1}>
                        <span>{i18n.t("installBox.shortcut.ios_op_1")}</span>
                        <span>{i18n.t("installBox.shortcut.ios_op_2")}</span>
                        <span>{i18n.t("installBox.shortcut.ios_op_3")}</span>
                        <span className={styles.bottom}>{i18n.t("installBox.shortcut.ios_op_4")}</span>
                    </div>
                    <span className={styles.sub_title}>{i18n.t("installBox.shortcut.sub_2")}</span>
                    <div className={styles.ios_op_2}>
                        <div className={styles.header}>
                            <span className={styles.btn}>{i18n.t("installBox.shortcut.cancel")}</span>
                            <span className={styles.title_1}>{i18n.t("installBox.shortcut.title")}</span>
                            <span className={styles.btn}>{i18n.t("installBox.shortcut.add")}</span>
                        </div>
                        <div className={styles.appinfo_con}>
                            <img className={styles.icon} src={iconUrl} />
                            <div className={styles.info_con}>
                                <span className={styles.host}>{mainDomain}</span>
                                <span className={styles.origin}>{origin}</span>
                            </div>
                        </div>
                        <div className={styles.tips_con}>
                            <span>{i18n.t("installBox.shortcut.tips_1")}</span>
                        </div>
                    </div>
                </div>
                {/* <div className={styles.b_guide_con}>
                    <img className={styles.b_hand} src={img_hand} />
                </div> */}
            </div>
        );
    };
    const renderIOS = () => {
        return (
            <MuiDrawer open={isShow}
                anchor={"bottom"}
                sx={{
                    pointerEvents: 'auto',
                    zIndex: 'var(--zIndex-popup)',
                    "& .MuiDrawer-paper": {
                        boxSizing: "border-box",
                        overflow: 'visible !important',
                        backgroundColor: 'var(--standard);',
                        boxShadow: 'var(--widget-shadow);',
                        borderTopLeftRadius: '0.71rem',
                        borderTopRightRadius: '0.71rem',
                        padding: '1.42rem'
                    },
                }}
                variant="temporary"
                onClose={() => {
                    setIsShow(false);
                }}>
                {renderIOSContent()}
            </MuiDrawer>
        );
    };
    const renderGuide = () => {
        if (isAndroid()) {
            return renderAndroid();
        }
        else {
            return renderIOS();
        }
    };
    return (
        <>
            {renderGuide()}
        </>
    );
};
export default WShortcutGuide;
