/* Admin → Alerts: emergency-alert composer + sent history.
   Posts the red banner parents see at the top of the parent-app Home. */
function AlertsScreen() {
  const TYPES = [
    { id:'closure',   label:'Closure',       icon:'snowflake',     tint:'var(--info-100)',    ic:'var(--info-500)' },
    { id:'dismissal', label:'Early Dismissal',icon:'clock',        tint:'var(--gold-100)',    ic:'var(--gold-600)' },
    { id:'safety',    label:'Safety',        icon:'shield-alert',  tint:'var(--danger-100)',  ic:'var(--danger-500)' },
    { id:'weather',   label:'Weather',       icon:'cloud-lightning',tint:'var(--warning-100)',ic:'var(--warning-600)' },
  ];
  const AUD = ['All families', 'Grade 6', 'Grade 7', 'Bus riders', 'Staff only'];
  const CHAN = [ ['push','Push',true], ['sms','SMS',true], ['email','Email',false] ];
  const [type, setType] = React.useState('dismissal');
  const [title, setTitle] = React.useState('Early dismissal today at 1:00 PM');
  const [body, setBody] = React.useState('Due to a forecasted storm, all students will be dismissed at 1:00 PM. Buses will run on the early schedule. Please confirm your pickup plan.');
  const [aud, setAud] = React.useState('All families');
  const [chan, setChan] = React.useState({ push:true, sms:true, email:false });
  const [sent, setSent] = React.useState([
    { t:'Water main repair — normal hours resume', type:'safety',  when:'May 24 · 7:10 AM', reach:'1,248 families' },
    { t:'Late start Wednesday due to fog',           type:'weather', when:'May 18 · 6:02 AM', reach:'1,248 families' },
  ]);
  const send = () => {
    if (!title.trim()) { jlToast('Add a headline first', { icon:'triangle-alert', color:'#E5484D' }); return; }
    setSent(s => [{ t:title, type, when:'Just now', reach: aud }, ...s]);
    jlToast('Emergency alert sent to ' + aud, { icon:'siren', color:'#E5484D' });
  };
  const tObj = TYPES.find(t=>t.id===type);

  return (
    <div style={{ padding:'22px 28px 40px', height:'100%', overflowY:'auto', boxSizing:'border-box' }}>
      <div style={{ display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:16 }}>
        {/* composer */}
        <Panel title="Compose Emergency Alert">
          <div style={{ padding:'6px 0 4px' }}>
            <label style={alLbl}>Alert type</label>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:9, marginBottom:16 }}>
              {TYPES.map(t => {
                const on = type===t.id;
                return (
                  <button key={t.id} onClick={()=>setType(t.id)} style={{ display:'flex', alignItems:'center', gap:10, padding:'11px 13px', borderRadius:11, 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' }}>
                    <span style={{ width:32, height:32, borderRadius:8, background:t.tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name={t.icon} size={17} color={t.ic} /></span>
                    <span style={{ fontSize:13.5, fontWeight:700, color: on?'var(--blue-700)':'var(--ink)' }}>{t.label}</span>
                  </button>
                );
              })}
            </div>

            <label style={alLbl}>Headline</label>
            <input value={title} onChange={e=>setTitle(e.target.value)} style={{ ...alField, marginBottom:14 }} />

            <label style={alLbl}>Message</label>
            <textarea value={body} onChange={e=>setBody(e.target.value)} rows={3} style={{ ...alField, resize:'none', marginBottom:14, lineHeight:1.5 }} />

            <label style={alLbl}>Audience</label>
            <select value={aud} onChange={e=>setAud(e.target.value)} style={{ ...alField, marginBottom:14, fontWeight:600, cursor:'pointer' }}>
              {AUD.map(a => <option key={a}>{a}</option>)}
            </select>

            <label style={alLbl}>Channels</label>
            <div style={{ display:'flex', gap:9, marginBottom:18 }}>
              {CHAN.map(([id,l]) => {
                const on = chan[id];
                return (
                  <button key={id} onClick={()=>setChan(c=>({ ...c, [id]:!c[id] }))} style={{ display:'flex', alignItems:'center', gap:7, padding:'9px 14px', borderRadius:'999px', cursor:'pointer', fontFamily:'var(--font-sans)', fontWeight:700, fontSize:13, border: on?'0':'1px solid var(--gray-200)', background: on?'var(--navy-600)':'#fff', color: on?'#fff':'var(--gray-500)' }}>
                    <Icon name={on?'check':'plus'} size={14} color={on?'#fff':'var(--gray-400)'} />{l}
                  </button>
                );
              })}
            </div>

            <button onClick={send} style={{ width:'100%', display:'flex', alignItems:'center', justifyContent:'center', gap:9, background:'var(--danger-500)', color:'#fff', border:0, borderRadius:12, padding:'14px', fontWeight:800, fontSize:15, cursor:'pointer', fontFamily:'var(--font-sans)', boxShadow:'0 8px 20px rgba(229,72,77,.3)' }}>
              <Icon name="siren" size={18} color="#fff" />Send Emergency Alert
            </button>
          </div>
        </Panel>

        {/* right: live preview + history */}
        <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
          <Panel title="Parent Preview">
            <div style={{ padding:'8px 2px' }}>
              <div style={{ background:'var(--danger-500)', borderRadius:14, padding:'13px 15px', color:'#fff', boxShadow:'0 8px 20px rgba(229,72,77,.28)' }}>
                <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                  <span style={{ width:34, height:34, borderRadius:10, background:'rgba(255,255,255,.2)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name="siren" size={18} color="#fff" /></span>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontSize:9.5, fontWeight:800, letterSpacing:'.1em', color:'rgba(255,255,255,.8)' }}>EMERGENCY ALERT · KATY MIDDLE</div>
                    <div style={{ fontSize:14.5, fontWeight:700 }}>{title || 'Your headline appears here'}</div>
                  </div>
                </div>
                <div style={{ fontSize:12.5, color:'rgba(255,255,255,.92)', lineHeight:1.5, margin:'10px 0 2px', paddingLeft:44 }}>{body || 'Your message body appears here.'}</div>
              </div>
              <div style={{ fontSize:11.5, color:'var(--gray-400)', marginTop:9, textAlign:'center' }}>This is how the alert shows on the parent app Home.</div>
            </div>
          </Panel>

          <Panel title="Recently Sent" pad={false}>
            {sent.map((s,i) => {
              const t = TYPES.find(x=>x.id===s.type) || TYPES[0];
              return (
                <div key={i} style={{ display:'flex', alignItems:'center', gap:12, padding:'13px 18px', borderTop: i>0?'1px solid var(--gray-100)':'0' }}>
                  <span style={{ width:34, height:34, borderRadius:9, background:t.tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name={t.icon} size={16} color={t.ic} /></span>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontSize:13.5, fontWeight:700, color:'var(--ink)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{s.t}</div>
                    <div style={{ fontSize:12, color:'var(--gray-500)' }}>{s.when} · {s.reach}</div>
                  </div>
                </div>
              );
            })}
          </Panel>
        </div>
      </div>
    </div>
  );
}
const alLbl = { display:'block', fontSize:12, fontWeight:700, color:'var(--gray-500)', marginBottom:7 };
const alField = { width:'100%', boxSizing:'border-box', border:'1px solid var(--gray-200)', borderRadius:10, padding:'11px 13px', fontSize:14, fontFamily:'var(--font-sans)', color:'var(--ink)', outline:'none', background:'#fff' };
Object.assign(window, { AlertsScreen });