/* ============================================================
   LINGEA — App root: routing, bag state, scroll
   ============================================================ */
const { useCallback, useMemo } = React;
const LS_KEY = "lingea.bag.v1";

// Memoised pages: they only re-render when their own props change, so opening
// the bag or updating the cart never re-renders (and clobbers the reveal
// classes on) the underlying page.
const MHomePage = React.memo(HomePage);
const MCollectionPage = React.memo(CollectionPage);
const MProductPage = React.memo(ProductPage);
const MStoryPage = React.memo(StoryPage);

function App() {
  const [route, setRoute] = useState({ page: "home" });
  const [bag, setBag] = useState(() => {
    try { return JSON.parse(localStorage.getItem(LS_KEY)) || []; } catch (e) { return []; }
  });
  const [bagOpen, setBagOpen] = useState(false);

  const products = window.LINGEA.products;

  useEffect(() => {
    try { localStorage.setItem(LS_KEY, JSON.stringify(bag)); } catch (e) {}
  }, [bag]);

  // Toggle header "solid" via direct DOM so scrolling never triggers a React
  // re-render (a re-render would reconcile className and wipe reveal classes).
  useEffect(() => {
    const onScroll = () => {
      const h = document.querySelector(".site-head");
      const app = document.querySelector(".app");
      if (!h) return;
      const onHome = app && app.classList.contains("on-home");
      h.classList.toggle("solid", window.scrollY > 40 || !onHome);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [route.page]);

  const nav = useCallback((r) => {
    setBagOpen(false);
    setRoute(r);
    window.scrollTo({ top: 0, left: 0, behavior: "auto" });
  }, []);

  const addToBag = useCallback((product, size) => {
    setBag((prev) => {
      const key = product.id + (size ? "-" + size : "");
      const found = prev.find((l) => l.key === key);
      if (found) return prev.map((l) => (l.key === key ? { ...l, qty: l.qty + 1 } : l));
      return [...prev, { key, id: product.id, size: size || null, qty: 1 }];
    });
    setBagOpen(true);
  }, []);

  const setQty = useCallback((key, qty) => setBag((prev) => prev.map((l) => (l.key === key ? { ...l, qty } : l))), []);
  const removeLine = useCallback((key) => setBag((prev) => prev.filter((l) => l.key !== key)), []);
  const openBag = useCallback(() => setBagOpen(true), []);
  const closeBag = useCallback(() => setBagOpen(false), []);

  const bagCount = bag.reduce((s, l) => s + l.qty, 0);

  let page;
  if (route.page === "collection") page = <MCollectionPage nav={nav} route={route} />;
  else if (route.page === "product") page = <MProductPage nav={nav} route={route} addToBag={addToBag} />;
  else if (route.page === "story") page = <MStoryPage nav={nav} />;
  else page = <MHomePage nav={nav} />;

  return (
    <div className={"app" + (route.page === "home" ? " on-home" : "")}>
      <Marquee />
      <Header route={route} nav={nav} bagCount={bagCount} openBag={openBag} />
      {page}
      <Footer nav={nav} />
      <BagDrawer
        open={bagOpen}
        items={bag}
        products={products}
        close={closeBag}
        setQty={setQty}
        remove={removeLine}
        nav={nav}
      />
    </div>
  );
}

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