/* global React, ReactDOM, Nav, Footer, HomePage, BriefingsIndex, BriefingDetail, Dashboard, LogbookPage, SignupPage, SigninPage */
const { useState, useEffect } = React;

/* ============================================================
   AUTH / GATING
   Right now there is no real authentication — `isMember()` returns
   false, so everyone sees the public site and hits the sign-up gate.
   To preview the signed-in (member) experience without a backend,
   open the site with ?preview=member on the URL.

   To wire real gating with Outseta (recommended):
     1. Add the Outseta script to index.html (see the comment there).
     2. Replace the body of isMember() with Outseta's check, e.g.:
          return !!(window.Outseta && Outseta.getUser());
     3. Point the Nav "Sign in" / SignupForm actions at Outseta's
        login/registration pop-ups instead of the local screens.
   Memberstack works the same way (swap the SDK call in isMember()).
   ============================================================ */
function isMember() {
  try {
    if (new URLSearchParams(window.location.search).get("preview") === "member") return true;
  } catch (e) { /* ignore */ }
  /* return !!(window.Outseta && Outseta.getUser());  // <- real check goes here */
  return false;
}

function App() {
  const [view, setView] = useState({ name: "home", arg: null });
  const [signedIn, setSignedIn] = useState(isMember());
  const [content, setContent] = useState(null);

  /* Content lives in content.json so it can be edited without touching code. */
  useEffect(() => {
    fetch("content.json")
      .then((r) => r.json())
      .then(setContent)
      .catch((err) => console.error("Could not load content.json", err));
  }, []);

  const nav = (name, arg) => {
    setView({ name, arg });
    window.scrollTo({ top: 0 });
  };
  const handleSignup = () => { setSignedIn(true); };
  const handleSignupComplete = () => { setSignedIn(true); nav("dashboard"); };

  let body = null;
  if (!content) {
    body = <div className="container" style={{ padding: "var(--sp-8) 0", color: "var(--slate)" }}>Loading…</div>;
  } else switch (view.name) {
    case "home": body = <HomePage content={content} onNav={nav} signedIn={signedIn} onSignup={handleSignup} />; break;
    case "briefings": body = <BriefingsIndex content={content} onNav={nav} signedIn={signedIn} />; break;
    case "briefing": body = <BriefingDetail content={content} slug={view.arg} onNav={nav} signedIn={signedIn} onSignup={handleSignup} />; break;
    case "dashboard": body = <Dashboard onNav={nav} />; break;
    case "logbook": body = <LogbookPage content={content} onNav={nav} signedIn={signedIn} />; break;
    case "signup": body = <SignupPage onDone={handleSignupComplete} />; break;
    case "signin": body = <SigninPage onDone={() => { setSignedIn(true); nav("dashboard"); }} />; break;
    default: body = <HomePage content={content} onNav={nav} signedIn={signedIn} onSignup={handleSignup} />;
  }

  return (
    <>
      <Nav active={view.name} onNav={nav} signedIn={signedIn} />
      <main>{body}</main>
      <Footer />
    </>
  );
}

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