// Maison Dahab — app shell: hash router, cart state, tweaks
const { useState: useAState, useEffect: useAEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "charbon",
  "serif": "cormorant",
  "goldTone": "warm",
  "motion": true
}/*EDITMODE-END*/;

function useHashRoute() {
  const [hash, setHash] = useAState(window.location.hash || "#/");
  useAEffect(() => {
    const onHash = () => { setHash(window.location.hash || "#/"); };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  const nav = (h) => {
    if (window.location.hash === h) return;
    window.location.hash = h;
    window.scrollTo({ top: 0 });
  };
  return [hash, nav];
}

function parseRoute(hash) {
  const parts = hash.replace(/^#\//, "").split("/").filter(Boolean);
  if (parts[0] === "collection") return { page: "listing", catId: parts[1] || null };
  if (parts[0] === "produit" && parts[1]) return { page: "product", productId: parts[1] };
  if (parts[0] === "commande") return { page: "order" };
  return { page: "home" };
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [hash, nav] = useHashRoute();
  const route = parseRoute(hash);

  // cart — persisted
  const [cart, setCartRaw] = useAState(() => {
    try { return JSON.parse(localStorage.getItem("md_cart") || "[]"); } catch (e) { return []; }
  });
  const setCart = (c) => { setCartRaw(c); localStorage.setItem("md_cart", JSON.stringify(c)); };
  const [cartOpen, setCartOpen] = useAState(false);
  const [menuOpen, setMenuOpen] = useAState(false);

  const addToCart = (id, qty = 1) => {
    const existing = cart.find((l) => l.id === id);
    const next = existing
      ? cart.map((l) => (l.id === id ? { ...l, qty: Math.min(9, l.qty + qty) } : l))
      : [...cart, { id, qty }];
    setCart(next);
    setCartOpen(true);
  };
  const cartCount = cart.reduce((s, l) => s + l.qty, 0);

  // tweaks -> html data attributes
  useAEffect(() => {
    const root = document.documentElement;
    root.setAttribute("data-palette", t.palette === "charbon" ? "" : t.palette);
    root.setAttribute("data-serif", t.serif === "cormorant" ? "" : t.serif);
    root.setAttribute("data-gold", t.goldTone === "warm" ? "" : "pale");
    if (t.motion) root.removeAttribute("data-motion");
    else root.setAttribute("data-motion", "off");
  }, [t.palette, t.serif, t.goldTone, t.motion]);

  // lock scroll when a drawer is open
  useAEffect(() => {
    document.body.style.overflow = cartOpen || menuOpen ? "hidden" : "";
  }, [cartOpen, menuOpen]);

  const openProduct = (id) => nav(`#/produit/${id}`);

  return (
    <React.Fragment>
      <Header nav={nav} cartCount={cartCount} onOpenCart={() => setCartOpen(true)} onOpenMenu={() => setMenuOpen(true)} />

      <main>
        {route.page === "home" && <HomePage nav={nav} onOpenProduct={openProduct} onAdd={addToCart} />}
        {route.page === "listing" && <ListingPage key={route.catId || "all"} catId={route.catId} nav={nav} onOpenProduct={openProduct} onAdd={addToCart} />}
        {route.page === "product" && <ProductPage productId={route.productId} nav={nav} onAdd={addToCart} />}
        {route.page === "order" && <OrderPage cart={cart} setCart={setCart} nav={nav} />}
      </main>

      <Footer nav={nav} />
      <ContactFabs />

      {menuOpen && <MobileNav nav={nav} onClose={() => setMenuOpen(false)} />}
      {cartOpen && <CartDrawer cart={cart} setCart={setCart} onClose={() => setCartOpen(false)} nav={nav} />}

      <TweaksPanel>
        <TweakSection label="Ambiance" />
        <TweakSelect
          label="Base"
          value={t.palette}
          options={[
            { value: "charbon", label: "Charbon" },
            { value: "emeraude", label: "Émeraude" },
            { value: "bordeaux", label: "Bordeaux" },
          ]}
          onChange={(v) => setTweak("palette", v)}
        />
        <TweakRadio
          label="Ton de l'or"
          value={t.goldTone}
          options={[
            { value: "warm", label: "21k chaud" },
            { value: "pale", label: "18k pâle" },
          ]}
          onChange={(v) => setTweak("goldTone", v)}
        />
        <TweakSection label="Typographie" />
        <TweakSelect
          label="Serif"
          value={t.serif}
          options={[
            { value: "cormorant", label: "Cormorant Garamond" },
            { value: "playfair", label: "Playfair Display" },
            { value: "marcellus", label: "Marcellus" },
          ]}
          onChange={(v) => setTweak("serif", v)}
        />
        <TweakSection label="Mouvement" />
        <TweakToggle label="Animations" value={t.motion} onChange={(v) => setTweak("motion", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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