// ============ AI 코칭 백오피스 (관리자) ============
// 가이드·프롬프트 설정 + 코칭 로그 열람
function CoachingBackoffice({ showToast }){
  const { useState } = React;
  const [view, setView] = useState('settings'); // settings | logs
  const [persona, setPersona] = useState('따뜻하고 진솔한 신앙 선배의 어조. 정죄하지 않고 격려하며, 성도의 기록에서 발견한 강점을 먼저 짚어준 뒤 부드럽게 권면한다. 항상 소망으로 마무리한다.');
  const [areas, setAreas] = useState({ faith:true, prayer:true, vision:true });
  const [verseCount, setVerseCount] = useState(3);
  const [trigger, setTrigger] = useState(3);
  const [guardrail, setGuardrail] = useState(true);
  const [autoSuggest, setAutoSuggest] = useState(true);
  const [logDetail, setLogDetail] = useState(null);

  const AREA_LABELS = { faith:'신앙생활', prayer:'기도생활', vision:'미래의 꿈과 소명' };

  return (
    <div style={{display:'flex',flexDirection:'column',gap:18}}>
      {/* intro */}
      <div className="card" style={{padding:'16px 20px',background:'linear-gradient(100deg,var(--purple-bg),#FBFAFF)',borderColor:'var(--purple)'}}>
        <div className="row" style={{gap:13}}>
          <div style={{width:42,height:42,borderRadius:12,background:'var(--purple)',color:'#fff',display:'grid',placeItems:'center',flex:'0 0 auto'}}><Icon name="sparkle" size={22}/></div>
          <div className="grow">
            <div style={{fontWeight:800,fontSize:15}}>AI 신앙 코칭 백오피스</div>
            <div className="muted" style={{fontSize:13,marginTop:2}}>성도의 기록을 분석해 신앙·기도·소명을 코칭하는 AI의 가이드라인을 설정하고, 생성된 코칭 내역을 검토합니다.</div>
          </div>
          <span className="st done">운영중</span>
        </div>
      </div>

      <div className="seg" style={{width:'fit-content'}}>
        <button className={view==='settings'?'on':''} onClick={()=>setView('settings')}>가이드·프롬프트</button>
        <button className={view==='logs'?'on':''} onClick={()=>setView('logs')}>코칭 로그</button>
      </div>

      {view==='settings' ? (
        <div style={{display:'grid',gridTemplateColumns:'1fr 320px',gap:20,alignItems:'start'}}>
          <div style={{display:'flex',flexDirection:'column',gap:16}}>
            <Panel title="코칭 어조 · 페르소나" sub="AI가 성도에게 말을 건네는 톤을 결정합니다">
              <div className="field">
                <div className="label">시스템 프롬프트 <span className="st purple" style={{padding:'1px 7px',marginLeft:4}}>AI 지침</span></div>
                <textarea className="textarea" style={{minHeight:120}} value={persona} onChange={e=>setPersona(e.target.value)}/>
                <div className="hint">실제 서비스에서는 이 지침이 분석 모델의 시스템 프롬프트로 전달됩니다. (프로토타입에서는 미리보기만 제공)</div>
              </div>
            </Panel>

            <Panel title="분석 영역" sub="기록에서 어떤 주제를 코칭할지 선택합니다">
              <div style={{display:'flex',flexDirection:'column',gap:10}}>
                {Object.keys(AREA_LABELS).map(k=>(
                  <div key={k} className="spread" style={{padding:'12px 14px',border:'1px solid var(--line)',borderRadius:12}}>
                    <div className="row" style={{gap:11}}>
                      <div style={{width:34,height:34,borderRadius:9,background:'var(--purple-bg)',color:'var(--purple)',display:'grid',placeItems:'center'}}><Icon name={k==='faith'?'book':k==='prayer'?'sparkle':'star'} size={17}/></div>
                      <div style={{fontWeight:700,fontSize:14}}>{AREA_LABELS[k]}</div>
                    </div>
                    <div className={`toggle ${areas[k]?'on':''}`} onClick={()=>setAreas(a=>({...a,[k]:!a[k]}))}></div>
                  </div>
                ))}
              </div>
            </Panel>

            <Panel title="민감 표현 가드레일" sub="안전장치 — 위기 표현 감지 시 처리 방식">
              <div className="spread" style={{padding:'13px 15px',border:'1px solid var(--line)',borderRadius:12,background: guardrail?'var(--gold-soft)':'transparent',borderColor: guardrail?'var(--gold-2)':'var(--line)'}}>
                <div className="row" style={{gap:11}}>
                  <div style={{width:36,height:36,borderRadius:10,background:'var(--danger-bg)',color:'var(--danger)',display:'grid',placeItems:'center'}}><Icon name="shield" size={18}/></div>
                  <div><div style={{fontWeight:700,fontSize:14}}>위기 표현 감지 시 교역자 연결 우선</div><div className="muted" style={{fontSize:12,marginTop:1}}>자해·심각한 우울 등 감지 시 AI 코칭 대신 담당 교역자 안내</div></div>
                </div>
                <div className={`toggle ${guardrail?'on':''}`} onClick={()=>setGuardrail(!guardrail)}></div>
              </div>
            </Panel>
          </div>

          <div style={{display:'flex',flexDirection:'column',gap:16,position:'sticky',top:88}}>
            <Panel title="응답 규칙">
              <div className="field" style={{marginBottom:16}}>
                <div className="label">제공 말씀 개수</div>
                <div className="seg" style={{width:'100%'}}>
                  {[2,3,4].map(n=>(<button key={n} className={verseCount===n?'on':''} style={{flex:1}} onClick={()=>setVerseCount(n)}>{n}개</button>))}
                </div>
                <div className="hint">코칭마다 가장 적합한 성경 구절 {verseCount}개를 제시</div>
              </div>
              <div className="spread" style={{padding:'12px 0',borderTop:'1px solid var(--line-2)'}}>
                <div><div style={{fontWeight:700,fontSize:14}}>자동 코칭 제안</div><div className="muted" style={{fontSize:12}}>기록이 쌓이면 홈에서 제안</div></div>
                <div className={`toggle ${autoSuggest?'on':''}`} onClick={()=>setAutoSuggest(!autoSuggest)}></div>
              </div>
              {autoSuggest && (
                <div className="field" style={{marginTop:8}}>
                  <div className="label">자동 제안 기준</div>
                  <div className="row" style={{gap:8}}>
                    <input className="input tnum" type="number" min="1" max="30" value={trigger} onChange={e=>setTrigger(Math.max(1,Math.min(30,+e.target.value||1)))} style={{width:80}}/>
                    <span className="muted" style={{fontSize:13}}>개 이상 기록 시 코칭 카드 노출</span>
                  </div>
                </div>
              )}
            </Panel>

            <Panel title="미리보기" sub="성도 화면에 표시될 형식">
              <div style={{padding:'14px',borderRadius:14,background:'linear-gradient(150deg,#11193A,#0A1024)',color:'#fff'}}>
                <div style={{fontSize:10.5,fontWeight:800,color:'#FFE6A8',letterSpacing:0.4}}>✨ AI 신앙 코칭</div>
                <div style={{fontSize:13,marginTop:8,lineHeight:1.55,color:'#E5EAF6'}}>"기록에서 감사와 진로 단어가 자주 보여요…"</div>
                <div style={{marginTop:10,paddingTop:10,borderTop:'1px solid rgba(255,255,255,0.1)',fontSize:11,color:'#9FB0D8'}}>+ 말씀 {verseCount}개 · {Object.values(areas).filter(Boolean).length}개 영역 분석</div>
              </div>
            </Panel>

            <button className="btn gold block" onClick={()=>showToast('AI 코칭 가이드를 저장했습니다')}><Icon name="check" size={16} sw={2.5}/>가이드 저장</button>
          </div>
        </div>
      ) : (
        <Panel title="코칭 생성 로그" sub="AI가 생성한 코칭 내역 · 감사 추적용" right={<span className="muted" style={{fontSize:13}}>{COACH_LOGS.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,textAlign:'right'}}>보기</th></tr></thead>
            <tbody>
              {COACH_LOGS.map(l=>(
                <tr key={l.id} style={{cursor:'pointer'}} onClick={()=>setLogDetail(l)}>
                  <td style={{paddingLeft:22}}><div className="cell-user"><div className="avatar sm">{l.member[0]}</div><div><div className="u-name">{l.member}</div><div className="u-sub">{l.dept}</div></div></div></td>
                  <td className="tnum" style={{fontWeight:700}}>{l.records}개</td>
                  <td><span className="st purple" style={{padding:'2px 9px'}}>{l.theme}</span></td>
                  <td className="tnum">{l.verses}개</td>
                  <td className="muted tnum" style={{fontSize:13}}>{l.at}</td>
                  <td style={{paddingRight:22,textAlign:'right'}}><button className="btn sm ghost" onClick={(e)=>{e.stopPropagation();setLogDetail(l);}}>상세<Icon name="chevR" size={15}/></button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Panel>
      )}

      {logDetail && <CoachLogDrawer log={logDetail} onClose={()=>setLogDetail(null)}/>}
    </div>
  );
}

function CoachLogDrawer({ log, onClose }){
  return (
    <div className="drawer-scrim" onClick={onClose}>
      <div className="drawer" onClick={e=>e.stopPropagation()}>
        <div style={{padding:'20px 26px',borderBottom:'1px solid var(--line)',display:'flex',alignItems:'center',gap:14}}>
          <div className="avatar gold" style={{width:48,height:48,fontSize:18}}>{log.member[0]}</div>
          <div className="grow">
            <div style={{fontSize:18,fontWeight:900,letterSpacing:'-0.5px'}}>{log.member}님 코칭 내역</div>
            <div className="muted" style={{fontSize:13,marginTop:2}}>{log.dept} · {log.at} · 기록 {log.records}개 분석</div>
          </div>
          <button className="btn icon ghost" onClick={onClose}><Icon name="x"/></button>
        </div>
        <div style={{padding:'22px 26px',display:'flex',flexDirection:'column',gap:18}}>
          <div className="card" style={{padding:'14px 16px',boxShadow:'none',background:'var(--panel-2)'}}>
            <div style={{fontSize:12,fontWeight:800,color:'var(--purple)',marginBottom:6}}>요약</div>
            <div style={{fontSize:13.5,lineHeight:1.6}}>{log.summary}</div>
          </div>
          {log.sections.map((s,i)=>(
            <div key={i}>
              <div className="label" style={{marginBottom:7}}>{s.title}</div>
              <div style={{fontSize:13.5,lineHeight:1.6,color:'var(--ink-2)'}}>{s.body}</div>
            </div>
          ))}
          <div>
            <div className="label" style={{marginBottom:9}}>제공한 말씀 {log.verseList.length}개</div>
            <div style={{display:'flex',flexDirection:'column',gap:8}}>
              {log.verseList.map((v,i)=>(
                <div key={i} className="card" style={{padding:'12px 14px',boxShadow:'none'}}>
                  <div style={{fontSize:13.5,fontWeight:600,lineHeight:1.5}}>"{v.t}"</div>
                  <div style={{fontSize:12,fontWeight:700,color:'var(--gold-2)',marginTop:5}}>{v.r}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="card" style={{padding:'12px 14px',boxShadow:'none',background:'var(--done-bg)',borderColor:'transparent'}}>
            <div className="row" style={{gap:8}}><Icon name="shield" size={15} style={{color:'var(--done)'}}/><span style={{fontSize:12.5,color:'var(--done)',fontWeight:700}}>민감 표현 감지 없음 · 정상 코칭 제공</span></div>
          </div>
        </div>
      </div>
    </div>
  );
}

const COACH_LOGS = [
  { id:'cl1', member:'최민준', dept:'청년1부', records:48, theme:'진로·소명', verses:3, at:'오늘 08:21',
    summary:'최근 3주 기록에서 "감사"와 "진로" 단어가 가장 자주 나타났어요. 마음의 무게를 정직하게 적어 내려가는 모습이 인상적입니다.',
    sections:[{title:'신앙생활',body:'예배와 묵상을 꾸준히 이어가고 있어요. "조급함" 표현이 6번 등장 — 하나님의 때를 신뢰하는 연습이 필요한 시기입니다.'},{title:'미래의 꿈과 소명',body:'"교사","아이들","도움" 단어가 반복돼요. 다른 사람을 세우는 일에 마음이 향하고 있습니다.'}],
    verseList:[{t:'너는 마음을 다하여 여호와를 신뢰하고 네 명철을 의지하지 말라',r:'잠언 3:5'},{t:'여호와를 기다리는 자는 새 힘을 얻으리니',r:'이사야 40:31'},{t:'네 시작은 미약하였으나 네 나중은 심히 창대하리라',r:'욥기 8:7'}] },
  { id:'cl2', member:'한소희', dept:'청년2부', records:62, theme:'기도생활', verses:3, at:'어제 21:05',
    summary:'기도 제목의 응답을 꾸준히 기록하고 있어요. 가족을 위한 중보가 깊어지고 있습니다.',
    sections:[{title:'기도생활',body:'응답받은 기도를 4건 기록 — 작은 응답을 놓치지 않는 시선이 좋습니다.'}],
    verseList:[{t:'쉬지 말고 기도하라',r:'데살로니가전서 5:17'},{t:'너희 염려를 다 주께 맡기라',r:'베드로전서 5:7'},{t:'구하라 그리하면 너희에게 주실 것이요',r:'마태복음 7:7'}] },
  { id:'cl3', member:'오지아', dept:'대학부', records:31, theme:'신앙생활', verses:3, at:'2일 전 13:40',
    summary:'새내기 신앙생활에서 작은 습관들이 자리잡고 있어요. 꾸준함이 가장 큰 강점입니다.',
    sections:[{title:'신앙생활',body:'매일 묵상을 짧게라도 이어가는 패턴이 보여요. 공동체 안에서의 나눔을 더해보면 좋겠습니다.'}],
    verseList:[{t:'항상 기뻐하라',r:'데살로니가전서 5:16'},{t:'네 길을 여호와께 맡기라',r:'시편 37:5'},{t:'내가 너와 함께 하리라',r:'여호수아 1:5'}] },
];

window.CoachingBackoffice = CoachingBackoffice;