/* Admin → Students roster */
function StudentsScreen() {
  const [q, setQ] = React.useState('');
  const rows = [
    { n:'EJ Hatten', g:'Grade 6', id:'KMS-1042', route:'Bus #12', method:'Car Rider', status:'Enrolled', c:'green' },
    { n:'James Walker', g:'Grade 7', id:'KMS-0911', route:'Bus #12', method:'Car Rider', status:'Enrolled', c:'navy' },
    { n:'Sophia Perez', g:'Grade 6', id:'KMS-1188', route:'Walker', method:'Walker', status:'Enrolled', c:'gold' },
    { n:'Liam Carter', g:'Grade 8', id:'KMS-0733', route:'Bus #7', method:'Bus', status:'Enrolled', c:'blue' },
    { n:'Ava Mitchell', g:'Grade 7', id:'KMS-1276', route:'Bus #3', method:'Bus', status:'Pending', c:'red' },
    { n:'Noah Bennett', g:'Grade 6', id:'KMS-1305', route:'Walker', method:'Walker', status:'Enrolled', c:'cyan' },
  ];
  const list = rows.filter(r => r.n.toLowerCase().includes(q.toLowerCase()));
  return (
    <div style={{ padding:'22px 28px 40px', height:'100%', overflowY:'auto', boxSizing:'border-box' }}>
      {/* toolbar */}
      <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:16 }}>
        <div style={{ display:'flex', alignItems:'center', gap:10, background:'#fff', border:'1px solid var(--gray-200)', borderRadius:10, padding:'10px 14px', width:300 }}>
          <Icon name="search" size={17} color="var(--gray-500)" />
          <input value={q} onChange={e=>setQ(e.target.value)} placeholder="Search students" style={{ flex:1, border:0, outline:'none', fontSize:13.5, fontFamily:'var(--font-sans)' }} />
        </div>
        <button onClick={()=>jlToast('Filter students', { icon:'filter' })} style={{ display:'flex', alignItems:'center', gap:7, background:'#fff', color:'var(--ink)', border:'1px solid var(--gray-200)', borderRadius:10, padding:'10px 14px', fontWeight:700, fontSize:13.5, cursor:'pointer', fontFamily:'var(--font-sans)' }}><Icon name="filter" size={16} color="var(--gray-600)" />Filter</button>
        <button onClick={()=>jlToast('New student form opened', { icon:'user-plus' })} style={{ marginLeft:'auto', display:'flex', alignItems:'center', gap:7, background:'var(--gold-400)', color:'var(--on-gold)', border:0, borderRadius:10, padding:'10px 16px', fontWeight:700, fontSize:13.5, cursor:'pointer', fontFamily:'var(--font-sans)', boxShadow:'var(--shadow-gold)' }}><Icon name="plus" size={16} color="var(--on-gold)" />Add Student</button>
      </div>

      <Panel title={`All Students · ${list.length}`} action={<span onClick={()=>jlToast('Exporting '+list.length+' students to CSV…', { icon:'download' })} style={{ fontSize:12.5, fontWeight:700, color:'var(--blue-500)', cursor:'pointer' }}>Export CSV</span>} pad={false}>
        <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1.2fr 1.2fr 1.2fr 1fr', padding:'11px 18px', background:'var(--gray-50)', fontSize:11, fontWeight:800, letterSpacing:'.05em', textTransform:'uppercase', color:'var(--gray-500)' }}>
          <span>Student</span><span>Grade</span><span>Student ID</span><span>Transport</span><span>Pickup</span><span style={{ textAlign:'right' }}>Status</span>
        </div>
        {list.map((r,i)=>(
          <div key={i} onClick={()=>jlToast('Opening '+r.n+'\u2019s profile', { icon:'user' })} style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1.2fr 1.2fr 1.2fr 1fr', alignItems:'center', padding:'12px 18px', borderTop:'1px solid var(--gray-100)', fontSize:13.5, cursor:'pointer' }}>
            <span style={{ display:'flex', alignItems:'center', gap:10 }}><Avatar initials={r.n.split(' ').map(w=>w[0]).join('')} color={r.c} size={32} /><span style={{ fontWeight:700, color:'var(--ink)' }}>{r.n}</span></span>
            <span style={{ color:'var(--gray-600)' }}>{r.g}</span>
            <span style={{ color:'var(--gray-600)', fontFamily:'var(--font-mono)', fontSize:12.5 }}>{r.id}</span>
            <span style={{ color:'var(--gray-600)' }}>{r.route}</span>
            <span style={{ color:'var(--gray-600)' }}>{r.method}</span>
            <span style={{ justifySelf:'end' }}><Pill bg={r.status==='Enrolled'?'var(--success-100)':'var(--warning-100)'} fg={r.status==='Enrolled'?'var(--success-600)':'var(--warning-600)'}>{r.status}</Pill></span>
          </div>
        ))}
      </Panel>
    </div>
  );
}
Object.assign(window, { StudentsScreen });