// App root — router, cart state, tweaks panel wiring
const { useState: useStateApp, useEffect: useEffectApp, useMemo: useMemoApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#e5ebd4",
  "displayFont": "Anton",
  "showAgeGate": true
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = window.useTweaks
    ? window.useTweaks(TWEAK_DEFAULTS)
    : [TWEAK_DEFAULTS, () => {}];

  const [route, setRoute] = useStateApp({ name: "home" });
  const [cart, setCart] = useStateApp([]);
  const [cartOpen, setCartOpen] = useStateApp(false);
  const [searchOpen, setSearchOpen] = useStateApp(false);
  const [ageOk, setAgeOk] = useStateApp(false);
  const [toast, setToast] = useStateApp(null);

  // Restore age-gate decision
  // useEffectApp(() => {
  //   if (!tweaks.showAgeGate) { setAgeOk(true); return; }
  //   if (localStorage.getItem("bboc-age-ok") === "1") setAgeOk(true);
  // }, [tweaks.showAgeGate]);

  // Apply tweaks to CSS vars
  useEffectApp(() => {
    document.documentElement.style.setProperty("--accent", tweaks.accent);
    document.documentElement.style.setProperty("--display-font", `"${tweaks.displayFont}"`);
  }, [tweaks]);

  const navigate = (r) => { setRoute(r); setCartOpen(false); setSearchOpen(false); };

  const addToCart = (product, opts = {}) => {
    const color = opts.color || product.colorways[0];
    const size = opts.size || null;
    const qty = opts.qty || 1;
    const key = `${product.id}|${color}|${size || "ONE"}`;
    setCart((prev) => {
      const existing = prev.find((i) => i.key === key);
      if (existing) {
        return prev.map((i) => (i.key === key ? { ...i, qty: i.qty + qty } : i));
      }
      return [
        ...prev,
        { key, id: product.id, name: product.name, price: product.price, hue: product.hue, color, size, qty },
      ];
    });
    setToast({ name: product.name, color, size });
    setTimeout(() => setToast(null), 2200);
  };

  const setQty = (key, qty) => {
    setCart((prev) => qty === 0 ? prev.filter((i) => i.key !== key) : prev.map((i) => (i.key === key ? { ...i, qty } : i)));
  };
  const removeItem = (key) => setCart((prev) => prev.filter((i) => i.key !== key));
  const cartCount = cart.reduce((s, i) => s + i.qty, 0);

  const acceptAge = () => {
    localStorage.setItem("bboc-age-ok", "1");
    setAgeOk(true);
  };

  return (
    <>
      <Nav
        route={route}
        navigate={navigate}
        cartCount={cartCount}
        openCart={() => setCartOpen(true)}
        openSearch={() => setSearchOpen(true)}
      />

      {route.name === "home" ? <Home navigate={navigate} addToCart={addToCart} /> : null}
      {route.name === "category" ? (
        <CategoryPage id={route.id} navigate={navigate} addToCart={addToCart} />
      ) : null}
      {route.name === "product" ? (
        <ProductPage id={route.id} navigate={navigate} addToCart={addToCart} />
      ) : null}

      <CartDrawer
        open={cartOpen}
        onClose={() => setCartOpen(false)}
        items={cart}
        setQty={setQty}
        removeItem={removeItem}
        navigate={navigate}
      />
      <SearchOverlay open={searchOpen} onClose={() => setSearchOpen(false)} navigate={navigate} />

      {toast ? (
        <div className="toast">
          <div className="toast-tick">✓</div>
          <div>
            <div className="toast-title">Added to bag</div>
            <div className="toast-sub">
              {toast.name} · {toast.color}
              {toast.size ? ` · ${toast.size}` : ""}
            </div>
          </div>
          <button className="btn btn-mini" onClick={() => { setToast(null); setCartOpen(true); }}>VIEW BAG</button>
        </div>
      ) : null}

      {!ageOk && tweaks.showAgeGate ? <AgeGate onAccept={acceptAge} /> : null}

      {window.TweaksPanel ? (
        <window.TweaksPanel>
          <window.TweakSection title="Brand">
            <window.TweakColor
              label="Accent color"
              value={tweaks.accent}
              onChange={(v) => setTweak("accent", v)}
              options={["#e5ebd4", "#6e8e4e", "#d1a24a", "#c63a3a", "#f4f1ea"]}
            />
            <window.TweakRadio
              label="Display font"
              value={tweaks.displayFont}
              onChange={(v) => setTweak("displayFont", v)}
              options={[
                { value: "Anton", label: "Anton" },
                { value: "Archivo Black", label: "Archivo" },
                { value: "Bebas Neue", label: "Bebas" },
              ]}
            />
            <window.TweakToggle
              label="Show 21+ age gate"
              value={tweaks.showAgeGate}
              onChange={(v) => {
                setTweak("showAgeGate", v);
                if (!v) { setAgeOk(true); localStorage.removeItem("bboc-age-ok"); }
                else { setAgeOk(false); localStorage.removeItem("bboc-age-ok"); }
              }}
            />
          </window.TweakSection>
          <window.TweakSection title="Demo">
            <window.TweakButton onClick={() => navigate({ name: "home" })}>Go to Home</window.TweakButton>
            <window.TweakButton onClick={() => navigate({ name: "product", id: "pink-mushroom-dabrig" })}>
              Go to Product (Monolith)
            </window.TweakButton>
            <window.TweakButton onClick={() => navigate({ name: "category", id: "glass" })}>
              Go to Category (Glass)
            </window.TweakButton>
            <window.TweakButton onClick={() => setCartOpen(true)}>Open cart drawer</window.TweakButton>
            <window.TweakButton onClick={() => setSearchOpen(true)}>Open search</window.TweakButton>
          </window.TweakSection>
        </window.TweaksPanel>
      ) : null}
    </>
  );
}

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