// Root app — page routing + Tweaks integration + Discourse SSO Auth.
const { useState, useEffect } = React;

// useAuth: GET /api/auth/me -> { user: null | {id, username, email, name, avatar, admin} }
function useAuth() {
  const [user, setUser] = useState(undefined); // undefined = loading, null = anon, obj = signed-in
  useEffect(() => {
    fetch('/api/auth/me', { credentials: 'include' })
      .then(r => r.ok ? r.json() : { user: null })
      .then(d => setUser(d.user || null))
      .catch(() => setUser(null));
  }, []);
  return [user, setUser];
}

// Auth helpers (window-global so NavBar in pages.jsx can use)
window.vhAuth = {
  login:  () => { window.location.href = '/api/auth/login?return=' + encodeURIComponent(window.location.pathname); },
  signup: () => { window.location.href = '/api/auth/signup'; },
  logout: () => { window.location.href = '/api/auth/logout'; },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#ff3a2d", "#ff8a2a"],
  "carbon": true,
  "density": "regular",
  "displayFont": "Space Grotesk",
  "showTelemetry": true
}/*EDITMODE-END*/;

function App() {
  const [page, setPage] = useState({ name: "landing", params: {} });
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [user, setUser] = useAuth();

  // Apply tweaks to :root
  useEffect(() => {
    const r = document.documentElement;
    const [red, orange] = t.accent || ["#ff3a2d","#ff8a2a"];
    r.style.setProperty("--red", red);
    r.style.setProperty("--red-hi", red);
    r.style.setProperty("--orange", orange);
    r.style.setProperty("--grad", `linear-gradient(95deg, ${red} 0%, ${orange} 100%)`);
    r.style.setProperty("--display", `"${t.displayFont}", system-ui, sans-serif`);
  }, [t.accent, t.displayFont]);

  // Density: scale spacing-ish vars via class
  useEffect(() => {
    document.body.dataset.density = t.density || "regular";
  }, [t.density]);

  // go(name) or go(name, params)  — name is a string, params is optional object
  const go = (name, params = {}) => {
    setPage({ name, params });
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  const PageComp = {
    landing: LandingPage,
    forum:   ForumHomePage,
    topic:   TopicDetailPage,
    profile: ProfilePage,
    marque:  (typeof MarquePage   !== "undefined") ? MarquePage   : LandingPage,
    blog:    (typeof BlogPostPage !== "undefined") ? BlogPostPage : LandingPage,
    blogs:   (typeof BlogIndexPage!== "undefined") ? BlogIndexPage: LandingPage,
  }[page.name] || LandingPage;

  return (
    <div className={t.carbon ? "carbon" : ""} data-screen-label={page.name} style={{minHeight:"100vh",background: t.carbon ? undefined : "var(--bg)"}}>
      <NavBar page={page.name} go={go} user={user} />
      <PageComp go={go} user={user} params={page.params} />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand" />
        <TweakColor
          label="Accent palette"
          value={t.accent}
          options={[
            ["#ff3a2d", "#ff8a2a"],   // signature neon red→orange
            ["#ff1f5a", "#ff7a00"],   // hotter pink-red
            ["#00e0d3", "#7c5cff"],   // cyber teal+violet (alt)
            ["#fffd5c", "#ff6a00"],   // hi-viz amber
            ["#e8e8ea", "#c8ccd0"],   // chrome only
          ]}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakSelect
          label="Display font"
          value={t.displayFont}
          options={["Space Grotesk","Inter","JetBrains Mono"]}
          onChange={(v) => setTweak('displayFont', v)}
        />
        <TweakSection label="Surface" />
        <TweakToggle label="Carbon fibre weave" value={t.carbon} onChange={(v) => setTweak('carbon', v)} />
        <TweakRadio label="Density" value={t.density} options={["compact","regular","comfy"]} onChange={(v) => setTweak('density', v)} />

        <TweakSection label="Navigate" />
        <TweakRadio label="Page" value={page.name} options={["landing","forum","topic","profile","blogs"]} onChange={(v) => go(v)} />
      </TweaksPanel>
    </div>
  );
}

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