/* ============================================================
   App (versión animada) — routing + cart + tweaks + fly-to-cart
   ============================================================ */

const PH_FONTS = {
  "Plus Jakarta Sans":   { fam: '"Plus Jakarta Sans", system-ui, sans-serif', w: 800, tr: "none", ls: "-0.035em" },
  "Bricolage Grotesque": { fam: '"Bricolage Grotesque", system-ui, sans-serif', w: 700, tr: "none", ls: "-0.02em" },
  "Anton":               { fam: '"Anton", system-ui, sans-serif',               w: 400, tr: "none", ls: "0.005em" },
  "Space Grotesk":       { fam: '"Space Grotesk", system-ui, sans-serif',       w: 700, tr: "none", ls: "-0.02em" },
  "Instrument Serif":    { fam: '"Instrument Serif", Georgia, serif',           w: 400, tr: "none", ls: "-0.01em" },
  "Archivo Black":       { fam: '"Archivo Black", system-ui, sans-serif',       w: 400, tr: "none", ls: "-0.01em" },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "motion": 100,
  "displayFont": "Plus Jakarta Sans"
}/*EDITMODE-END*/;

/* fly a mini-pizza from the live stage to the cart button */
function flyToCart() {
  const src = document.querySelector(".lp-size") || document.querySelector(".stage");
  const cart = document.querySelector(".cart-btn");
  if (!src || !cart) return;
  const s = src.getBoundingClientRect(), c = cart.getBoundingClientRect();
  const size = 60;
  const fly = document.createElement("div");
  fly.className = "fly-pizza";
  fly.style.width = fly.style.height = size + "px";
  const sx = s.left + s.width / 2 - size / 2, sy = s.top + s.height / 2 - size / 2;
  fly.style.left = sx + "px"; fly.style.top = sy + "px";
  document.body.appendChild(fly);
  const dx = (c.left + c.width / 2) - (s.left + s.width / 2);
  const dy = (c.top + c.height / 2) - (s.top + s.height / 2);
  const anim = fly.animate([
    { transform: "translate(0,0) scale(1) rotate(0deg)", opacity: 1 },
    { transform: `translate(${dx * 0.5}px, ${dy * 0.5 - 90}px) scale(.78) rotate(150deg)`, opacity: 1, offset: .55 },
    { transform: `translate(${dx}px, ${dy}px) scale(.16) rotate(340deg)`, opacity: .4 },
  ], { duration: 760, easing: "cubic-bezier(.5,.05,.7,1)" });
  anim.onfinish = () => {
    fly.remove();
    cart.classList.add("bump");
    setTimeout(() => cart.classList.remove("bump"), 520);
  };
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState("home");
  const [routeItem, setRouteItem] = useState(null);
  const [cat, setCat] = useState(null);
  const [mode, setMode] = useState("pickup");
  const [cart, setCart] = useState([
    { ...window.PHData.PIZZAS[1], _size: "Mediana", _dough: "Masa Tradicional", qty: 1 },
  ]);
  const [toast, setToast] = useState("");
  const toastTimer = useRef(null);

  const motion = Math.max(0, (t.motion ?? 100) / 100);
  const font = PH_FONTS[t.displayFont] || PH_FONTS["Bricolage Grotesque"];

  const appStyle = {
    "--motion": motion,
    "--orbit-show": motion > 0 ? 1 : 0,
    "--steam-show": motion > 0 ? 1 : 0,
    "--display": font.fam,
    "--display-wght": font.w,
    "--display-transform": font.tr,
    "--display-tracking": font.ls,
  };

  const showToast = (msg) => {
    setToast(msg);
    clearTimeout(toastTimer.current);
    toastTimer.current = setTimeout(() => setToast(""), 2200);
  };

  const go = (r, item) => {
    setRouteItem(item || null);
    setRoute(r);
    window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" });
  };

  const addItem = (item) => {
    setCart(prev => [...prev, { ...item, qty: item.qty || 1 }]);
    showToast(`${item.name} añadido al pedido`);
  };

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

  const pickCat = (c) => {
    setCat(c);
    if (c === "ofertas") go("home"); else go("menu");
  };

  return (
    <div className="app" data-theme="fresco" style={appStyle}>
      <NavBar mode={mode} setMode={setMode} cartCount={cartCount}
        go={(r, it) => { if (r === "home") setCat(null); go(r, it); }} onCartClick={() => go("cart")}
        active={route === "menu" ? (cat || "pizza") : cat} onPick={pickCat} />

      <div className="route-fade" key={route}>
        {route === "home" && <HomeScreen mode={mode} setMode={setMode} go={go} addItem={addItem} />}
        {route === "menu" && <MenuScreen go={go} addItem={addItem} />}
        {route === "product" && <ProductBuilder item={routeItem} go={go} addItem={addItem} motion={motion} onFly={flyToCart} />}
        {route === "cart" && <CartScreen cart={cart} setCart={setCart} go={go} mode={mode} />}
        {route === "checkout" && <CheckoutScreen cart={cart} go={go} mode={mode} onPlace={() => { showToast("¡Pedido confirmado! 🎉"); go("home"); }} />}
      </div>

      <Footer />

      <div className={"toast" + (toast ? " show" : "")}>
        <span className="t-check"><Icon name="check" size={14} /></span>{toast}
      </div>

      <TweaksPanel>
        <TweakSection label="Movimiento" />
        <TweakSlider label="Intensidad de animación" value={t.motion} min={0} max={160} step={10} unit="%"
          onChange={(v) => setTweak("motion", v)} />
        <TweakSection label="Tipografía" />
        <TweakSelect label="Fuente display" value={t.displayFont}
          options={Object.keys(PH_FONTS)}
          onChange={(v) => setTweak("displayFont", v)} />
      </TweaksPanel>
    </div>
  );
}

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