/* Parent → School Calendar & Events: month strip, upcoming events, RSVP. */
function CalendarScreen({ onNav, onBack }) {
  const TYPES = {
    event:    { tint:'var(--gold-100)',    ic:'var(--gold-600)',    icon:'party-popper' },
    academic: { tint:'var(--blue-100)',    ic:'var(--blue-500)',    icon:'graduation-cap' },
    holiday:  { tint:'var(--success-100)', ic:'var(--success-500)', icon:'palmtree' },
    off:      { tint:'var(--success-100)', ic:'var(--success-500)', icon:'palmtree' },
    sport:    { tint:'var(--info-100)',    ic:'var(--info-500)',    icon:'volleyball' },
    early:    { tint:'var(--danger-100)',  ic:'var(--danger-500)',  icon:'clock' },
    test:     { tint:'var(--danger-100)',  ic:'var(--danger-500)',  icon:'file-pen' },
    due:      { tint:'var(--blue-100)',    ic:'var(--blue-500)',    icon:'clipboard-list' },
  };
  const SHARED_EVENTS = [
    { id:'e-due',  type:'due',      title:'Ecosystem Lab Report due',   when:'Fri, Jun 6 · 11:59 PM', where:'Science' },
    { id:'e-test', type:'test',     title:'Math Quiz — Fractions',      when:'Tue, Jun 9 · 9:00 AM',  where:'Rm 118' },
    { id:'e-fair', type:'event',    title:'Spring Science Fair',         when:'Thu, Jun 12 · 6:00 PM', where:'Main Gymnasium' },
    { id:'e-erd',  type:'early',    title:'Early Release Day',           when:'Fri, Jun 13 · 1:00 PM', where:'Storm schedule' },
    { id:'e-soc',  type:'sport',    title:'6th Grade vs. Cinco Ranch',   when:'Sat, Jun 14 · 10:00 AM', where:'Soccer Field 2' },
    { id:'e-rc',   type:'academic', title:'End-of-Year Report Cards',    when:'Mon, Jun 16', where:'Posted in app' },
    { id:'e-sum',  type:'off',      title:'Summer Break Begins',         when:'Fri, Jun 20', where:'No school' },
  ];
  const RSVP_TYPES = { event:true, sport:true };
  const [events, setEvents] = React.useState(SHARED_EVENTS);
  React.useEffect(() => {
    const read = () => { try { let a = JSON.parse(localStorage.getItem('jl_events') || 'null'); if (!a) { a = SHARED_EVENTS; localStorage.setItem('jl_events', JSON.stringify(a)); } setEvents(a); } catch(e){} };
    read();
    const onStore = (e) => { if (e.key === 'jl_events') read(); };
    window.addEventListener('storage', onStore);
    const iv = setInterval(read, 1500);
    return () => { window.removeEventListener('storage', onStore); clearInterval(iv); };
  }, []);
  const [rsvp, setRsvp] = React.useState({});
  const week = [
    { d:'8',  day:'MON', dot:null },
    { d:'9',  day:'TUE', dot:'var(--danger-500)' },
    { d:'10', day:'WED', dot:null },
    { d:'11', day:'THU', dot:'var(--gold-500)', today:true },
    { d:'12', day:'FRI', dot:'var(--gold-500)' },
    { d:'13', day:'SAT', dot:'var(--info-500)' },
    { d:'14', day:'SUN', dot:null },
  ];
  const toggle = (id) => {
    setRsvp(r => { const n = { ...r, [id]: !r[id] }; jlToast(n[id] ? 'RSVP confirmed — see you there' : 'RSVP cancelled', { icon: n[id]?'calendar-check':'calendar-x' }); return n; });
  };

  return (
    <div style={{ background:'var(--gray-50)', minHeight:'100%' }}>
      <PushBar titleKey="t_calendar" onBack={onBack} />
      <div style={{ padding:'14px 18px 40px' }}>
        {/* month strip */}
        <div style={{ background:'#fff', border:'1px solid var(--gray-200)', borderRadius:16, padding:'15px 14px', boxShadow:'var(--shadow-sm)' }}>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'0 4px 12px' }}>
            <span style={{ fontSize:15, fontWeight:800, color:'var(--ink)' }}>June 2026</span>
            <div style={{ display:'flex', gap:6 }}>
              <button onClick={()=>jlToast('May 2026', { icon:'chevron-left' })} style={calNav}><Icon name="chevron-left" size={17} color="var(--gray-500)" /></button>
              <button onClick={()=>jlToast('July 2026', { icon:'chevron-right' })} style={calNav}><Icon name="chevron-right" size={17} color="var(--gray-500)" /></button>
            </div>
          </div>
          <div style={{ display:'flex', gap:5 }}>
            {week.map(w => (
              <div key={w.d} style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:5 }}>
                <span style={{ fontSize:10, fontWeight:700, color:'var(--gray-400)' }}>{w.day}</span>
                <span style={{ width:34, height:34, borderRadius:'999px', display:'flex', alignItems:'center', justifyContent:'center', fontSize:14, fontWeight:700, background: w.today?'var(--navy-600)':'transparent', color: w.today?'#fff':'var(--ink)' }}>{w.d}</span>
                <span style={{ width:5, height:5, borderRadius:'999px', background: w.dot || 'transparent' }} />
              </div>
            ))}
          </div>
        </div>

        {/* upcoming */}
        <SectionLabel action={<span onClick={()=>jlToast('Synced to your phone calendar', { icon:'calendar-plus' })} style={{ display:'inline-flex', alignItems:'center', gap:5, fontSize:12, fontWeight:700, color:'var(--blue-500)', cursor:'pointer' }}><Icon name="calendar-plus" size={13} color="var(--blue-500)" />{jlT('a_sync')}</span>}>{jlT('l_upcoming')}</SectionLabel>
        <div style={{ display:'flex', flexDirection:'column', gap:11 }}>
          {events.map(e => {
            const t = TYPES[e.type] || TYPES.event;
            const on = !!rsvp[e.id];
            const canRsvp = !!RSVP_TYPES[e.type];
            return (
              <div key={e.id} style={{ background:'#fff', border:'1px solid var(--gray-200)', borderRadius:14, padding:'14px', boxShadow:'var(--shadow-sm)' }}>
                <div style={{ display:'flex', alignItems:'center', gap:12 }}>
                  <span style={{ width:44, height:44, borderRadius:12, background:t.tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name={t.icon} size={21} color={t.ic} /></span>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontSize:15, fontWeight:700, color:'var(--ink)' }}>{e.title}</div>
                    <div style={{ fontSize:12.5, color:'var(--gray-500)', marginTop:1 }}>{e.when}</div>
                    <div style={{ fontSize:12, color:'var(--gray-400)', display:'flex', alignItems:'center', gap:4, marginTop:2 }}><Icon name="map-pin" size={12} color="var(--gray-400)" />{e.where}</div>
                  </div>
                </div>
                {canRsvp && (
                  <button onClick={()=>toggle(e.id)} style={{ width:'100%', marginTop:12, display:'flex', alignItems:'center', justifyContent:'center', gap:8, borderRadius:11, padding:'11px', fontWeight:700, fontSize:14, cursor:'pointer', fontFamily:'var(--font-sans)', border: on?'0':'1px solid var(--gray-200)', background: on?'var(--success-100)':'#fff', color: on?'var(--success-600)':'var(--navy-600)' }}>
                    <Icon name={on?'check-check':'calendar-check'} size={16} color={on?'var(--success-600)':'var(--navy-600)'} />{on?'You\u2019re going':'RSVP'}
                  </button>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}
const calNav = { width:32, height:32, borderRadius:9, border:'1px solid var(--gray-200)', background:'#fff', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' };
Object.assign(window, { CalendarScreen });