/* Admin → Enrollment: applications pipeline & seat capacity. */
function EnrollmentScreen() {
  const [apps, setApps] = React.useState([
    { id:1, n:'Aria Thompson', grade:'Grade 6', c:'blue', when:'Applied Jun 2', stage:'new' },
    { id:2, n:'Marcus Bell', grade:'Grade 7', c:'gold', when:'Applied Jun 1', stage:'review' },
    { id:3, n:'Lucia Moreno', grade:'Grade 6', c:'green', when:'Applied May 30', stage:'review' },
    { id:4, n:'Owen Pierce', grade:'Grade 8', c:'navy', when:'Applied May 29', stage:'accepted' },
    { id:5, n:'Zoe Nakamura', grade:'Grade 6', c:'red', when:'Applied May 27', stage:'waitlist' },
    { id:6, n:'Eli Foster', grade:'Grade 7', c:'cyan', when:'Applied May 24', stage:'enrolled' },
  ]);
  const STAGES = [
    { id:'new', label:'New', bg:'var(--blue-100)', fg:'var(--blue-600)' },
    { id:'review', label:'In Review', bg:'var(--warning-100)', fg:'var(--warning-600)' },
    { id:'accepted', label:'Accepted', bg:'var(--info-100)', fg:'var(--info-500)' },
    { id:'waitlist', label:'Waitlist', bg:'var(--gray-200)', fg:'var(--gray-600)' },
    { id:'enrolled', label:'Enrolled', bg:'var(--success-100)', fg:'var(--success-600)' },
  ];
  const meta = (s) => STAGES.find(x=>x.id===s) || STAGES[0];
  React.useEffect(() => {
    JLBackend.set('enroll', apps.map(a => ({ n:a.n, grade:a.grade, stage:a.stage, when:a.when })));
  }, [apps]);
  const advance = (id) => {
    const order = ['new','review','accepted','enrolled'];
    setApps(a => a.map(x => { if (x.id!==id) return x; const i = order.indexOf(x.stage); return { ...x, stage: i>=0 && i<order.length-1 ? order[i+1] : x.stage }; }));
    jlToast('Application advanced', { icon:'arrow-right', color:'#1F9D57' });
  };
  const count = (s) => apps.filter(a=>a.stage===s).length;
  const CAP = [
    { g:'Grade 6', filled:412, cap:440 },
    { g:'Grade 7', filled:398, cap:420 },
    { g:'Grade 8', filled:438, cap:440 },
  ];

  return (
    <div style={{ padding:'26px 32px 48px', height:'100%', overflowY:'auto', boxSizing:'border-box' }}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:20, marginBottom:22 }}>
        <StatTile icon="inbox" tint="var(--blue-100)" ic="var(--blue-500)" value={count('new')+count('review')} label="Open applications" />
        <StatTile icon="user-check" tint="var(--success-100)" ic="var(--success-600)" value={count('enrolled')} label="Enrolled this cycle" delta="+3" trend="up" />
        <StatTile icon="hourglass" tint="var(--gray-200)" ic="var(--gray-600)" value={count('waitlist')} label="Waitlisted" />
        <StatTile icon="users" tint="var(--gold-100)" ic="var(--gold-600)" value="1,248" label="Total enrolled" />
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1.5fr 1fr', gap:20 }}>
        <Panel title="Application Pipeline" action={<button onClick={()=>jlToast('New application form opened', { icon:'plus' })} style={{ display:'flex', alignItems:'center', gap:6, background:'var(--navy-600)', color:'#fff', border:0, borderRadius:9, padding:'8px 13px', fontWeight:700, fontSize:12.5, cursor:'pointer', fontFamily:'var(--font-sans)' }}><Icon name="plus" size={14} color="#fff" />Add</button>} pad={false}>
          <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1.2fr 1.2fr', padding:'11px 18px', background:'var(--gray-50)', fontSize:11, fontWeight:800, letterSpacing:'.05em', textTransform:'uppercase', color:'var(--gray-500)' }}>
            <span>Applicant</span><span>Grade</span><span>Stage</span><span style={{ textAlign:'right' }}>Action</span>
          </div>
          {apps.map((a,i) => { const m = meta(a.stage); const canAdv = a.stage!=='enrolled' && a.stage!=='waitlist'; return (
            <div key={a.id} style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1.2fr 1.2fr', alignItems:'center', padding:'12px 18px', borderTop:'1px solid var(--gray-100)', fontSize:13.5 }}>
              <span style={{ display:'flex', alignItems:'center', gap:10, minWidth:0 }}><Avatar initials={a.n.split(' ').map(w=>w[0]).join('')} color={a.c} size={30} /><span style={{ minWidth:0 }}><span style={{ display:'block', fontWeight:700, color:'var(--ink)' }}>{a.n}</span><span style={{ fontSize:11.5, color:'var(--gray-400)' }}>{a.when}</span></span></span>
              <span style={{ color:'var(--gray-600)' }}>{a.grade}</span>
              <span><Pill bg={m.bg} fg={m.fg}>{m.label}</Pill></span>
              <span style={{ justifySelf:'end' }}>{canAdv ? <button onClick={()=>advance(a.id)} style={{ display:'inline-flex', alignItems:'center', gap:6, background:'var(--navy-600)', color:'#fff', border:0, borderRadius:8, padding:'7px 12px', fontWeight:700, fontSize:12, cursor:'pointer', fontFamily:'var(--font-sans)' }}><Icon name="arrow-right" size={13} color="#fff" />Advance</button> : <span style={{ fontSize:12, color:'var(--gray-400)' }}>—</span>}</span>
            </div>
          ); })}
        </Panel>

        <Panel title="Seat Capacity">
          <div style={{ padding:'4px 0 2px', display:'flex', flexDirection:'column', gap:16 }}>
            {CAP.map(c => { const pct = Math.round((c.filled/c.cap)*100); const full = pct>=100; return (
              <div key={c.g}>
                <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:6 }}>
                  <span style={{ fontSize:13.5, fontWeight:700, color:'var(--ink)' }}>{c.g}</span>
                  <span style={{ fontSize:12.5, color:'var(--gray-500)', fontWeight:700 }}><span style={{ fontFamily:'var(--font-mono)', color:'var(--ink)' }}>{c.filled}</span> / {c.cap}</span>
                </div>
                <div style={{ height:8, borderRadius:'999px', background:'var(--gray-100)', overflow:'hidden' }}><div style={{ width:pct+'%', height:'100%', borderRadius:'999px', background: full?'var(--danger-500)':(pct>=95?'var(--warning-500)':'var(--success-500)') }} /></div>
                <div style={{ fontSize:11, color: full?'var(--danger-500)':'var(--gray-400)', marginTop:4, fontWeight:600 }}>{full?'At capacity':(c.cap-c.filled)+' seats open'}</div>
              </div>
            ); })}
          </div>
        </Panel>
      </div>
    </div>
  );
}
Object.assign(window, { EnrollmentScreen });