/* global React */
// ============================================================
// RetailApp — 真实 H5 单页应用
// hash router + 单屏切换 + 底部 TabBar 导航
// 路由: #/home (默认) | #/cat | #/cart | #/me | #/live
//       #/login | #/pdp | #/checkout | #/pay | #/orders
// ============================================================
const { useState: useRA, useEffect: useERA, useMemo: useMRA, useCallback: useCRA } = React;

// ===== Hash router =====
function parseHash() {
  const h = (typeof window !== 'undefined' && window.location.hash) || '';
  const path = h.replace(/^#\/?/, '').split('?')[0] || 'home';
  return path;
}

function useHashRoute() {
  const [route, setRoute] = useRA(parseHash());
  useERA(() => {
    const onHash = () => setRoute(parseHash());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  const push = useCRA((to) => { window.location.hash = '#/' + to.replace(/^\//, ''); }, []);
  return { route, push };
}

// 5 个底部 Tab 对应的路由
const TAB_ROUTES = { home: 'home', cat: 'cat', live: 'live', cart: 'cart', me: 'me' };
const SCREEN_NEEDS_TABBAR = new Set(['home', 'cat', 'cart', 'me']); // live 自带全屏 UI

// 路由 → 组件 + 是否暗色状态栏
const ROUTES = {
  login:    { Comp: () => window.LoginScreen,    dark: false },
  home:     { Comp: () => window.HomeScreen,     dark: false },
  cat:      { Comp: () => window.CategoryScreen, dark: false },
  pdp:      { Comp: () => window.PDPScreen,      dark: true  },
  cart:     { Comp: () => window.CartScreen,     dark: false },
  checkout: { Comp: () => window.CheckoutScreen, dark: false },
  pay:      { Comp: () => window.PayResultScreen,dark: false },
  orders:   { Comp: () => window.OrdersScreen,   dark: false },
  me:       { Comp: () => window.ProfileScreen,  dark: true  },
  live:     { Comp: () => window.LiveScreen,     dark: true  },
};

// 视口检测 hook — >=1024px 视为桌面端
function useIsDesktop() {
  const [isDesktop, setIsDesktop] = useRA(typeof window !== 'undefined' && window.innerWidth >= 1024);
  useERA(() => {
    const check = () => setIsDesktop(window.innerWidth >= 1024);
    window.addEventListener('resize', check);
    return () => window.removeEventListener('resize', check);
  }, []);
  return isDesktop;
}

function RetailApp() {
  const { route, push } = useHashRoute();
  const [code, setCode] = useRA('CNY');
  const [lang, setLang] = useRA('zh');
  const [drawer, setDrawer] = useRA(false);
  const isDesktop = useIsDesktop();

  const curCtx = useMRA(() => ({ code, set: setCode }), [code]);
  const langCtx = useMRA(() => ({ lang, set: setLang }), [lang]);

  // 跨屏导航回调 — 替换原 prototype 里的 scrollIntoView
  const nav = useMRA(() => ({
    onCur: () => setDrawer(true),
    onCheckout: () => push('checkout'),
    onPay: () => push('pay'),
    onOrders: () => push('orders'),
    onAddCart: () => push('cart'),
  }), [push]);

  const def = ROUTES[route] || ROUTES.home;
  const Screen = def.Comp();
  const tabKey = Object.keys(TAB_ROUTES).find(k => TAB_ROUTES[k] === route);
  const showTab = SCREEN_NEEDS_TABBAR.has(route);

  // PC 模式: 顶部 nav + 主内容 + 底部 footer
  if (isDesktop && window.PCNav && window.PCFooter) {
    return (
      <window.LangContext.Provider value={langCtx}>
      <window.CurContext.Provider value={curCtx}>
        <div className="retail-app" data-route={route}>
          <window.PCNav onCur={() => setDrawer(true)} route={route} push={push} />
          <main className="pc-main">
            {Screen
              ? <Screen {...nav} />
              : <div style={{ padding: 80, textAlign: 'center', color: '#999' }}>加载中…</div>}
          </main>
          <window.PCFooter />
          <window.CurrencyDrawer open={drawer} onClose={() => setDrawer(false)} />
        </div>
      </window.CurContext.Provider>
      </window.LangContext.Provider>
    );
  }

  // 移动 / 平板模式: 原 phone frame
  return (
    <window.LangContext.Provider value={langCtx}>
    <window.CurContext.Provider value={curCtx}>
      <div className="retail-app" data-route={route}>
        <div className="retail-frame">
          <div className={'statusbar ' + (def.dark ? 'light' : '')}>
            <span>9:41</span>
            <span className="right">
              <svg width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M1 9h2V7H1zM5 9h2V5H5zM9 9h2V3H9zM13 9V1" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /></svg>
              <svg width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M7 7l1 1 1-1M3 4a6 6 0 018 0M5 6a3 3 0 014 0" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" fill="none" /></svg>
              <span className="battery"><i style={{ width: '78%' }}></i></span>
            </span>
          </div>
          {Screen
            ? <Screen {...nav} />
            : <div style={{ padding: 40, textAlign: 'center', color: '#999' }}>加载中…</div>}
          {showTab && (
            <window.TabBar active={tabKey || 'home'} onNav={(t) => {
              if (TAB_ROUTES[t]) push(TAB_ROUTES[t]);
            }} />
          )}
          <window.CurrencyDrawer open={drawer} onClose={() => setDrawer(false)} />
        </div>
      </div>
    </window.CurContext.Provider>
    </window.LangContext.Provider>
  );
}

window.RetailApp = RetailApp;