// Bebechic Mobile UI Kit — App shell (router)

function BebechicApp() {
  const [route, setRoute] = React.useState({ name: 'home', data: null });
  const [history, setHistory] = React.useState([]);
  const [cart, setCart] = React.useState([]);

  const go = (name, data) => {
    setHistory(h => [...h, route]);
    setRoute({ name, data });
  };
  const back = () => {
    setHistory(h => {
      if (h.length === 0) { setRoute({ name: 'home', data: null }); return h; }
      const last = h[h.length - 1];
      setRoute(last);
      return h.slice(0, -1);
    });
  };
  const tab = (name) => { setRoute({ name, data: null }); setHistory([]); };

  const addToCart = (p) => setCart(c => [...c, p]);
  const removeFromCart = (id) => setCart(c => c.filter(p => p.id !== id));

  let screen;
  switch (route.name) {
    case 'home':   screen = <HomeScreen go={go} cart={cart} addToCart={addToCart}/>; break;
    case 'search': screen = <SearchScreen go={go} back={back}/>; break;
    case 'detail': screen = <ProductDetailScreen product={route.data} go={go} back={back} addToCart={addToCart}/>; break;
    case 'cart':   screen = <CartScreen cart={cart} removeFromCart={removeFromCart} go={go} back={back}/>; break;
    case 'me':     screen = <ProfileScreen go={go}/>; break;
    case 'wishlist': screen = <WishlistPlaceholder back={back}/>; break;
    default:       screen = <HomeScreen go={go} cart={cart} addToCart={addToCart}/>;
  }

  const activeTab = ['home','search','cart','wishlist','me'].includes(route.name) ? route.name : 'home';

  return (
    <div style={{position:'relative', height: '100%', overflow:'hidden', background: BBC.cream}}>
      <div style={{position:'absolute', inset:0, paddingTop: 48 /* status bar offset */, overflowY:'auto'}}>
        {screen}
      </div>
      <BottomNav active={activeTab} onChange={tab} cartCount={cart.length}/>
    </div>
  );
}

function WishlistPlaceholder({ back }) {
  return (
    <div style={{background: BBC.cream, minHeight: '100%', paddingBottom: 100}}>
      <TopBar title="Wishlist" left={<IconButton icon="back" onClick={back}/>}/>
      <div style={{padding: '40px 24px', display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center', gap: 14}}>
        <img src="../../images/mascots/mascot-girl-front.png" style={{width: 140}}/>
        <div style={{fontFamily: BBC.fontDisplay, fontWeight: 700, fontSize: 20, color: BBC.mint700}}>Chưa có món nào</div>
        <div style={{fontFamily: BBC.fontBody, fontSize: 14, color: BBC.inkSoft, maxWidth: 240}}>Bấm vào tim ở góc sản phẩm để lưu lại nhé bạn ơi 🤍</div>
      </div>
    </div>
  );
}

// Mount
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(
  <div style={{
    minHeight: '100vh', background: BBC.cream, padding: 24,
    display:'flex', alignItems:'center', justifyContent:'center',
    fontFamily: BBC.fontBody,
  }}>
    <IOSDevice width={390} height={844}>
      <BebechicApp/>
    </IOSDevice>
  </div>
);