// ============ 성도 관리 ============
function MembersScreen({ members, setMembers, showToast, globalQ }){
  const { useState, useMemo } = React;
  const [filter, setFilter] = useState('pending');
  const [q, setQ] = useState('');
  const [sort, setSort] = useState({ key:'joined', dir:'desc' });
  const [detail, setDetail] = useState(null);
  const [confirm, setConfirm] = useState(null); // {member, action}
  const [roleFilter, setRoleFilter] = useState('all');

  const query = (globalQ || q).trim();

  const counts = {
    pending: members.filter(m=>m.status==='pending').length,
    all: members.filter(m=>m.status!=='rejected').length,
    active: members.filter(m=>m.status==='active').length,
    suspended: members.filter(m=>m.status==='suspended').length,
  };

  const filtered = useMemo(()=>{
    let list = members.filter(m=>m.status!=='rejected');
    if (filter==='pending') list = list.filter(m=>m.status==='pending');
    else if (filter==='active') list = list.filter(m=>m.status==='active');
    else if (filter==='suspended') list = list.filter(m=>m.status==='suspended');
    if (roleFilter!=='all') list = list.filter(m => (m.role||'성도')===roleFilter);
    if (query) list = list.filter(m => (m.name+m.dept+(m.grade||'')+(m.role||'')+m.email).toLowerCase().includes(query.toLowerCase()));
    list = [...list].sort((a,b)=>{
      let av=a[sort.key], bv=b[sort.key];
      if (sort.key==='records'||sort.key==='level'){ return sort.dir==='asc'?av-bv:bv-av; }
      av=String(av); bv=String(bv);
      return sort.dir==='asc'? av.localeCompare(bv): bv.localeCompare(av);
    });
    return list;
  }, [members, filter, roleFilter, query, sort]);

  const setStatus = (id, status, msg, type='ok') => {
    setMembers(ms => ms.map(m => m.id===id ? {...m, status} : m));
    if (msg) showToast(msg, type);
    setConfirm(null); setDetail(null);
  };

  const toggleSort = (key) => setSort(s => s.key===key ? {key, dir: s.dir==='asc'?'desc':'asc'} : {key, dir:'desc'});
  const arrow = (key) => sort.key===key ? <span className="arr">{sort.dir==='asc'?'▲':'▼'}</span> : null;

  const FILTERS = [
    { id:'pending', label:'승인 대기', n:counts.pending, gold:true },
    { id:'all', label:'전체', n:counts.all },
    { id:'active', label:'활동중', n:counts.active },
    { id:'suspended', label:'정지', n:counts.suspended },
  ];

  return (
    <div style={{display:'flex',flexDirection:'column',gap:18}}>
      {/* controls */}
      <div className="spread" style={{gap:14,flexWrap:'wrap'}}>
        <div className="chips">
          {FILTERS.map(f=>(
            <button key={f.id} className={`chip ${f.gold?'gold':''} ${filter===f.id?'on':''}`} onClick={()=>setFilter(f.id)}>
              {f.label}<span className="n">{f.n}</span>
            </button>
          ))}
        </div>
        <div className="row" style={{gap:10}}>
          <div className="af-select-wrap" style={{position:'relative'}}>
            <select className="select" style={{height:40,width:130,paddingRight:30,appearance:'none',cursor:'pointer'}} value={roleFilter} onChange={e=>setRoleFilter(e.target.value)}>
              <option value="all">전체 직분</option>
              {ROLE_OPTIONS.map(r=> <option key={r} value={r}>{r}</option>)}
            </select>
            <span style={{position:'absolute',right:11,top:'50%',transform:'translateY(-50%)',pointerEvents:'none',color:'var(--ink-3)',fontSize:11}}>▾</span>
          </div>
          <label className="tb-search" style={{width:220,height:40}}>
            <Icon name="search" size={17}/>
            <input placeholder="이름·학년·직분 검색" value={q} onChange={e=>setQ(e.target.value)} />
          </label>
          <button className="btn gold"><Icon name="plus" size={17}/>성도 추가</button>
        </div>
      </div>

      {/* table */}
      <section className="card" style={{overflow:'hidden'}}>
        <div className="scroll-x">
          <table className="tbl" style={{minWidth:880}}>
            <thead>
              <tr>
                <th style={{width:'26%'}}>성도</th>
                <th>연락처</th>
                <th>학년</th>
                <th>직분</th>
                <th className="sortable" onClick={()=>toggleSort('records')}>기록 수{arrow('records')}</th>
                <th className="sortable" onClick={()=>toggleSort('level')}>레벨{arrow('level')}</th>
                <th className="sortable" onClick={()=>toggleSort('joined')}>가입일{arrow('joined')}</th>
                <th>상태</th>
                <th style={{textAlign:'right'}}>관리</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(m=>(
                <tr key={m.id} className={m.status==='pending'?'hi':''} style={{cursor:'pointer'}} onClick={()=>setDetail(m)}>
                  <td>
                    <div className="cell-user">
                      <div className="avatar">{m.name[0]}</div>
                      <div><div className="u-name">{m.name}</div><div className="u-sub">{m.dept}{m.note?` · ${m.note}`:''}</div></div>
                    </div>
                  </td>
                  <td><div style={{fontSize:13}}>{m.phone}</div><div className="u-sub">{m.email}</div></td>
                  <td style={{fontSize:13,fontWeight:600}}>{m.grade||'—'}</td>
                  <td>{m.role && m.role!=='성도' ? <span className="st blue" style={{padding:'2px 9px'}}>{m.role}</span> : <span className="muted" style={{fontSize:13}}>{m.role||'성도'}</span>}</td>
                  <td className="tnum" style={{fontWeight:700}}>{m.status==='pending'?'—':nf(m.records)}</td>
                  <td>{m.status==='pending'?<span className="muted">—</span>:<span className="st gold" style={{padding:'2px 9px'}}>Lv.{m.level}</span>}</td>
                  <td className="tnum muted" style={{fontSize:13}}>{m.joined}</td>
                  <td><StatusBadge map={MEMBER_STATUS} value={m.status}/></td>
                  <td onClick={e=>e.stopPropagation()} style={{textAlign:'right'}}>
                    {m.status==='pending' ? (
                      <div className="row" style={{gap:6,justifyContent:'flex-end'}}>
                        <button className="btn ok sm" onClick={()=>setStatus(m.id,'active',`${m.name}님의 가입을 승인했습니다`)}><Icon name="check" size={15} sw={2.5}/>승인</button>
                        <button className="btn danger sm" onClick={()=>setConfirm({member:m,action:'reject'})}>거절</button>
                      </div>
                    ) : (
                      <button className="btn sm ghost" onClick={()=>setDetail(m)}>상세<Icon name="chevR" size={15}/></button>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {filtered.length===0 && <div className="empty"><div className="ea"><Icon name="search"/></div>조건에 맞는 성도가 없습니다.</div>}
      </section>
      <div className="muted" style={{fontSize:12.5,paddingLeft:4}}>총 {filtered.length}명 표시 · 클릭하면 상세 정보를 볼 수 있어요</div>

      {/* detail drawer */}
      {detail && <MemberDrawer member={detail} onClose={()=>setDetail(null)} onAction={(action)=>setConfirm({member:detail,action})} setStatus={setStatus}/>}

      {/* confirm */}
      <Confirm open={!!confirm && confirm.action==='reject'} danger icon="userX" title="가입을 거절할까요?"
        desc={`${confirm?.member.name}님의 가입 신청이 목록에서 제거됩니다. 성도에게는 별도 안내가 가지 않습니다.`}
        confirmLabel="거절" onClose={()=>setConfirm(null)}
        onConfirm={()=>setStatus(confirm.member.id,'rejected',`${confirm.member.name}님의 신청을 거절했습니다`,'danger')}/>
      <Confirm open={!!confirm && confirm.action==='suspend'} danger icon="ban" title="이용을 정지할까요?"
        desc={`${confirm?.member.name}님은 글 작성과 댓글이 제한됩니다. 언제든 해제할 수 있어요.`}
        confirmLabel="정지" onClose={()=>setConfirm(null)}
        onConfirm={()=>setStatus(confirm.member.id,'suspended',`${confirm.member.name}님을 이용 정지했습니다`,'danger')}/>
      <Confirm open={!!confirm && confirm.action==='restore'} icon="userCheck" title="정지를 해제할까요?"
        desc={`${confirm?.member.name}님이 다시 활동할 수 있게 됩니다.`}
        confirmLabel="해제" onClose={()=>setConfirm(null)}
        onConfirm={()=>setStatus(confirm.member.id,'active',`${confirm.member.name}님의 정지를 해제했습니다`)}/>
    </div>
  );
}

function MemberDrawer({ member, onClose, onAction, setStatus }){
  const m = member;
  const isActive = m.status==='active';
  return (
    <div className="drawer-scrim" onClick={onClose}>
      <div className="drawer" onClick={e=>e.stopPropagation()}>
        <div style={{padding:'22px 26px',borderBottom:'1px solid var(--line)',display:'flex',alignItems:'center',gap:14}}>
          <div className="avatar gold" style={{width:54,height:54,fontSize:20}}>{m.name[0]}</div>
          <div className="grow">
            <div style={{display:'flex',alignItems:'center',gap:9}}><span style={{fontSize:19,fontWeight:900,letterSpacing:'-0.5px'}}>{m.name}</span><StatusBadge map={MEMBER_STATUS} value={m.status}/>{m.role && m.role!=='성도' && <span className="st blue" style={{padding:'2px 9px'}}>{m.role}</span>}</div>
            <div className="muted" style={{fontSize:13,marginTop:3}}>{m.dept} · {m.grade||'학년 미입력'} · 가입 {m.joined}</div>
          </div>
          <button className="btn icon ghost" onClick={onClose}><Icon name="x"/></button>
        </div>
        <div style={{padding:'22px 26px',display:'flex',flexDirection:'column',gap:22}}>
          <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:12}}>
            {[['기록 수',nf(m.records)],['레벨',`Lv.${m.level}`],['최근 활동',m.last]].map(([l,v],i)=>(
              <div key={i} className="card" style={{padding:'14px 16px',boxShadow:'none'}}>
                <div className="muted" style={{fontSize:12}}>{l}</div>
                <div style={{fontSize:19,fontWeight:900,letterSpacing:'-0.5px',marginTop:4}}>{v}</div>
              </div>
            ))}
          </div>

          <div>
            <div className="label" style={{marginBottom:9}}>연락처</div>
            <div className="card" style={{padding:'4px 0',boxShadow:'none'}}>
              {[['전화',m.phone,'bell'],['이메일',m.email,'mail']].map(([l,v],i)=>(
                <div key={i} className="row" style={{padding:'11px 16px',borderTop:i?'1px solid var(--line-2)':'none'}}>
                  <span className="muted" style={{width:60,fontSize:13}}>{l}</span><span style={{fontWeight:600}}>{v}</span>
                </div>
              ))}
            </div>
          </div>

          <div>
            <div className="label" style={{marginBottom:9}}>활동 이력 <span className="tag" style={{marginLeft:6}}>최근 7일</span></div>
            <div className="chart-bars" style={{height:96}}>
              {[3,5,2,6,4,1,8].map((v,i)=>(<div key={i} className={`bcol ${i===6?'on':''}`}><div className="bg" style={{height:`${v/8*100}%`}}></div><div className="bl">{['월','화','수','목','금','토','일'][i]}</div></div>))}
            </div>
          </div>

          {m.note && <div className="card" style={{padding:'13px 16px',boxShadow:'none',background:'var(--gold-soft)',borderColor:'var(--gold-2)'}}>
            <div style={{fontSize:12,fontWeight:800,color:'var(--gold-ink)',marginBottom:4}}>관리자 메모</div>
            <div style={{fontSize:13.5,color:'var(--ink)'}}>{m.note}</div>
          </div>}
        </div>
        <div style={{padding:'18px 26px',borderTop:'1px solid var(--line)',display:'flex',gap:10,position:'sticky',bottom:0,background:'var(--panel)'}}>
          {m.status==='pending' && <button className="btn ok grow" onClick={()=>setStatus(m.id,'active',`${m.name}님을 승인했습니다`)}><Icon name="check" size={16} sw={2.5}/>가입 승인</button>}
          <button className="btn grow"><Icon name="shield" size={16}/>권한 부여</button>
          {isActive && <button className="btn danger grow" onClick={()=>onAction('suspend')}><Icon name="ban" size={16}/>이용 정지</button>}
          {m.status==='suspended' && <button className="btn ok grow" onClick={()=>onAction('restore')}><Icon name="userCheck" size={16}/>정지 해제</button>}
        </div>
      </div>
    </div>
  );
}

window.MembersScreen = MembersScreen;