// app.jsx — root: routing + tweaks
const { useState: useStateRoot, useEffect: useEffectRoot } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "centered",
  "accent": "Kick green",
  "glassBlur": 26,
  "bgStyle": "mesh",
  "bgGlow": 0.5
}/*EDITMODE-END*/;

const ACCENTS = { "Kick green": 140, "Emerald": 158, "Mint": 172, "Cyan": 200, "Violet": 290 };
const DIRECTIONS = { "Centered": "centered", "Split": "split", "Full-bleed": "fullbleed", "Editorial": "editorial" };

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useStateRoot("landing");

  // apply tweaks to CSS
  useEffectRoot(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent-h", String(ACCENTS[t.accent] ?? 142));
    r.style.setProperty("--glass-blur", t.glassBlur + "px");
    r.style.setProperty("--bg-glow", String(t.bgGlow));
    document.body.setAttribute("data-bg", t.bgStyle);
  }, [t]);

  const onNav = (r) => { setRoute(r); window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" }); };

  return (
    <React.Fragment>
      <div className="bgfield" />

      {route === "landing" && (
        <React.Fragment>
          <TopNav onNav={onNav} onLogin={() => onNav("login")} route={route} />
          <Landing direction={t.direction} onNav={onNav} />
          <Footer onNav={onNav} />
        </React.Fragment>
      )}

      {(route === "login" || route === "signup") && <Auth mode={route} onNav={onNav} />}

      {route === "dashboard" && <Dashboard onNav={onNav} />}

      {route === "status" && <StatusPage onNav={onNav} />}
      {route === "changelog" && <ChangelogPage onNav={onNav} />}
      {route === "discord" && <DiscordPage onNav={onNav} />}
      {route === "about" && <AboutPage onNav={onNav} />}
      {route === "refund" && <RefundPolicyPage onNav={onNav} />}
      {route === "privacy" && <PrivacyPolicyPage onNav={onNav} />}
      {route === "ai-chatbot" && <AiChatbotPage onNav={onNav} />}

      {/* Back-to-landing pill for auth/dashboard */}
      {(route === "login" || route === "signup" || route === "dashboard") && (
        <button className="btn btn-ghost btn-sm" onClick={() => onNav("landing")}
          style={{ position: "fixed", left: 16, bottom: 16, zIndex: 60, borderRadius: 999 }}>
          <span style={{ transform: "rotate(180deg)", display: "inline-flex" }}><Icon name="arrow" size={15} /></span> Home
        </button>
      )}

      <TweaksPanel>
        <TweakSection label="Landing direction" />
        <TweakRadio label="Hero layout" value={Object.keys(DIRECTIONS).find(k => DIRECTIONS[k] === t.direction) || "Centered"}
          options={Object.keys(DIRECTIONS)}
          onChange={(v) => setTweak("direction", DIRECTIONS[v])} />

        <TweakSection label="Color & glass" />
        <TweakSelect label="Accent" value={t.accent} options={Object.keys(ACCENTS)} onChange={(v) => setTweak("accent", v)} />
        <TweakSlider label="Glass blur" value={t.glassBlur} min={6} max={40} unit="px" onChange={(v) => setTweak("glassBlur", v)} />

        <TweakSection label="Background" />
        <TweakRadio label="Field" value={t.bgStyle} options={["mesh", "aurora", "spot"]} onChange={(v) => setTweak("bgStyle", v)} />
        <TweakSlider label="Vibrancy" value={t.bgGlow} min={0.3} max={1.4} step={0.1} onChange={(v) => setTweak("bgGlow", v)} />

        <TweakSection label="Jump to" />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
          {[["Landing", "landing"], ["Sign up", "signup"], ["Dashboard", "dashboard"], ["About", "about"], ["Changelog", "changelog"], ["Status", "status"], ["Discord", "discord"], ["Log in", "login"]].map(([l, r]) => (
            <TweakButton key={r} label={l} onClick={() => onNav(r)} />
          ))}
        </div>
      </TweaksPanel>
    </React.Fragment>
  );
}

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