/* Parent → Wristband pairing: pair & manage the child's RFID band. */
function WristbandScreen({ onNav, onBack }) {
  const child = jlChild();
  const [paired, setPaired] = React.useState(() => { try { return localStorage.getItem('jl_band_'+child.id)==='1'; } catch(e){ return false; } });
  const [pairing, setPairing] = React.useState(false);
  const [code, setCode] = React.useState('');
  const [alerts, setAlerts] = React.useState(true);
  const [tap, setTap] = React.useState(null);
  React.useEffect(() => {
    const read = () => { try { setTap((JSON.parse(localStorage.getItem('jl_roster')||'{}'))[child.id] || null); } catch(e){} };
    read();
    const iv = setInterval(read, 1500); window.addEventListener('storage', read);
    return () => { clearInterval(iv); window.removeEventListener('storage', read); };
  }, [child.id]);
  const startPair = () => {
    if (code.trim().length < 4) { jlToast('Enter the 6-digit code on the band', { icon:'triangle-alert', color:'#E5484D' }); return; }
    setPairing(true);
    setTimeout(() => { setPairing(false); setPaired(true); try { localStorage.setItem('jl_band_'+child.id,'1'); } catch(e){} jlToast(child.first + "'s wristband paired", { icon:'check-check', color:'#1F9D57' }); }, 1400);
  };

  return (
    <div style={{ background:'var(--gray-50)', minHeight:'100%' }}>
      <PushBar title="Wristband" onBack={onBack} />
      <div style={{ padding:'14px 18px 40px' }}>
        {paired && tap && (
          <div style={{ display:'flex', alignItems:'center', gap:11, background:'var(--success-100)', borderRadius:14, padding:'13px 15px', marginBottom:14 }}>
            <span style={{ width:34, height:34, borderRadius:10, background:'var(--success-500)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name="nfc" size={17} color="#fff" /></span>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ fontSize:14, fontWeight:700, color:'var(--success-600)' }}>{child.first}'s band just tapped {tap.bus||'Bus #12'}</div>
              <div style={{ fontSize:12, color:'var(--success-600)', opacity:.85 }}>{(tap.stop?tap.stop+' · ':'')}{tap.time||''} · synced to your phone</div>
            </div>
          </div>
        )}
        {/* band hero */}
        <div style={{ background:'var(--color-grad-hero)', borderRadius:18, padding:'22px 18px', color:'#fff', boxShadow:'var(--shadow-navy)', textAlign:'center' }}>
          <div style={{ position:'relative', width:200, height:80, margin:'0 auto 14px' }}>
            <div style={{ position:'absolute', top:28, left:0, right:0, height:26, borderRadius:14, background:'linear-gradient(90deg,#2A69BC,#1935B4)', boxShadow:'inset 0 -3px 8px rgba(0,0,0,.3)' }} />
            <div style={{ position:'absolute', left:'50%', top:8, transform:'translateX(-50%)', width:76, height:64, borderRadius:14, background:'#fff', boxShadow:'0 8px 20px rgba(0,0,0,.3)', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:3 }}>
              <Icon name="nfc" size={22} color="var(--blue-700)" />
              <span style={{ fontSize:10.5, fontWeight:800, color:'var(--navy-700)' }}>{child.initials}</span>
            </div>
          </div>
          <div style={{ fontSize:19, fontWeight:800 }}>{child.first}'s Wristband</div>
          <div style={{ fontSize:12.5, color:'rgba(255,255,255,.8)', marginTop:2 }}>{paired ? 'Paired · tap-to-board active' : 'Not paired yet'}</div>
        </div>

        {!paired ? (
          <React.Fragment>
            <SectionLabel>Pair a Wristband</SectionLabel>
            <div style={{ background:'#fff', border:'1px solid var(--gray-200)', borderRadius:16, padding:'16px', boxShadow:'var(--shadow-sm)' }}>
              <div style={{ fontSize:13.5, color:'var(--gray-600)', lineHeight:1.5, marginBottom:14 }}>Enter the 6-digit code printed on the back of the band, then hold it near your phone.</div>
              <input value={code} onChange={e=>setCode(e.target.value.replace(/[^0-9]/g,'').slice(0,6))} placeholder="123456" inputMode="numeric" style={{ width:'100%', boxSizing:'border-box', textAlign:'center', letterSpacing:'.4em', fontSize:22, fontWeight:800, fontFamily:'var(--font-mono)', border:'1.5px solid var(--gray-200)', borderRadius:12, padding:'14px', outline:'none', color:'var(--ink)', marginBottom:14 }} />
              <button onClick={startPair} disabled={pairing} style={{ width:'100%', display:'flex', alignItems:'center', justifyContent:'center', gap:9, background: pairing?'var(--gray-200)':'var(--gold-400)', color: pairing?'var(--gray-500)':'var(--on-gold)', border:0, borderRadius:12, padding:'15px', fontWeight:800, fontSize:15, cursor: pairing?'default':'pointer', fontFamily:'var(--font-sans)', boxShadow: pairing?'none':'var(--shadow-gold)' }}>
                <Icon name={pairing?'loader':'nfc'} size={18} color={pairing?'var(--gray-500)':'var(--on-gold)'} />{pairing ? 'Pairing…' : 'Pair Wristband'}
              </button>
            </div>
            <div style={{ display:'flex', alignItems:'flex-start', gap:11, marginTop:14, background:'var(--info-100)', borderRadius:14, padding:'14px 15px' }}>
              <Icon name="info" size={18} color="var(--info-500)" style={{ marginTop:1 }} />
              <div style={{ fontSize:12.5, color:'var(--info-500)', lineHeight:1.5 }}>Once paired, {child.first}'s band taps the bus and gate readers to auto-update your "Where's {child.first}?" timeline — no action needed from you.</div>
            </div>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <SectionLabel>Band Status</SectionLabel>
            <div style={cardWrap}>
              <div style={{ display:'flex', alignItems:'center', gap:12, padding:'13px 14px' }}>
                <span style={{ width:38, height:38, borderRadius:10, background:'var(--success-100)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name="battery-full" size={19} color="var(--success-500)" /></span>
                <div style={{ flex:1 }}><div style={{ fontSize:14.5, fontWeight:700, color:'var(--ink)' }}>Battery</div><div style={{ fontSize:12.5, color:'var(--gray-500)' }}>82% · ~4 months left</div></div>
                <Pill bg="var(--success-100)" fg="var(--success-600)">Good</Pill>
              </div>
              <Divider />
              <div style={{ display:'flex', alignItems:'center', gap:12, padding:'13px 14px' }}>
                <span style={{ width:38, height:38, borderRadius:10, background:'var(--gold-100)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name="nfc" size={19} color="var(--gold-600)" /></span>
                <div style={{ flex:1 }}><div style={{ fontSize:14.5, fontWeight:700, color:'var(--ink)' }}>Last tap</div><div style={{ fontSize:12.5, color:'var(--gray-500)' }}>{tap ? ((tap.status==='boarded'?'Boarded ':'Tapped ') + (tap.bus||'Bus #12') + (tap.time?' · '+tap.time:'')) : 'No taps yet today'}</div></div>
                {tap && <span className="jl-pulse" style={{ width:9, height:9, borderRadius:'999px', background:'var(--success-500)', flex:'0 0 auto' }} />}
              </div>
              <Divider />
              <div style={{ display:'flex', alignItems:'center', gap:12, padding:'13px 14px' }}>
                <span style={{ width:38, height:38, borderRadius:10, background:'var(--blue-100)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name="bell" size={19} color="var(--blue-500)" /></span>
                <div style={{ flex:1 }}><div style={{ fontSize:14.5, fontWeight:700, color:'var(--ink)' }}>Tap alerts</div><div style={{ fontSize:12.5, color:'var(--gray-500)' }}>Notify me on each board/exit</div></div>
                <button onClick={()=>{ setAlerts(v=>!v); jlToast('Tap alerts ' + (!alerts?'on':'off'), { icon: !alerts?'check':'x', color: !alerts?'#1F9D57':'#E5484D' }); }} style={{ width:48, height:28, borderRadius:'999px', border:0, cursor:'pointer', padding:2, background: alerts?'var(--success-500)':'var(--gray-300)', flex:'0 0 auto', display:'flex', justifyContent: alerts?'flex-end':'flex-start' }}><span style={{ width:24, height:24, borderRadius:'999px', background:'#fff', display:'block', boxShadow:'0 1px 3px rgba(0,0,0,.2)' }} /></button>
              </div>
            </div>
            <button onClick={()=>onNav('timeline')} style={{ width:'100%', marginTop:14, 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="map-pinned" size={18} color="#fff" />See {child.first}'s Timeline</button>
            <button onClick={()=>{ setPaired(false); setCode(''); jlToast('Wristband unpaired', { icon:'unlink', color:'#E5484D' }); }} style={{ width:'100%', marginTop:9, background:'transparent', color:'var(--danger-500)', border:'1px solid var(--gray-200)', borderRadius:12, padding:'12px', fontWeight:700, fontSize:14, cursor:'pointer', fontFamily:'var(--font-sans)' }}>Unpair Band</button>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}
Object.assign(window, { WristbandScreen });