/* Admin → Calendar: author school events (publishes to parent & student calendars). */
function EventsScreen() {
  const TYPES = [
    { id:'event',    label:'Event',       icon:'party-popper',    tint:'var(--gold-100)',    ic:'var(--gold-600)' },
    { id:'sport',    label:'Sports',      icon:'volleyball',      tint:'var(--info-100)',    ic:'var(--info-500)' },
    { id:'test',     label:'Test/Quiz',   icon:'file-pen',        tint:'var(--danger-100)',  ic:'var(--danger-500)' },
    { id:'due',      label:'Due date',    icon:'clipboard-list',  tint:'var(--blue-100)',    ic:'var(--blue-500)' },
    { id:'academic', label:'Academic',    icon:'graduation-cap',  tint:'var(--blue-100)',    ic:'var(--blue-500)' },
    { id:'early',    label:'Early release',icon:'clock',          tint:'var(--danger-100)',  ic:'var(--danger-500)' },
    { id:'off',      label:'No school',   icon:'palmtree',        tint:'var(--success-100)', ic:'var(--success-500)' },
  ];
  const meta = (t) => TYPES.find(x=>x.id===t) || TYPES[0];
  const SEED = [
    { 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 [events, setEvents] = React.useState(() => { try { return JSON.parse(localStorage.getItem('jl_events') || 'null') || SEED; } catch(e){ return SEED; } });
  const [form, setForm] = React.useState({ type:'event', title:'', when:'', where:'' });
  const publish = (list) => { setEvents(list); try { localStorage.setItem('jl_events', JSON.stringify(list)); } catch(e){} };
  const add = () => {
    if (!form.title.trim()) { jlToast('Add a title first', { icon:'triangle-alert', color:'#E5484D' }); return; }
    const e = { id:'e'+Date.now(), type:form.type, title:form.title, when:form.when||'TBD', where:form.where||'—' };
    publish([...events, e]);
    setForm({ type:'event', title:'', where:'', when:'' });
    jlToast('Published to families & students', { icon:'calendar-check' });
  };
  const remove = (id) => { publish(events.filter(e=>e.id!==id)); jlToast('Event removed', { icon:'trash-2', color:'#E5484D' }); };

  return (
    <div style={{ padding:'22px 28px 40px', height:'100%', overflowY:'auto', boxSizing:'border-box' }}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16, marginBottom:16 }}>
        <StatTile icon="calendar-days" tint="var(--gold-100)" ic="var(--gold-600)" value={events.length} label="Published events" delta="Live" deltaColor="var(--gold-600)" />
        <StatTile icon="party-popper" tint="var(--blue-100)" ic="var(--blue-500)" value={events.filter(e=>e.type==='event'||e.type==='sport').length} label="RSVP events" />
        <StatTile icon="users" tint="var(--success-100)" ic="var(--success-600)" value="1,248" label="Families reached" />
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1fr 1.4fr', gap:16 }}>
        {/* composer */}
        <Panel title="Add Event">
          <div style={{ padding:'4px 0 2px' }}>
            <label style={evLbl}>Type</label>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, marginBottom:14 }}>
              {TYPES.map(t => {
                const on = form.type===t.id;
                return (
                  <button key={t.id} onClick={()=>setForm(f=>({ ...f, type:t.id }))} style={{ display:'flex', alignItems:'center', gap:9, padding:'9px 11px', borderRadius:10, cursor:'pointer', fontFamily:'var(--font-sans)', textAlign:'left', border: on?'1.5px solid var(--blue-500)':'1px solid var(--gray-200)', background: on?'var(--blue-100)':'#fff' }}>
                    <Icon name={t.icon} size={16} color={on?'var(--blue-600)':t.ic} /><span style={{ fontSize:12.5, fontWeight:700, color: on?'var(--blue-700)':'var(--ink)' }}>{t.label}</span>
                  </button>
                );
              })}
            </div>
            <label style={evLbl}>Title</label>
            <input value={form.title} onChange={e=>setForm(f=>({ ...f, title:e.target.value }))} placeholder="e.g. Fall Open House" style={{ ...evField, marginBottom:12 }} />
            <label style={evLbl}>When</label>
            <input value={form.when} onChange={e=>setForm(f=>({ ...f, when:e.target.value }))} placeholder="e.g. Thu, Sep 18 · 6:00 PM" style={{ ...evField, marginBottom:12 }} />
            <label style={evLbl}>Location</label>
            <input value={form.where} onChange={e=>setForm(f=>({ ...f, where:e.target.value }))} placeholder="e.g. Main Gymnasium" style={{ ...evField, marginBottom:16 }} />
            <button onClick={add} style={{ width:'100%', display:'flex', alignItems:'center', justifyContent:'center', gap:8, background:'var(--gold-400)', color:'var(--on-gold)', border:0, borderRadius:11, padding:'13px', fontWeight:800, fontSize:14.5, cursor:'pointer', fontFamily:'var(--font-sans)', boxShadow:'var(--shadow-gold)' }}><Icon name="send-horizontal" size={17} color="var(--on-gold)" />Publish Event</button>
          </div>
        </Panel>

        {/* published list */}
        <Panel title="Published Calendar" 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 to apps</span>} pad={false}>
          {events.map((e,i) => {
            const m = meta(e.type);
            return (
              <div key={e.id} style={{ display:'flex', alignItems:'center', gap:12, padding:'12px 18px', borderTop: i>0?'1px solid var(--gray-100)':'0' }}>
                <span style={{ width:38, height:38, borderRadius:10, background:m.tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name={m.icon} size={18} color={m.ic} /></span>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:14, fontWeight:700, color:'var(--ink)' }}>{e.title}</div>
                  <div style={{ fontSize:12.5, color:'var(--gray-500)' }}>{e.when} · {e.where}</div>
                </div>
                <Pill bg={m.tint} fg={m.ic}>{m.label}</Pill>
                <button onClick={()=>remove(e.id)} title="Remove" style={{ width:32, height:32, borderRadius:8, border:'1px solid var(--gray-200)', background:'#fff', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', flex:'0 0 auto' }}><Icon name="trash-2" size={15} color="var(--danger-500)" /></button>
              </div>
            );
          })}
        </Panel>
      </div>
    </div>
  );
}
const evLbl = { display:'block', fontSize:11.5, fontWeight:700, color:'var(--gray-500)', marginBottom:6 };
const evField = { width:'100%', boxSizing:'border-box', border:'1px solid var(--gray-200)', borderRadius:9, padding:'10px 12px', fontSize:13.5, fontFamily:'var(--font-sans)', color:'var(--ink)', outline:'none', background:'#fff' };
Object.assign(window, { EventsScreen });