/* Admin dashboard shell — sidebar routing */
const ADMIN_META = {
  dashboard:      { title:'Dashboard',       sub:'Katy Middle School · Tuesday, May 31' },
  students:       { title:'Students',        sub:'1,248 enrolled across 4 grades' },
  academics:      { title:'Gradebook',       sub:'Period 3 · Mathematics · Grade 6' },
  pickup:         { title:'Pickup Manager',  sub:'Live dismissal · 3:31 PM' },
  transportation: { title:'Transportation',  sub:'25 buses · 12 routes' },
  messaging:      { title:'Messaging',       sub:'Broadcasts & parent threads' },
  marketplace:    { title:'Marketplace',     sub:'Programs, vendors & fundraisers' },
  payments:       { title:'Payments',        sub:'Fees, lunch & aftercare' },
  reports:        { title:'Reports',         sub:'Attendance, transport & finance' },
  settings:       { title:'Settings',        sub:'School & account configuration' },
};

function ComingSoon({ label }) {
  return (
    <div style={{ padding:'22px 28px', height:'100%', boxSizing:'border-box' }}>
      <div style={{ height:'100%', border:'1.5px dashed var(--gray-300)', borderRadius:16, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:12, color:'var(--gray-500)', background:'#fff' }}>
        <span style={{ width:56, height:56, borderRadius:16, background:'var(--gray-100)', display:'flex', alignItems:'center', justifyContent:'center' }}><Icon name="layout-template" size={26} color="var(--gray-400)" /></span>
        <div style={{ fontSize:16, fontWeight:700, color:'var(--gray-600)' }}>{label}</div>
        <div style={{ fontSize:13, maxWidth:340, textAlign:'center', lineHeight:1.5 }}>This view isn't part of the recreated mockup yet. The sidebar, chrome, and three core screens (Dashboard, Students, Pickup Manager) are built out — extend from these patterns.</div>
      </div>
    </div>
  );
}

function AdminApp() {
  const [active, setActive] = React.useState('dashboard');
  const meta = ADMIN_META[active];
  let view;
  switch (active) {
    case 'dashboard':      view = <DashboardScreen onNav={setActive} />; break;
    case 'students':       view = <StudentsScreen />; break;
    case 'academics':      view = <GradebookScreen />; break;
    case 'pickup':         view = <PickupManagerScreen />; break;
    case 'transportation': view = <TransportationScreen />; break;
    case 'messaging':      view = <MessagingScreen />; break;
    case 'marketplace':    view = <MarketplaceManagerScreen />; break;
    case 'payments':       view = <PaymentsScreen />; break;
    case 'reports':        view = <ReportsScreen />; break;
    case 'settings':       view = <SettingsScreen />; break;
    default:               view = <ComingSoon label={meta.title} />;
  }
  return (
    <div style={{ display:'flex', height:'100%', width:'100%' }}>
      <Sidebar active={active} onNav={setActive} />
      <div style={{ flex:1, display:'flex', flexDirection:'column', minWidth:0, background:'var(--gray-50)' }}>
        <Topbar title={meta.title} subtitle={meta.sub} />
        <div style={{ flex:1, minHeight:0 }}>{view}</div>
      </div>
    </div>
  );
}

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