/* ============================================================
   YUZU YATAI — app root: routing, cart, overlays, tweaks
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/ {
  hero: "inmersivo",
  card: "stacked",
  yatai: 1,
  saffron: 1,
  fontDisplay: "'Bodoni Moda', serif",
  fontTitle: "'Playfair Display', serif",
}; /*EDITMODE-END*/

const ROUTES = ["inicio", "menu", "nosotros", "locales", "contacto"];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // ---- routing ----
  const [route, setRoute] = React.useState(() => {
    const h = (location.hash || "").replace("#", "");
    return ROUTES.includes(h) ? h : "inicio";
  });
  const go = React.useCallback((r) => {
    setRoute(r);
    history.replaceState(null, "", "#" + r);
    window.scrollTo({
      top: 0,
      behavior: "instant" in window ? "instant" : "auto",
    });
  }, []);
  React.useEffect(() => {
    const f = () => {
      const h = location.hash.replace("#", "");
      if (ROUTES.includes(h)) setRoute(h);
    };
    window.addEventListener("hashchange", f);
    return () => window.removeEventListener("hashchange", f);
  }, []);

  // ---- cart ----
  const [cart, setCart] = React.useState(() => {
    try {
      return JSON.parse(localStorage.getItem("yy_cart") || "[]");
    } catch {
      return [];
    }
  });
  React.useEffect(() => {
    try {
      localStorage.setItem("yy_cart", JSON.stringify(cart));
    } catch {}
  }, [cart]);

  const addToCart = (entry) =>
    setCart((c) => {
      // merge identical configurations
      const key = (l) =>
        l.item.id +
        "|" +
        l.tamano +
        "|" +
        l.extras.slice().sort().join(",") +
        "|" +
        (l.notes || "");
      const i = c.findIndex((l) => key(l) === key(entry));
      if (i >= 0) {
        const next = c.slice();
        next[i] = { ...next[i], qty: next[i].qty + entry.qty };
        return next;
      }
      return [...c, entry];
    });
  const setQty = (uid, n) =>
    setCart((c) =>
      c.map((l) => (l.uid === uid ? { ...l, qty: Math.max(1, n) } : l)),
    );
  const removeItem = (uid) => setCart((c) => c.filter((l) => l.uid !== uid));
  const cartCount = cart.reduce((s, l) => s + l.qty, 0);
  const cartTotal = cart.reduce((s, l) => s + l.unit * l.qty, 0);

  // ---- overlays / fulfillment ----
  const [item, setItem] = React.useState(null);
  const [cartOpen, setCartOpen] = React.useState(false);
  const [checkout, setCheckout] = React.useState(false);
  const [fulfillment, setFulfillment] = React.useState("retiro");

  // ---- apply tweaks to CSS vars ----
  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--yatai", String(t.yatai));
    r.setProperty("--saffron-presence", String(t.saffron));
    r.setProperty("--display", t.fontDisplay + ", Georgia, serif");
    r.setProperty("--title", t.fontTitle + ", Georgia, serif");
  }, [t.yatai, t.saffron, t.fontDisplay, t.fontTitle]);

  const openItem = (m) => setItem(m);

  // capture/automation hook (used for the design-review export)
  React.useEffect(() => {
    window.__yy = {
      setTweak,
      go,
      openItem,
      setCartOpen,
      setCheckout,
      addToCart,
      setCart,
    };
  });

  return (
    <React.Fragment>
      <Nav
        route={route}
        go={go}
        cartCount={cartCount}
        onCart={() => setCartOpen(true)}
      />

      {route === "inicio" && <Home go={go} openItem={openItem} t={t} />}
      {route === "menu" && (
        <MenuPage
          openItem={openItem}
          cartCount={cartCount}
          cartTotal={cartTotal}
          onCart={() => setCartOpen(true)}
          fulfillment={fulfillment}
          setFulfillment={setFulfillment}
          cardVariant={t.card}
        />
      )}
      {route === "nosotros" && <Nosotros go={go} />}
      {route === "locales" && <Locales go={go} />}
      {route === "contacto" && <Contacto />}

      <Footer go={go} />
      <BottomBar
        route={route}
        go={go}
        cartCount={cartCount}
        cartTotal={cartTotal}
        onCart={() => setCartOpen(true)}
      />

      {/* overlays */}
      {item && (
        <ItemModal
          item={item}
          onClose={() => setItem(null)}
          onAdd={addToCart}
        />
      )}
      <CartDrawer
        open={cartOpen}
        onClose={() => setCartOpen(false)}
        cart={cart}
        setQty={setQty}
        remove={removeItem}
        fulfillment={fulfillment}
        setFulfillment={setFulfillment}
        go={go}
        onCheckout={() => {
          setCartOpen(false);
          setCheckout(true);
        }}
      />
      {checkout && (
        <Checkout
          cart={cart}
          fulfillment={fulfillment}
          setFulfillment={setFulfillment}
          onClose={() => setCheckout(false)}
          onConfirm={() => {
            setCart([]);
            setCheckout(false);
            go("inicio");
          }}
        />
      )}

      {/* tweaks */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Variaciones" />
        <TweakSelect
          label="Hero"
          value={t.hero}
          options={[
            { value: "inmersivo", label: "Inmersivo — imagen completa" },
            { value: "split", label: "Split — texto + imagen" },
            { value: "cartel", label: "Cartel — editorial" },
          ]}
          onChange={(v) => setTweak("hero", v)}
        />
        <TweakSelect
          label="Tarjeta de plato"
          value={t.card}
          options={[
            { value: "stacked", label: "Clásica — foto arriba" },
            { value: "overlay", label: "Overlay — texto sobre foto" },
            { value: "editorial", label: "Lista — horizontal" },
          ]}
          onChange={(v) => setTweak("card", v)}
        />
        <TweakSection label="Tipografía" />
        <TweakSelect
          label="Hero y banners"
          value={t.fontDisplay}
          options={[
            { value: "'Bodoni Moda', serif", label: "Bodoni Moda" },
            { value: "'Playfair Display', serif", label: "Playfair Display" },
          ]}
          onChange={(v) => setTweak("fontDisplay", v)}
        />
        <TweakSelect
          label="Títulos"
          value={t.fontTitle}
          options={[
            { value: "'Playfair Display', serif", label: "Playfair Display" },
            { value: "'Bodoni Moda', serif", label: "Bodoni Moda" },
          ]}
          onChange={(v) => setTweak("fontTitle", v)}
        />
        <TweakSection label="Marca" />
        <TweakSlider
          label="Curva yatai"
          value={t.yatai}
          min={0.3}
          max={1.5}
          step={0.05}
          onChange={(v) => setTweak("yatai", v)}
        />
        <TweakSlider
          label="Presencia saffron"
          value={t.saffron}
          min={0.3}
          max={1.6}
          step={0.05}
          onChange={(v) => setTweak("saffron", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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