// Holibags — main app + simple router
const { useState: useStateApp, useEffect: useEffectApp } = React;

const ROUTES = ["home", "products", "cart", "classes", "contact", "admin"];

function pageFromPath() {
  const p = (window.location.pathname || "/").replace(/^\//, "").split("/")[0].toLowerCase();
  if (!p) return "home";
  return ROUTES.includes(p) ? p : "home";
}

function App() {
  const [page, setPage] = useStateApp(pageFromPath);
  const [pageState, setPageState] = useStateApp({});
  const [products, setProducts] = useStateApp([]);
  const [settings, setSettings] = useStateApp({ hours: DEFAULT_HOURS, classes: DEFAULT_CLASSES });
  const [cart, setCart] = useStateApp([]);
  const [toast, setToast] = useStateApp("");

  useEffectApp(() => {
    apiFetchProducts().then(setProducts);
    apiFetchSettings().then((s) => setSettings({
      hours: Array.isArray(s.hours) && s.hours.length ? s.hours : DEFAULT_HOURS,
      classes: Array.isArray(s.classes) && s.classes.length ? s.classes : DEFAULT_CLASSES,
    }));
    setCart(loadCart());

    // Back/forward navigation should swap pages without a reload.
    const onPop = () => setPage(pageFromPath());
    window.addEventListener("popstate", onPop);

    // Stripe redirect handling — show a toast and clear the cart on success.
    const params = new URLSearchParams(window.location.search);
    if (params.get("checkout") === "success") {
      setCart([]);
      saveCart([]);
      pushToast("Thank you — your order is confirmed.");
      const url = new URL(window.location.href);
      url.search = "";
      window.history.replaceState({}, "", url.toString());
    } else if (params.get("checkout") === "cancel") {
      pushToast("Checkout cancelled — your cart is still here.");
      const url = new URL(window.location.href);
      url.search = "";
      window.history.replaceState({}, "", url.toString());
    }

    return () => window.removeEventListener("popstate", onPop);
  }, []);

  function navigate(p, state = {}) {
    setPage(p);
    setPageState(state);
    const url = p === "home" ? "/" : "/" + p;
    if (url !== window.location.pathname) {
      window.history.pushState({ page: p }, "", url);
    }
    window.scrollTo({ top: 0, behavior: "instant" });
  }

  function pushToast(msg) { setToast(msg); }

  function addToCart(product) {
    setCart((cur) => {
      const existing = cur.find((it) => it.id === product.id);
      let next;
      if (existing) {
        next = cur.map((it) => it.id === product.id ? { ...it, qty: it.qty + 1 } : it);
      } else {
        next = [...cur, { id: product.id, name: product.name, price: product.price, category: product.category, image: productPrimaryImage(product), qty: 1 }];
      }
      saveCart(next);
      return next;
    });
    pushToast(`Added "${product.name}" to your cart`);
  }
  function setQty(id, qty) {
    if (qty < 1) return;
    setCart((cur) => {
      const next = cur.map((it) => it.id === id ? { ...it, qty } : it);
      saveCart(next);
      return next;
    });
  }
  function removeItem(id) {
    setCart((cur) => {
      const next = cur.filter((it) => it.id !== id);
      saveCart(next);
      return next;
    });
  }
  function clearCart() { setCart([]); saveCart([]); }

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

  let view;
  switch (page) {
    case "home":
      view = <HomePage navigate={navigate} addToCart={addToCart} products={products} />;
      break;
    case "products":
      view = <ProductsPage products={products} addToCart={addToCart} navigate={navigate}
                           openProductId={pageState.open}
                           clearOpen={() => setPageState({})} />;
      break;
    case "cart":
      view = <CartPage cart={cart} setQty={setQty} removeItem={removeItem}
                       clearCart={clearCart} navigate={navigate} pushToast={pushToast} />;
      break;
    case "classes":
      view = <ClassesPage pushToast={pushToast} classes={settings.classes} />;
      break;
    case "contact":
      view = <ContactPage pushToast={pushToast} hours={settings.hours} />;
      break;
    case "admin":
      view = <AdminPage products={products} setProducts={setProducts}
                        settings={settings} setSettings={setSettings}
                        pushToast={pushToast} />;
      break;
    default:
      view = <HomePage navigate={navigate} addToCart={addToCart} products={products} />;
  }

  return (
    <React.Fragment>
      <a className="skip-link" href="#main">Skip to content</a>
      <Nav page={page} navigate={navigate} cartCount={cartCount} />
      {view}
      <Footer navigate={navigate} hours={settings.hours} />
      <Toast message={toast} onDone={() => setToast("")} />
      <HolibagsTweaks />
    </React.Fragment>
  );
}

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