// Frangos — App root: routing, language, cart, tweaks
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E8472B",
  "showPromo": true,
  "motion": true
}/*EDITMODE-END*/;

function useHashRoute() {
  const get = () => {
    const h = window.location.hash.replace(/^#/, "");
    return h || "/";
  };
  const [route, setRoute] = React.useState(get);
  React.useEffect(() => {
    const fn = () => { setRoute(get()); window.scrollTo(0, 0); };
    window.addEventListener("hashchange", fn);
    return () => window.removeEventListener("hashchange", fn);
  }, []);
  return route;
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const route = useHashRoute();

  // language
  const [lang, setLangState] = React.useState(() => localStorage.getItem("frangos-lang") || "en");
  const setLang = (l) => { setLangState(l); localStorage.setItem("frangos-lang", l); };
  const t = I18N[lang];
  React.useEffect(() => {
    document.documentElement.lang = lang;
    document.documentElement.dir = t.dir;
    document.body.classList.toggle("lang-ar", lang === "ar");
  }, [lang]);

  // accent
  React.useEffect(() => {
    document.documentElement.style.setProperty("--accent", tweaks.accent);
  }, [tweaks.accent]);

  // motion
  const prefersReduced = React.useMemo(
    () => window.matchMedia("(prefers-reduced-motion: reduce)").matches, []);
  const motionOk = tweaks.motion && !prefersReduced;
  React.useEffect(() => {
    document.body.classList.toggle("no-motion", !motionOk);
  }, [motionOk]);

  // cart
  const [cart, setCart] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem("frangos-cart") || "[]"); } catch (e) { return []; }
  });
  React.useEffect(() => { localStorage.setItem("frangos-cart", JSON.stringify(cart)); }, [cart]);
  const cartCount = cart.reduce((s, l) => s + l.qty, 0);

  const [toast, setToast] = React.useState(null);
  const toastTimer = React.useRef(null);
  const showToast = (msg) => {
    setToast(msg);
    clearTimeout(toastTimer.current);
    toastTimer.current = setTimeout(() => setToast(null), 1800);
  };

  const addToCart = (id, heat) => {
    const key = id + ":" + (heat == null ? "x" : heat);
    setCart((c) => {
      const ex = c.find((l) => l.key === key);
      if (ex) return c.map((l) => (l.key === key ? { ...l, qty: l.qty + 1 } : l));
      return [...c, { key, id, heat, qty: 1 }];
    });
    showToast(t.toastAdded);
  };
  const setQty = (key, qty) => {
    setCart((c) => (qty <= 0 ? c.filter((l) => l.key !== key) : c.map((l) => (l.key === key ? { ...l, qty } : l))));
  };
  const removeLine = (key) => setCart((c) => c.filter((l) => l.key !== key));
  const clearCart = () => setCart([]);

  const ctx = { t, lang, setLang, route, cart, cartCount, addToCart, setQty, removeLine, clearCart, tweaks, motionOk };

  let page = null;
  if (route === "/menu") page = <MenuPage></MenuPage>;
  else if (route === "/order") page = <OrderPage></OrderPage>;
  else if (route === "/reserve") page = <ReservePage></ReservePage>;
  else if (route === "/story") page = <StoryPage></StoryPage>;
  else page = <HomePage></HomePage>;

  return (
    <AppCtx.Provider value={ctx}>
      <Nav></Nav>
      <div className="page-fade" key={route}>{page}</div>
      <Footer></Footer>
      <Toast toast={toast}></Toast>
      <TweaksPanel>
        <TweakSection label="Brand"></TweakSection>
        <TweakColor label="Accent" value={tweaks.accent} options={["#E8472B", "#C42B1F", "#E8832B"]} onChange={(v) => setTweak("accent", v)}></TweakColor>
        <TweakSection label="Sections"></TweakSection>
        <TweakToggle label="Loyalty banner" value={tweaks.showPromo} onChange={(v) => setTweak("showPromo", v)}></TweakToggle>
        <TweakSection label="Motion"></TweakSection>
        <TweakToggle label="Animations" value={tweaks.motion} onChange={(v) => setTweak("motion", v)}></TweakToggle>
      </TweaksPanel>
    </AppCtx.Provider>
  );
}

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