// Main App: routing, global state, tweaks, mounts into #root.

const { useState: useStateA, useEffect: useEffectA, useMemo: useMemoA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryColor": "#111111"
}/*EDITMODE-END*/;

function App() {
  const [route, _setRoute] = useStateA(() => {
    try { return localStorage.getItem('fdl.route') || 'home'; } catch { return 'home'; }
  });
  const setRoute = (r) => { _setRoute(r); try { localStorage.setItem('fdl.route', r); } catch {} window.scrollTo({ top: 0 }); };
  const [cart, setCart] = useStateA([]);
  const [cartOpen, setCartOpen] = useStateA(false);
  const [product, setProduct] = useStateA(null);
  const [initialCat, setInitialCat] = useStateA(null);
  const goToBoutique = (cat) => { setInitialCat(cat || null); setRoute('boutique'); };
  const [primaryColor, setPrimaryColor] = useStateA(TWEAK_DEFAULTS.primaryColor);
  const [tweaksOpen, setTweaksOpen] = useStateA(false);
  const [editModeActive, setEditModeActive] = useStateA(false);



  // Apply primary color as CSS var
  useEffectA(() => {
    document.documentElement.style.setProperty('--primary', primaryColor);
  }, [primaryColor]);

  // Edit-mode integration
  useEffectA(() => {
    function handle(e) {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') setEditModeActive(true);
      else if (d.type === '__deactivate_edit_mode') { setEditModeActive(false); setTweaksOpen(false); }
    }
    window.addEventListener('message', handle);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handle);
  }, []);

  function updatePrimary(hex) {
    setPrimaryColor(hex);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { primaryColor: hex } }, '*');
  }

  function addToCart(product, qty, ribbon) {
    setCart(c => [...c, { product, qty, ribbon }]);
    setCartOpen(true);
  }
  function removeItem(i) { setCart(c => c.filter((_, idx) => idx !== i)); }
  function updateQty(i, qty) { setCart(c => c.map((it, idx) => idx === i ? { ...it, qty } : it)); }

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

  return (
    <div>
      <NavBar
        route={route}
        setRoute={setRoute}
        cartCount={cartCount}
        onOpenCart={() => setCartOpen(true)}
        onOpenTweaks={() => setTweaksOpen(true)}
      />
      <div className="animate-fadeIn" key={route}>
        {route === 'home' && <HomePage setRoute={setRoute} openProduct={setProduct} goToBoutique={goToBoutique} />}
        {route === 'boutique' && <BoutiquePage openProduct={setProduct} initialCat={initialCat} />}
        {route === 'tanatorios' && <TanatoriosPage setRoute={setRoute} />}
        {route === 'contact' && <ContactPage setRoute={setRoute} />}
        {route === 'apropos' && <AProposPage setRoute={setRoute} />}
      </div>
      <Footer setRoute={setRoute} />
      <ProductModal product={product} onClose={() => setProduct(null)} onAddToCart={addToCart} />
      <CartDrawer open={cartOpen} onClose={() => setCartOpen(false)} cart={cart} removeItem={removeItem} updateQty={updateQty} />
      <TweaksPanel open={tweaksOpen || editModeActive} onClose={() => { setTweaksOpen(false); }} primaryColor={primaryColor} setPrimaryColor={updatePrimary} />
    </div>
  );
}

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