/* Admin → Calendar Overview: month grid of published events (reads jl_events). */
function CalendarOverviewScreen() {
  const TYPES = {
    event:    { tint:'var(--gold-100)',    ic:'var(--gold-600)',    dot:'var(--gold-500)',    icon:'party-popper',   label:'Event' },
    sport:    { tint:'var(--info-100)',    ic:'var(--info-500)',    dot:'var(--info-500)',    icon:'volleyball',     label:'Sports' },
    test:     { tint:'var(--danger-100)',  ic:'var(--danger-500)',  dot:'var(--danger-500)',  icon:'file-pen',       label:'Test' },
    due:      { tint:'var(--blue-100)',    ic:'var(--blue-500)',    dot:'var(--blue-500)',    icon:'clipboard-list', label:'Due' },
    academic: { tint:'var(--blue-100)',    ic:'var(--blue-500)',    dot:'var(--blue-500)',    icon:'graduation-cap', label:'Academic' },
    early:    { tint:'var(--danger-100)',  ic:'var(--danger-500)',  dot:'var(--danger-500)',  icon:'clock',          label:'Early release' },
    off:      { tint:'var(--success-100)', ic:'var(--success-500)', dot:'var(--success-500)', icon:'palmtree',       label:'No school' },
  };
  const meta = (t) => TYPES[t] || TYPES.event;
  const [events, setEvents] = React.useState([]);
  React.useEffect(() => {
    const read = () => { try { setEvents(JSON.parse(localStorage.getItem('jl_events') || '[]')); } 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 [sel, setSel] = React.useState(null);

  // map events to June day numbers via "Jun D" in the `when` string
  const dayOf = (e) => { const m = /Jun\s+(\d+)/.exec(e.when||''); return m ? parseInt(m[1]) : null; };
  const byDay = {};
  events.forEach(e => { const d = dayOf(e); if (d) { (byDay[d] = byDay[d] || []).push(e); } });

  // June 2026 starts on a Monday; build a Mon-first grid
  const daysInMonth = 30, firstDow = 0; // Mon=0
  const cells = [];
  for (let i=0;i<firstDow;i++) cells.push(null);
  for (let d=1;d<=daysInMonth;d++) cells.push(d);
  const DOW = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
  const today = 11;
  const shown = sel ? (byDay[sel]||[]) : events;

  return (
    <div style={{ padding:'22px 28px 40px', height:'100%', overflowY:'auto', boxSizing:'border-box' }}>
      <div style={{ display:'grid', gridTemplateColumns:'1.5fr 1fr', gap:16 }}>
        {/* month grid */}
        <Panel title="June 2026" 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>}>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(7,1fr)', gap:6, padding:'4px 0 2px' }}>
            {DOW.map(d => <div key={d} style={{ textAlign:'center', fontSize:11, fontWeight:800, letterSpacing:'.04em', textTransform:'uppercase', color:'var(--gray-400)', paddingBottom:4 }}>{d}</div>)}
            {cells.map((d,i) => {
              if (!d) return <div key={'b'+i} />;
              const evs = byDay[d] || [];
              const on = sel===d;
              return (
                <button key={d} onClick={()=>setSel(on?null:d)} style={{ aspectRatio:'1', minHeight:58, display:'flex', flexDirection:'column', alignItems:'center', gap:4, padding:'7px 4px 5px', borderRadius:10, cursor:'pointer', fontFamily:'var(--font-sans)', border: on?'1.5px solid var(--blue-500)':'1px solid var(--gray-100)', background: on?'var(--blue-100)':(d===today?'var(--gray-50)':'#fff') }}>
                  <span style={{ width:24, height:24, borderRadius:'999px', display:'flex', alignItems:'center', justifyContent:'center', fontSize:12.5, fontWeight:700, fontFamily:'var(--font-mono)', background: d===today?'var(--navy-600)':'transparent', color: d===today?'#fff':'var(--ink)' }}>{d}</span>
                  <span style={{ display:'flex', gap:2, flexWrap:'wrap', justifyContent:'center' }}>
                    {evs.slice(0,3).map((e,j) => <span key={j} style={{ width:5, height:5, borderRadius:'999px', background:meta(e.type).dot }} />)}
                  </span>
                </button>
              );
            })}
          </div>
        </Panel>

        {/* list */}
        <Panel title={sel ? 'June ' + sel : 'All Events'} action={sel && <button onClick={()=>setSel(null)} style={{ background:'transparent', border:0, color:'var(--blue-500)', fontWeight:700, fontSize:12.5, cursor:'pointer', fontFamily:'var(--font-sans)' }}>Show all</button>} pad={false}>
          {shown.length===0
            ? <div style={{ padding:'22px', textAlign:'center', color:'var(--gray-400)', fontSize:13 }}>No events{sel?' on this day':''}.</div>
            : shown.map((e,i) => { const m = meta(e.type); return (
                <div key={e.id||i} style={{ display:'flex', alignItems:'center', gap:12, padding:'12px 18px', borderTop: i>0?'1px solid var(--gray-100)':'0' }}>
                  <span style={{ width:36, height:36, borderRadius:10, background:m.tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name={m.icon} size={17} color={m.ic} /></span>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontSize:13.5, fontWeight:700, color:'var(--ink)' }}>{e.title}</div>
                    <div style={{ fontSize:12, color:'var(--gray-500)' }}>{e.when} · {e.where}</div>
                  </div>
                  <Pill bg={m.tint} fg={m.ic}>{m.label}</Pill>
                </div>
              ); })}
        </Panel>
      </div>
    </div>
  );
}
Object.assign(window, { CalendarOverviewScreen });