/* The Upper Room — app: signin → profile setup → feed. */
const { useState: useAppState, useEffect: useAppEffect } = React;

function App() {
  const [stage, setStage] = useAppState('signin'); // signin | setup | feed
  const [joined, setJoined] = useAppState(false);   // true = full member, false = guest (browse-only)
  const [flash, setFlash] = useAppState(0);
  const [view, setView] = useAppState('home');       // home | circle | post | member | me | search | saved | prayer | settings | legal-* | gatherings | messages | alerts
  const [prevView, setPrevView] = useAppState('home'); // where Back returns to for solo screens
  const [openPost, setOpenPost] = useAppState(null);
  const [openMember, setOpenMember] = useAppState(null);
  const [posts, setPosts] = useAppState(typeof FEED_POSTS !== 'undefined' ? FEED_POSTS : []);
  const [composing, setComposing] = useAppState(false);
  const [query, setQuery] = useAppState('');
  const [sharing, setSharing] = useAppState(null);     // null | {subject}
  const [preLegal, setPreLegal] = useAppState(null);   // legal page shown before sign-in
  const [authUser, setAuthUser] = useAppState(null);   // identity from /api/auth/me (prefills setup)

  // On load, ask the auth service if a session is live (set after Google redirects back).
  // v1 (LOCKED): we keep no one — a live session always routes to `setup` (all users are new).
  useAppEffect(() => {
    fetch('/api/auth/me', { credentials: 'same-origin' })
      .then(r => r.ok ? r.json() : null)
      .then(d => { if (d && d.authenticated) { setAuthUser(d.user || null); if (d.joined) { setJoined(true); setStage('feed'); } else { setStage('setup'); } } })
      .catch(() => {/* no session / service not up yet -> stay on signin */});
  }, []);

  // re-run lucide as a safety net in case any icon wrapper missed
  useAppEffect(() => { if (window.lucide && window.lucide.createIcons) { try { window.lucide.createIcons(); } catch (e) {} } });

  const goTop = function () { try { window.scrollTo({ top: 0, behavior: 'instant' }); } catch (e) {} };

  // Navigate to a view, remembering where we came from so solo screens can go Back.
  const navTo = function (v) { setView(function (cur) { setPrevView(cur); return v; }); goTop(); };

  const room = {
    canEngage: joined,
    promptComplete: function () { setFlash(function (f) { return f + 1; }); try { window.scrollTo({ top: 0, behavior: 'smooth' }); } catch (e) {} },
    resumeSetup: function () { setStage('setup'); },
    openPost: function (post) { setPrevView(view); setOpenPost(post); setView('post'); goTop(); },
    openProfile: function (person) {
      setPrevView(view);
      if (person && person.name === CURRENT_USER.name) { setView('me'); }
      else { setOpenMember(person); setView('member'); }
      goTop();
    },
    openCompose: function () { setComposing(true); },
    goView: navTo,
    search: function (q) { setQuery(q); navTo('search'); },
    share: function (subject) { setSharing({ subject: subject || 'this' }); },
    signOut: function () {
      fetch('/api/auth/signout', { method: 'POST', credentials: 'same-origin' }).catch(() => {});
      setAuthUser(null); setStage('signin'); setJoined(false); setView('home'); setQuery(''); goTop();
    },
    flash: flash,
  };

  const backTo = function () { setView(prevView || 'home'); goTop(); };

  return (
    <div className="ur">
      {preLegal && (
        <window.RoomContext.Provider value={room}>
          <div className="ur-prelegal"><LegalPage view={preLegal} onBack={() => setPreLegal(null)} /></div>
        </window.RoomContext.Provider>
      )}
      {stage === 'signin' && <SignIn onAuth={() => setStage('setup')} onLegal={(v) => setPreLegal(v)} />}
      {stage === 'setup' && (
        <ProfileSetup
          initialName={authUser && authUser.name}
          initialPhoto={authUser && authUser.photo_url}
          onSignOut={room.signOut}
          onComplete={() => { setJoined(true); setStage('feed'); }}
          onSkip={() => { setJoined(false); setStage('feed'); }}
        />
      )}
      {stage === 'feed' && (
        <window.RoomContext.Provider value={room}>
          <TopNav active={view} onNav={navTo} query={query} onSearch={room.search} />
          {view === 'home' && (
            <div className="ur-shell">
              <LeftRail />
              <Feed posts={posts} />
              <RightRail />
            </div>
          )}
          {view === 'circle' && <CirclePage />}
          {view === 'post' && openPost && <PostDetail post={openPost} onBack={backTo} />}
          {view === 'member' && <ProfilePage person={openMember} onNav={navTo} onBack={backTo} />}
          {view === 'alerts' && <AlertsPage onNav={(v) => { setView(v); goTop(); }} />}
          {view === 'gatherings' && <GatheringsPage />}
          {view === 'messages' && (joined ? <MessagesPage /> : (
            <div className="ur-placeholder">
              <div className="ur-placeholder-cross">✝</div>
              <h2>Messages</h2>
              <p>You're browsing as a guest. Set up your profile to message believers and join the conversation.</p>
              <button className="ur-primary" onClick={room.resumeSetup}>Set up my profile</button>
            </div>
          ))}
          {view === 'me' && (joined ? <ProfilePage onNav={navTo} /> : <GuestProfilePrompt />)}
          {view === 'search' && <SearchPage query={query} />}
          {view === 'saved' && (joined ? <SavedWordsPage /> : <GuestProfilePrompt />)}
          {view === 'prayer' && <PrayerWallPage />}
          {view === 'settings' && (joined ? <SettingsPage /> : <GuestProfilePrompt />)}
          {view.indexOf('legal-') === 0 && <LegalPage view={view} onBack={backTo} />}
          {composing && <ComposeModal onClose={() => setComposing(false)} onPost={(p) => { setPosts([p].concat(posts)); setView('home'); goTop(); }} />}
          {sharing && <ShareSheet subject={sharing.subject} onClose={() => setSharing(null)} />}
        </window.RoomContext.Provider>
      )}
    </div>
  );
}

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