// ============================================================
// Aroos Damascus — Root App
// ============================================================

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "damascene",
  "fontPairing": "cormorant-inter",
  "lateOverride": "auto",
  "language": "en"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRouteState] = useState(window.__BYTESGLUE_SHOWCASE_ROUTE || "home");
  const [lang, setLangState] = useState(TWEAK_DEFAULTS.language || "en");

  // Persist language across reloads + sync with tweak
  useEffect(() => {
    const stored = localStorage.getItem("ad_lang");
    if (stored === "en" || stored === "ar") setLangState(stored);
    const storedRoute = localStorage.getItem("ad_route");
    if (!window.__BYTESGLUE_SHOWCASE_ROUTE && storedRoute) setRouteState(storedRoute);
  }, []);

  const setLang = (l) => {
    setLangState(l);
    localStorage.setItem("ad_lang", l);
    setTweak("language", l);
  };
  const setRoute = (r) => {
    setRouteState(r);
    localStorage.setItem("ad_route", r);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  // Apply RTL + lang to document on every render
  useEffect(() => {
    document.documentElement.lang = lang;
    document.documentElement.dir = lang === "ar" ? "rtl" : "ltr";
  }, [lang]);

  // Apply palette to body
  useEffect(() => {
    document.body.dataset.palette = tweaks.palette;
  }, [tweaks.palette]);

  // Track route on body for nav theming
  useEffect(() => {
    document.body.dataset.route = route;
  }, [route]);

  // Apply font-pairing override via CSS vars
  useEffect(() => {
    const pairings = {
      "cormorant-inter": {
        serif: '"Cormorant Garamond", Georgia, serif',
        sans: '"Inter", system-ui, sans-serif',
      },
      "playfair-work": {
        serif: '"Playfair Display", Georgia, serif',
        sans: '"Work Sans", system-ui, sans-serif',
      },
      "fraunces-dm": {
        serif: '"Fraunces", Georgia, serif',
        sans: '"DM Sans", system-ui, sans-serif',
      },
    };
    const p = pairings[tweaks.fontPairing] || pairings["cormorant-inter"];
    document.documentElement.style.setProperty("--font-serif", p.serif);
    document.documentElement.style.setProperty("--font-sans", p.sans);
  }, [tweaks.fontPairing]);

  const renderScreen = () => {
    switch (route) {
      case "story": return <StoryScreen setRoute={setRoute} />;
      case "menu": return <MenuScreen setRoute={setRoute} />;
      case "branches": return <BranchesScreen setRoute={setRoute} />;
      case "reserve": return <ReserveScreen setRoute={setRoute} />;
      case "late-night": return <LateNightScreen setRoute={setRoute} tweaks={tweaks} />;
      case "home":
      default: return <HomeScreen setRoute={setRoute} tweaks={tweaks} />;
    }
  };

  return (
    <LangCtx.Provider value={{ lang, setLang }}>
      <Nav route={route} setRoute={setRoute} />
      <main data-screen-label={`${String(["home","story","menu","branches","reserve","late-night"].indexOf(route)+1).padStart(2,"0")} ${route}`}>
        {renderScreen()}
      </main>
      {route !== "late-night" && <Footer setRoute={setRoute} />}
      <StickyCTA setRoute={setRoute} />
      <WAFab />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Language" />
        <TweakRadio
          label="Locale"
          value={lang}
          onChange={(v) => setLang(v)}
          options={[
            { value: "en", label: "English" },
            { value: "ar", label: "العربية" },
          ]}
        />

        <TweakSection label="Palette" />
        <TweakRadio
          label="Theme"
          value={tweaks.palette}
          onChange={(v) => setTweak("palette", v)}
          options={[
            { value: "damascene", label: "Damascene" },
            { value: "warm-clay", label: "Warm clay" },
            { value: "midnight", label: "Midnight" },
          ]}
        />

        <TweakSection label="Type pairing" />
        <TweakSelect
          label="Latin fonts"
          value={tweaks.fontPairing}
          onChange={(v) => setTweak("fontPairing", v)}
          options={[
            { value: "cormorant-inter", label: "Cormorant Garamond + Inter" },
            { value: "playfair-work", label: "Playfair Display + Work Sans" },
            { value: "fraunces-dm", label: "Fraunces + DM Sans" },
          ]}
        />

        <TweakSection label="Late-night badge" />
        <TweakRadio
          label="State"
          value={tweaks.lateOverride}
          onChange={(v) => setTweak("lateOverride", v)}
          options={[
            { value: "auto", label: "Auto" },
            { value: "on", label: "Open" },
            { value: "off", label: "Closed" },
          ]}
        />
      </TweaksPanel>
    </LangCtx.Provider>
  );
}

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