// ============ 설정 · 권한 ============
function SettingsScreen({ showToast }){
  const { useState } = React;
  const [notif, setNotif] = useState({ newMember:true, report:true, weekly:true, donation:false });
  const flip = (k)=> setNotif(n=>({...n,[k]:!n[k]}));

  const ADMINS = [
    { name:'정한별 목사', role:'담임목사 · 총괄', tag:'전체 권한', cls:'gold', last:'오늘 09:12' },
    { name:'이루미 간사', role:'사무간사 · 일상 운영', tag:'일상 운영', cls:'blue', last:'어제 17:40' },
    { name:'김다윗 전도사', role:'청년부 교역자', tag:'일상 운영', cls:'blue', last:'3일 전' },
  ];
  const NOTI = [
    ['newMember','새 가입 신청','새가족이 가입을 신청하면 알림'],
    ['report','커뮤니티 신고','글이 신고되면 즉시 알림'],
    ['weekly','주간 리포트','매주 월요일 운영 요약 발송'],
    ['donation','후원 입금','후원이 입금되면 알림'],
  ];

  return (
    <div style={{display:'grid',gridTemplateColumns:'1.3fr 1fr',gap:20,alignItems:'start'}}>
      <div style={{display:'flex',flexDirection:'column',gap:18}}>
        <Panel title="관리자 계정" sub="역할에 따라 보이는 메뉴와 권한이 달라집니다" right={<button className="btn gold sm" onClick={()=>showToast('관리자 초대 링크를 복사했습니다','ok')}><Icon name="plus" size={15}/>관리자 초대</button>} pad={false}>
          <table className="tbl">
            <thead><tr><th style={{paddingLeft:22}}>관리자</th><th>권한</th><th>최근 접속</th><th style={{paddingRight:22,textAlign:'right'}}>관리</th></tr></thead>
            <tbody>
              {ADMINS.map((a,i)=>(
                <tr key={i}>
                  <td style={{paddingLeft:22}}><div className="cell-user"><div className="avatar gold">{a.name[0]}</div><div><div className="u-name">{a.name}</div><div className="u-sub">{a.role}</div></div></div></td>
                  <td><span className={`st ${a.cls}`} style={{padding:'2px 9px'}}>{a.tag}</span></td>
                  <td className="muted tnum" style={{fontSize:13}}>{a.last}</td>
                  <td style={{paddingRight:22,textAlign:'right'}}><button className="btn sm ghost"><Icon name="more" size={16}/></button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Panel>

        <Panel title="권한 정책" sub="역할별 가능 작업 — 담임목사는 전체, 간사는 일상 운영">
          <div className="card" style={{padding:0,boxShadow:'none'}}>
            {[['대시보드·통계 열람','●','●'],['성도 승인·정지','●','●'],['공지·말씀 발송','●','●'],['커뮤니티 신고 처리','●','●'],['콘텐츠·미션 편집','●','◐ 일부'],['후원·재정 열람','●','◐ 등록'],['관리자 권한 부여','●','—']].map(([label,a,b],i)=>(
              <div key={i} style={{display:'grid',gridTemplateColumns:'1.6fr 1fr 1fr',padding:'12px 16px',borderTop:i?'1px solid var(--line-2)':'none',alignItems:'center'}}>
                <span style={{fontWeight:600,fontSize:13.5}}>{label}</span>
                <span style={{textAlign:'center',fontWeight:800,color:'var(--done)'}}>{a}</span>
                <span style={{textAlign:'center',fontWeight:800,color: b==='—'?'var(--ink-4)': b.includes('◐')?'var(--wip)':'var(--done)',fontSize: b.length>2?12.5:16}}>{b}</span>
              </div>
            ))}
            <div style={{display:'grid',gridTemplateColumns:'1.6fr 1fr 1fr',padding:'10px 16px',background:'var(--panel-2)',borderTop:'1px solid var(--line)'}}>
              <span></span><span className="muted" style={{textAlign:'center',fontSize:11.5,fontWeight:800}}>담임목사</span><span className="muted" style={{textAlign:'center',fontSize:11.5,fontWeight:800}}>사무간사</span>
            </div>
          </div>
        </Panel>
      </div>

      <div style={{display:'flex',flexDirection:'column',gap:18}}>
        <Panel title="알림 설정">
          <div style={{display:'flex',flexDirection:'column',gap:10}}>
            {NOTI.map(([k,t,d])=>(
              <div key={k} className="spread" style={{padding:'12px 14px',border:'1px solid var(--line)',borderRadius:12}}>
                <div><div style={{fontWeight:700,fontSize:14}}>{t}</div><div className="muted" style={{fontSize:12,marginTop:1}}>{d}</div></div>
                <div className={`toggle ${notif[k]?'on':''}`} onClick={()=>flip(k)}></div>
              </div>
            ))}
          </div>
        </Panel>

        <Panel title="접속 기록 (감사 로그)" sub="관리자 활동을 추적합니다" right={<button className="btn sm ghost"><Icon name="download" size={15}/></button>} pad={false}>
          <div style={{padding:'6px 0'}}>
            {ADMIN_LOG.map((l,i)=>(
              <div key={i} className="row" style={{gap:12,padding:'12px 20px',borderTop:i?'1px solid var(--line-2)':'none'}}>
                <div style={{width:34,height:34,borderRadius:10,background:'var(--panel-2)',display:'grid',placeItems:'center',flex:'0 0 auto',color:'var(--ink-3)'}}><Icon name="key" size={16}/></div>
                <div className="grow"><div style={{fontSize:13.5,fontWeight:600}}>{l.act}</div><div className="muted" style={{fontSize:12,marginTop:1}}>{l.who} · {l.when}</div></div>
                <span className="tag">{l.ip}</span>
              </div>
            ))}
          </div>
        </Panel>

        <Panel title="앱 연결 · 보안">
          <div style={{display:'flex',flexDirection:'column',gap:10}}>
            <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(--done-bg)',color:'var(--done)',display:'grid',placeItems:'center'}}><Icon name="lock" size={17}/></div><div><div style={{fontWeight:700,fontSize:14}}>2단계 인증</div><div className="muted" style={{fontSize:12}}>로그인 시 인증코드 필요</div></div></div>
              <div className="toggle on"></div>
            </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(--blue-bg)',color:'var(--blue)',display:'grid',placeItems:'center'}}><Icon name="globe" size={17}/></div><div><div style={{fontWeight:700,fontSize:14}}>앱 도메인</div><div className="muted mono" style={{fontSize:12}}>admin.ai-men.church</div></div></div>
              <span className="st done">연결됨</span>
            </div>
          </div>
        </Panel>
      </div>
    </div>
  );
}
window.SettingsScreen = SettingsScreen;