// ============ 커뮤니티 운영 ============
function CommunityScreen({ reports, setReports, showToast }){
  const { useState } = React;
  const [filter, setFilter] = useState('pending');
  const [confirm, setConfirm] = useState(null);
  const [careModal, setCareModal] = useState(null); // 교역자 연결 설계 제안 팝업

  const counts = {
    pending: reports.filter(r=>r.status==='pending').length,
    all: reports.length,
    posted: reports.filter(r=>r.status==='posted').length,
    hidden: reports.filter(r=>r.status==='hidden').length,
  };
  const list = reports.filter(r => filter==='all' ? true : r.status===filter);

  const resolve = (id, status, msg, type='ok') => {
    setReports(rs => rs.map(r => r.id===id ? {...r, status} : r));
    showToast(msg, type); setConfirm(null);
  };

  const CAT = { '간증':'gold', '묵상':'blue', '기도제목':'purple' };

  // 신고 유형별 상단 컬러 띠 분류
  const bandFor = (r) => {
    if (r.sensitive) return { tone:'purple', icon:'heart', fill:true, label:'돌봄이 필요한 표현 감지 · 삭제보다 담당 교역자 연결을 권장합니다' };
    const rs = (r.reasons||[]).join(' ');
    if (/비방|혐오|분란/.test(rs)) return { tone:'danger', icon:'ban', label:'비방·혐오 신고' };
    if (/스팸|광고/.test(rs)) return { tone:'blue', icon:'external', label:'스팸·광고 신고' };
    if (/도배|반복/.test(rs)) return { tone:'wip', icon:'flag', fill:true, label:'도배·반복 게시 신고' };
    if ((r.reasons||[]).length>0) return { tone:'wip', icon:'flag', fill:true, label:'기타 신고 접수' };
    return { tone:'done', icon:'check', label:'신고 없음 · 정상 게시 중' };
  };

  const FILTERS = [
    { id:'pending', label:'신고 대기', n:counts.pending },
    { id:'all', label:'전체 글', n:counts.all },
    { id:'posted', label:'게시중', n:counts.posted },
    { id:'hidden', label:'숨김', n:counts.hidden },
  ];

  return (
    <div style={{display:'flex',flexDirection:'column',gap:18}}>
      {/* mini stats */}
      <div className="kpi-grid" style={{gridTemplateColumns:'repeat(3,1fr)'}}>
        {[['오늘 신고 접수',String(counts.pending),'flag','danger'],['이번 주 신고 처리 완료','17','check','done'],['평균 처리 시간','2.4시간','clock','blue']].map(([l,v,ic,tone],i)=>(
          <div key={i} className="kpi">
            <div className="kicon" style={{background:`var(--${tone}-bg)`,color:`var(--${tone})`}}><Icon name={ic}/></div>
            <div className="klabel">{l}</div><div className="kval">{v}</div>
          </div>
        ))}
      </div>

      <div className="chips">
        {FILTERS.map(f=>(<button key={f.id} className={`chip ${filter===f.id?'on':''}`} onClick={()=>setFilter(f.id)}>{f.label}<span className="n">{f.n}</span></button>))}
      </div>

      <div style={{display:'flex',flexDirection:'column',gap:14}}>
        {list.map(r=>{ const band=bandFor(r); return (
          <section key={r.id} className="card" style={{padding:0, overflow:'hidden', borderColor: r.status==='pending'?`var(--${band.tone})`:'var(--line)'}}>
            <div style={{display:'flex',alignItems:'center',gap:9,padding:'10px 18px',background:`var(--${band.tone}-bg)`,color:`var(--${band.tone})`,fontSize:13,fontWeight:800}}>
              <Icon name={band.icon} size={16} fill={band.fill}/> {band.label}
            </div>
            <div style={{padding:'18px 20px'}}>
              <div className="spread" style={{marginBottom:12}}>
                <div className="row" style={{gap:11}}>
                  <div className="avatar">{r.author.includes('익명')?'?':r.author[0]}</div>
                  <div>
                    <div className="row" style={{gap:8}}>
                      <span className="u-name">{r.author}</span>
                      <span className={`st ${CAT[r.cat]}`} style={{padding:'2px 9px'}}>{r.cat}</span>
                    </div>
                    <div className="muted" style={{fontSize:12,marginTop:2}}>{r.when}</div>
                  </div>
                </div>
                <div className="row" style={{gap:8}}>
                  {r.reports>0 && <span className="st danger"><Icon name="flag" size={12} fill/>신고 {r.reports}</span>}
                  <StatusBadge map={REPORT_STATUS} value={r.status}/>
                </div>
              </div>

              <div style={{fontSize:14.5,lineHeight:1.65,color:'var(--ink)',padding:'14px 16px',background:'var(--panel-2)',borderRadius:12,border:'1px solid var(--line-2)'}}>{r.text}</div>

              {r.reasons.length>0 && (
                <div className="row" style={{gap:8,marginTop:12,flexWrap:'wrap'}}>
                  <span className="muted" style={{fontSize:12.5,fontWeight:700}}>신고 사유</span>
                  {r.reasons.map((x,i)=>(<span key={i} className="tag" style={{color:'var(--danger)',borderColor:'var(--danger-bg)',background:'var(--danger-bg)'}}>{x}</span>))}
                </div>
              )}

              {r.status==='pending' && (
                <div className="row" style={{gap:9,marginTop:16,paddingTop:16,borderTop:'1px solid var(--line-2)'}}>
                  {r.sensitive
                    ? <button className="btn" style={{borderColor:'var(--purple)',color:'var(--purple)'}} onClick={()=>setCareModal(r)}><Icon name="heart" size={16}/>교역자 연결</button>
                    : null}
                  <button className="btn ok" onClick={()=>resolve(r.id,'posted','게시를 유지했습니다')}><Icon name="check" size={16} sw={2.5}/>게시 유지</button>
                  <button className="btn" onClick={()=>resolve(r.id,'hidden','글을 숨김 처리했습니다 · 작성자에게 사유가 안내됩니다','info')}><Icon name="eyeOff" size={16}/>숨김</button>
                  <button className="btn danger" onClick={()=>setConfirm({report:r,action:'delete'})}><Icon name="trash" size={16}/>삭제</button>
                  <div className="grow"></div>
                  <button className="btn ghost" onClick={()=>setConfirm({report:r,action:'ban'})}><Icon name="ban" size={16}/>작성자 제재</button>
                </div>
              )}
              {r.status!=='pending' && (
                <div className="row" style={{gap:9,marginTop:14,paddingTop:14,borderTop:'1px solid var(--line-2)'}}>
                  {r.status==='hidden' && <button className="btn ok sm" onClick={()=>resolve(r.id,'posted','다시 게시했습니다')}><Icon name="eye" size={15}/>다시 게시</button>}
                  {r.status==='posted' && r.reports>0 && <button className="btn sm" onClick={()=>resolve(r.id,'hidden','숨김 처리했습니다','info')}><Icon name="eyeOff" size={15}/>숨김</button>}
                  <span className="muted" style={{fontSize:12.5}}>처리 완료된 글입니다</span>
                </div>
              )}
            </div>
          </section>
        );})}
        {list.length===0 && <div className="card"><div className="empty"><div className="ea"><Icon name="check"/></div>해당하는 글이 없습니다. 깨끗합니다 ✨</div></div>}
      </div>

      <Confirm open={!!confirm && confirm.action==='delete'} danger icon="trash" title="글을 삭제할까요?"
        desc="삭제된 글은 복구할 수 없습니다. 작성자에게 삭제 사유가 안내됩니다." confirmLabel="삭제"
        onClose={()=>setConfirm(null)} onConfirm={()=>resolve(confirm.report.id,'hidden','글을 삭제했습니다','danger')}/>
      <Confirm open={!!confirm && confirm.action==='ban'} danger icon="ban" title="작성자를 제재할까요?"
        desc="반복 위반자의 글 작성·댓글이 일정 기간 제한됩니다. 익명 글도 내부적으로 식별됩니다." confirmLabel="제재"
        onClose={()=>setConfirm(null)} onConfirm={()=>resolve(confirm.report.id,'hidden','작성자를 제재하고 글을 숨겼습니다','danger')}/>

      {careModal && <CareProposalModal report={careModal} onClose={()=>setCareModal(null)} onConfirm={()=>{ resolve(careModal.id,'posted','담당 교역자에게 돌봄 연결을 요청했습니다 (데모)','ok'); setCareModal(null); }}/>}
    </div>
  );
}
window.CommunityScreen = CommunityScreen;

// ============ 교역자 연결 — 설계 제안 팝업 ============
function CareProposalModal({ report, onClose, onConfirm }){
  const STEPS = [
    { ic:'mail', tone:'blue', t:'담당 교역자에게 알림', d:'글쓴이가 속한 부서(예: 청년부)의 담당 교역자에게 "돌봄이 필요한 성도가 있습니다" 알림을 보냅니다. 카카오 알림톡·문자·앱 푸시 중 선택.' },
    { ic:'userCheck', tone:'purple', t:'성도 정보 전달', d:'글쓴이의 이름·연락처·부서와 해당 글을 교역자에게 함께 전달합니다. 익명 글은 개인정보 보호 절차를 거쳐 최소 정보만 안내합니다.' },
    { ic:'shield', tone:'done', t:'돌봄 케이스 기록', d:'누가·언제·어느 교역자에게 연결했고, 이후 심방·상담·기도 등 후속 조치가 어떻게 진행됐는지 추적하는 돌봄 기록을 남깁니다.' },
  ];
  return (
    <div className="scrim" onClick={onClose}>
      <div className="modal" style={{maxWidth:600}} onClick={e=>e.stopPropagation()}>
        <div className="modal-head">
          <div style={{width:48,height:48,borderRadius:14,flex:'0 0 auto',display:'grid',placeItems:'center',background:'var(--purple-bg)',color:'var(--purple)'}}>
            <Icon name="heart" size={24} fill/>
          </div>
          <div style={{flex:1}}>
            <div style={{fontSize:19,fontWeight:900,letterSpacing:'-0.5px'}}>담당 교역자 연결 — 기능 설계 제안</div>
            <div style={{fontSize:13.5,color:'var(--ink-2)',marginTop:6,lineHeight:1.55}}>
              돌봄이 필요한 성도를 교역자와 잇는 기능입니다. 실제 연동에 앞서 아래 흐름으로 설계할 것을 제안드립니다.
            </div>
          </div>
        </div>

        <div className="modal-body">
          <div className="card" style={{padding:'13px 15px',boxShadow:'none',background:'var(--purple-bg)',borderColor:'transparent',marginBottom:18}}>
            <div style={{fontSize:12,fontWeight:800,color:'var(--purple)',marginBottom:4}}>이 글</div>
            <div style={{fontSize:13.5,color:'var(--ink)',lineHeight:1.55}}>"{report.text}"</div>
            <div className="muted" style={{fontSize:12,marginTop:6}}>{report.author} · {report.cat}</div>
          </div>

          <div style={{display:'flex',flexDirection:'column',gap:12}}>
            {STEPS.map((s,i)=>(
              <div key={i} className="row" style={{gap:13,alignItems:'flex-start'}}>
                <div style={{position:'relative',flex:'0 0 auto',display:'flex',flexDirection:'column',alignItems:'center'}}>
                  <div style={{width:38,height:38,borderRadius:11,display:'grid',placeItems:'center',background:`var(--${s.tone}-bg)`,color:`var(--${s.tone})`}}><Icon name={s.ic} size={19}/></div>
                  {i<STEPS.length-1 && <div style={{width:2,flex:1,minHeight:14,background:'var(--line)',marginTop:4}}></div>}
                </div>
                <div style={{paddingBottom:i<STEPS.length-1?4:0}}>
                  <div style={{fontWeight:800,fontSize:14.5}}><span style={{color:'var(--ink-3)',fontWeight:700,marginRight:6}}>{i+1}</span>{s.t}</div>
                  <div style={{fontSize:13,color:'var(--ink-2)',marginTop:3,lineHeight:1.6}}>{s.d}</div>
                </div>
              </div>
            ))}
          </div>

          <div className="card" style={{padding:'12px 15px',boxShadow:'none',background:'var(--gold-soft)',borderColor:'var(--gold-2)',marginTop:18}}>
            <div className="row" style={{gap:8,alignItems:'flex-start'}}>
              <span style={{color:'var(--gold-ink)',marginTop:1}}><Icon name="sparkle" size={16}/></span>
              <div style={{fontSize:12.5,color:'var(--gold-ink)',lineHeight:1.6}}>
                <b>아직 설계 단계입니다.</b> "어떻게 연결할지"(알림만 / 교역자 배정 / 후속 추적)와 익명 글 처리 방침을 먼저 정한 뒤 실제 연동을 붙입니다. 아래 버튼은 데모용으로, 연결을 요청한 것으로 처리합니다.
              </div>
            </div>
          </div>
        </div>

        <div className="modal-foot">
          <button className="btn ghost" onClick={onClose}>닫기</button>
          <button className="btn" style={{background:'var(--purple)',borderColor:'var(--purple)',color:'#fff'}} onClick={onConfirm}><Icon name="heart" size={16}/>연결 요청 (데모)</button>
        </div>
      </div>
    </div>
  );
}
window.CareProposalModal = CareProposalModal;