// ============================================================
// APP SHELL — routing + Supabase auth state
// ============================================================

const KNOWN_PAGES = ['home','propfirms','basics','about','member','live','elite','admin'];

const parseHash = () => {
  const raw = window.location.hash.replace(/^#/, '');
  const [page, ...rest] = raw.split('/');
  const detail = rest[0] || null;
  const validPage = KNOWN_PAGES.includes(page) ? page : 'home';
  return { page: validPage, detail };
};

const App = () => {
  const [{ page, detail }, setRoute] = React.useState(() => parseHash());
  const [authOpen, setAuthOpen] = React.useState(false);
  const [authMode, setAuthMode] = React.useState('login'); // 'login' | 'signup' | 'apply'
  const [user, setUser] = React.useState(null); // null = guest, {} = logged-in
  const [authLoading, setAuthLoading] = React.useState(true);

  const nav = React.useCallback((id) => {
    const [targetPage, ...rest] = id.split('/');
    const targetDetail = rest[0] || null;
    setRoute({ page: targetPage, detail: targetDetail });
    window.location.hash = id;
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, []);

  React.useEffect(() => {
    const onHashChange = () => setRoute(parseHash());
    window.addEventListener('hashchange', onHashChange);
    return () => window.removeEventListener('hashchange', onHashChange);
  }, []);

  React.useEffect(() => { window.__nav = nav; }, [nav]);

  // -------- Real Supabase session + profile load ------------
  const loadProfile = React.useCallback(async (session) => {
    if (!session?.user) { setUser(null); return; }
    if (!window.sb) {
      // No backend configured — fall back to a minimal session record
      setUser({ id: session.user.id, email: session.user.email, name: session.user.email, role: 'free', elite_status: 'inactive' });
      return;
    }
    const { data, error } = await window.sb
      .from('profiles')
      .select('id, name, email, role, elite_status, elite_expires_at, marketing_consent')
      .eq('id', session.user.id)
      .maybeSingle();
    if (error || !data) {
      console.warn('[Auth] profile fetch failed, using session fallback', error);
      setUser({ id: session.user.id, email: session.user.email, name: session.user.email, role: 'free', elite_status: 'inactive' });
      return;
    }
    setUser(data);
  }, []);

  React.useEffect(() => {
    if (!window.sb) {
      setAuthLoading(false);
      return;
    }
    let mounted = true;

    window.sb.auth.getSession().then(({ data }) => {
      if (!mounted) return;
      loadProfile(data.session).finally(() => setAuthLoading(false));
    });

    const { data: sub } = window.sb.auth.onAuthStateChange((event, session) => {
      if (!mounted) return;
      loadProfile(session);
      if (event === 'SIGNED_IN' && session?.user) {
        // Fire-and-forget last-login update. PostgrestFilterBuilder is a
        // thenable, not a full Promise — use .then(onFulfilled, onRejected)
        // instead of .catch().
        window.sb.rpc('record_last_login').then(() => {}, () => {});
      }
    });
    return () => {
      mounted = false;
      sub?.subscription?.unsubscribe?.();
    };
  }, [loadProfile]);

  // Redirect non-admins away from /admin
  React.useEffect(() => {
    if (page === 'admin' && !authLoading && (!user || user.role !== 'admin')) {
      nav('home');
    }
  }, [page, user, authLoading, nav]);

  const handleLoginClick = async () => {
    if (user) {
      if (window.sb) await window.sb.auth.signOut();
      setUser(null);
      nav('home');
    } else {
      setAuthMode('login');
      setAuthOpen(true);
    }
  };

  const handleApply = () => {
    setAuthMode('apply');
    setAuthOpen(true);
  };

  // After AuthModal completes a real login/signup, Supabase fires
  // onAuthStateChange and the profile loads automatically. We just
  // close the modal and route to the member area.
  const handleAuthSuccess = (mode) => {
    setAuthOpen(false);
    if (mode !== 'apply') {
      setRoute({ page: 'member', detail: null });
      window.location.hash = 'member';
      window.scrollTo({ top: 0 });
    }
  };

  const openLogin = () => { setAuthMode('login'); setAuthOpen(true); };
  const openSignup = () => { setAuthMode('signup'); setAuthOpen(true); };
  const PageView = (() => {
    switch (page) {
      case 'home':      return <HomePage onNav={nav} onApply={handleApply} user={user} onLogin={openLogin} onSignup={openSignup}/>;
      case 'propfirms': return <PropFirmsPage onNav={nav} firmId={detail} user={user}/>;
      case 'basics':    return <BasicsPage onNav={nav} onApply={handleApply} user={user} onLogin={openLogin} onSignup={openSignup}/>;
      case 'about':     return <AboutPage onNav={nav} onApply={handleApply} user={user}/>;
      case 'member':    return <MemberPage user={user} onLogin={openLogin} onApply={handleApply} onNav={nav}/>;
      case 'live':      return <LivePage onNav={nav}/>;
      case 'elite':     return <ElitePage onNav={nav} onApply={handleApply} user={user}/>;
      case 'admin':
        if (user?.role === 'admin') return <AdminPage user={user} onNav={nav}/>;
        return <HomePage onNav={nav} onApply={handleApply}/>;
      default:          return <HomePage onNav={nav} onApply={handleApply}/>;
    }
  })();

  return (
    <>
      <Navbar current={page} onNav={nav} onLogin={handleLoginClick} isLoggedIn={!!user} user={user}/>
      <main key={`${page}/${detail || ''}`}>
        {PageView}
      </main>
      <Footer onNav={nav}/>
      {authOpen && (
        <AuthModal
          mode={authMode}
          onClose={() => setAuthOpen(false)}
          onSuccess={handleAuthSuccess}
          onSwitch={(m) => setAuthMode(m)}
        />
      )}
    </>
  );
};

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