/* Parent → Notification Settings: per-category channel toggles, quiet hours. */
function NotifSettingsScreen({ onNav, onBack }) {
  const CATS = [
    { id:'alerts',  icon:'siren',          tint:'var(--danger-100)',  ic:'var(--danger-500)',  label:'Emergency alerts', sub:'Always on for safety', locked:true },
    { id:'pickup',  icon:'car-front',      tint:'var(--gold-100)',    ic:'var(--gold-600)',    label:'Pickup & bus',     sub:'Boarding, arrivals, delays' },
    { id:'attend',  icon:'calendar-check', tint:'var(--warning-100)', ic:'var(--warning-600)', label:'Attendance',       sub:'Absences & tardies' },
    { id:'grades',  icon:'graduation-cap', tint:'var(--blue-100)',    ic:'var(--blue-500)',    label:'Grades & feedback', sub:'New grades and teacher notes' },
    { id:'messages',icon:'message-circle', tint:'var(--info-100)',    ic:'var(--info-500)',    label:'Messages',          sub:'Teacher & school replies' },
    { id:'payments',icon:'wallet',         tint:'var(--success-100)', ic:'var(--success-500)', label:'Payments',          sub:'Low balance & receipts' },
    { id:'events',  icon:'calendar-days',  tint:'var(--gold-100)',    ic:'var(--gold-600)',    label:'Events & announcements', sub:'Calendar & school news' },
  ];
  const load = () => { try { return JSON.parse(localStorage.getItem('jl_notif')||'null'); } catch(e){ return null; } };
  const [prefs, setPrefs] = React.useState(() => load() || { alerts:{push:true,sms:true}, pickup:{push:true,sms:true}, attend:{push:true,sms:false}, grades:{push:true,sms:false}, messages:{push:true,sms:false}, payments:{push:true,sms:false}, events:{push:false,sms:false} });
  const [quiet, setQuiet] = React.useState(true);
  const save = (next) => { setPrefs(next); try { localStorage.setItem('jl_notif', JSON.stringify(next)); } catch(e){} };
  const toggle = (cat, ch) => { const c = CATS.find(x=>x.id===cat); if (c.locked) return; save({ ...prefs, [cat]: { ...prefs[cat], [ch]: !prefs[cat][ch] } }); };
  const Tog = ({ on, onClick, locked }) => (
    <button onClick={onClick} style={{ width:44, height:26, borderRadius:'999px', border:0, cursor: locked?'default':'pointer', padding:2, background: on?'var(--success-500)':'var(--gray-300)', opacity: locked?.6:1, flex:'0 0 auto', display:'flex', justifyContent: on?'flex-end':'flex-start' }}><span style={{ width:22, height:22, borderRadius:'999px', background:'#fff', display:'block', boxShadow:'0 1px 3px rgba(0,0,0,.2)' }} /></button>
  );

  return (
    <div style={{ background:'var(--gray-50)', minHeight:'100%' }}>
      <PushBar title="Notifications" onBack={onBack} />
      <div style={{ padding:'14px 18px 40px' }}>
        <div style={{ display:'grid', gridTemplateColumns:'auto 52px 52px', alignItems:'center', gap:0, padding:'0 4px 8px' }}>
          <span></span>
          <span style={{ fontSize:11, fontWeight:800, letterSpacing:'.06em', textTransform:'uppercase', color:'var(--gray-500)', textAlign:'center' }}>Push</span>
          <span style={{ fontSize:11, fontWeight:800, letterSpacing:'.06em', textTransform:'uppercase', color:'var(--gray-500)', textAlign:'center' }}>SMS</span>
        </div>
        <div style={cardWrap}>
          {CATS.map((c,i) => (
            <React.Fragment key={c.id}>
              {i>0 && <Divider />}
              <div style={{ display:'grid', gridTemplateColumns:'auto 52px 52px', alignItems:'center', padding:'12px 14px' }}>
                <div style={{ display:'flex', alignItems:'center', gap:12, minWidth:0 }}>
                  <span style={{ width:36, height:36, borderRadius:10, background:c.tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name={c.icon} size={18} color={c.ic} /></span>
                  <div style={{ minWidth:0 }}><div style={{ fontSize:14, fontWeight:700, color:'var(--ink)', display:'flex', alignItems:'center', gap:6 }}>{c.label}{c.locked && <Icon name="lock" size={12} color="var(--gray-400)" />}</div><div style={{ fontSize:12, color:'var(--gray-500)' }}>{c.sub}</div></div>
                </div>
                <span style={{ justifySelf:'center' }}><Tog on={prefs[c.id].push} locked={c.locked} onClick={()=>toggle(c.id,'push')} /></span>
                <span style={{ justifySelf:'center' }}><Tog on={prefs[c.id].sms} locked={c.locked} onClick={()=>toggle(c.id,'sms')} /></span>
              </div>
            </React.Fragment>
          ))}
        </div>

        <SectionLabel>Quiet Hours</SectionLabel>
        <div style={{ display:'flex', alignItems:'center', gap:12, background:'#fff', border:'1px solid var(--gray-200)', borderRadius:14, padding:'14px 15px', boxShadow:'var(--shadow-sm)' }}>
          <span style={{ width:38, height:38, borderRadius:10, background:'var(--gray-100)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name="moon" size={18} color="var(--gray-600)" /></span>
          <div style={{ flex:1 }}><div style={{ fontSize:14.5, fontWeight:700, color:'var(--ink)' }}>Quiet hours</div><div style={{ fontSize:12.5, color:'var(--gray-500)' }}>9:00 PM – 6:30 AM · except emergencies</div></div>
          <Tog on={quiet} onClick={()=>{ setQuiet(v=>!v); jlToast('Quiet hours ' + (!quiet?'on':'off'), { icon: !quiet?'moon':'sun' }); }} />
        </div>

        <div style={{ display:'flex', alignItems:'flex-start', gap:11, marginTop:16, 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 }}>Emergency alerts always come through, even during quiet hours — they can't be turned off for your child's safety.</div>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { NotifSettingsScreen });