function readInitialRoute() {
  // Map a small set of pretty URLs to internal route names so that the
  // Stripe success_url / cancel_url and a direct /admin link both work.
  const path = window.location.pathname;
  const params = new URLSearchParams(window.location.search);
  if (path === "/thank-you") return { route: "thank-you", artworkId: null };
  if (path === "/admin") return { route: "admin", artworkId: null };
  if (path === "/artwork" && params.get("id")) return { route: "artwork", artworkId: params.get("id") };
  if (path === "/gallery") return { route: "gallery", artworkId: null };
  if (path === "/privacy") return { route: "privacy", artworkId: null };
  if (path === "/terms") return { route: "terms", artworkId: null };
  return { route: "home", artworkId: null };
}

function App() {
  // Routes: home, gallery, artwork, about, collector, checkout, admin, thank-you, privacy, terms
  const init = readInitialRoute();
  const [route, setRoute] = useState(init.route);
  const [artworkId, setArtworkId] = useState(init.artworkId);
  const [menuOpen, setMenuOpen] = useState(false);
  const [cart, setCart] = useState([]);
  const [cartOpen, setCartOpen] = useState(false);
  const [toast, setToast] = useState(null);
  const [dataVersion, setDataVersion] = useState(0);

  // Re-render the whole tree when the admin saves changes to the painting store
  useEffect(() => {
    const onChange = () => setDataVersion((v) => v + 1);
    window.addEventListener("lf-paintings-updated", onChange);
    return () => window.removeEventListener("lf-paintings-updated", onChange);
  }, []);

  const navigate = useCallback((r) => {
    setRoute(r);
    setArtworkId(null);
    window.scrollTo({ top: 0, behavior: "instant" });
  }, []);

  const openArtwork = useCallback((id) => {
    setArtworkId(id);
    setRoute("artwork");
    window.scrollTo({ top: 0, behavior: "instant" });
  }, []);

  // Single-item checkout: the "addToCart" entry point creates a Stripe
  // Checkout Session via the createCheckout Cloud Function and redirects.
  const addToCart = useCallback(async (p) => {
    if (!p || !p.available) return;
    setToast(`Opening Stripe checkout for "${p.title}"…`);
    try {
      await window.lf.startCheckout(p.id);
    } catch (e) {
      console.error(e);
      setToast((e && e.message) || "Could not start checkout — please try again.");
      setTimeout(() => setToast(null), 3000);
    }
  }, []);

  const removeItem = useCallback((id) => {
    setCart((c) => c.filter((x) => x.id !== id));
  }, []);

  const clearCart = useCallback(() => setCart([]), []);

  // Clear cart after confirmation lands
  useEffect(() => {
    if (route === "checkout") {
      // no-op
    }
  }, [route]);

  let page;
  if (route === "home") page = <HomePage navigate={navigate} addToCart={addToCart} openArtwork={openArtwork} />;
  else if (route === "gallery") page = <GalleryPage navigate={navigate} openArtwork={openArtwork} addToCart={addToCart} />;
  else if (route === "artwork") page = <ArtworkPage id={artworkId || window.PAINTINGS[0].id} navigate={navigate} addToCart={addToCart} openArtwork={openArtwork} />;
  else if (route === "about") page = <AboutPage navigate={navigate} />;
  else if (route === "collector") page = <CollectorPage navigate={navigate} />;
  else if (route === "checkout") page = <CheckoutPage navigate={navigate} items={cart} clearCart={clearCart} />;
  else if (route === "admin") page = <AdminPage navigate={navigate} />;
  else if (route === "thank-you") page = <ThankYouPage navigate={navigate} />;
  else if (route === "privacy") page = <PrivacyPage navigate={navigate} />;
  else if (route === "terms") page = <TermsPage navigate={navigate} />;

  const isAdmin = route === "admin";
  const hideFooter = isAdmin || route === "checkout" || route === "thank-you";

  return (
    <div>
      {!isAdmin && <Nav route={route} navigate={navigate} cartCount={cart.length} openCart={() => setCartOpen(true)} openMenu={() => setMenuOpen(true)} />}
      {menuOpen && <MenuPanel onClose={() => setMenuOpen(false)} navigate={navigate} />}
      <main key={`${route}-${dataVersion}`}>{page}</main>
      {!hideFooter && <Footer navigate={navigate} />}
      <CartDrawer
        open={cartOpen}
        onClose={() => setCartOpen(false)}
        items={cart}
        removeItem={removeItem}
        navigate={navigate}
      />
      {toast && (
        <div style={{
          position: "fixed", bottom: 32, left: "50%", transform: "translateX(-50%)",
          background: "var(--ink)", color: "var(--warm-white)",
          padding: "14px 22px", borderRadius: 999, zIndex: 500,
          fontSize: 13, letterSpacing: "0.04em",
          boxShadow: "0 20px 40px -20px rgba(0,0,0,0.4)",
          animation: "pageFade 240ms ease both",
          display: "flex", alignItems: "center", gap: 10,
        }}>
          <span style={{ color: "var(--sunflower-soft)" }}><Icon.Check /></span>
          {toast}
        </div>
      )}
    </div>
  );
}

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