/* 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 [childId, setChildId] = React.useState(() => {
    try { return localStorage.getItem('jl_child') || window.JL_CHILDREN[0].id; } catch(e){ return window.JL_CHILDREN[0].id; }
  });
  const screen = hist[hist.length - 1];
  const isDark = screen === 'login';
  const canBack = hist.length > 1 && screen !== 'login';

  const child = window.JL_CHILDREN.find(c => c.id === childId) || window.JL_CHILDREN[0];
  window.JL_CHILD = child;
  const switchChild = (id) => { setChildId(id); try { localStorage.setItem('jl_child', id); } catch(e){} };
  const [lang, setLang] = React.useState(() => { try { return localStorage.getItem('jl_lang') || 'en'; } catch(e){ return 'en'; } });
  window.JL_LANG = lang;
  const setLanguage = (id) => { setLang(id); try { localStorage.setItem('jl_lang', id); } catch(e){} };
  const [onboarded, setOnboarded] = React.useState(() => { try { return localStorage.getItem('jl_onboarded')==='1'; } catch(e){ return false; } });
  const finishOnboarding = () => { setOnboarded(true); try { localStorage.setItem('jl_onboarded','1'); } catch(e){} reset('home'); };

  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(onboarded ? 'home' : 'onboarding')} />; break;
    case 'onboarding': view = <OnboardingScreen onDone={finishOnboarding} />; break;
    case 'home':       view = <HomeScreen onNav={go} onBack={canBack ? back : null} child={child} childList={window.JL_CHILDREN} onSwitchChild={switchChild} />; 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 'calendar':   view = <CalendarScreen onNav={go} onBack={back} />; break;
    case 'notifications': view = <NotificationsScreen onNav={go} onBack={back} />; break;
    case 'forms':      view = <FormsScreen onNav={go} onBack={back} />; break;
    case 'health':     view = <HealthScreen onNav={go} onBack={back} />; break;
    case 'docs':       view = <DocsScreen onNav={go} onBack={back} />; break;
    case 'waitlist':   view = <WaitlistScreen onNav={go} onBack={back} />; break;
    case 'timeline':   view = <TimelineScreen onNav={go} onBack={back} />; break;
    case 'wristband':  view = <WristbandScreen onNav={go} onBack={back} />; break;
    case 'watch':      view = <WatchScreen onNav={go} onBack={back} />; break;
    case 'notifsettings': view = <NotifSettingsScreen onNav={go} onBack={back} />; break;
    case 'profile':    view = <ProfileScreen onNav={go} onBack={canBack ? back : null} onLogout={()=>reset('login')} lang={lang} onSetLang={setLanguage} />; 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 />);