/* Admin → Announcements: compose & publish school-wide announcements. */
function AnnouncementsScreen() {
  const AUD = ['All families', 'Grade 6', 'Grade 7', 'Grade 8', 'Staff only'];
  const [title, setTitle] = React.useState('');
  const [body, setBody] = React.useState('');
  const [aud, setAud] = React.useState('All families');
  const [pin, setPin] = React.useState(false);
  const [posts, setPosts] = React.useState([
    { id:1, title:'Spring Science Fair — Save the Date', body:'Join us June 12 at 6 PM in the main gym for student projects and awards.', aud:'All families', when:'2 days ago', reach:'1,248', pinned:true },
    { id:2, title:'Yearbook orders close Friday', body:'Order online before June 6 to guarantee a copy.', aud:'All families', when:'4 days ago', reach:'1,248', pinned:false },
    { id:3, title:'Grade 8 DC trip — final payment', body:'Balance due by June 15. See the Billing tab in your app.', aud:'Grade 8', when:'1 week ago', reach:'284', pinned:false },
  ]);
  const publish = () => {
    if (!title.trim()) { jlToast('Add a headline first', { icon:'triangle-alert', color:'#E5484D' }); return; }
    setPosts(p => [{ id:Date.now(), title, body, aud, when:'Just now', reach: aud==='All families'?'1,248':(aud==='Staff only'?'96':'284'), pinned:pin }, ...p]);
    jlToast('Announcement published to ' + aud, { icon:'megaphone' });
    setTitle(''); setBody(''); setPin(false);
  };
  const togglePin = (id) => setPosts(p => p.map(x => x.id===id ? { ...x, pinned:!x.pinned } : x));
  const remove = (id) => { setPosts(p => p.filter(x => x.id!==id)); jlToast('Announcement removed', { icon:'trash-2', color:'#E5484D' }); };
  const sorted = [...posts].sort((a,b)=> (b.pinned?1:0)-(a.pinned?1:0));

  return (
    <div style={{ padding:'26px 32px 48px', height:'100%', overflowY:'auto', boxSizing:'border-box' }}>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1.4fr', gap:20 }}>
        {/* composer */}
        <Panel title="New Announcement">
          <div style={{ padding:'4px 0 2px' }}>
            <label style={anLbl}>Headline</label>
            <input value={title} onChange={e=>setTitle(e.target.value)} placeholder="e.g. Early release this Friday" style={{ ...anField, marginBottom:12 }} />
            <label style={anLbl}>Message</label>
            <textarea value={body} onChange={e=>setBody(e.target.value)} rows={4} placeholder="Write the announcement families will see…" style={{ ...anField, resize:'none', marginBottom:12, lineHeight:1.5 }} />
            <label style={anLbl}>Audience</label>
            <select value={aud} onChange={e=>setAud(e.target.value)} style={{ ...anField, marginBottom:14, fontWeight:600, cursor:'pointer' }}>{AUD.map(a=><option key={a}>{a}</option>)}</select>
            <label style={{ display:'flex', alignItems:'center', gap:10, marginBottom:16, cursor:'pointer' }}>
              <button onClick={()=>setPin(v=>!v)} style={{ width:44, height:26, borderRadius:'999px', border:0, cursor:'pointer', padding:2, background: pin?'var(--gold-400)':'var(--gray-300)', display:'flex', justifyContent: pin?'flex-end':'flex-start', flex:'0 0 auto' }}><span style={{ width:22, height:22, borderRadius:'999px', background:'#fff', display:'block', boxShadow:'0 1px 3px rgba(0,0,0,.2)' }} /></button>
              <span style={{ fontSize:13.5, fontWeight:600, color:'var(--ink)' }}>Pin to top of feed</span>
            </label>
            <button onClick={publish} 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="megaphone" size={17} color="var(--on-gold)" />Publish Announcement</button>
          </div>
        </Panel>

        {/* feed */}
        <Panel title="Published" 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 in apps</span>} pad={false}>
          {sorted.map((p,i) => (
            <div key={p.id} style={{ padding:'14px 18px', borderTop: i>0?'1px solid var(--gray-100)':'0' }}>
              <div style={{ display:'flex', alignItems:'flex-start', gap:10 }}>
                {p.pinned && <span style={{ marginTop:2, flex:'0 0 auto' }}><Icon name="pin" size={15} color="var(--gold-600)" /></span>}
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:14.5, fontWeight:700, color:'var(--ink)' }}>{p.title}</div>
                  <div style={{ fontSize:13, color:'var(--gray-600)', lineHeight:1.5, marginTop:3 }}>{p.body}</div>
                  <div style={{ display:'flex', alignItems:'center', gap:8, marginTop:8 }}>
                    <Pill bg="var(--blue-100)" fg="var(--blue-600)">{p.aud}</Pill>
                    <span style={{ fontSize:11.5, color:'var(--gray-400)' }}>{p.when} · {p.reach} reached</span>
                  </div>
                </div>
                <div style={{ display:'flex', gap:6, flex:'0 0 auto' }}>
                  <button onClick={()=>togglePin(p.id)} title={p.pinned?'Unpin':'Pin'} style={{ width:30, height:30, borderRadius:8, border:'1px solid var(--gray-200)', background: p.pinned?'var(--gold-100)':'#fff', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}><Icon name="pin" size={14} color={p.pinned?'var(--gold-600)':'var(--gray-500)'} /></button>
                  <button onClick={()=>remove(p.id)} title="Remove" style={{ width:30, height:30, borderRadius:8, border:'1px solid var(--gray-200)', background:'#fff', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}><Icon name="trash-2" size={14} color="var(--danger-500)" /></button>
                </div>
              </div>
            </div>
          ))}
        </Panel>
      </div>
    </div>
  );
}
const anLbl = { display:'block', fontSize:11.5, fontWeight:700, color:'var(--gray-500)', marginBottom:6 };
const anField = { 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, { AnnouncementsScreen });