/* Parent → Enrollment status: the family's application(s) + waitlist position (reads jl_enroll). */
function WaitlistScreen({ onNav, onBack }) {
  const STAGES = {
    new:      { label:'Received',  bg:'var(--blue-100)',    fg:'var(--blue-600)',    icon:'inbox',        step:1 },
    review:   { label:'In Review', bg:'var(--warning-100)', fg:'var(--warning-600)', icon:'search',       step:2 },
    accepted: { label:'Accepted',  bg:'var(--info-100)',    fg:'var(--info-500)',    icon:'check',        step:3 },
    waitlist: { label:'Waitlisted',bg:'var(--gray-200)',    fg:'var(--gray-600)',    icon:'hourglass',    step:2 },
    enrolled: { label:'Enrolled',  bg:'var(--success-100)', fg:'var(--success-600)', icon:'party-popper', step:4 },
  };
  const meta = (s) => STAGES[s] || STAGES.new;
  // demo: this family's applicant
  const MINE = 'Zoe Nakamura';
  const [list, setList] = React.useState([]);
  React.useEffect(() => {
    const read = () => setList(JLBackend.get('enroll', []) || []);
    read();
    return JLBackend.subscribe('enroll', () => read());
  }, []);
  const mine = list.find(a => a.n === MINE) || { n:MINE, grade:'Grade 6', stage:'waitlist' };
  const m = meta(mine.stage);
  // waitlist position among waitlisted of same grade
  const wl = list.filter(a => a.stage==='waitlist' && a.grade===mine.grade);
  const pos = wl.findIndex(a => a.n === MINE);
  const STEPS = ['Received','In Review','Decision','Enrolled'];

  return (
    <div style={{ background:'var(--gray-50)', minHeight:'100%' }}>
      <PushBar title="Application Status" onBack={onBack} />
      <div style={{ padding:'14px 18px 40px' }}>
        <div style={{ background:'var(--color-grad-hero)', borderRadius:18, padding:'18px', color:'#fff', boxShadow:'var(--shadow-navy)' }}>
          <div style={{ fontSize:10, fontWeight:800, letterSpacing:'.1em', color:'rgba(255,255,255,.7)' }}>APPLICANT</div>
          <div style={{ fontSize:22, fontWeight:800, margin:'5px 0 2px' }}>{mine.n}</div>
          <div style={{ fontSize:12.5, color:'rgba(255,255,255,.8)' }}>{mine.grade} · Katy Middle School</div>
          <div style={{ display:'inline-flex', alignItems:'center', gap:7, marginTop:14, background:'rgba(255,255,255,.16)', borderRadius:'999px', padding:'7px 14px' }}>
            <Icon name={m.icon} size={15} color="var(--gold-400)" /><span style={{ fontSize:13, fontWeight:800 }}>{m.label}</span>
          </div>
        </div>

        {mine.stage==='waitlist' && (
          <div style={{ display:'flex', alignItems:'center', gap:13, marginTop:14, background:'#fff', border:'1px solid var(--gray-200)', borderRadius:16, padding:'16px', boxShadow:'var(--shadow-sm)' }}>
            <div style={{ fontSize:40, fontWeight:800, color:'var(--navy-600)', fontFamily:'var(--font-mono)', lineHeight:1 }}>#{pos>=0?pos+1:'—'}</div>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:15, fontWeight:700, color:'var(--ink)' }}>Waitlist position</div>
              <div style={{ fontSize:12.5, color:'var(--gray-500)' }}>for {mine.grade} · we'll notify you if a seat opens</div>
            </div>
          </div>
        )}

        <SectionLabel>Progress</SectionLabel>
        <div style={cardWrap}>
          {STEPS.map((s,i) => {
            const done = i+1 < m.step, cur = i+1 === m.step;
            return (
              <React.Fragment key={s}>
                {i>0 && <Divider />}
                <div style={{ display:'flex', alignItems:'center', gap:12, padding:'13px 14px' }}>
                  <span style={{ width:30, height:30, borderRadius:'999px', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto', background: done||cur?'var(--success-500)':'var(--gray-200)' }}><Icon name={done?'check':(cur?'dot':'circle')} size={done?15:14} color={done||cur?'#fff':'var(--gray-500)'} stroke={2.5} /></span>
                  <span style={{ flex:1, fontSize:14.5, fontWeight:700, color: done||cur?'var(--ink)':'var(--gray-400)' }}>{s}</span>
                  {cur && <Pill bg="var(--success-100)" fg="var(--success-600)">Current</Pill>}
                </div>
              </React.Fragment>
            );
          })}
        </div>

        <button onClick={()=>onNav('messages')} style={{ width:'100%', marginTop:16, display:'flex', alignItems:'center', justifyContent:'center', gap:9, background:'var(--navy-600)', color:'#fff', border:0, borderRadius:12, padding:'14px', fontWeight:700, fontSize:14.5, cursor:'pointer', fontFamily:'var(--font-sans)' }}>
          <Icon name="message-circle" size={18} color="#fff" />Message Admissions
        </button>
      </div>
    </div>
  );
}
Object.assign(window, { WaitlistScreen });