/* App shell — drives the click-through prototype.
   Uses a navigation history stack so "back" always returns to the previous screen. */
function ParentApp() {
  const [hist, setHist] = React.useState(['login']);
  const [convo, setConvo] = React.useState(null);
  const screen = hist[hist.length - 1];
  const isDark = screen === 'login';
  const canBack = hist.length > 1 && screen !== 'login';

  const go    = (s) => setHist(h => h[h.length - 1] === s ? h : [...h, s]);
  const back  = () => setHist(h => h.length > 1 ? h.slice(0, -1) : h);
  const reset = (s) => setHist([s]);

  let view;
  switch (screen) {
    case 'login':      view = <LoginScreen onSignIn={()=>reset('home')} />; break;
    case 'home':       view = <HomeScreen onNav={go} onBack={canBack ? back : null} />; break;
    case 'messages':   view = <MessagesScreen onNav={go} onBack={canBack ? back : null} onOpen={(c)=>{ setConvo(c); go('chat'); }} />; break;
    case 'chat':       view = <ChatScreen convo={convo} onBack={back} />; break;
    case 'transport':  view = <TransportScreen onNav={go} onBack={back} />; break;
    case 'pickup':     view = <PickupScreen onBack={back} />; break;
    case 'activities': view = <ActivitiesScreen onNav={go} onBack={back} />; break;
    case 'safety':     view = <SafetyScreen onNav={go} onBack={back} />; break;
    case 'attendance': view = <AttendanceScreen onNav={go} onBack={back} />; break;
    case 'engagement': view = <EngagementScreen onNav={go} onBack={back} />; break;
    case 'grades':     view = <GradesScreen onNav={go} onBack={back} />; break;
    case 'wallet':     view = <WalletScreen onNav={go} onBack={back} />; break;
    case 'tutor':      view = <TutorScreen onBack={back} />; break;
    case 'marketplace':view = <MarketplaceScreen onBack={back} />; break;
    case 'help':       view = <HelpScreen onNav={go} onBack={back} />; break;
    case 'profile':    view = <ProfileScreen onNav={go} onBack={canBack ? back : null} onLogout={()=>reset('login')} />; break;
    default:           view = <HomeScreen onNav={go} />;
  }

  return (
    <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:18 }}>
      <IOSDevice dark={isDark}>
        <div style={{ position:'relative', minHeight:'100%' }}>{view}</div>
      </IOSDevice>
      {/* hint when on login */}
      {screen==='login' && (
        <div style={{ fontFamily:'var(--font-sans)', fontSize:12.5, color:'var(--gray-500)' }}>
          Tap <strong style={{ color:'var(--gold-600)' }}>Sign In</strong> to explore the app
        </div>
      )}
    </div>
  );
}

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