/* eslint-disable no-use-before-define */
import PropTypes from 'prop-types';
import omit from 'lodash/omit';
import pick from 'lodash/pick';
import cloneDeep from 'lodash/cloneDeep';
import isFunction from 'lodash/isFunction';
import isUndefined from 'lodash/isUndefined';
import defaultsDeep from 'lodash/defaultsDeep';
import Cookie from 'js-cookie';
import EventEmitter from 'eventemitter3';
import pWaitFor from 'p-wait-for';
import { Box, CircularProgress, Typography, useTheme } from '@mui/material';
import { getVisitorId, setVisitorId, ensureVisitorId, isUrl, mergeIgnoreEmpty } from '@arcblock/ux/lib/Util';
import Toast, { ToastProvider } from '@arcblock/ux/lib/Toast';
import Center from '@arcblock/ux/lib/Center';
import { useCreation, useLatest, useMemoizedFn, useMount, usePrevious, useReactive, useUpdateEffect } from 'ahooks';
import { joinURL } from 'ufo';
import { Icon } from '@iconify/react';
import KeyboardDoubleArrowRightRoundedIcon from '@iconify-icons/material-symbols/keyboard-double-arrow-right-rounded';
import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
import useConfirm from '@arcblock/ux/lib/Dialog/use-confirm';
import DID from '@arcblock/ux/lib/DID';
import Avatar from '@arcblock/ux/lib/Avatar';
import { getCurrentAppPid } from '@arcblock/ux/lib/SessionUser/libs/utils';
import { translate } from '@arcblock/ux/lib/Locale/util';
import { getBlockletSDK } from '@blocklet/js-sdk';
import bridge from '@arcblock/bridge';
import { getFederatedEnabled } from '@arcblock/ux/lib/Util/federated';
import noop from 'lodash/noop';
import isNil from 'lodash/isNil';
import { ReactGA } from '@arcblock/ux/lib/withTracker';

import { useEffect, useState } from 'react';
import createStorage from '../Storage';
import {
  getAppId,
  updateConnectedInfo,
  getBrowserLang,
  formatCacheTtl,
  sleep,
  decodeUrlParams,
  logger,
  debug,
  debugTmp,
} from '../utils';
import WindowFocusAware from './window-focus-aware';
import { OAuthProvider, useOAuth, OAuthConsumer, OAuthContext } from '../OAuth';
import { PasskeyProvider, usePasskey, PasskeyConsumer, PasskeyContext } from '../Passkey';
import { useDid, WrapDid } from '../User';
import useFederated from './hooks/use-federated';
import useSessionToken from './hooks/use-session-token';
import useProtectedRoutes from './hooks/use-protected-routes';
import { SessionContext } from './context';
import useConnect from '../Connect/use-connect';
import { EVENTS } from './libs/constants';
import { translations } from './libs/locales';
import { NotOpenError } from '../error';
import {
  API_DID_PREFIX,
  BLOCKLET_SERVICE_PATH_PREFIX,
  DEFAULT_TIMEOUT,
  REFRESH_TOKEN_STORAGE_KEY,
  SESSION_TOKEN_STORAGE_KEY,
  DID_SPACES_BASE_URL,
  CSRF_TOKEN_STORAGE_KEY,
} from '../constant';
import { checkEnableAutoLogin, getMobileVisitorId, login as loginInMobile } from './libs/login-mobile';
import useQuickConnect from '../Connect/hooks/use-quick-connect';
import { didSpacesIsRequired } from './libs/did-spaces';
import { getWalletDid } from '../User/use-did';
import useDIDSpacesGuide from './did-spaces-guide';
import { FederatedProvider, useFederatedContext } from '../Federated';
import useVerify from './hooks/use-verify';
import {
  gaBindWalletFailedHandler,
  gaBindWalletSuccessHandler,
  gaLoginFailedHandler,
  gaLoginSuccessHandler,
  gaSwitchPassportFailedHandler,
  gaSwitchPassportSuccessHandler,
} from './handler';

export * from './libs';

const { Provider, Consumer } = SessionContext;

const didConnectTimeoutError = {
  en: 'DID Connect timeout, please reopen DID Connect popup',
  zh: 'DID Connect 超时, 请重新打开 DID Connect',
};

const waitForDidConnect = {
  en: 'DID Connect is already opened, please wait for it to complete',
  zh: 'DID Connect 已打开，请等待完成',
};

function createSessionContext(
  storageKey = SESSION_TOKEN_STORAGE_KEY,
  storageEngine = 'ls',
  storageOptions = {},
  opts = {}
) {
  let defaultServiceHost = '/';
  // FIXME: @zhanghan 当 connect 组件使用不同的 baseUrl 时，不应该直接从 window.blocklet 去取值
  if (globalThis?.blocklet?.prefix) {
    defaultServiceHost = globalThis.blocklet.prefix;
  }
  if (typeof opts === 'boolean') {
    // eslint-disable-next-line no-param-reassign
    opts = {
      appendAuthServicePrefix: opts,
      extraParams: {},
    };
  }

  defaultsDeep(opts, {
    rolling: true,
    appendAuthServicePrefix: false,
    extraParams: {},
    refreshTokenStorageKey: REFRESH_TOKEN_STORAGE_KEY,
  });

  function notifyBridge(sessionState) {
    if (globalThis.blocklet) {
      if (sessionState?.user) {
        const data = {
          did: sessionState.user.did,
          host: window.location.host,
          appPid: globalThis.blocklet.appPid,
          visitorId: getVisitorId(),
          sourceAppPid: sessionState.user.sourceAppPid,
          fullName: sessionState.user.fullName,
        };
        debug('bridge callArc: onLogin', data);
        bridge.callArc('onLogin', { ...data, user: data });
      } else {
        bridge.callArc('onLogin', { error: 'no user', code: 400 });
        debug('notifyBridge failed', { sessionState });
      }
    }
  }

  const sessionTokenStorage = createStorage(storageKey, storageEngine, storageOptions);
  const csrfTokenStorage = createStorage(CSRF_TOKEN_STORAGE_KEY, 'cookie', {
    secure: true,
    sameSite: 'strict',
  });

  const refreshTokenStorage = createStorage(opts.refreshTokenStorageKey, 'ls');

  function SessionProvider({ ...rawProps }) {
    const sdk = getBlockletSDK();
    const props = Object.assign({}, rawProps);
    if (isUndefined(props.serviceHost)) {
      props.serviceHost = defaultServiceHost;
    }
    if (isUndefined(props.locale)) {
      props.locale = '';
    }
    if (isUndefined(props.action)) {
      props.action = 'login';
    }
    if (isUndefined(props.prefix)) {
      props.prefix = API_DID_PREFIX;
    }
    if (isUndefined(props.appendAuthServicePrefix)) {
      props.appendAuthServicePrefix = false;
    }
    if (isUndefined(props.extraParams)) {
      props.extraParams = {};
    }
    if (isUndefined(props.options)) {
      props.options = {};
    }
    if (isUndefined(props.autoConnect)) {
      props.autoConnect = false;
    }
    if (isUndefined(props.autoDisconnect)) {
      props.autoDisconnect = true;
    }
    if (isUndefined(props.useSocket)) {
      props.useSocket = true;
    }
    if (isUndefined(props.timeout)) {
      props.timeout = DEFAULT_TIMEOUT * 1000;
    }
    if (isUndefined(props.webWalletUrl)) {
      props.webWalletUrl = undefined;
    }
    if (isUndefined(props.protectedRoutes)) {
      props.protectedRoutes = ['*'];
    }
    if (isUndefined(props.apiOptions)) {
      props.apiOptions = {};
    }
    if (isUndefined(props.lazyRefreshToken)) {
      props.lazyRefreshToken = false;
    }

    const { connectApi, connectHolder } = useConnect();
    const [unReadCount, setUnReadCount] = useState(0);
    const browser = useBrowser();
    const { requestStorageAccess } = useFederatedContext();
    const { palette } = useTheme();
    const searchParams = new URLSearchParams(window.location.search);

    /**
     * @typedef PageState
     * @property {object} extraParams - 额外参数
     * @property {object} options - 配置项
     * @property {string} currentLocale - 当前语言
     * @property {boolean} allowWallet - 是否显示钱包操作入口
     * @property {('popup'|'window'|'iframe')} [openMode] - 打开的方式
     * @property {boolean} autoConnect - 是否自动连接
     * @property {string} prefix - 自动生成的当前应用的 prefix
     */
    /**
     * 页面状态
     * @type {PageState}
     */
    const pageState = useReactive({
      extraParams: {},
      options: {},
      currentLocale: props.locale,
      allowWallet: undefined,
      openMode: 'window',
      get autoConnect() {
        // for backward compatibility
        if (typeof props.autoConnect === 'boolean') {
          return props.autoConnect;
        }
        // eslint-disable-next-line react/prop-types
        return !!props.autoLogin;
      },
      get prefix() {
        if (opts.appendAuthServicePrefix || props.appendAuthServicePrefix) {
          return joinURL(BLOCKLET_SERVICE_PATH_PREFIX, props.prefix);
        }
        return props.prefix;
      },
      get notificationPrefix() {
        const _prefix = '/api/notifications';
        if (opts.appendAuthServicePrefix || props.appendAuthServicePrefix) {
          return joinURL(BLOCKLET_SERVICE_PATH_PREFIX, _prefix);
        }
        return _prefix;
      },
    });

    const state = useReactive({
      action: props.action,
      error: '',
      initialized: false,
      loading: false,
      open: false,
      user: null,
      provider: '',
      walletOS: '',
      baseUrl: '',
      unReadCount: 0,
      // 不可以直接个性 props.autoConnect (readonly)
    });
    const currentLocale = useCreation(() => {
      return props.locale || pageState.currentLocale || getBrowserLang();
    }, [props.locale, pageState.currentLocale]);

    const { confirmApi, confirmHolder } = useConfirm();

    const stopOnOpen = useMemoizedFn(() => {
      if (state.open && !browser.arcSphere) {
        const msg = waitForDidConnect[currentLocale] || waitForDidConnect.en;
        Toast.warning(msg);
        throw new Error(msg);
      }
    });

    const events = useCreation(() => new EventEmitter(), []);
    // Register event listeners with cleanup to prevent memory leaks
    useEffect(() => {
      events.on(EVENTS.LOGIN, gaLoginSuccessHandler);
      events.on(EVENTS.LOGIN_FAILED, gaLoginFailedHandler);
      events.on(EVENTS.SWITCH_PASSPORT, gaSwitchPassportSuccessHandler);
      events.on(EVENTS.SWITCH_PASSPORT_FAILED, gaSwitchPassportFailedHandler);
      events.on(EVENTS.BIND_WALLET, gaBindWalletSuccessHandler);
      events.on(EVENTS.BIND_WALLET_FAILED, gaBindWalletFailedHandler);
      return () => {
        events.off(EVENTS.LOGIN, gaLoginSuccessHandler);
        events.off(EVENTS.LOGIN_FAILED, gaLoginFailedHandler);
        events.off(EVENTS.SWITCH_PASSPORT, gaSwitchPassportSuccessHandler);
        events.off(EVENTS.SWITCH_PASSPORT_FAILED, gaSwitchPassportFailedHandler);
        events.off(EVENTS.BIND_WALLET, gaBindWalletSuccessHandler);
        events.off(EVENTS.BIND_WALLET_FAILED, gaBindWalletFailedHandler);
      };
    }, [events]);

    /**
     * 用于包装 did-connect 的 open 和 close 事件，添加一些默认的行为
     * 1. 在 open 中添加的事件订阅，did-connect close 时需要取消订阅
     * 2. session 内部的事件订阅使用与外部事件不同命的名字
     * @param {string} eventName - 订阅的事件名
     * @param {function} doneFn - 订阅事件被调用时，执行的函数
     * @param {function} cancelFn - 关闭 did-connect 时，执行的回调
     * @returns
     */
    const wrapOnceEmit = useMemoizedFn((eventName, doneFn, cancelFn) => {
      const fnKeyMap = {
        login: [EVENTS.LOGIN, EVENTS.CANCEL_LOGIN],
        'bind-wallet': [EVENTS.BIND_WALLET, EVENTS.CANCEL_BIND_WALLET],
        'switch-passport': [EVENTS.SWITCH_PASSPORT, EVENTS.CANCEL_SWITCH_PASSPORT],
        'switch-profile': [EVENTS.SWITCH_PROFILE, EVENTS.CANCEL_SWITCH_PROFILE],
        // HACK: 对于内部来说，switch-did 就是 login，所以内部的监听事件仍然是 login
        'switch-did': [EVENTS.LOGIN, EVENTS.CANCEL_LOGIN],
        // @FIXME: @zhanghan 整个事件发射的机制需要重构，目前的实现不是很优雅，对于用户来说不是很好用。 https://github.com/ArcBlock/ux/pull/1414#discussion_r1904830954
        'did-space-connected': [EVENTS.DID_SPACE_CONNECTED],
      };

      if (!Object.keys(fnKeyMap).includes(eventName)) {
        return;
      }

      const listenFn = async (...args) => {
        if (isFunction(doneFn)) {
          await doneFn(...args);
        }
        events.emit(eventName, ...args);
      };
      events.once(fnKeyMap[eventName][0], listenFn);
      events.once(fnKeyMap[eventName][1], async (...args) => {
        if (isFunction(listenFn)) {
          events.off(fnKeyMap[eventName][0], listenFn);
        }
        if (isFunction(cancelFn)) {
          await cancelFn(...args);
        }
        events.emit(`cancel-${eventName}`, ...args);
      });
    });

    const prevInitialized = usePrevious(state.initialized, (prev, next) => {
      if (prev !== next) {
        return true;
      }
      if (prev === true && next === true) {
        return true;
      }
      return false;
    });

    const {
      syncSessionSate,
      handleRefreshUser,
      handleRefreshToken,
      renewToken,
      clearSession,
      handleLoginResult,
      decrypt,
      service,
      getSessionToken,
      getRefreshToken,
      setRefreshToken,
      setSessionToken,
    } = useSessionToken({
      state,
      pageState,
      sessionTokenStorage,
      refreshTokenStorage,
      csrfTokenStorage,
      serviceHost: props.serviceHost,
      apiOptions: props.apiOptions,
      lazyRefreshToken: props.lazyRefreshToken,
      onRefresh({ type, sessionToken, refreshToken, user }) {
        debug('onRefresh', { type, user });

        if (globalThis.blocklet) {
          const data = {
            did: user.did,
            host: window.location.host,
            appPid: globalThis.blocklet.appPid,
            visitorId: getVisitorId(),
            sourceAppPid: user.sourceAppPid,
            fullName: user.fullName,
          };
          if (type === 'refreshToken') {
            debug('bridge callArc: onRefreshToken');
            bridge.callArc('onRefreshToken', {
              sessionToken,
              refreshToken,
              user: data,
            });
          } else if (type === 'refreshUser') {
            debug('bridge callArc: onRefreshUser');
            bridge.callArc('onRefreshUser', {
              sessionToken,
              refreshToken,
              user: data,
            });
          }
        }
      },
    });

    const handleVerify = useVerify({ state, currentLocale, connectApi });

    const loginWallet = useMemoizedFn((done, extraParams = {}, options = {}) => {
      stopOnOpen();
      const params = done;
      if (typeof params === 'object') {
        done = params.onSuccess; // eslint-disable-line no-param-reassign
        extraParams = params.extraParams || {}; // eslint-disable-line no-param-reassign
        options = params.options || {}; // eslint-disable-line no-param-reassign
        // FIXME: @zhanghan 将来需要移除这种传递方式，配置参数统一放到 options 中
        options.origin = params.origin || ''; // eslint-disable-line no-param-reassign
      }

      if (!state.user || options.origin === 'switch-did') {
        if (options.origin === 'switch-did') {
          wrapOnceEmit('switch-did', done, params?.onCancel);
        } else {
          wrapOnceEmit('login', done, params?.onCancel);
        }

        pageState.extraParams = extraParams;
        pageState.options = options;
        state.action = 'login';
        openConnect();
      }
    });

    // 高阶函数包装器 - 二次认证装饰器
    const withSecondaryAuth = useMemoizedFn((fn, options = {}) => {
      // 保存原始函数和上下文
      const originalFn = fn;

      return function wrappedSecondaryAuth(...args) {
        // 保存调用时的 this 上下文
        const context = this;

        return (async () => {
          try {
            const result = await handleVerify(options);
            if (!result.sessionId) {
              throw new Error('Authentication failed');
            }
            // 使用 call 方法确保 this 指向正确
            return await originalFn.call(context, result, ...args);
          } catch (error) {
            // 如果是用户取消认证，不需要显示错误信息
            console.error('Authentication failed', error);
            throw error;
          }
        })();
      };
    });
    /**
     * did-connect 登录函数
     * @type {import('../types').LoginSessionFn}
     */
    const login = useMemoizedFn(async (done, extraParams = {}, options = {}) => {
      stopOnOpen();
      const params = done;
      if (typeof params === 'object') {
        done = params.onSuccess; // eslint-disable-line no-param-reassign
        extraParams = params.extraParams || {}; // eslint-disable-line no-param-reassign
        options = params.options || {}; // eslint-disable-line no-param-reassign
        // FIXME: @zhanghan 移除了 params.onCancel 回调，需要观察是否会导致别的问题，目前未找到任何地方使用了 onCancel 回调
      }

      if (isUndefined(extraParams?.inviter) && window.localStorage.getItem('inviter')) {
        extraParams.inviter = window.localStorage.getItem('inviter');
      }

      // 使用 Url 中编码的参数
      const { params: decodedParams } = await decodeUrlParams();
      if (isUndefined(extraParams?.forceConnected) && decodedParams?.forceConnected) {
        extraParams.forceConnected = decodedParams.forceConnected;
        if (isUndefined(options.showQuickConnect)) {
          options.showQuickConnect = false;
        }
      }
      if (isUndefined(extraParams?.sourceAppPid) && !isUndefined(decodedParams?.sourceAppPid)) {
        extraParams.sourceAppPid = decodedParams.sourceAppPid;
      }
      if (extraParams?.openMode === 'redirect') {
        const redirect = extraParams?.redirect || '/';
        const url = new URL(`${BLOCKLET_SERVICE_PATH_PREFIX}/login`, window.location.origin);
        url.searchParams.set('redirect', redirect);
        if (extraParams?.forceConnected) {
          url.searchParams.set('forceConnected', extraParams?.forceConnected);
        }
        if (!isUndefined(extraParams?.sourceAppPid)) {
          url.searchParams.set('sourceAppPid', extraParams?.sourceAppPid);
        }
        if (!isUndefined(extraParams?.inviter)) {
          url.searchParams.set('inviter', extraParams?.inviter);
        }
        if (options?.origin) {
          url.searchParams.set('origin', options.origin);
        }
        // 这里是安全的
        window.location.href = url.href;
        return;
      }

      let sourceAppPid = extraParams?.sourceAppPid;
      if (isUndefined(sourceAppPid) && federatedEnabled) {
        sourceAppPid = masterSite.appPid;
      }
      // 必须等到初始化完成后才能执行
      await pWaitFor(() => state.initialized);

      // @compatible: 兼容旧的传递 origin 的方式
      if (typeof options === 'string') {
        // eslint-disable-next-line no-param-reassign
        options = { origin: options };
      }
      // @compatible end

      const copyExtraParams = cloneDeep(extraParams);
      copyExtraParams.passkeyBehavior = 'both';

      // if (!isUndefined(copyExtraParams.allowWallet)) {
      //   pageState.allowWallet = copyExtraParams.allowWallet;
      //   delete copyExtraParams.allowWallet;
      // } else {
      //   pageState.allowWallet = undefined;
      // }
      pageState.allowWallet = undefined;

      const openMode = copyExtraParams?.openMode || props?.extraParams?.openMode;

      if (!isUndefined(openMode)) {
        pageState.openMode = openMode;
        // 如果处于统一登录模式下，并且当前应用不是 master，才需要使用 window.open 的方式
      } else if (sourceAppPid) {
        if (sourceAppPid !== globalThis.blocklet.appPid && getFederatedEnabled(globalThis.blocklet)) {
          pageState.openMode = 'window';
        }
      } else {
        pageState.openMode = 'popup';
      }

      // 如果已经有跨站存储的权限，并且当前是 window 模式，则强制改为 popup 模式
      if (pageState.openMode === 'window' && !browser.arcSphere && !browser.wallet) {
        const result = await requestStorageAccess();
        if (result) {
          pageState.openMode = 'popup';
        }
      }

      if (sourceAppPid) {
        state.baseUrl = globalThis.blocklet.appUrl;
      } else {
        state.baseUrl = '';
      }
      loginWallet(done, copyExtraParams, options);
    });

    // eslint-disable-next-line require-await
    const logout = useMemoizedFn(async (done) => {
      const visitorId = getVisitorId();

      if (globalThis.blocklet) {
        // TODO: 需要增加 webapp 退出登录的处理
        sdk.user.logout({ visitorId }).catch((error) => {
          console.warn('Failed to logout remote', error);
        });
        await sleep(100);
      }

      // HACK: 仅在 blocklet 环境中才发起请求
      if (globalThis.blocklet) {
        const logoutData = {
          visitorId,
          appPid: globalThis.blocklet.appPid,
          userDid: state.user.did,
        };
        debug('bridge callArc: onLogout', logoutData);
        bridge.callArc('onLogout', logoutData);
      }

      debugTmp('[clearSession] createSessionContext -> logout:');

      clearSession();
      closeConnect();
      state.user = null;
      state.provider = '';
      state.walletOS = '';
      state.error = '';
      state.loading = false;
      events.emit('logout');

      ReactGA.set({
        user_id: undefined,
      });

      if (typeof done === 'function') {
        done();
      }
    });

    const {
      userSessions,
      refresh: refreshUserSessions,
      loaded: loadedUserSessions,
      loginUserSession,
    } = useQuickConnect({
      appPid: getCurrentAppPid(state.user),
      loginAppPid: globalThis?.blocklet?.appPid,
      sourceAppPid: state?.user?.sourceAppPid,
      autoFetch: false,
      fetchAll: true,
    });

    const getMessageByBlocklet = useMemoizedFn((action, locale) => {
      if (!globalThis.blocklet) return null;

      const messages = globalThis.blocklet?.settings?.actionConfig?.[action];
      if (messages) {
        return messages[locale] || messages.en;
      }
      return null;
    });

    const ensureLogin = useMemoizedFn(async () => {
      if (!state?.user) {
        await new Promise((resolve) => {
          login(() => {
            resolve();
          });
        });
      }
    });

    // HACK: 先保留这段代码，后续改版时删除
    // const cleanConnectedState = useMemoizedFn(() => {
    //   const cookieOptions = getCookieOptions({ returnDomain: false });
    //   Cookie.remove('connected_did', cookieOptions);
    //   Cookie.remove('connected_pk', cookieOptions);
    //   Cookie.remove('connected_app', cookieOptions);
    //   Cookie.remove('connected_wallet_os', cookieOptions);
    // });

    // See:
    // - https://github.com/ArcBlock/ux/issues/520
    // - https://github.com/ArcBlock/did-connect/issues/56
    const switchDid = useMemoizedFn((done, extraParams = {}, options = {}) => {
      stopOnOpen();
      const params = done;
      if (typeof params === 'object') {
        done = params.onSuccess; // eslint-disable-line no-param-reassign
        extraParams = params.extraParams || {}; // eslint-disable-line no-param-reassign
        options = params.options || {}; // eslint-disable-line no-param-reassign
      }

      // @compatible: 兼容旧的传递 origin 的方式
      if (typeof options === 'string') {
        // eslint-disable-next-line no-param-reassign
        options = { origin: options };
      }
      // @compatible end

      if (options?.userSession) {
        loginUserSession(options.userSession).then((result) => {
          updateConnectedInfo(
            {
              connected_did: options.userSession.user.did,
              connected_pk: options.userSession.user.pk,
              connected_wallet_os: options.userSession.extra.walletOS,
              connected_app: getAppId(),
            },
            true
          );
          wrapOnceEmit('switch-did', done);
          handleLoginResult({ ...result, encrypted: false });
          handleRefreshUser({ showProgress: true })
            .then(async () => {
              await sleep(200);
              events.emit(EVENTS.LOGIN, result, decrypt, session.current);
              notifyBridge(session.current);
              await connectToDidSpaceForFullAccess();
            })
            .catch((error) => {
              events.emit(EVENTS.LOGIN_FAILED, error);
              throw error;
            });
        });
      } else {
        if (isUndefined(extraParams?.forceConnected)) {
          // switchDid 时，禁用 forceConnected，以便切换到其他的钱包
          extraParams.forceConnected = false;
        }
        extraParams.passkeyBehavior = 'both';
        login(done, extraParams, { ...options, origin: 'switch-did' });
      }
    });

    const refreshProfile = useMemoizedFn(async () => {
      await sdk.user.refreshProfile();
    });

    const switchProfile = useMemoizedFn(async (done, extraParams = {}) => {
      await ensureLogin();
      stopOnOpen();
      const params = done;
      if (typeof params === 'object') {
        done = params.onSuccess; // eslint-disable-line no-param-reassign
        extraParams = params.extraParams || {}; // eslint-disable-line no-param-reassign
      }
      wrapOnceEmit('switch-profile', done, params?.onCancel);
      pageState.extraParams = extraParams;
      pageState.options = {};
      state.action = 'switch-profile';
      openConnect();
    });

    const switchPassport = useMemoizedFn(async (done, extraParams = {}) => {
      await ensureLogin();
      stopOnOpen();
      const params = done;
      if (typeof params === 'object') {
        done = params.onSuccess; // eslint-disable-line no-param-reassign
        extraParams = params.extraParams || {}; // eslint-disable-line no-param-reassign
      }
      wrapOnceEmit('switch-passport', done, params?.onCancel);

      pageState.extraParams = extraParams;
      pageState.options = {};
      state.action = 'switch-passport';
      openConnect();
    });

    const connectToDidSpace = useMemoizedFn(async ({ extraParams = {}, onSuccess = () => {}, ...rest } = {}) => {
      await ensureLogin();
      stopOnOpen();

      pageState.extraParams = {
        referrer: window.location.href,
        purpose: 'authorize-for-import',
        ...extraParams,
        saveConnect: false, // 连接 spaces 不保存连接信息
      };
      pageState.options = {};
      state.action = 'connect-to-did-spaces-for-user';
      openConnect({
        hideCloseButton: true,
        onSuccess,
        ...rest,
      });
    });

    /**
     * @description
     * @param {{
     *  extraParams: Record<string, any>,
     *  onSuccess: (response: Record<string, any>, decrypt: (value: string) => string),
     * }} [{ extraParams = {}, onSuccess = {} }={}]
     */
    const connectToDidSpaceForImport = useMemoizedFn(async ({ extraParams = {}, onSuccess = {} } = {}) => {
      await ensureLogin();
      connectToDidSpace({
        extraParams: {
          // service 交互
          purpose: 'authorize-for-import',
          ...extraParams,
        },
        onSuccess,
        hideCloseButton: false,
      });
    });

    const { didSpacesGuideApi, DidSpacesGuideView } = useDIDSpacesGuide({
      autoClose: false,
    });

    const connectToDidSpaceForFullAccess = async ({ extraParams = {}, onSuccess = () => {} } = {}) => {
      await ensureLogin();
      if (!(await didSpacesIsRequired(state?.user))) {
        return;
      }
      didSpacesGuideApi.open();
      didSpacesGuideApi.onConnect((callback = noop) => {
        const popupProps = {
          prefix: '/connect-to-did-space',
          custom: true,
          extraParams: {
            provider: 'wallet',
            appPid: window.blocklet?.appPid,
            appDid: window.blocklet?.appId,
            appName: window.blocklet?.appName,
            appDescription: window.blocklet?.appDescription,
            appUrl: window.blocklet?.appUrl,
            referrer: window.location.href,
            connectScope: 'user',
            ...extraParams,
          },
          onSuccess: async (response, decryptFunc) => {
            const spaceGateway = decryptFunc ? decryptFunc(response.spaceGateway) : response.spaceGateway;
            await sdk.user.updateDidSpace({ spaceGateway });
            await handleRefreshUser({ showProgress: true });
            await onSuccess(response, decryptFunc);
            await didSpacesGuideApi.close();
            events.emit(EVENTS.DID_SPACE_CONNECTED, response, decryptFunc);
            if (globalThis.blocklet) {
              debug('bridge callArc: onDidSpaceConnected');
              bridge.callArc('onDidSpaceConnected');
            }
            callback(true);
          },
          onError: (error) => {
            console.error(error);
            Toast.error(error.message);
            didSpacesGuideApi.close();
            callback(false);
          },
          onClose: () => {
            callback();
          },
        };

        connectApi.openPopup(popupProps, {
          baseUrl: DID_SPACES_BASE_URL,
        });
      });
    };

    const bindWallet = useMemoizedFn(async (done, extraParams = {}) => {
      await ensureLogin();
      if (getWalletDid(state.user)) {
        done({}, decrypt, session.current);
        return;
      }
      stopOnOpen();
      const params = done;
      if (typeof params === 'object') {
        done = params.onSuccess; // eslint-disable-line no-param-reassign
      }
      wrapOnceEmit('bind-wallet', done, params?.onCancel);
      pageState.extraParams = extraParams;
      pageState.options = {};
      state.action = 'bind-wallet';
      openConnect();
    });

    const onSwitchPassport = useMemoizedFn(async (result) => {
      debug('onSwitchPassport', { result });
      pageState.extraParams = {};
      pageState.options = {};
      handleLoginResult(result);
      state.loading = false;
      await handleRefreshUser({ showProgress: true });
      await sleep(200);
      events.emit(EVENTS.SWITCH_PASSPORT, result, decrypt, session.current);
      if (globalThis.blocklet) {
        debug('bridge callArc: onSwitchPassport');
        bridge.callArc('onSwitchPassport');
      }
    });

    const onSwitchPassportFailed = useMemoizedFn((error) => {
      events.emit(EVENTS.SWITCH_PASSPORT_FAILED, error);
    });

    const onLogin = useMemoizedFn(async (result) => {
      if (state.action === 'switch-passport') {
        onSwitchPassport(result);
        return;
      }

      debug('onLogin', { result });
      pageState.extraParams = {};
      pageState.options = {};
      handleLoginResult(result);
      state.loading = false;
      await handleRefreshUser({ showProgress: true });
      await sleep(200);
      if (state.action === 'login') {
        debug('onLogin: emit LOGIN event', { result });
        events.emit(EVENTS.LOGIN, result, decrypt, session.current);
        notifyBridge(session.current);
        connectToDidSpaceForFullAccess();
      }
    });

    const onLoginFailed = useMemoizedFn((error) => {
      events.emit(EVENTS.LOGIN_FAILED, error);
    });

    const onBindWallet = useMemoizedFn((result) => {
      pageState.extraParams = {};
      pageState.options = {};
      handleLoginResult(result);
      state.loading = false;
      handleRefreshUser({ showProgress: true }).then(async () => {
        await sleep(100);
        events.emit(EVENTS.BIND_WALLET, result, decrypt, session.current);
        if (globalThis.blocklet) {
          debug('bridge callArc: onBindWallet');
          bridge.callArc('onBindWallet');
        }
      });
      // NOTICE: auth0 绑定 wallet 在新的版本中，不会再要求切换 login_token，这里的处理是为了兼容有无 sessionToken 的两种情况，都可以顺利完成当前绑定操作
    });

    const onBindWalletFailed = useMemoizedFn((error) => {
      events.emit(EVENTS.BIND_WALLET_FAILED, error, session);
    });

    const onSwitchProfile = useMemoizedFn((result) => {
      debug('onSwitchProfile', { result });
      pageState.extraParams = {};
      pageState.options = {};
      state.loading = false;
      handleRefreshUser({ showProgress: true }).then(async () => {
        await sleep(100);
        events.emit(EVENTS.SWITCH_PROFILE, result, decrypt, session.current);
        if (globalThis.blocklet) {
          debug('bridge callArc: onSwitchProfile');
          bridge.callArc('onSwitchProfile');
        }
      });
    });

    const onClose = useMemoizedFn((action) => {
      pageState.extraParams = {};
      pageState.options = {};
      closeConnect();
      const fnMap = {
        login: EVENTS.CANCEL_LOGIN,
        'switch-profile': EVENTS.CANCEL_SWITCH_PROFILE,
        'switch-passport': EVENTS.CANCEL_SWITCH_PASSPORT,
        'bind-wallet': EVENTS.CANCEL_BIND_WALLET,
      };
      const fnCancelMap = {
        login: 'offLogin',
        'switch-profile': 'offSwitchProfile',
        'switch-passport': 'offSwitchPassport',
        'bind-wallet': 'offBindWallet',
      };
      events.emit(fnMap[action]);

      if (globalThis.blocklet) {
        debug(`bridge callArc: ${fnCancelMap[action]}`);
        bridge.callArc(`${fnCancelMap[action]}`);
      }
    });

    const onSuccess = useMemoizedFn((action, ...args) => {
      try {
        // 跳转
        callbacks[action](...args);
      } catch (err) {
        logger.error('Catch error in onSuccess', {
          action,
          args,
          err,
        });
        callbacks[`${action}-failed`]?.(err, ...args);
      }
    });

    const onError = useMemoizedFn((action, err, ...args) => {
      callbacks[`${action}-failed`]?.(err, ...args);
    });

    const {
      federatedMaster,
      federatedEnabled,
      master: masterSite,
    } = useFederated({
      locale: currentLocale,
      decrypt,
      login: loginWallet,
      handleLoginResult,
      handleRefreshUser,
      setRefreshToken,
      setSessionToken,
    });

    const { checkMatch } = useProtectedRoutes({ protectedRoutes: props.protectedRoutes || [] });

    const latestUserSessions = useLatest(userSessions);

    const getUserSessions = useMemoizedFn(async () => {
      if (!loadedUserSessions) {
        await refreshUserSessions();
        await sleep(100);
      }
      return latestUserSessions.current;
    });

    const closeConnect = useMemoizedFn(() => {
      state.open = false;
      connectApi.close();
    });

    /**
     * 打开 did-connect
     * @param {object} openConnectOptions
     * @param {boolean} openConnectOptions.hideCloseButton - 是否隐藏关闭按钮
     * @param {function} openConnectOptions.onSuccess - 成功回调
     */
    const openConnect = async (openConnectOptions = {}) => {
      let localeAction = state.action;
      if (pageState?.options?.origin === 'switch-did') {
        localeAction = pageState?.options?.origin;
      }

      const defaultMessages = translations[localeAction];

      const messages = getMessageByBlocklet(localeAction, currentLocale);

      // 使用对象合并，确保即使前面的对象缺少某些key，也能从后面的对象中获取
      const connectMessage = mergeIgnoreEmpty(defaultMessages[currentLocale] || defaultMessages.en, messages || {});
      const extraParams = {
        ...opts.extraParams,
        ...props.extraParams,
        ...pageState.extraParams,
        previousUserDid: state?.user?.did,
        email: state?.user?.email,
      };

      if (localeAction === 'switch-did' && extraParams?.forceConnected) {
        const t = (key, data = {}) => {
          return translate(translations['switch-specified-did'], key, currentLocale, 'en', data);
        };
        connectMessage.title = t('title');
        connectMessage.scan = t('scan', { did: extraParams.forceConnected });
        connectMessage.confirm = t('confirm');
        connectMessage.success = t('success');
      }
      // HACK: 部分参数不用传递给 server 端，需要手动移除

      delete extraParams?.openMode;
      const params = {
        action: state.action,
        locale: currentLocale,
        hideCloseButton: openConnectOptions?.hideCloseButton,
        extraParams,
        options: { ...(props.options || {}), ...pageState.options },
        checkTimeout: props.timeout,
        webWalletUrl: props.webWalletUrl,
        messages: connectMessage,
        useSocket: props.useSocket,
        ...omit(props, [
          'action',
          'locale',
          // NOTICE: 将 serviceHost 也透传给 DID Connect 组件
          // 'serviceHost',
          'appendAuthServicePrefix',
          'autoDisconnect',
          'children',
          'timeout',
          'extraParams',
          'options',
          'webWalletUrl',
          'messages',
          'useSocket',
          'lazyRefreshToken',
          'apiOptions',
          'protectedRoutes',
        ]),
        // 允许 login/switchProfile/switchDid 的时候传入自定义参数
        ...pick(pageState.extraParams || {}, [
          'autoConnect',
          'forceConnected',
          'saveConnect',
          'useSocket',
          'passkeyBehavior',
        ]),
        // baseUrl: state.baseUrl || props.baseUrl || '',

        // 注意 prefix 经过了特殊处理, 优先级高于 "...rest", 所以放在其后
        prefix: pageState.prefix,
        allowWallet: !isUndefined(pageState.allowWallet)
          ? pageState.allowWallet
          : state.action !== 'login' ||
            ['1', 'true', undefined, null].includes(globalThis.blocklet?.DID_CONNECT_ALLOW_WALLET),
        onSuccess: async (...args) => {
          onSuccess(state.action, ...args);
          if (isFunction(openConnectOptions?.onSuccess)) {
            await openConnectOptions.onSuccess(...args);
          }
          state.open = false;
        },
        onClose(...args) {
          onClose(state.action, ...args);
        },
        onError(err) {
          console.error(state.action, err);
          onError(state.action, err, session.current);
        },
      };
      state.open = true;

      if (
        ['login'].includes(state.action) &&
        pageState.openMode === 'window' &&
        !(browser.wallet || browser.arcSphere)
      ) {
        try {
          const mergeParams = {
            ...params,
            baseUrl: window.location.origin,
          };
          // HACK: 在某些情况下，prefix 中已经携带了域名，这时不能再拼接一次
          if (!isUrl(pageState.prefix)) {
            mergeParams.prefix = joinURL(window.location.origin, props.serviceHost, pageState.prefix);
          }
          if (!mergeParams.extraParams?.provider) {
            mergeParams.extraParams.provider = state?.user?.provider || 'wallet';
          }
          await connectApi.openPopup(mergeParams, { locale: currentLocale });
        } catch (err) {
          if (err instanceof NotOpenError) {
            closeConnect();
          }
          if (err.message === 'Timeout') {
            Toast.error(didConnectTimeoutError[currentLocale] || didConnectTimeoutError.en);
          } else {
            console.error(err);
          }
        }
      } else {
        connectApi.open(params);
      }
    };

    const autoSwitchDid = useMemoizedFn(async () => {
      // NOTICE: 此处获得的 trimedUrl 是当前 location.href 精简参数后的 url，无需进行安全处理
      const { params: decodedParams, url: trimedUrl } = await decodeUrlParams();
      if (decodedParams) {
        const { switchBehavior, forceConnected, sourceAppPid, showClose } = decodedParams;

        if (forceConnected === state.user.did) {
          window.history.replaceState(null, 'trim', trimedUrl);
        } else if (switchBehavior === 'required') {
          switchDid(() => {}, {
            openMode: 'redirect',
            redirect: trimedUrl,
            sourceAppPid,
            forceConnected,
          });
        } else if (switchBehavior === 'disabled') {
          window.history.replaceState(null, 'trim', trimedUrl);
        } else {
          confirmApi.open({
            title: translations.switchAccountDialog[currentLocale].title,
            content: (
              <>
                <Typography variant="body1" sx={{ textAlign: 'center', mb: 2 }}>
                  {translations.switchAccountDialog[currentLocale].description}
                </Typography>
                <Box sx={{ display: 'flex', alignItems: 'center', color: 'grey.A700' }}>
                  <Box
                    sx={{
                      display: 'flex',
                      flexDirection: 'column',
                      alignItems: 'center',
                      gap: 1.5,
                      lineHeight: 1,
                    }}>
                    <Avatar did={state.user.did} shape="circle" variant="circle" size={80} />
                    <DID did={state.user.did} showAvatar={false} compact responsive={false} />
                    {translations.switchAccountDialog[currentLocale].currentAccount}
                  </Box>
                  <Box sx={{ display: 'flex', justifyContent: 'center', px: 2 }}>
                    <Box
                      component={Icon}
                      icon={KeyboardDoubleArrowRightRoundedIcon}
                      sx={{
                        fontSize: 24,
                        color: palette.grey[400],
                        animation: 'right 2.5s linear infinite',

                        '@keyframes right': {
                          '0%': {
                            transform: 'translateX(-3px)',
                            opacity: 0,
                          },
                          '60%': {
                            transform: 'translateX(3px)',
                            opacity: 1,
                          },
                          '100%': {
                            transform: 'translateX(0px)',
                            opacity: 0,
                          },
                        },
                      }}
                    />
                  </Box>
                  <Box
                    sx={{
                      display: 'flex',
                      flexDirection: 'column',
                      alignItems: 'center',
                      gap: 1.5,
                      lineHeight: 1,
                      fontWeight: 500,
                    }}>
                    <Avatar did={forceConnected} shape="circle" variant="circle" size={80} />
                    <DID did={forceConnected} showAvatar={false} compact responsive={false} />
                    {translations.switchAccountDialog[currentLocale].nextAccount}
                  </Box>
                </Box>
              </>
            ),
            showCloseButton: showClose,
            showCancelButton: false,
            confirmButtonText: translations.switchAccountDialog[currentLocale].confirm,
            async onConfirm(close) {
              const userSessionList = await getUserSessions();
              const findUserSession = userSessionList.find((x) => x.userDid === forceConnected);

              if (findUserSession) {
                loginUserSession(findUserSession).then((result) => {
                  updateConnectedInfo(
                    {
                      connected_did: findUserSession.user.did,
                      connected_pk: findUserSession.user.pk,
                      connected_wallet_os: findUserSession.extra.walletOS,
                      connected_app: getAppId(),
                    },
                    true
                  );
                  handleLoginResult({ ...result, encrypted: false });
                  handleRefreshUser({ showProgress: true })
                    .then(async () => {
                      await sleep(200);
                      events.emit(EVENTS.LOGIN, result, decrypt, session.current);
                      notifyBridge(session.current);
                      await connectToDidSpaceForFullAccess();
                    })
                    .catch((error) => {
                      events.emit(EVENTS.LOGIN_FAILED, error);
                      throw error;
                    });
                });
                close();
                return;
              }
              switchDid(
                () => {
                  close();
                  window.location.replace(trimedUrl);
                },
                { sourceAppPid, forceConnected, enableSwitchApp: false },
                { showQuickConnect: true }
              );
            },
          });
        }
      }
    });

    /**
     * @type {import('../types').OpenDidConnect}
     */
    const openDidConnect = useMemoizedFn(async (params, options) => {
      const requirements = Object.assign(
        {
          login: true,
          bindWallet: true,
          bindDidSpaces: false,
        },
        options?.requirements
      );
      const openMode = options?.openMode || 'popup';
      if (requirements.login) {
        await ensureLogin();
      }
      if (requirements.bindWallet) {
        await new Promise((resolve) => {
          bindWallet(() => {
            resolve();
          });
        });
      }
      if (requirements.bindDidSpaces) {
        if (!(await didSpacesIsRequired(state?.user))) {
          await new Promise((resolve) => {
            if (requirements.bindDidSpaces === 'full') {
              connectToDidSpaceForFullAccess({
                onSuccess() {
                  resolve();
                },
              });
            } else if (requirements.bindDidSpaces === 'read') {
              connectToDidSpaceForImport({
                onSuccess() {
                  resolve();
                },
              });
            }
          });
        }
      }

      if (openMode === 'window') {
        connectApi.openPopup(params, options);
      } else if (openMode === 'popup') {
        connectApi.open(params);
      }
    });

    useUpdateEffect(() => {
      const count = Number(state.unReadCount || 0); // 避免 unReadCount 为 string 类型
      setUnReadCount(count);
    }, [state.unReadCount]);

    const removeMagicToken = useMemoizedFn(() => {
      if (searchParams.get('magicToken')) {
        searchParams.delete('magicToken');
      }
      if (searchParams.toString()) {
        window.history.replaceState({}, '', `${window.location.pathname}?${searchParams.toString()}`);
      }
    });

    const verifyMagicToken = useMemoizedFn((magicToken) => {
      return new Promise((resolve, reject) => {
        connectApi.open({
          action: 'login',
          locale: currentLocale,
          prefix: pageState.prefix,
          useSocket: false,
          messages: {
            title: currentLocale === 'zh' ? '验证 MagicLink Token' : 'Verify MagicLink Token',
          },
          magicToken,
          onSuccess(...args) {
            onLogin(...args);
            removeMagicToken();
            resolve();
          },
          onError(err) {
            events.emit(EVENTS.LOGIN_FAILED, err);
            reject(err);
          },
        });
      });
    });

    const currentSession = {
      ...state,
      loading: pageState.autoConnect ? !state.user || state.loading : state.loading,
      openDidConnect,
      login,
      logout,
      switchDid,
      autoSwitchDid,
      refreshProfile,
      switchProfile,
      switchPassport,
      connectToDidSpaceForImport,
      connectToDidSpaceForFullAccess,
      bindWallet,
      refresh: handleRefreshUser,
      updateConnectedInfo,
      // federated relates
      federatedMaster,
      // oauth relates
      useOAuth,
      OAuthProvider,
      OAuthConsumer,
      OAuthContext,
      // passkey relates
      usePasskey,
      PasskeyProvider,
      PasskeyConsumer,
      PasskeyContext,
      // user related
      useDid,
      WrapDid,
      getUserSessions,
      async loginUserSession(userSessionItem) {
        try {
          const loginResult = await loginUserSession(userSessionItem);
          updateConnectedInfo(
            {
              connected_did: userSessionItem.user.did,
              connected_pk: userSessionItem.user.pk,
              connected_wallet_os: userSessionItem.extra.walletOS,
              connected_app: getAppId(),
            },
            true
          );
          handleLoginResult({ ...loginResult, encrypted: false });
          await handleRefreshUser({ showProgress: true });
          await sleep(200);
          events.emit(EVENTS.LOGIN, loginResult, decrypt, session.current);
          notifyBridge(session.current);
          await connectToDidSpaceForFullAccess();
        } catch (err) {
          events.emit(EVENTS.LOGIN_FAILED, err);
          throw err;
        }
      },
      unReadCount,
      setUnReadCount,

      verifyMagicToken,
      // 二次认证相关方法
      withSecondaryAuth,
    };

    const session = useLatest(currentSession);

    const sessionValue = {
      api: service,
      events,
      storage: sessionTokenStorage,
      connectApi,
      session: session.current,
    };

    const callbacks = {
      login: onLogin,
      'switch-profile': onSwitchProfile,
      'switch-passport': onSwitchPassport,
      'switch-passport-failed': onSwitchPassportFailed,
      'bind-wallet': onBindWallet,
      'bind-wallet-failed': onBindWalletFailed,
      'login-failed': onLoginFailed,
    };

    // user change 事件
    useUpdateEffect(() => {
      if (state.initialized) {
        const isFirst = !prevInitialized;
        events.emit('change', { user: cloneDeep(state.user), isFirst });
        if (state.user) {
          if (globalThis.blocklet) {
            const data = {
              did: state.user.did,
              host: window.location.host,
              appPid: globalThis.blocklet.appPid,
              visitorId: getVisitorId(),
              sourceAppPid: state.user.sourceAppPid,
              fullName: state.user.fullName,
            };
            debug('bridge callArc: onChange', {
              isFirst,
              user: data,
            });
            bridge.callArc('onChange', {
              ...data,
              user: data,
              isFirst,
            });
          }
        }
      }
    }, [state.user, state.initialized, events]);

    // 检查当前登录的用户与 url 中参数指定的用户是否一致
    useUpdateEffect(() => {
      if (state.initialized && state.user) {
        autoSwitchDid();
      }
    }, [state.initialized]);

    useMount(async () => {
      const bridgeOnLogin = (result) => {
        if (isNil(result.encrypted)) {
          result.encrypted = false;
        }
        if (window.temporaryDIDConnectOnSuccess instanceof Function) {
          debug('bridgeOnLogin: temporaryDIDConnectOnSuccess', { result });
          window.temporaryDIDConnectOnSuccess(result, (v) => v);
        } else {
          debug('bridgeOnLogin: onLogin', { result });
          onLogin(result);
        }
      };
      bridge.registerBlocklet('callLoginOAuth', (options) => {
        debug('bridge registerBlocklet: callLoginOAuth', options);
        connectApi.loginOAuth({
          ...options,
          onLogin: bridgeOnLogin,
        });
      });
      bridge.registerBlocklet('logout', logout);
      // NOTICE: login 是指 arcsphere 已经完成登录，传回的 result 是登录后的数据
      bridge.registerBlocklet('login', (result) => {
        debug('bridge registerBlocklet: login', result);
        bridgeOnLogin(result);
      });

      // 确保 普通浏览器中 visitorId 存在
      ensureVisitorId();
      const visitorId = getVisitorId();

      if (!visitorId) {
        // 确保 ArcSphere 中 visitorId 存在
        if (browser.arcSphere) {
          debug('bridge callArc: getVisitorId');
          const walletVisitorId = await bridge.callArc('getVisitorId');
          debug('bridge callArc: getVisitorId result', { walletVisitorId });
          setVisitorId(walletVisitorId);
        } else if (browser.wallet) {
          const walletVisitorId = await getMobileVisitorId();
          setVisitorId(walletVisitorId);
        }
      }

      // ensure we are in the same app
      const connectedApp = Cookie.get('connected_app');
      const actualApp = getAppId();

      if (props.autoDisconnect && connectedApp && actualApp && connectedApp !== actualApp) {
        debugTmp('[clearSession] createSessionContext -> SessionProvider -> useMount: autoDisconnect', {
          autoDisconnect: props.autoDisconnect,
          connectedApp,
          actualApp,
        });
        clearSession();
        state.initialized = true;
        if (pageState.autoConnect) {
          openConnect();
        } else {
          closeConnect();
        }
        return;
      }

      const sessionToken = getSessionToken();

      // HACK: 如果页面处于 iframe 中，将不进行自动登录的逻辑，防止页面会产生两次钱包的自动登录流程
      if (window?.self === window?.parent) {
        let platform = 'web';
        if (browser.mobile.apple.device) {
          platform = 'ios';
        } else if (browser.mobile.android.device) {
          platform = 'android';
        }
        if (browser.wallet && checkEnableAutoLogin({ version: browser.walletVersion, platform })) {
          if (!sessionToken) {
            try {
              state.loading = true;
              const result = await loginInMobile();
              if (result) {
                await onLogin({
                  sessionToken: result.sessionToken,
                  refreshToken: result.refreshToken,
                  csrfToken: result.csrfToken,
                  visitorId: result.visitorId,
                  encrypted: false,
                });
                state.initialized = true;
                return;
              }
            } catch (err) {
              events.emit(EVENTS.LOGIN_FAILED, err);
              throw err;
            } finally {
              state.loading = false;
            }
          }
        }
      }

      const magicToken = searchParams.get('magicToken');
      if (magicToken) {
        try {
          state.initialized = true;
          await verifyMagicToken(magicToken);
        } catch (err) {
          console.error('verifyMagicToken failed', err);
        }
      }

      if (sessionToken) {
        await handleRefreshUser({ showProgress: true });
        state.initialized = true;

        if (state.user) {
          await connectToDidSpaceForFullAccess();
        }
        return;
      }

      if (typeof window !== 'undefined') {
        // If a login token exist in url, set that token in storage
        const url = new URL(window.location.href);
        const loginToken = url.searchParams.get('loginToken');
        if (loginToken) {
          handleLoginResult({ loginToken, encrypted: false });

          url.searchParams.delete('loginToken');
          window.history.replaceState({}, window.title, url.href);
          return;
        }
      }

      // If a refresh token exist and session token NOT exist, do refresh session
      const refreshToken = getRefreshToken();
      if (refreshToken) {
        await handleRefreshToken(true);
        state.initialized = true;
        return;
      }

      try {
        // await tryAutoLoginFederated();
        // } catch (err) {
        //   console.error('Federated: tryAutoLogin failed', err);
      } finally {
        state.initialized = true;
      }

      if (pageState.autoConnect) {
        openConnect();
      } else {
        closeConnect();
      }

      if (
        browser.arcSphere &&
        ![
          // 不应该唤起自动登录的路由
          joinURL(BLOCKLET_SERVICE_PATH_PREFIX, 'login'),
          joinURL(BLOCKLET_SERVICE_PATH_PREFIX, 'connect'),
          joinURL(BLOCKLET_SERVICE_PATH_PREFIX, 'lost-passport'),
        ].includes(window.location.pathname)
      ) {
        if (!sessionToken) {
          try {
            debug('bridge callArc: autoLogin');
            const result = await bridge.callArc('autoLogin');
            debug('bridgecallArc: autoLogin result', result);
            if (result) {
              await onLogin({
                sessionToken: result.sessionToken,
                refreshToken: result.refreshToken,
                csrfToken: result.csrfToken,
                visitorId: result.visitorId,
                encrypted: false,
              });
            }
          } catch (err) {
            events.emit(EVENTS.LOGIN_FAILED, err);
            logger.error('Failed to autoLogin ArcSphere', err);
          }
        }
      }
    });
    const seamless = searchParams.has('popup');

    if (checkMatch()) {
      if (!state.initialized) {
        return <Center>{seamless ? null : <CircularProgress />}</Center>;
      }
    }

    const providerProps = {
      locale: currentLocale,
      onSwitchPassport: ({ sessionToken, refreshToken, csrfToken }) =>
        onSwitchPassport({ sessionToken, refreshToken, csrfToken, encrypted: false }),
      onUnbindOAuth: () => handleRefreshUser(),
      onBindOAuth: () => handleRefreshUser(),
      onAddPasskey: () => handleRefreshUser(),
      onRemovePasskey: () => handleRefreshUser(),
      session: session.current,
    };

    return (
      <Provider value={sessionValue}>
        <PasskeyProvider {...providerProps}>
          <OAuthProvider {...providerProps}>
            {!state.open && typeof props.children === 'function' ? props.children(state) : props.children}
            {connectHolder}
            {confirmHolder}
            {DidSpacesGuideView}
            {opts.rolling && <WindowFocusAware callback={() => renewToken()} />}
            <WindowFocusAware callback={syncSessionSate} />
          </OAuthProvider>
        </PasskeyProvider>
      </Provider>
    );
  }

  SessionProvider.propTypes = {
    children: PropTypes.any.isRequired,
    serviceHost: PropTypes.string,
    action: PropTypes.string,
    prefix: PropTypes.string,
    appendAuthServicePrefix: PropTypes.bool,
    locale: PropTypes.string,
    timeout: PropTypes.number,
    autoConnect: PropTypes.bool, // should we open connect dialog when session not found
    autoDisconnect: PropTypes.bool, // should we auto disconnect on appId mismatch
    useSocket: PropTypes.bool, // should we auto disconnect on appId mismatch
    extraParams: PropTypes.object,
    options: PropTypes.object,
    webWalletUrl: PropTypes.string,
    protectedRoutes: PropTypes.arrayOf(PropTypes.string),
    apiOptions: PropTypes.object,
    lazyRefreshToken: PropTypes.bool,
  };

  function withSession(Component) {
    return function WithSessionComponent(props) {
      return (
        <ToastProvider>
          <Consumer>{(sessionProps) => <Component {...props} {...sessionProps} />}</Consumer>
        </ToastProvider>
      );
    };
  }

  return {
    SessionProvider: (props) => {
      return (
        <ToastProvider>
          <FederatedProvider>
            <SessionProvider {...props} />
          </FederatedProvider>
        </ToastProvider>
      );
    },
    SessionConsumer: Consumer,
    SessionContext,
    withSession,
  };
}

function createAuthServiceSessionContext({ storageEngine = 'cookie' } = {}) {
  const storageKey = SESSION_TOKEN_STORAGE_KEY;
  const refreshTokenStorageKey = REFRESH_TOKEN_STORAGE_KEY;

  // componentId
  let componentId = null;
  if (typeof window !== 'undefined') {
    const blocklet = globalThis.blocklet || {};

    // FIXME: @zhanghan 当 connect 组件使用不同的 baseUrl 时，不应该直接从 window.blocklet 去取值
    componentId = blocklet.componentId;
  }

  if (storageEngine === 'cookie') {
    let path = '/';
    // FIXME: @zhanghan sessionToken 也应该从 jwt 中读取过期时间，而不是通过配置来判断？
    let sessionTokenExpireInDays = 1;

    if (typeof window !== 'undefined') {
      const env = window.env || {};
      const blocklet = window.blocklet || {};

      // FIXME: @zhanghan 当 connect 组件使用不同的 baseUrl 时，不应该直接从 window.blocklet 去取值
      path = env.groupPathPrefix || blocklet.groupPrefix || blocklet.prefix || '';
      path = path.replace(/\/+$/, '');
      path = path || '/';

      // for backward compatibility
      // 不支持 refreshToken 的旧版 server 不会在 window.blocklet 中返回 serverVersion
      if (blocklet.serverVersion) {
        sessionTokenExpireInDays = formatCacheTtl(window.blocklet?.settings?.session?.cacheTtl, 1 / 24); // 1h
      }
    }

    return createSessionContext(
      storageKey,
      'cookie',
      {
        path,
        returnDomain: false,
        expireInDays: sessionTokenExpireInDays,
      },
      {
        appendAuthServicePrefix: true,
        extraParams: { componentId },
        refreshTokenStorageKey,
      }
    );
  }

  if (storageEngine === 'localStorage') {
    return createSessionContext(storageKey, 'ls', {}, true, {
      appendAuthServicePrefix: true,
      extraParams: { componentId },
    });
  }

  throw new Error('storageEngine must be cookie or localStorage');
}

export { SessionContext, createSessionContext, createAuthServiceSessionContext };
export default createSessionContext;
