/* Admin → Pickup Manager: live dismissal queue control */
function PickupManagerScreen() {
  const init = [
    { n:'EJ Hatten', g:'Grade 6', method:'Car Rider', lane:'Lane 2', t:'3:30 PM', state:'waiting', c:'green' },
    { n:'James Walker', g:'Grade 7', method:'Car Rider', lane:'Lane 1', t:'3:31 PM', state:'waiting', c:'navy' },
    { n:'Liam Carter', g:'Grade 8', method:'Bus #12', lane:'Bus Bay', t:'3:32 PM', state:'onbus', c:'blue' },
    { n:'Sophia Perez', g:'Grade 6', method:'Walker', lane:'Gate A', t:'3:31 PM', state:'released', c:'gold' },
    { n:'Ava Mitchell', g:'Grade 7', method:'Car Rider', lane:'Lane 3', t:'3:33 PM', state:'waiting', c:'red' },
  ];
  const [rows, setRows] = React.useState(init);
  const release = (i) => setRows(rs => rs.map((r,idx)=> idx===i ? { ...r, state:'released' } : r));
  const [arrived, setArrived] = React.useState({});
  React.useEffect(() => {
    const read = () => { try { const pk = JSON.parse(localStorage.getItem('jl_pickup') || '{}'); const byName = {}; Object.values(pk).forEach(v => { if (v && v.arrived) byName[v.name] = v; }); setArrived(byName); } catch(e){} };
    read();
    const onStore = (e) => { if (e.key === 'jl_pickup') read(); };
    window.addEventListener('storage', onStore);
    const iv = setInterval(read, 1500);
    return () => { window.removeEventListener('storage', onStore); clearInterval(iv); };
  }, []);

  const counts = {
    arrived: rows.filter(r=>arrived[r.n] && r.state!=='released').length,
    waiting: rows.filter(r=>r.state==='waiting').length,
    released: rows.filter(r=>r.state==='released').length,
  };
  const stateMeta = {
    waiting: { label:'Waiting', bg:'var(--gray-200)', fg:'var(--gray-600)' },
    onbus: { label:'On Bus', bg:'var(--blue-100)', fg:'var(--blue-600)' },
    released: { label:'Released', bg:'var(--success-100)', fg:'var(--success-600)' },
  };

  return (
    <div style={{ padding:'22px 28px 40px', height:'100%', overflowY:'auto', boxSizing:'border-box' }}>
      {/* count tiles */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16, marginBottom:18 }}>
        <StatTile icon="car-front" tint="var(--gold-100)" ic="var(--gold-600)" value={counts.arrived} label="Parents Arrived" delta="Live" deltaColor="var(--gold-600)" />
        <StatTile icon="clock" tint="var(--gray-200)" ic="var(--gray-600)" value={counts.waiting} label="Waiting in Queue" delta="Live" deltaColor="var(--gray-500)" />
        <StatTile icon="circle-check-big" tint="var(--success-100)" ic="var(--success-600)" value={counts.released} label="Released Today" delta="+ as you go" deltaColor="var(--success-500)" />
      </div>

      <Panel title="Dismissal Queue (Live)" action={<span style={{ display:'inline-flex', alignItems:'center', gap:6, fontSize:12.5, fontWeight:700, color:'var(--success-600)' }}><span style={{ width:8, height:8, borderRadius:'999px', background:'var(--success-500)' }} />Live</span>} pad={false}>
        <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1.2fr 1fr 1fr 1.2fr', 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>Method</span><span>Lane</span><span>Status</span><span style={{ textAlign:'right' }}>Action</span>
        </div>
        {rows.map((r,i)=>{
          const m = stateMeta[r.state];
          return (
            <div key={i} style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1.2fr 1fr 1fr 1.2fr', alignItems:'center', padding:'12px 18px', borderTop:'1px solid var(--gray-100)', fontSize:13.5 }}>
              <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)' }}>{r.method}</span>
              <span style={{ color:'var(--gray-600)' }}>{r.lane}</span>
              <span><Pill bg={m.bg} fg={m.fg}>{m.label}</Pill>{arrived[r.n] && r.state!=='released' && <span style={{ display:'inline-flex', alignItems:'center', gap:5, marginLeft:8, fontSize:11.5, fontWeight:700, color:'var(--gold-600)' }}><span className="jl-pulse" style={{ width:7, height:7, borderRadius:'999px', background:'var(--gold-500)', display:'inline-block' }} />Here</span>}</span>
              <span style={{ justifySelf:'end' }}>
                {r.state==='released'
                  ? <span style={{ fontSize:12.5, color:'var(--gray-400)', fontWeight:600 }}>Done</span>
                  : <button onClick={()=>release(i)} style={{ background:'var(--navy-600)', color:'#fff', border:0, borderRadius:8, padding:'7px 13px', fontWeight:700, fontSize:12.5, cursor:'pointer', fontFamily:'var(--font-sans)' }}>Mark Released</button>}
              </span>
            </div>
          );
        })}
      </Panel>
    </div>
  );
}
Object.assign(window, { PickupManagerScreen });