// ============ 공지 · 오늘의 말씀 ============
function NoticesScreen({ notices, setNotices, showToast, go }){
  const { useState } = React;
  const [kind, setKind] = useState('공지');
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [ref, setRef] = useState('');
  const [targets, setTargets] = useState(['전체']);
  const [timing, setTiming] = useState('now');
  const [when, setWhen] = useState('');
  const [push, setPush] = useState(true);

  const TARGETS = ['전체','활동 성도','청년1부','청년2부','대학부','장년부'];
  const toggleTarget = (t) => {
    if (t==='전체'){ setTargets(['전체']); return; }
    setTargets(prev => {
      const without = prev.filter(x=>x!=='전체');
      return without.includes(t) ? (without.filter(x=>x!==t).length?without.filter(x=>x!==t):['전체']) : [...without, t];
    });
  };

  const canSend = title.trim() && (kind==='공지' ? body.trim() : (body.trim() && ref.trim()));

  const send = () => {
    const id = 'n'+Math.random().toString(36).slice(2,6);
    const targetLabel = targets.join('·');
    const newItem = { id, kind, title: title.trim(), target:targetLabel, reach: timing==='now'?Math.floor(700+Math.random()*150):0,
      status: timing==='now'?'sent':'scheduled', when: timing==='now'? '방금 전' : (when||'예약'), push };
    setNotices(ns => [newItem, ...ns]);
    showToast(timing==='now'? `${kind}을(를) 발송했습니다 · 푸시 ${push?'전송':'미전송'}` : '예약 발송으로 등록했습니다','ok');
    setTitle(''); setBody(''); setRef('');
  };

  return (
    <div style={{display:'flex',flexDirection:'column',gap:18}}>
      <div className="tabs" style={{marginBottom:2}}>
        {['공지','오늘의 말씀'].map(k=>{ const key=k==='공지'?'공지':'말씀'; return (
          <button key={k} className={`tab ${kind===key?'on':''}`} onClick={()=>setKind(key)}>{k}</button>
        );})}
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1fr 340px',gap:20,alignItems:'start'}}>
        {/* compose */}
        <div style={{display:'flex',flexDirection:'column',gap:16}}>
          <Panel title={kind==='공지'?'공지 작성':'오늘의 말씀 등록'} sub={kind==='공지'?'교회 소식을 작성해 보내세요':'날짜별 말씀을 등록하면 앱에 자동 노출됩니다'}>
            <div style={{display:'flex',flexDirection:'column',gap:16}}>
              <div className="field">
                <div className="label">{kind==='공지'?'제목':'말씀 구절'} <span className="req">*</span></div>
                <input className="input" placeholder={kind==='공지'?'예) 청년부 여름 수련회 안내':'예) 수고하고 무거운 짐 진 자들아 다 내게로 오라'} value={title} onChange={e=>setTitle(e.target.value)} maxLength={60}/>
                <div className="count" style={{alignSelf:'flex-end'}}>{title.length}/60</div>
              </div>
              {kind==='말씀' && (
                <div className="field">
                  <div className="label">출처 <span className="req">*</span></div>
                  <input className="input" placeholder="예) 마태복음 11:28" value={ref} onChange={e=>setRef(e.target.value)} maxLength={30}/>
                </div>
              )}
              <div className="field">
                <div className="label">{kind==='공지'?'내용':'묵상·해설'} <span className="req">*</span></div>
                <textarea className="textarea" placeholder={kind==='공지'?'성도님들께 전할 내용을 입력하세요':'말씀에 대한 짧은 묵상이나 해설을 적어주세요'} value={body} onChange={e=>setBody(e.target.value)} maxLength={500}/>
                <div className="count" style={{alignSelf:'flex-end'}}>{body.length}/500</div>
              </div>
              <div className="row" style={{gap:10}}>
                <button className="btn sm"><Icon name="attach" size={15}/>파일 첨부</button>
                <button className="btn sm"><Icon name="image" size={15}/>이미지</button>
                <button className="btn sm"><Icon name="external" size={15}/>링크</button>
              </div>
            </div>
          </Panel>

          <Panel title="발송 대상" sub="여러 부서를 선택할 수 있어요">
            <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:9}}>
              {TARGETS.map(t=>(
                <button key={t} className={`check ${targets.includes(t)?'on':''}`} onClick={()=>toggleTarget(t)}>
                  <span className="box"><Icon name="check" size={12} sw={3}/></span>{t}
                </button>
              ))}
            </div>
          </Panel>

          <Panel title="발송 시점 · 푸시">
            <div style={{display:'flex',flexDirection:'column',gap:14}}>
              <div className="row" style={{gap:9}}>
                <button className={`check radio grow ${timing==='now'?'on':''}`} onClick={()=>setTiming('now')}><span className="box"><Icon name="check" size={12} sw={3}/></span>지금 즉시 발송</button>
                <button className={`check radio grow ${timing==='reserve'?'on':''}`} onClick={()=>setTiming('reserve')}><span className="box"><Icon name="check" size={12} sw={3}/></span>예약 발송</button>
              </div>
              {timing==='reserve' && (
                <div className="field"><div className="label">발송 일시</div>
                  <input className="input" type="datetime-local" value={when} onChange={e=>setWhen(e.target.value)}/></div>
              )}
              <div className="spread" style={{padding:'12px 14px',border:'1px solid var(--line)',borderRadius:12}}>
                <div className="row" style={{gap:11}}>
                  <div style={{width:36,height:36,borderRadius:10,background:'var(--gold-soft)',color:'var(--gold-ink)',display:'grid',placeItems:'center'}}><Icon name="bell" size={18}/></div>
                  <div><div style={{fontWeight:700,fontSize:14}}>앱 푸시 알림 동시 전송</div><div className="muted" style={{fontSize:12}}>성도 휴대폰으로 즉시 알림이 갑니다</div></div>
                </div>
                <div className={`toggle ${push?'on':''}`} onClick={()=>setPush(!push)}></div>
              </div>
            </div>
          </Panel>

          <div className="row" style={{justifyContent:'flex-end',gap:10}}>
            <button className="btn" onClick={()=>showToast('임시저장했습니다','info')}>임시저장</button>
            <button className="btn gold" disabled={!canSend} onClick={send}><Icon name="send" size={16}/>{timing==='now'?'지금 발송':'예약 등록'}</button>
          </div>
        </div>

        {/* live phone preview */}
        <div style={{position:'sticky',top:88}}>
          <div className="muted" style={{fontSize:12,fontWeight:700,marginBottom:10,textAlign:'center'}}>실시간 미리보기 · 성도 앱 화면</div>
          <div className="phone-prev" style={{margin:'0 auto'}}>
            <div className="pp-status"><span>9:41</span><span>● ● ●</span></div>
            <div className="pp-stage">
              {kind==='말씀' ? (
                <div style={{marginTop:24,padding:'18px 16px',borderRadius:18,background:'rgba(255,255,255,0.06)',border:'1px solid rgba(255,255,255,0.12)'}}>
                  <div style={{fontSize:11,fontWeight:800,color:'#FFD873',letterSpacing:1}}>오늘의 말씀</div>
                  <div style={{fontSize:16,fontWeight:800,color:'#fff',marginTop:10,lineHeight:1.5}}>{title || '말씀 구절이 여기에 표시됩니다'}</div>
                  <div style={{fontSize:12,color:'#9FB0D8',marginTop:8}}>{ref || '출처'}</div>
                  {body && <div style={{fontSize:12.5,color:'#C3CCE2',marginTop:12,lineHeight:1.6,borderTop:'1px solid rgba(255,255,255,0.1)',paddingTop:12}}>{body}</div>}
                </div>
              ) : (
                <div style={{marginTop:14}}>
                  <div className="row" style={{gap:8,marginBottom:12}}>
                    <div style={{width:30,height:30,borderRadius:9,background:'linear-gradient(150deg,#1B2A5A,#0E1838)',border:'1px solid rgba(255,197,41,0.4)',display:'grid',placeItems:'center'}}><span className="cross" style={{width:14,height:14}}></span></div>
                    <div><div style={{fontSize:12,fontWeight:800,color:'#fff'}}>중문교회</div><div style={{fontSize:10,color:'#8C97BC'}}>방금 · 공지</div></div>
                  </div>
                  <div style={{padding:'16px',borderRadius:16,background:'rgba(255,255,255,0.06)',border:'1px solid rgba(255,255,255,0.12)'}}>
                    <div style={{fontSize:15,fontWeight:800,color:'#fff',lineHeight:1.4}}>{title || '공지 제목이 여기에 표시됩니다'}</div>
                    <div style={{fontSize:12.5,color:'#C3CCE2',marginTop:10,lineHeight:1.65,whiteSpace:'pre-wrap'}}>{body || '내용을 입력하면 이렇게 성도 화면에 보입니다.'}</div>
                  </div>
                </div>
              )}
              {push && <div style={{marginTop:14,padding:'10px 12px',borderRadius:12,background:'rgba(255,197,41,0.12)',border:'1px solid rgba(255,197,41,0.25)',display:'flex',gap:8,alignItems:'center'}}>
                <span style={{color:'#FFD873'}}><Icon name="bell" size={15}/></span>
                <span style={{fontSize:11,color:'#FFE6A8'}}>푸시 알림으로도 전송됩니다</span>
              </div>}
            </div>
          </div>
        </div>
      </div>

      {/* sent history */}
      <div className="card" style={{padding:'13px 18px',display:'flex',alignItems:'center',gap:11,background:'var(--blue-bg)',borderColor:'transparent'}}>
        <div style={{width:34,height:34,borderRadius:9,background:'var(--blue)',color:'#fff',display:'grid',placeItems:'center',flex:'0 0 auto'}}><Icon name="external" size={17}/></div>
        <div style={{fontSize:13,color:'var(--ink-2)'}}><b style={{color:'var(--ink)'}}>발송한 공지·이벤트는 성도 앱 「교회 소식」 게시판에 자동 노출됩니다.</b> 성도는 홈 이벤트 배너 또는 알림을 통해 목록과 상세를 확인합니다.</div>
      </div>

      {/* sent history */}
      <Panel title="발송 내역" sub="최근 발송·예약·임시저장 · 성도 앱 게시판과 연동" right={<span className="muted" style={{fontSize:13}}>{notices.length}건</span>} pad={false}>
        <table className="tbl">
          <thead><tr><th style={{paddingLeft:22}}>제목</th><th>구분</th><th>대상</th><th>도달</th><th>상태</th><th style={{paddingRight:22}}>시점</th></tr></thead>
          <tbody>
            {notices.map(n=>(
              <tr key={n.id}>
                <td style={{paddingLeft:22}}><div className="u-name" style={{maxWidth:280,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{n.title}</div></td>
                <td><span className={`st ${n.kind==='말씀'?'gold':'blue'}`} style={{padding:'2px 9px'}}>{n.kind}</span></td>
                <td className="muted" style={{fontSize:13}}>{n.target}</td>
                <td className="tnum" style={{fontWeight:700}}>{n.reach?nf(n.reach):'—'}</td>
                <td><StatusBadge map={NOTICE_STATUS} value={n.status}/></td>
                <td className="muted tnum" style={{fontSize:13,paddingRight:22}}>{n.when}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </Panel>
    </div>
  );
}
window.NoticesScreen = NoticesScreen;