// ============================================================
// app.jsx — assembly + real Strava connect modal
// ============================================================
function JoinModal({ open, onClose }) {
  const [going, setGoing] = useState(false);
  useEffect(() => { if (open) setGoing(false); }, [open]);
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [open]);
  if (!open) return null;
  const authorize = () => { setGoing(true); window.location.href = "/auth/login"; };
  return (
    <div className="jm-overlay" onClick={onClose}>
      <div className="jm card card-corner theme-dark" onClick={(e) => e.stopPropagation()}>
        <button className="jm-close mono" onClick={onClose} aria-label="Close">ESC ✕</button>
        <div className="jm-logo"><CyberRunnerLogo /></div>
        {!going ? (<>
          <h3 className="jm-h">Join the crew</h3>
          <p className="jm-p">Authorize read-only access to your Strava activities. Public stats only — your privacy settings are always respected.</p>
          <button className="btn btn-primary jm-go" onClick={authorize}>Authorize Strava</button>
          <div className="jm-fine mono">SCOPE: activity:read_all · PUBLIC ONLY</div>
        </>) : (<>
          <h3 className="jm-h">Establishing handshake…</h3>
          <div className="jm-term mono">
            <div>$ oauth --provider strava --scope activity:read_all</div>
            <div className="dim">→ redirecting to strava…</div>
            <div className="teal">→ authorize, then you're on the board <span className="caret">_</span></div>
          </div>
        </>)}
      </div>
      <style>{`
        .jm-overlay { position: fixed; inset: 0; z-index: 110; background: rgba(2,5,9,.78); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 24px; animation: pmfade .2s ease; }
        .jm { width: min(460px,100%); padding: 34px; text-align: center; animation: pmpop .28s cubic-bezier(.22,.61,.36,1); }
        .jm-close { position: absolute; top: 16px; right: 16px; background: transparent; border: 1px solid var(--line); color: var(--text-dim); font-size: 11px; letter-spacing: .1em; padding: 6px 10px; border-radius: 4px; cursor: pointer; transition: all .15s; }
        .jm-close:hover { color: var(--teal); border-color: var(--teal); }
        .jm-logo { height: 30px; margin: 0 auto 22px; } .jm-logo .cr-logo { height: 100%; margin: 0 auto; }
        .jm-h { font-family: var(--font-display); font-weight: 500; font-size: 28px; } .jm-h.teal { color: var(--teal); }
        .jm-p { color: var(--text-dim); font-size: 15px; line-height: 1.6; margin-top: 12px; }
        .jm-go { margin-top: 22px; }
        .jm-fine { font-size: 10px; letter-spacing: .14em; color: var(--text-faint); margin-top: 16px; }
        .jm-term { text-align: left; font-size: 13px; line-height: 1.9; margin-top: 20px; padding: 16px 18px; background: rgba(0,0,0,.4); border: 1px solid var(--line); border-radius: 6px; }
        .jm-term .dim { color: var(--text-faint); } .jm-term .teal { color: var(--teal); }
        @keyframes pmfade { from { opacity: 0; } }
        @keyframes pmpop { from { opacity: 0; transform: translateY(16px) scale(.98); } }
      `}</style>
    </div>
  );
}

function App() {
  const [selected, setSelected] = useState(null);
  const [joinOpen, setJoinOpen] = useState(false);
  const [toast, setToast] = useState(null);
  const onJoin = useCallback(() => setJoinOpen(true), []);

  // Show a success toast after the Strava OAuth redirect, then clean the URL.
  useEffect(() => {
    const p = new URLSearchParams(window.location.search);
    if (!p.has("connected")) return;
    const synced = p.get("synced");
    setToast(synced && synced !== "0"
      ? `You're on the board — ${synced} runs synced. Go run!`
      : "You're on the board! Your next runs will appear after the next sync.");
    window.history.replaceState({}, "", window.location.pathname);
    const t = setTimeout(() => setToast(null), 7000);
    return () => clearTimeout(t);
  }, []);

  return (
    <React.Fragment>
      <Nav onJoin={onJoin} />
      {toast && (
        <div className="cr-toast mono" role="status">
          <span className="cr-toast-dot" />{toast}
          <button className="cr-toast-x" onClick={() => setToast(null)} aria-label="Dismiss">✕</button>
          <style>{`
            .cr-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 130;
              display: inline-flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px);
              background: var(--teal); color: #00171a; font-weight: 600; font-size: 13px; letter-spacing: .03em;
              padding: 13px 16px; border-radius: 6px; box-shadow: 0 18px 40px -14px rgba(0,0,0,.6); animation: crtoast .35s ease; }
            .cr-toast-dot { width: 8px; height: 8px; border-radius: 50%; background: #00171a; flex: none; }
            .cr-toast-x { background: transparent; border: 0; color: #00171a; cursor: pointer; font-size: 13px; padding: 0 0 0 4px; opacity: .7; }
            .cr-toast-x:hover { opacity: 1; }
            @keyframes crtoast { from { opacity: 0; transform: translate(-50%, 12px); } }
          `}</style>
        </div>
      )}
      <main>
        <span id="top" aria-hidden="true"></span>
        <Leaderboard onSelect={setSelected} />
        <Attendance />
        <Feed />
        <Hero onJoin={onJoin} figure={true} />
        {SHOW_BADGES && <Badges onSelect={setSelected} />}
        <Story />
        <StatsGoal />
      </main>
      <Footer onJoin={onJoin} />

      <ProfileModal member={selected} onClose={() => setSelected(null)} />
      <JoinModal open={joinOpen} onClose={() => setJoinOpen(false)} />
    </React.Fragment>
  );
}

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