const { useState, useEffect, useCallback } = React;

function App() {
  const [cart, setCart] = useState([]);
  const [wishlist, setWishlist] = useState([]);
  const [cartOpen, setCartOpen] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const [quick, setQuick] = useState(null);
  const [toast, setToast] = useState(null);

  // lock scroll when an overlay is open
  useEffect(() => {
    const lock = cartOpen || menuOpen || quick;
    document.body.style.overflow = lock ? "hidden" : "";
  }, [cartOpen, menuOpen, quick]);

  const showToast = useCallback((msg) => {
    setToast(msg);
    window.clearTimeout(showToast._t);
    showToast._t = window.setTimeout(() => setToast(null), 2600);
  }, []);

  const addToCart = useCallback((p, opts) => {
    const size = opts?.size || '56"';
    const color = opts?.color || p.colors[0];
    const uid = p.id + "|" + size + "|" + color;
    setCart((prev) => {
      const found = prev.find((it) => it.uid === uid);
      if (found) return prev.map((it) => (it.uid === uid ? { ...it, qty: it.qty + 1 } : it));
      return [...prev, { uid, id: p.id, name: p.name, price: p.price, label: p.label, tone: p.tone, img: p.img, size, color, qty: 1 }];
    });
    showToast(p.name + " added to bag");
  }, [showToast]);

  const quickAdd = useCallback((p) => setQuick(p), []);
  const confirmQuick = useCallback((p, opts) => { addToCart(p, opts); setQuick(null); setCartOpen(true); }, [addToCart]);

  const changeQty = (uid, d) =>
    setCart((prev) => prev.map((it) => (it.uid === uid ? { ...it, qty: Math.max(1, it.qty + d) } : it)));
  const removeItem = (uid) => setCart((prev) => prev.filter((it) => it.uid !== uid));

  const toggleWish = useCallback((id) => {
    setWishlist((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
  }, []);

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

  return (
    <>
      <Announcement />
      <Header count={count} onCart={() => setCartOpen(true)} onMenu={() => setMenuOpen(true)} onSearch={() => showToast("Search is coming soon ✦")} />

      <main>
        <Hero onShop={() => {}} />
        <ValueStrip />
        <Collections />
        <NewArrivals onAdd={quickAdd} onWish={toggleWish} wishlist={wishlist} />
        <Story />
        <Editorial />
        <InstagramFeed />
        <Stores />
        <Newsletter />
      </main>

      <Footer />

      <MobileMenu open={menuOpen} onClose={() => setMenuOpen(false)} />
      <CartDrawer open={cartOpen} items={cart} onClose={() => setCartOpen(false)} onQty={changeQty} onRemove={removeItem} />
      <QuickAdd product={quick} onClose={() => setQuick(null)} onConfirm={confirmQuick} />

      <div className={"toast" + (toast ? " is-on" : "")}>
        <Icon name="bag" size={16} /> {toast}
      </div>
    </>
  );
}

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