/* Admin dashboard shell — sidebar routing */
const ADMIN_META = {
  dashboard:      { title:'Dashboard',       sub:'Katy Middle School · Tuesday, May 31' },
  caloverview:    { title:'School Calendar',   sub:'Month view of all published events' },
  students:       { title:'Students',        sub:'1,248 enrolled across 4 grades' },
  enrollment:     { title:'Enrollment',      sub:'Applications pipeline & seat capacity' },
  academics:      { title:'Gradebook',       sub:'Period 3 · Mathematics · Grade 6' },
  attendance:     { title:'Attendance',      sub:'Absence reports & daily roll' },
  pickup:         { title:'Pickup Manager',  sub:'Live dismissal · 3:31 PM' },
  transportation: { title:'Transportation',  sub:'25 buses · 12 routes' },
  fleet:          { title:'Live Fleet Map',   sub:'Real-time bus locations & status' },
  routes:         { title:'Bus Routes',       sub:'Edit routes, stops & assignments' },
  events:         { title:'Publish Events',   sub:'Publish events to families & students' },
  forms:          { title:'Forms & Permissions', sub:'Create e-sign forms & track completion' },
  documents:      { title:'Documents',       sub:'Shared file library for families & staff' },
  messaging:      { title:'Messaging',       sub:'Broadcasts & parent threads' },
  announcements:  { title:'Announcements',   sub:'Compose & publish school-wide posts' },
  marketplace:    { title:'Marketplace',     sub:'Programs, vendors & fundraisers' },
  payments:       { title:'Payments',        sub:'Fees, lunch & aftercare' },
  billing:        { title:'Billing & Invoices', sub:'Revenue, invoices & collection status' },
  reports:        { title:'Reports',         sub:'Attendance, transport & finance' },
  engagement:     { title:'Family Engagement', sub:'Involvement analytics across the school' },
  alerts:         { title:'Emergency Alerts', sub:'Compose & broadcast urgent notices' },
  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 'caloverview':    view = <CalendarOverviewScreen />; break;
    case 'students':       view = <StudentsScreen />; break;
    case 'enrollment':     view = <EnrollmentScreen />; break;
    case 'academics':      view = <GradebookScreen />; break;
    case 'attendance':     view = <AttendanceInboxScreen />; break;
    case 'pickup':         view = <PickupManagerScreen />; break;
    case 'transportation': view = <TransportationScreen />; break;
    case 'fleet':          view = <FleetScreen />; break;
    case 'routes':         view = <RoutesScreen />; break;
    case 'events':         view = <EventsScreen />; break;
    case 'forms':          view = <FormsAdminScreen />; break;
    case 'documents':      view = <DocumentsScreen />; break;
    case 'messaging':      view = <MessagingScreen />; break;
    case 'announcements':  view = <AnnouncementsScreen />; break;
    case 'marketplace':    view = <MarketplaceManagerScreen />; break;
    case 'payments':       view = <PaymentsScreen />; break;
    case 'billing':        view = <BillingScreen />; break;
    case 'reports':        view = <ReportsScreen />; break;
    case 'engagement':     view = <EngagementAnalyticsScreen />; break;
    case 'alerts':         view = <AlertsScreen />; 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 />);