// MobileApp.jsx — mobile app shell, replaces desktop App when mobile detected
const MobileApp = () => {
  const [route, setRoute] = React.useState('home');
  const [openProduct, setOpenProduct] = React.useState(null);
  const [cart, setCart] = React.useState(() => {
    try { const s = localStorage.getItem('obc_cart'); return s ? JSON.parse(s) : []; } catch { return []; }
  });
  const [cartOpen, setCartOpen] = React.useState(false);
  const [checkoutOpen, setCheckoutOpen] = React.useState(false);
  const [toast, setToast] = React.useState(null);
  const [user, setUser] = React.useState(null);

  const showToast = (msg) => {
    setToast(msg);
    setTimeout(() => setToast(null), 2400);
  };

  React.useEffect(() => { try { localStorage.setItem('obc_cart', JSON.stringify(cart)); } catch {} }, [cart]);

  React.useEffect(() => {
    window.OBC_API.getCurrentUser().then((u) => { if (u) setUser(u); });
  }, []);

  const handleAdd = (p, qty, grind) => {
    setCart((c) => {
      const idx = c.findIndex((it) => it.p.id === p.id && it.grind === grind);
      if (idx >= 0) {
        const next = [...c];
        next[idx] = { ...next[idx], qty: next[idx].qty + qty };
        return next;
      }
      return [...c, { p, qty, grind }];
    });
    setOpenProduct(null);
    showToast('> staged ' + p.name + ' x ' + qty);
  };

  const handleCheckout = () => {
    setCartOpen(false);
    setCheckoutOpen(true);
  };

  const handleLogout = () => {
    setUser(null);
    navigate('home');
    showToast('> [ session terminated ] logged out.');
  };

  const handleLogin = (u) => {
    setUser(u);
    navigate('account');
    showToast('> [ access granted ] welcome, ' + u.handle);
  };

  const handleRegister = (u) => {
    setUser(u);
    navigate('account');
    showToast('> [ account provisioned ] welcome, ' + u.handle);
  };

  const cartCount = cart.reduce((s, i) => s + i.qty, 0);

  const navigate = (r) => { setRoute(r); window.scrollTo({ top: 0, behavior: 'smooth' }); };

  // Map cart route to the cart drawer instead of a page
  const handleRoute = (r) => {
    if (r === 'cart') {
      setCartOpen(true);
    } else {
      navigate(r);
    }
  };

  return (
    <>
      <window.MobileHeader
        route={route}
        onHome={() => navigate('home')}
      />

      <div id="mobile-scene" style={{
        paddingTop: 48,   /* header height */
        paddingBottom: 56, /* tab bar height */
        minHeight: '100vh',
      }}>
        {route === 'home' && (
          <window.MobileHome
            onShop={(lineId) => { if (lineId) { navigate('shop:' + lineId); } else { navigate('shop'); } }}
            onProduct={setOpenProduct}
            onRoute={navigate}
          />
        )}
        {route.startsWith('shop') && (
          <window.MobileShop
            onOpen={setOpenProduct}
            onAdd={handleAdd}
            onBack={() => navigate('home')}
            initialLine={route.includes(':') ? route.split(':')[1] : null}
          />
        )}
        {route === 'guide' && <window.MobileGuide />}
        {route === 'manifesto' && <window.MobileManifesto />}
        {route === 'origins' && <window.OriginNotes />}
        {route === 'login' && (
          user
            ? <window.MobileAccount user={user} onLogout={handleLogout} onShop={() => navigate('shop')} />
            : <window.MobileLogin onLoggedIn={handleLogin} onSwitchToRegister={() => navigate('register')} />
        )}
        {route === 'register' && (
          user
            ? <window.MobileAccount user={user} onLogout={handleLogout} onShop={() => navigate('shop')} />
            : <window.MobileRegister onRegistered={handleRegister} onSwitchToLogin={() => navigate('login')} />
        )}
        {route === 'account' && (
          user
            ? <window.MobileAccount user={user} onLogout={handleLogout} onShop={() => navigate('shop')} />
            : <window.MobileLogin onLoggedIn={handleLogin} onSwitchToRegister={() => navigate('register')} />
        )}
        <window.MobileFooter onRoute={navigate} onShopLine={(lineId) => navigate('shop:' + lineId)} user={user} />
      </div>

      <window.MobileTabBar
        route={route}
        setRoute={handleRoute}
        cartCount={cartCount}
        user={user}
      />

      {/* Overlays — cart drawer, product detail, checkout, toast */}
      {ReactDOM.createPortal(
        <>
          <window.MobileProductDetail
            p={openProduct}
            onClose={() => setOpenProduct(null)}
            onAdd={handleAdd}
          />
          <window.MobileCart
            open={cartOpen}
            items={cart}
            onClose={() => setCartOpen(false)}
            onUpdateQty={(idx, delta) => setCart((c) => {
              const next = [...c];
              next[idx] = { ...next[idx], qty: next[idx].qty + delta };
              if (next[idx].qty <= 0) return next.filter((_, i) => i !== idx);
              return next;
            })}
            onClearAll={() => setCart([])}
            onCheckout={handleCheckout}
          />
          <window.MobileCheckout
            open={checkoutOpen}
            items={cart}
            user={user}
            onClose={() => setCheckoutOpen(false)}
            onComplete={(orderId) => {
              setCheckoutOpen(false);
              setCart([]);
              if (user) {
                navigate('account');
                showToast('> order ' + orderId + ' staged. routing to /account');
              } else {
                showToast('> order ' + orderId + ' confirmed. receipt sent.');
              }
            }}
          />
          {toast && <div className="toast">{toast}</div>}
        </>,
        document.getElementById('overlays')
      )}
    </>
  );
};

window.MobileApp = MobileApp;