import { useEffect, useState, useRef } from "react";
import {checkIsStandalone, formatCash, isAndroid, localStorageGet, localStorageSet, stringFormat} 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, useSelector} from "react-redux";
//新增
import img_close from "@assets/shortcut/close.webp";
import img_add from "@assets/shortcut/add.png";
import img_share from "@assets/shortcut/share.webp";
import img_screen from "@assets/shortcut/h_screen.png";
import img_more from "@assets/shortcut/more.webp";
import img_hand_new from "@assets/shortcut/hand.webp";
//chrome
import img_ch_step_1 from "@assets/shortcut/chrome/navbar.png";
import img_ch_step_2 from "@assets/shortcut/chrome/addhome.png";
//safari
import img_sa_step_1 from "@assets/shortcut/safari/navbar.png";
import img_sa_step_2 from "@assets/shortcut/safari/addhome.png";
import img_sa_h_step_1 from "@assets/shortcut/safari_h/navbar.png";
import img_sa_h_step_1_1 from "@assets/shortcut/safari_h/share.png";
import img_sa_h_step_2 from "@assets/shortcut/safari_h/addhome.png";
import {getDownloadConf} from "@features/mainSlice";
import {iosVersion, isChrome} from "@utils/UAUtils";

const i18n = global.i18n;

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

const IOSStepItem=({children,stepNO,divider=true,bodyClass=null})=>{
    return (
        <div className={styles.item_con}>
            <div className={styles.item_header}>
                {divider&& (<div className={styles.line}></div>)}
                <div className={styles.dot}></div>
            </div>
            <div className={styles.item_body}>
                        <span className={styles.body_title}>
                            {stringFormat(i18n.t("installBox.shortcut.step_title"),[stepNO])}
                        </span>
                <div className={`${styles.body_content} ${bodyClass!=null?bodyClass:""}`}>
                    {children}
                </div>
            </div>
        </div>
    )
}

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 存事件对象

    const downConf = useSelector(getDownloadConf);
    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);
        //当前次安装
        global.isCurrentPwaInstall = true;
    };

    const openPWA = async () => {
        let isDownload = localStorageGet("isDownload", false);
        isDownload = JSON.parse(isDownload);
        //当次安装没那么快能打开需要让玩家等待
        if (isDownload&&!global.isCurrentPwaInstall) {
            window.open(window.location.href, '_blank', 'pwa=1');
        } else {
            //非支持pwa的浏览器
            if (isAndroid())global.showSecurityScan()
            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 getDownBonus=()=>{
        let bonus=Number(downConf?.bonus);
        return global.DOLLAR+formatCash(bonus,0);
    }
    const checkIsChrome=()=>{
        // return false;
        return isChrome();
    }
    const checkIsHighSafari=()=>{
        let highVer=26;
        // return true;
        try {
            return iosVersion()>=highVer;
        }
        catch(e){
            return false;
        }
    }
    const renderStepScreen=()=>{
        return (
            <div className={styles.step_content_h}>
                <div className={styles.screen_con}>
                    <img className={styles.phone} src={img_screen} alt={""}/>
                    <img className={styles.s_icon} src={iconUrl} alt={""}/>
                </div>
                <div className={styles.tips}>
                    {i18n.t("installBox.shortcut.op_tip_5")}
                    <span className={styles.money}>{getDownBonus()}</span>
                </div>
            </div>
        )
    }
    const renderChromeStepItems = () => {
        return (
            <>
                <IOSStepItem key={1} stepNO={1}>
                    <div className={styles.step_content_v}>
                        <img className={styles.chrome_img_1} src={img_ch_step_1} alt={""}/>
                        <div className={styles.op_tip_con}>
                            {i18n.t("installBox.shortcut.op_tip_1")}
                            <img src={img_share} alt={"up"}/>
                            {i18n.t("installBox.shortcut.op_tip_2")}
                        </div>
                    </div>
                </IOSStepItem>
                <IOSStepItem key={2} stepNO={2}>
                    <div className={styles.step_content_v}>
                        <img className={styles.chrome_img_2} src={img_ch_step_2} alt={""}/>
                        <div className={styles.op_tip_con}>
                            {i18n.t("installBox.shortcut.op_tip_3")}
                            <img src={img_add} alt={"add"}/>
                            {i18n.t("installBox.shortcut.op_tip_4")}
                        </div>
                    </div>
                </IOSStepItem>
                <IOSStepItem key={3} stepNO={3} divider={false}>
                    {renderStepScreen()}
                </IOSStepItem>
            </>
        )
    }
    const renderSafariStepItems = () => {
        let isHigh=checkIsHighSafari();
        return (
            <>
                <IOSStepItem key={1} stepNO={1} bodyClass={isHigh?styles.body_gray:""}>
                    <div className={styles.step_content_v}>
                        {
                            isHigh?(
                                <>
                                    <img className={styles.safari_h_img_1} src={img_sa_h_step_1} alt={""}/>
                                    <img className={styles.safari_h_img_1_1} src={img_sa_h_step_1_1} alt={""}/>
                                </>
                            ) : (
                                <img className={styles.safari_img_1} src={img_sa_step_1} alt={""}/>
                            )
                        }
                        <div className={styles.op_tip_con}>
                            {i18n.t("installBox.shortcut.op_tip_1")}
                            <img src={img_share} alt={"up"}/>
                            {i18n.t("installBox.shortcut.op_tip_2")}
                        </div>
                    </div>
                </IOSStepItem>
                <IOSStepItem key={2} stepNO={2}>
                    <div className={styles.step_content_v}>
                        {
                            isHigh?(
                                <img className={styles.safari_h_img_2} src={img_sa_h_step_2} alt={""}/>
                            ): (
                                <img className={styles.safari_img_2} src={img_sa_step_2} alt={""}/>
                            )
                        }
                        <div className={styles.op_tip_con}>
                            {i18n.t("installBox.shortcut.op_tip_3")}
                            <img src={img_add} alt={"add"}/>
                            {i18n.t("installBox.shortcut.op_tip_4")}
                        </div>
                    </div>
                </IOSStepItem>
                <IOSStepItem key={3} stepNO={3} divider={false}>
                    {renderStepScreen()}
                </IOSStepItem>
            </>
        )
    }
    const renderIOSStepItems = () => {
        if (checkIsChrome()) return renderChromeStepItems();
        else return renderSafariStepItems();
    }
    const renderIOSSteps = () => {
        return (
            <div className={styles.steps_con}>
                {
                    renderIOSStepItems()
                }
            </div>
        )
    }
    const renderIOSTitle = () => {
        let bonus = getDownBonus();
        return (
            <div className={styles.title_con}>
                <div className={styles.title}>
                    {i18n.t("installBox.shortcut.title_1")}
                    <span>{" "+bonus}</span>
                </div>
                <div className={styles.sub_title}>
                    {stringFormat(i18n.t("installBox.shortcut.sub_title"),[bonus])}
                </div>
            </div>
        )
    }
    const renderIOSClose=()=>{
        return (
            <button className={`${styles.btn_close} ${checkIsChrome()?styles.bottom:""}`} onClick={() => {
                setIsShow(false)
            }}>
                <img src={img_close} alt={"close"}/>
            </button>
        )
    }
    const renderIOSHandGuide=()=>{
        if (checkIsChrome()){
            return (
                <div className={`${styles.guide_hand_con} ${styles.t_right}`}>
                    <img className={styles.up_hand} src={img_hand_new}/>
                </div>
            )
        }
        else {
            let isHigh=checkIsHighSafari();
            if (isHigh){
                return (
                    <div className={`${styles.guide_hand_con} ${styles.b_right}`}>
                        <img className={styles.hand} src={img_hand_new}/>
                        <img className={styles.more} src={img_more}/>
                    </div>
                )
            } else {
                return (
                    <div className={`${styles.guide_hand_con} ${styles.b_center}`}>
                        <img className={styles.hand} src={img_hand_new}/>
                        <img className={styles.share} src={img_share}/>
                    </div>
                )
            }
        }
    }
    const renderIOSNewContent = () => {
        return (
            <div className={styles.ios_container}>
                {renderIOSTitle()}
                {renderIOSSteps()}
                {renderIOSClose()}
                {renderIOSHandGuide()}
            </div>
        )
    }
    const renderIOSNew= () => {
        let is_chrome=checkIsChrome();
        return (
            <MuiDrawer open={isShow}
                       anchor={is_chrome?"top":"bottom"}
                       sx={{
                           pointerEvents: 'auto',
                           zIndex: 'var(--zIndex-popup)',
                           "& .MuiDrawer-paper": {
                               boxSizing: "border-box",
                               overflow: 'visible !important',
                               backgroundColor: 'var(--darkColor2);',
                               boxShadow: 'var(--widget-shadow);',
                               borderTopLeftRadius: is_chrome?'0rem':'0.71rem',
                               borderTopRightRadius: is_chrome?'0rem':'0.71rem',
                               borderBottomLeftRadius:is_chrome?'0.71rem':'0rem',
                               borderBottomRightRadius:is_chrome?'0.71rem':'0rem',
                               // padding: '1.42rem'
                           },
                       }}
                       variant="temporary"
                       onClose={() => {
                           setIsShow(false);
                       }}>
                {renderIOSNewContent()}
            </MuiDrawer>
        );
    }
    const renderGuide = () => {
        if (isAndroid()) {
            return renderAndroid();
        }
        else {
            // return renderIOS();
            return renderIOSNew();
        }
    };
    return (
        <>
            {renderGuide()}
        </>
    );
};
export default WShortcutGuide;
