// === Mania De Jeans CG — Main App ===
const { useState, useEffect, useMemo, useCallback } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "navy-sand",
  "cardStyle": "minimal",
  "density": "normal",
  "showAnnounce": true
}/*EDITMODE-END*/;

function isAdminPath(pathname) {
  return /\/admin\/?$/.test(pathname) || /\/admin\//.test(pathname);
}

function routeFromPath(pathname) {
  if (isAdminPath(pathname)) return { screen: "admin", params: {} };
  return null;
}

function App() {
  const [route, setRoute] = useState(() => routeFromPath(window.location.pathname) || { screen: "home", params: {} });
  const [cart, setCart] = useState(() => {
    try { return JSON.parse(localStorage.getItem("mj_cart") || "[]"); } catch { return []; }
  });
  const [fav, setFav] = useState(() => {
    try { return JSON.parse(localStorage.getItem("mj_fav") || "[]"); } catch { return []; }
  });
  const [formData, setFormData] = useState(() => {
    try { return JSON.parse(localStorage.getItem("mj_form") || "{}"); } catch { return {}; }
  });
  const [shipping, setShipping] = useState(() => {
    try { return JSON.parse(localStorage.getItem("mj_shipping") || "null"); } catch { return null; }
  });
  const [lastOrder, setLastOrder] = useState(null);
  const [toastMessage, setToastMessage] = useState("");
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Persist
  useEffect(() => { localStorage.setItem("mj_cart", JSON.stringify(cart)); }, [cart]);
  useEffect(() => { localStorage.setItem("mj_fav", JSON.stringify(fav)); }, [fav]);
  useEffect(() => { localStorage.setItem("mj_form", JSON.stringify(formData)); }, [formData]);
  useEffect(() => { localStorage.setItem("mj_shipping", JSON.stringify(shipping)); }, [shipping]);

  // Apply palette to document
  useEffect(() => {
    document.documentElement.dataset.palette = t.palette || "navy-sand";
  }, [t.palette]);

  useEffect(() => {
    const onPopState = () => {
      const fromPath = routeFromPath(window.location.pathname);
      if (fromPath) setRoute(fromPath);
      else if (route.screen === "admin") setRoute({ screen: "home", params: {} });
    };
    window.addEventListener("popstate", onPopState);
    return () => window.removeEventListener("popstate", onPopState);
  }, [route.screen]);

  const go = useCallback((screen, params = {}) => {
    setRoute({ screen, params });
    if (screen === "admin") {
      if (!isAdminPath(window.location.pathname)) {
        window.history.pushState(null, "", new URL("admin/", window.location.href).pathname);
      }
    } else if (isAdminPath(window.location.pathname)) {
      window.history.pushState(null, "", new URL("../", window.location.href).pathname);
    }
    window.scrollTo(0, 0);
  }, []);

  const addToCart = useCallback((item) => {
    setCart(c => {
      const idx = c.findIndex(x => x.productId === item.productId && x.size === item.size);
      if (idx >= 0) {
        const next = [...c];
        next[idx] = { ...next[idx], qty: next[idx].qty + item.qty };
        return next;
      }
      return [...c, item];
    });
  }, []);

  const updateCartItem = useCallback((idx, qty) => {
    setCart(c => c.map((x, i) => i === idx ? { ...x, qty } : x));
  }, []);

  const removeCartItem = useCallback((idx) => {
    setCart(c => c.filter((_, i) => i !== idx));
  }, []);

  const clearCart = useCallback(() => {
    setCart([]);
    setShipping(null);
  }, []);

  const completeOrder = useCallback((order) => {
    setLastOrder(order);
    clearCart();
  }, [clearCart]);

  const toggleFav = useCallback((id) => {
    setFav(f => f.includes(id) ? f.filter(x => x !== id) : [...f, id]);
  }, []);

  const toast = useCallback((msg) => setToastMessage(msg), []);

  const cartCount = cart.reduce((s, x) => s + x.qty, 0);
  const [products, setProducts] = useState(() => window.MJ_PRODUCTS);

  useEffect(() => {
    window.MJ_PRODUCTS = products;
  }, [products]);

  useEffect(() => {
    if (window.MJ_loadCatalogLookups) {
      window.MJ_loadCatalogLookups().catch(() => {});
    }
  }, []);

  useEffect(() => {
    if (!window.MJ_fetchProducts) return;
    window.MJ_fetchProducts()
      .then((list) => { if (list.length) setProducts(list); })
      .catch(() => { /* mantém catálogo local como fallback */ });
  }, []);

  const cardStyle = t.cardStyle || "minimal";
  const density = t.density || "normal";

  const showHeader = !["whatsapp", "confirm", "admin"].includes(route.screen);
  const showFooter = !["whatsapp", "confirm", "admin"].includes(route.screen);

  return (
    <div className="app">
      {showHeader && <Header route={route} go={go} cartCount={cartCount}/>}

      {route.screen === "home" && <ScreenHome go={go}/>}
      {route.screen === "catalog" && <ScreenCatalog route={route} go={go} addToCart={addToCart} fav={fav} toggleFav={toggleFav} cardStyle={cardStyle} density={density} toast={toast}/>}
      {route.screen === "product" && <ScreenProduct route={route} go={go} addToCart={addToCart} fav={fav} toggleFav={toggleFav} cardStyle={cardStyle} density={density} toast={toast} shipping={shipping} setShipping={setShipping}/>}
      {route.screen === "cart" && <ScreenCart cart={cart} products={products} go={go} updateCartItem={updateCartItem} removeCartItem={removeCartItem} toast={toast} shipping={shipping} setShipping={setShipping}/>}
      {route.screen === "checkout" && <ScreenCheckout cart={cart} products={products} go={go} toast={toast} formData={formData} setFormData={setFormData} completeOrder={completeOrder} shipping={shipping} setShipping={setShipping}/>}
      {route.screen === "whatsapp" && <ScreenWhatsApp cart={cart} products={products} formData={formData} go={go} clearCart={clearCart} shipping={shipping}/>}
      {route.screen === "confirm" && <ScreenConfirm lastOrder={lastOrder} go={go}/>}
      {route.screen === "admin" && <ScreenAdmin go={go} toast={toast}/>}
      {route.screen === "inst" && <ScreenInstitutional route={route} go={go}/>}

      {showFooter && <Footer go={go} flushTop={route.screen === "home"}/>}

      {/* WhatsApp FAB — visible on non-whatsapp screens */}
      {!["whatsapp", "admin"].includes(route.screen) && (
        <a className="wp-fab" href={window.MJ_WHATSAPP.url} target="_blank" rel="noopener noreferrer" aria-label="WhatsApp">
          <Icon.WhatsApp s={26}/>
        </a>
      )}

      <Toast message={toastMessage} onClose={() => setToastMessage("")}/>

      {/* Tweaks panel — toggled via toolbar */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Paleta">
          <TweakRadio
            label="Cores"
            value={t.palette}
            options={[
              { value: "navy-sand", label: "Denim" },
              { value: "charcoal-rust", label: "Carvão" },
              { value: "indigo-cream", label: "Índigo" },
            ]}
            onChange={(v) => setTweak("palette", v)}
          />
        </TweakSection>
        <TweakSection label="Card de produto">
          <TweakRadio
            label="Estilo"
            value={t.cardStyle}
            options={[
              { value: "minimal", label: "Minimal" },
              { value: "editorial", label: "Editorial" },
              { value: "framed", label: "Branco" },
            ]}
            onChange={(v) => setTweak("cardStyle", v)}
          />
        </TweakSection>
        <TweakSection label="Densidade do catálogo">
          <TweakRadio
            label="Grid"
            value={t.density}
            options={[
              { value: "compact", label: "Compacto" },
              { value: "normal", label: "Normal" },
              { value: "airy", label: "Espaçoso" },
            ]}
            onChange={(v) => setTweak("density", v)}
          />
        </TweakSection>
        <TweakSection label="Navegação">
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:6}}>
            <TweakButton label="Home" onClick={() => go("home")}/>
            <TweakButton label="Catálogo" onClick={() => go("catalog")}/>
            <TweakButton label="Produto" onClick={() => go("product", { id: "p001" })}/>
            <TweakButton label="Carrinho" onClick={() => go("cart")}/>
            <TweakButton label="Checkout" onClick={() => go("checkout")}/>
            <TweakButton label="WhatsApp" onClick={() => go("whatsapp")}/>
            <TweakButton label="Admin" onClick={() => go("admin")}/>
            <TweakButton label="FAQ" onClick={() => go("inst", { tab: "faq" })}/>
          </div>
        </TweakSection>
        <TweakSection label="Ações de teste">
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:6}}>
            <TweakButton label="+ Itens demo" onClick={() => {
              addToCart({ productId: "p001", size: "40", qty: 1 });
              addToCart({ productId: "p005", size: "38", qty: 2 });
              toast("3 itens no carrinho");
            }}/>
            <TweakButton label="Limpar carrinho" secondary onClick={() => { clearCart(); toast("Carrinho limpo"); }}/>
          </div>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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