/* BERGFALK BLADES — app root */
const { useState: useStateA, useEffect: useEffectA } = React;

function App() {
  const products = window.BERGFALK.PRODUCTS;
  const [route, setRoute] = useStateA(() => localStorage.getItem("bb_route") || "home");
  const [param, setParam] = useStateA(() => localStorage.getItem("bb_param") || null);
  const [cart, setCart] = useStateA(() => { try { return JSON.parse(localStorage.getItem("bb_cart")) || []; } catch (e) { return []; } });
  const [favs, setFavs] = useStateA(() => { try { return JSON.parse(localStorage.getItem("bb_favs")) || []; } catch (e) { return []; } });
  const [cartOpen, setCartOpen] = useStateA(false);
  const [toast, setToast] = useStateA(null);

  useEffectA(() => { localStorage.setItem("bb_cart", JSON.stringify(cart)); }, [cart]);
  useEffectA(() => { localStorage.setItem("bb_favs", JSON.stringify(favs)); }, [favs]);
  useEffectA(() => { localStorage.setItem("bb_route", route); localStorage.setItem("bb_param", param || ""); }, [route, param]);

  function go(r, p = null) {
    setRoute(r); setParam(p);
    if (r !== "product") window.scrollTo(0, 0);
    setCartOpen(false);
  }
  function addToCart(id) {
    setCart((c) => {
      const ex = c.find((x) => x.id === id);
      if (ex) return c.map((x) => x.id === id ? { ...x, qty: x.qty + 1 } : x);
      return [...c, { id, qty: 1 }];
    });
    const p = products.find((x) => x.id === id);
    setToast(p ? p.name + " added to cart" : "Added to cart");
    clearTimeout(window.__bbToast);
    window.__bbToast = setTimeout(() => setToast(null), 2400);
  }
  function setQty(id, q) {
    if (q <= 0) return setCart((c) => c.filter((x) => x.id !== id));
    setCart((c) => c.map((x) => x.id === id ? { ...x, qty: q } : x));
  }
  function removeItem(id) { setCart((c) => c.filter((x) => x.id !== id)); }
  function clearCart() { setCart([]); }
  function toggleFav(id) { setFavs((f) => f.includes(id) ? f.filter((x) => x !== id) : [...f, id]); }

  const cartCount = cart.reduce((s, x) => s + x.qty, 0);
  const shared = { go, addToCart, favs, toggleFav };

  let page;
  if (route === "shop") page = <ShopPage {...shared} initialCat={param} />;
  else if (route === "product") page = <ProductPage id={param} {...shared} />;
  else if (route === "maker") page = <MakerPage go={go} />;
  else if (route === "process") page = <ProcessPage go={go} />;
  else if (route === "commission") page = <CommissionPage go={go} prefillId={param} />;
  else if (route === "faq") page = <FaqPage go={go} />;
  else if (route === "checkout") page = <CheckoutPage go={go} items={cart} products={products} clearCart={clearCart} />;
  else page = <HomePage {...shared} />;

  return (
    <>
      <Nav route={route} go={go} cartCount={cartCount} openCart={() => setCartOpen(true)} />
      {page}
      <Footer go={go} />
      <CartDrawer open={cartOpen} close={() => setCartOpen(false)} items={cart} products={products} setQty={setQty} removeItem={removeItem} go={go} />
      <div className={"toast" + (toast ? " show" : "")}><span className="dot"></span>{toast}</div>
    </>
  );
}

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