// app.jsx — router shell for saraslot

const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "gold",
  "showBanner": true,
  "marqueeSpeed": "normal",
  "accent": "default"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [bannerDismissed, setBannerDismissed] = useStateA(false);
  const [route, navigate] = useHashRoute();
  const [theme, setTheme] = useThemeStore(t.theme);

  // Apply theme to root + marquee speed
  useEffectA(() => {
    document.documentElement.setAttribute("data-theme", theme);
  }, [theme]);

  useEffectA(() => {
    if (t.marqueeSpeed === "slow") {
      document.documentElement.style.setProperty("--marquee-duration", "60s");
    } else if (t.marqueeSpeed === "fast") {
      document.documentElement.style.setProperty("--marquee-duration", "18s");
    } else {
      document.documentElement.style.removeProperty("--marquee-duration");
    }
  }, [t.marqueeSpeed]);

  // Stitch tweak panel → store sync (one-way: panel drives store)
  useEffectA(() => {
    if (t.theme && t.theme !== theme) setTheme(t.theme);
  }, [t.theme]);

  const showBanner = t.showBanner && !bannerDismissed && route === "/";

  const handleThemeChange = (v) => {
    setTheme(v);
    setTweak("theme", v);
  };

  return (
    <div className="page-bg">
      <div className="app">
        {showBanner && <AppDownloadBanner onDismiss={() => setBannerDismissed(true)} />}
        <Header theme={theme} navigate={navigate} />

        {route === "/"         && <HomePage     theme={theme} />}
        {route === "/new"      && <ShopPage     theme={theme} />}
        {route === "/history"  && <HistoryPage  theme={theme} />}
        {route === "/promo"    && <PromoPage    theme={theme} />}
        {route === "/chat"     && <LiveChatPage theme={theme} />}
        {route === "/settings" && <SettingPage  theme={theme} />}

        <BottomNav theme={theme} route={route} navigate={navigate} />
      </div>

      <ThemeFab theme={theme} onChange={handleThemeChange} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio
          label="Visual identity"
          value={theme}
          options={["gold", "neon", "jade"]}
          onChange={handleThemeChange}
        />
        <div style={{
          fontSize: 10.5, lineHeight: 1.4, color: "rgba(41,38,27,.6)",
          padding: "2px 2px 6px"
        }}>
          {theme === "gold" && "Gold Rush — Premium Asian casino floor. Bold condensed sans, gold gradients, urgent."}
          {theme === "neon" && "Neon Pulse — Crypto/esports lounge. Glassmorphism, cyan→magenta, geometric tech sans."}
          {theme === "jade" && "Imperial Jade — VIP high-roller salon. Serif headlines, jade & antique gold, refined."}
        </div>

        <TweakSection label="Layout" />
        <TweakToggle
          label="Show app download banner"
          value={t.showBanner}
          onChange={(v) => { setTweak("showBanner", v); setBannerDismissed(false); }}
        />
        <TweakRadio
          label="Marquee speed"
          value={t.marqueeSpeed}
          options={["slow", "normal", "fast"]}
          onChange={(v) => setTweak("marqueeSpeed", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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