/* Parent → Notifications Center: grouped, tappable, deep-links into screens. */
function NotificationsScreen({ onNav, onBack }) {
  const KIND = {
    alert:    { tint:'var(--danger-100)',  ic:'var(--danger-500)',  icon:'siren' },
    pickup:   { tint:'var(--gold-100)',    ic:'var(--gold-600)',    icon:'car-front' },
    grade:    { tint:'var(--blue-100)',    ic:'var(--blue-500)',    icon:'graduation-cap' },
    message:  { tint:'var(--info-100)',    ic:'var(--info-500)',    icon:'message-circle' },
    payment:  { tint:'var(--success-100)', ic:'var(--success-500)', icon:'wallet' },
    attend:   { tint:'var(--warning-100)', ic:'var(--warning-600)', icon:'calendar-check' },
    event:    { tint:'var(--gold-100)',    ic:'var(--gold-600)',    icon:'party-popper' },
  };
  const init = [
    { id:1, kind:'alert',   title:'Early dismissal today at 1:00 PM', body:'Buses run on the early schedule.', when:'9:02 AM', group:'Today', unread:true, go:'home' },
    { id:2, kind:'grade',   title:'New grade posted — Math', body:jlChild().first + ' scored A- on the Fractions Quiz.', when:'8:15 AM', group:'Today', unread:true, go:'grades' },
    { id:3, kind:'message', title:'Mrs. Johnson replied', body:'“Thanks — he\u2019s all caught up now.”', when:'Yesterday', group:'Earlier', unread:true, go:'messages' },
    { id:4, kind:'payment', title:'Lunch balance is low', body:'$12.40 left · about 3 days of meals.', when:'Yesterday', group:'Earlier', unread:false, go:'wallet' },
    { id:5, kind:'event',   title:'Science Fair — RSVP open', body:'Thu, Jun 12 · 6:00 PM · Main Gym.', when:'2 days ago', group:'Earlier', unread:false, go:'calendar' },
    { id:6, kind:'pickup',  title:'Pickup complete', body:jlChild().first + ' was picked up at 3:34 PM.', when:'2 days ago', group:'Earlier', unread:false, go:'pickup' },
  ];
  const [items, setItems] = React.useState(init);
  const unread = items.filter(i=>i.unread).length;
  const open = (it) => { setItems(x=>x.map(n=>n.id===it.id?{...n,unread:false}:n)); if (it.go) onNav(it.go); };
  const markAll = () => { setItems(x=>x.map(n=>({...n,unread:false}))); jlToast('All caught up', { icon:'check-check' }); };
  const groups = ['Today','Earlier'];

  return (
    <div style={{ background:'var(--gray-50)', minHeight:'100%' }}>
      <PushBar titleKey="t_notifications" onBack={onBack} bell={false} />
      <div style={{ padding:'14px 18px 40px' }}>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', margin:'0 2px 12px' }}>
          <span style={{ fontSize:13.5, color:'var(--gray-500)', fontWeight:600 }}>{unread>0 ? unread + ' unread' : 'You\u2019re all caught up'}</span>
          {unread>0 && <button onClick={markAll} style={{ display:'inline-flex', alignItems:'center', gap:6, background:'transparent', border:0, color:'var(--blue-500)', fontWeight:700, fontSize:13, cursor:'pointer', fontFamily:'var(--font-sans)' }}><Icon name="check-check" size={15} color="var(--blue-500)" />Mark all read</button>}
        </div>

        {groups.map(g => {
          const list = items.filter(i=>i.group===g);
          if (!list.length) return null;
          return (
            <React.Fragment key={g}>
              <div style={{ fontSize:11, fontWeight:800, letterSpacing:'.08em', textTransform:'uppercase', color:'var(--gray-400)', margin:'8px 2px 9px' }}>{jlT(g==='Today'?'l_today':'l_earlier')}</div>
              <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
                {list.map(it => {
                  const k = KIND[it.kind];
                  return (
                    <button key={it.id} onClick={()=>open(it)} style={{ width:'100%', display:'flex', alignItems:'flex-start', gap:12, textAlign:'left', background: it.unread?'var(--blue-50, #F2F7FE)':'#fff', border:'1px solid var(--gray-200)', borderRadius:14, padding:'13px 14px', boxShadow:'var(--shadow-sm)', cursor:'pointer', fontFamily:'var(--font-sans)', position:'relative' }}>
                      <span style={{ width:40, height:40, borderRadius:11, background:k.tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name={k.icon} size={19} color={k.ic} /></span>
                      <div style={{ flex:1, minWidth:0 }}>
                        <div style={{ display:'flex', alignItems:'baseline', gap:8 }}>
                          <span style={{ flex:1, fontSize:14.5, fontWeight:700, color:'var(--ink)' }}>{it.title}</span>
                          <span style={{ fontSize:11.5, color:'var(--gray-400)', flex:'0 0 auto' }}>{it.when}</span>
                        </div>
                        <div style={{ fontSize:13, color:'var(--gray-500)', lineHeight:1.45, marginTop:2 }}>{it.body}</div>
                      </div>
                      {it.unread && <span style={{ position:'absolute', top:15, right:13, width:8, height:8, borderRadius:'999px', background:'var(--blue-500)' }} />}
                    </button>
                  );
                })}
              </div>
            </React.Fragment>
          );
        })}
      </div>
    </div>
  );
}
Object.assign(window, { NotificationsScreen });