/* Aurora App — main SPA shell */

const { useState, useEffect, useCallback } = React;

function App() {
  const [route, setRoute] = useState({ page: 'home' });
  const [cart, setCart] = useState(loadCart());
  const [cartOpen, setCartOpen] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const [query, setQuery] = useState('');
  const [toast, setToast] = useState(null);
  const [orderId, setOrderId] = useState(null);

  useEffect(() => {
    const saved = localStorage.getItem('aurora_route');
    if (saved) { try { setRoute(JSON.parse(saved)); } catch {} }
  }, []);
  useEffect(() => { localStorage.setItem('aurora_route', JSON.stringify(route)); }, [route]);
  useEffect(() => { saveCart(cart); }, [cart]);

  const nav = useCallback((page, extra = {}) => {
    setRoute({ page, ...extra });
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, []);

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

  const addToCart = (product, opts = {}) => {
    const key = `${product.id}-${opts.aroma||''}-${opts.color||''}`;
    const qty = opts.qty || 1;
    setCart(prev => {
      const ex = prev.find(x => x.key === key);
      if (ex) return prev.map(x => x.key === key ? { ...x, qty: x.qty + qty } : x);
      return [...prev, { key, id: product.id, price: product.price, qty, aroma: opts.aroma, color: opts.color, mensaje: opts.mensaje }];
    });
    showToast(`${product.name} añadida a tu reserva ♡`);
  };
  const updateCart = (key, qty) => setCart(prev => prev.map(x => x.key === key ? { ...x, qty } : x));
  const removeCart = (key) => setCart(prev => prev.filter(x => x.key !== key));

  const placeOrder = () => {
    const id = 'AUR-' + Math.floor(1000 + Math.random() * 9000);
    setOrderId(id);
    setCart([]);
    nav('success');
  };

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

  let body;
  switch (route.page) {
    case 'home':    body = <HomePage onNav={nav} onAddToCart={addToCart} onOpenProduct={(p) => nav('product', {id: p.id})}/>; break;
    case 'shop':    body = <ShopPage route={route} onNav={nav} onOpenProduct={(p) => nav('product', {id: p.id})} onAddToCart={addToCart} query={query}/>; break;
    case 'product': body = <ProductDetail productId={route.id} onNav={nav} onAddToCart={addToCart}/>; break;
    case 'about':   body = <AboutPage onNav={nav}/>; break;
    case 'contact': body = <ContactPage/>; break;
    case 'process': body = <ProcessPage onNav={nav}/>; break;
    case 'checkout':body = <CheckoutPage cart={cart} onNav={nav} onPlaceOrder={placeOrder}/>; break;
    case 'success': body = <SuccessPage onNav={nav} orderId={orderId || 'AUR-0000'}/>; break;
    case 'cart':    body = <div className="page"><div style={{textAlign:'center', padding:'40px 20px'}}><h2>Tu reserva</h2><p style={{color:'var(--ink-soft)', marginTop:10}}>Abre el panel del carrito desde el ícono arriba.</p><button className="btn btn-primary" onClick={() => nav('shop')} style={{marginTop:16}}>Ir al catálogo</button></div></div>; break;
    default:        body = <HomePage onNav={nav} onAddToCart={addToCart} onOpenProduct={(p) => nav('product', {id: p.id})}/>;
  }

  return (
    <div className="app">
      <Sidebar route={route} onNav={nav} open={menuOpen} onClose={() => setMenuOpen(false)}/>
      <div className="main">
        <TopBar cartCount={cartCount}
                onMenu={() => setMenuOpen(true)}
                onCart={() => setCartOpen(true)}
                onSearch={(q) => { setQuery(q); if (route.page !== 'shop') nav('shop'); }}
                query={query}/>
        {body}
        <Footer onNav={nav}/>
        <div style={{height: 64}} className="show-mobile"/>
      </div>

      <CartDrawer open={cartOpen} onClose={() => setCartOpen(false)}
                  cart={cart} onUpdate={updateCart} onRemove={removeCart}
                  onCheckout={() => { setCartOpen(false); nav('checkout'); }}/>

      <MobileTabbar route={route} onNav={(p) => { if (p==='cart') setCartOpen(true); else nav(p); }} cartCount={cartCount}/>

      <div className={`toast ${toast?'show':''}`}>
        {toast && <><Ic name="check" size={16} color="#E8B4C0"/> {toast}</>}
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);