// ============ 콘텐츠 관리 — 멘토 20인 · 캐릭터 · 미션 · 말씀 ============
function ContentScreen({ mentors, setMentors, showToast }){
  const { useState, useMemo } = React;
  const [tab, setTab] = useState('mentors');
  const [q, setQ] = useState('');
  const [edit, setEdit] = useState(null);
  const [editLevel, setEditLevel] = useState(null);
  const [light, setLight] = useState(null); // 캐릭터 크게 보기 라이트박스

  const TABS = [
    { id:'mentors', label:'멘토 20인', n:mentors.length },
    { id:'coaching', label:'AI 코칭' },
    { id:'character', label:'캐릭터·레벨' },
    { id:'mission', label:'미션·보상' },
    { id:'verse', label:'말씀 데이터' },
  ];

  const filtered = useMemo(()=> mentors.filter(m => (m.ko+m.en+m.role).toLowerCase().includes(q.toLowerCase())), [mentors, q]);
  const publishedN = mentors.filter(m=>m.published).length;

  const saveMentor = (next) => {
    setMentors(ms => ms.map(m => m.id===next.id ? next : m));
    showToast(`「${next.ko}」 멘토를 저장했습니다`);
    setEdit(null);
  };
  const togglePublish = (id, e) => {
    e.stopPropagation();
    setMentors(ms => ms.map(m => m.id===id ? {...m, published:!m.published} : m));
  };

  return (
    <div style={{display:'flex',flexDirection:'column',gap:18}}>
      <div className="tabs">
        {TABS.map(t=>(<button key={t.id} className={`tab ${tab===t.id?'on':''}`} onClick={()=>setTab(t.id)}>{t.label}{t.n&&<span className="n">{t.n}</span>}</button>))}
      </div>

      {tab==='mentors' && (
        <>
          <div className="card" style={{padding:'16px 20px',background:'linear-gradient(100deg,var(--gold-soft),#FFFDF6)',borderColor:'var(--gold-2)'}}>
            <div className="row" style={{gap:13}}>
              <div style={{width:42,height:42,borderRadius:12,background:'var(--gold)',color:'#3A2D07',display:'grid',placeItems:'center',flex:'0 0 auto'}}><Icon name="star" size={22} fill/></div>
              <div className="grow">
                <div style={{fontWeight:800,fontSize:15}}>AI 멘토는 이 앱의 핵심입니다 <span style={{color:'var(--gold-ink)'}}>★</span></div>
                <div className="muted" style={{fontSize:13,marginTop:2}}>20인의 인물 스토리·대표 말씀·말투(페르소나)가 AI 응답의 톤을 결정합니다. 코드 수정 없이 여기서 편집하세요.</div>
              </div>
              <div className="row" style={{gap:18}}>
                <div style={{textAlign:'center'}}><div style={{fontSize:22,fontWeight:900,color:'var(--gold-ink)'}}>{publishedN}</div><div className="muted" style={{fontSize:11}}>공개중</div></div>
                <div style={{textAlign:'center'}}><div style={{fontSize:22,fontWeight:900}}>{mentors.length-publishedN}</div><div className="muted" style={{fontSize:11}}>비공개</div></div>
              </div>
            </div>
          </div>

          <div className="spread">
            <label className="tb-search" style={{width:'100%',maxWidth:360,height:40}}><Icon name="search" size={17}/><input placeholder="멘토 이름·역할 검색" value={q} onChange={e=>setQ(e.target.value)}/></label>
          </div>

          <div className="mentor-grid">
            {filtered.map(m=>(
              <div key={m.id} className="mentor-card" onClick={()=>setLight({ kind:'mentor', img:`mentors/${m.id}.webp`, title:m.ko, en:m.en, sub:m.role, mentor:m })}>
                <div className="fig">
                  <span className="no">{String(MENTORS.findIndex(x=>x.id===m.id)+1).padStart(2,'0')}</span>
                  <span className="pub" onClick={(e)=>togglePublish(m.id,e)} title={m.published?'공개중 (클릭하여 비공개)':'비공개 (클릭하여 공개)'}>
                    <span className={`st ${m.published?'done':'todo'}`} style={{padding:'2px 8px',cursor:'pointer'}}><span className="d"></span>{m.published?'공개':'비공개'}</span>
                  </span>
                  <MentorImg id={m.id} alt={m.ko}/>
                </div>
                <div className="meta">
                  <div className="nm">{m.ko}<span className="en">{m.en}</span></div>
                  <div className="tl">{m.role}</div>
                  <div className="row" style={{marginTop:8,gap:6}}>
                    <span className="st gold" style={{padding:'2px 7px',fontSize:11}}>Lv.{m.level}</span>
                    {m.chats>0 ? <span className="muted" style={{fontSize:11.5}}><Icon name="community" size={12} style={{verticalAlign:'-2px'}}/> {nf(m.chats)} 대화</span> : <span className="muted" style={{fontSize:11.5}}>미사용</span>}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </>
      )}

      {tab==='coaching' && <window.CoachingBackoffice showToast={showToast}/>}
      {tab==='character' && <CharacterTab onZoom={setLight}/>}
      {tab==='mission' && <MissionTab showToast={showToast}/>}
      {tab==='verse' && <VerseTab/>}

      {edit && <MentorEditor mentor={edit} onClose={()=>setEdit(null)} onSave={saveMentor}/>}
      {editLevel && <LevelEditor level={editLevel} onClose={()=>setEditLevel(null)} onSave={()=>{ showToast(`「${editLevel.name}」 레벨을 저장했습니다`); setEditLevel(null); }}/>}
      {light && <CharacterLightbox data={light} onClose={()=>setLight(null)} onEdit={
        light.mentor ? ()=>{ setEdit({...light.mentor}); setLight(null); }
        : light.level ? ()=>{ setEditLevel({...light.level}); setLight(null); }
        : null
      }/>}
    </div>
  );
}

function MentorEditor({ mentor, onClose, onSave }){
  const { useState } = React;
  const [m, setM] = useState(mentor);
  const set = (k,v) => setM(p=>({...p,[k]:v}));
  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 style={{width:60,height:60,borderRadius:16,overflow:'hidden',flex:'0 0 auto',background:'radial-gradient(ellipse 80% 70% at 50% 95%,#EEF2FA,#F7F9FC)',display:'flex',alignItems:'flex-end',justifyContent:'center'}}>
            <img src={`mentors/${m.id}.webp`} alt={m.ko} style={{width:'92%',height:'100%',objectFit:'contain',objectPosition:'bottom'}}/>
          </div>
          <div className="grow">
            <div style={{fontSize:20,fontWeight:900,letterSpacing:'-0.5px'}}>{m.ko} <span className="mono muted" style={{fontSize:13,fontWeight:600}}>{m.en}</span></div>
            <div className="muted" style={{fontSize:13,marginTop:2}}>{m.role} · 누적 {nf(m.chats)} 대화</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="field"><div className="label">역할 한 줄 소개</div><input className="input" value={m.role} onChange={e=>set('role',e.target.value)}/></div>
          <div className="field"><div className="label">인물 스토리</div><textarea className="textarea" value={m.story} onChange={e=>set('story',e.target.value)} style={{minHeight:96}}/><div className="hint">AI가 인물을 설명하거나 자기소개할 때 사용하는 배경입니다.</div></div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 160px',gap:12}}>
            <div className="field"><div className="label">대표 말씀</div><input className="input" value={m.verse} onChange={e=>set('verse',e.target.value)}/></div>
            <div className="field"><div className="label">출처</div><input className="input" value={m.ref} onChange={e=>set('ref',e.target.value)}/></div>
          </div>
          <div className="field"><div className="label">말투 · 페르소나 <span className="st gold" style={{padding:'1px 7px',marginLeft:4}}>AI 톤</span></div><textarea className="textarea" value={m.persona} onChange={e=>set('persona',e.target.value)} style={{minHeight:84}}/><div className="hint">응답의 어조와 성격을 결정합니다. 예) "담대하고 묵직한 지도자의 어조".</div></div>
          <div className="row" style={{gap:12}}>
            <div className="field grow"><div className="label">캐릭터 레벨</div>
              <div className="seg" style={{width:'fit-content'}}>{[1,2,3,4,5].map(lv=>(<button key={lv} className={m.level===lv?'on':''} onClick={()=>set('level',lv)}>Lv.{lv}</button>))}</div>
            </div>
          </div>
          <div className="spread" style={{padding:'13px 16px',border:'1px solid var(--line)',borderRadius:12}}>
            <div><div style={{fontWeight:700,fontSize:14}}>성도 앱에 공개</div><div className="muted" style={{fontSize:12.5}}>꺼두면 멘토 목록에서 숨겨집니다</div></div>
            <div className={`toggle ${m.published?'on':''}`} onClick={()=>set('published',!m.published)}></div>
          </div>
        </div>
        <div style={{padding:'16px 26px',borderTop:'1px solid var(--line)',display:'flex',gap:10,justifyContent:'flex-end',position:'sticky',bottom:0,background:'var(--panel)'}}>
          <button className="btn ghost" onClick={onClose}>취소</button>
          <button className="btn gold" onClick={()=>onSave(m)}><Icon name="check" size={16} sw={2.5}/>저장하기</button>
        </div>
      </div>
    </div>
  );
}

function CharacterTab({ onZoom }){
  const STAGES = [
    { lv:'Lv.1', name:'기도 새싹', c:'#9AA8C4', img:'1', from:0, unlocks:['기본 랜턴 보유','회색 기본 외투','마스코트 첫 등장'] },
    { lv:'Lv.2', name:'기도나무', c:'#7FB89A', img:'2', from:100, unlocks:['외투 색상 선택 해금','작은 별 배지','랜턴 빛 강도 업'] },
    { lv:'Lv.3', name:'믿음 지킴이', c:'#6FA8DC', img:'3', from:300, unlocks:['황금 랜턴 업그레이드','망토·머리 장식','기도 두루마리'] },
    { lv:'Lv.4', name:'비저너리', c:'#E7B23E', img:'4', from:600, unlocks:['빛나는 별 지팡이','특수 배경 선택','황금빛 오라 이펙트'] },
    { lv:'Lv.5', name:'드림챔피언', c:'#C99A2E', img:'5', from:1000, unlocks:['황금 외투·왕관','빛의 후광·전설 오브제','명예의 전당 등재'] },
  ];
  return (
    <Panel title="캐릭터 · 레벨 설정" sub="앱 '내정보'·'홈'의 캐릭터(성장나무) 일러스트와 레벨업 XP 기준을 관리하는 곳입니다">
      <div style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:14,marginBottom:20}}>
        {STAGES.map((s,i)=>(
          <div key={i} className="card" style={{padding:14,textAlign:'center',boxShadow:'none',cursor:'pointer'}} onClick={()=>onZoom && onZoom({ kind:'level', img:`characters/avatar-${s.img}.png`, title:s.lv, sub:s.name, tint:s.c, level:s })}>
            <div style={{aspectRatio:'1',borderRadius:12,background:`linear-gradient(160deg,${s.c}22,${s.c}0a)`,border:`1px solid ${s.c}55`,display:'grid',placeItems:'center',marginBottom:10,overflow:'hidden'}}>
              <img src={`characters/avatar-${s.img}.png`} alt={s.name} style={{width:'88%',height:'88%',objectFit:'contain'}}/>
            </div>
            <div style={{fontWeight:800,fontSize:13}}>{s.lv}</div><div className="muted" style={{fontSize:11.5}}>{s.name}</div>
          </div>
        ))}
      </div>
      <div className="card" style={{padding:0,boxShadow:'none'}}>
        {[['Lv.1 → 2','100 XP'],['Lv.2 → 3','300 XP'],['Lv.3 → 4','600 XP'],['Lv.4 → 5','1,000 XP']].map(([a,b],i)=>(
          <div key={i} className="spread" style={{padding:'13px 16px',borderTop:i?'1px solid var(--line-2)':'none'}}>
            <span style={{fontWeight:700}}>{a}</span>
            <div className="row" style={{gap:10}}><span className="tag">{b}</span><button className="btn sm ghost"><Icon name="edit" size={14}/>수정</button></div>
          </div>
        ))}
      </div>
    </Panel>
  );
}

function MissionTab({ showToast }){
  const MISS = [
    ['📝','오늘의 기도노트 작성','매일','+10 XP',true],
    ['📖','오늘의 말씀 읽기','매일','+5 XP',true],
    ['💬','신앙 멘토와 대화','매일','+5 XP',true],
    ['🙏','7일 연속 출석','이벤트','+50 XP · 뱃지',true],
    ['❤️','감사노트 3개 작성','주간','+20 XP',false],
  ];
  return (
    <Panel title="미션 · 보상 규칙" sub="앱 '홈'의 데일리 미션과 지급 보상(XP)을 관리하는 곳입니다" right={<button className="btn gold sm" onClick={()=>showToast('미션 추가 (데모)','info')}><Icon name="plus" size={15}/>미션 추가</button>}>
      <div className="card" style={{padding:0,boxShadow:'none'}}>
        {MISS.map(([e,t,cycle,reward,on],i)=>(
          <div key={i} className="spread" style={{padding:'14px 16px',borderTop:i?'1px solid var(--line-2)':'none'}}>
            <div className="row" style={{gap:12}}>
              <div style={{width:40,height:40,borderRadius:11,background:'var(--panel-2)',display:'grid',placeItems:'center',fontSize:20}}>{e}</div>
              <div><div style={{fontWeight:700}}>{t}</div><div className="muted" style={{fontSize:12,marginTop:1}}>{cycle} · {reward}</div></div>
            </div>
            <div className={`toggle ${on?'on':''}`}></div>
          </div>
        ))}
      </div>
    </Panel>
  );
}

function VerseTab(){
  const V = [['마태복음 11:28','수고하고 무거운 짐 진 자들아 다 내게로 오라','오늘'],['시편 23:1','여호와는 나의 목자시니 내게 부족함이 없으리로다','어제'],['빌립보서 4:13','내게 능력 주시는 자 안에서 내가 모든 것을 할 수 있느니라','6/6'],['이사야 40:31','오직 여호와를 앙망하는 자는 새 힘을 얻으리니','6/5']];
  return (
    <Panel title="말씀 데이터 · 노출 일정" sub="앱 '홈'의 「오늘의 말씀」에 노출되는 성경 구절을 관리하는 곳입니다" right={<button className="btn gold sm"><Icon name="plus" size={15}/>말씀 추가</button>}>
      <div className="card" style={{padding:0,boxShadow:'none'}}>
        {V.map(([ref,txt,when],i)=>(
          <div key={i} className="spread" style={{padding:'14px 16px',borderTop:i?'1px solid var(--line-2)':'none'}}>
            <div className="row" style={{gap:13}}>
              <div style={{width:38,height:38,borderRadius:10,background:'var(--gold-soft)',color:'var(--gold-ink)',display:'grid',placeItems:'center',flex:'0 0 auto'}}><Icon name="book" size={18}/></div>
              <div style={{maxWidth:520}}><div style={{fontWeight:700,fontSize:13.5,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{txt}</div><div className="muted" style={{fontSize:12,marginTop:1}}>{ref}</div></div>
            </div>
            <div className="row" style={{gap:10}}><span className={`st ${when==='오늘'?'gold':'todo'}`} style={{padding:'2px 9px'}}>{when}</span><button className="btn sm ghost"><Icon name="edit" size={14}/></button></div>
          </div>
        ))}
      </div>
    </Panel>
  );
}

window.ContentScreen = ContentScreen;

// ============ 캐릭터 · 멘토 크게 보기 라이트박스 ============
function CharacterLightbox({ data, onClose, onEdit }){
  const tint = data.tint || '#C99A2E';
  const isMentor = data.kind === 'mentor';
  return (
    <div className="char-light-scrim" onClick={onClose}>
      <div className="char-light" onClick={e=>e.stopPropagation()}>
        <button className="char-light-x" onClick={onClose} aria-label="닫기"><Icon name="x" size={20}/></button>
        <div className="char-light-stage" style={{background:`radial-gradient(ellipse 70% 60% at 50% 78%, ${tint}28, ${isMentor?'#0E1838':'#F4F7FC'} 72%)`}}>
          <img src={data.img} alt={data.title} className="char-light-img"/>
        </div>
        <div className="char-light-meta">
          <div className="char-light-title">{data.title}{data.en && <span className="char-light-en">{data.en}</span>}</div>
          <div className="char-light-sub">{data.sub}</div>
          {isMentor && data.mentor && (
            <div className="char-light-tags">
              <span className="st gold" style={{padding:'3px 10px'}}>Lv.{data.mentor.level}</span>
              <span className={`st ${data.mentor.published?'done':'todo'}`} style={{padding:'3px 10px'}}><span className="d"></span>{data.mentor.published?'공개중':'비공개'}</span>
              {data.mentor.chats>0 && <span className="muted" style={{fontSize:13}}><Icon name="community" size={14} style={{verticalAlign:'-3px'}}/> {nf(data.mentor.chats)} 대화</span>}
            </div>
          )}
          {isMentor && data.mentor && <div className="char-light-verse">"{data.mentor.verse}" <b>{data.mentor.ref}</b></div>}
          {onEdit && <button className="btn gold" style={{marginTop:16}} onClick={onEdit}><Icon name="edit" size={16}/>{isMentor?'이 멘토 편집하기':'이 레벨 편집하기'}</button>}
        </div>
      </div>
    </div>
  );
}
window.CharacterLightbox = CharacterLightbox;

// ============ 레벨 캐릭터 편집 드로어 ============
function LevelEditor({ level, onClose, onSave }){
  const { useState } = React;
  const [L, setL] = useState(level);
  const set = (k,v)=> setL(p=>({...p,[k]:v}));
  const setUnlock = (i,v)=> setL(p=>{ const u=[...p.unlocks]; u[i]=v; return {...p,unlocks:u}; });
  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 style={{width:60,height:60,borderRadius:16,overflow:'hidden',flex:'0 0 auto',background:`linear-gradient(160deg,${L.c}22,${L.c}0a)`,border:`1px solid ${L.c}55`,display:'grid',placeItems:'center'}}>
            <img src={`characters/avatar-${L.img}.png`} alt={L.name} style={{width:'88%',height:'88%',objectFit:'contain'}}/>
          </div>
          <div className="grow">
            <div style={{fontSize:20,fontWeight:900,letterSpacing:'-0.5px'}}>{L.lv} <span className="muted" style={{fontSize:14,fontWeight:700}}>{L.name}</span></div>
            <div className="muted" style={{fontSize:13,marginTop:2}}>{L.from===0?'시작 단계':`${nf(L.from)} XP 이상`}</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="field"><div className="label">단계 이름</div><input className="input" value={L.name} onChange={e=>set('name',e.target.value)}/></div>
          <div className="field"><div className="label">레벨 도달 XP 기준</div>
            <div className="row" style={{gap:8}}><input className="input tnum" type="number" min="0" step="50" value={L.from} onChange={e=>set('from',Math.max(0,+e.target.value||0))} style={{width:140}}/><span className="muted" style={{fontSize:13}}>XP 이상이면 이 레벨</span></div>
          </div>
          <div className="field">
            <div className="label">캐릭터 일러스트</div>
            <div className="card" style={{padding:'14px 16px',boxShadow:'none',display:'flex',alignItems:'center',gap:14}}>
              <div style={{width:64,height:64,borderRadius:12,overflow:'hidden',flex:'0 0 auto',background:`linear-gradient(160deg,${L.c}22,${L.c}0a)`,display:'grid',placeItems:'center'}}>
                <img src={`characters/avatar-${L.img}.png`} alt={L.name} style={{width:'90%',height:'90%',objectFit:'contain'}}/>
              </div>
              <div className="grow"><div style={{fontWeight:700,fontSize:13.5}}>현재 일러스트</div><div className="muted" style={{fontSize:12,marginTop:2}}>avatar-{L.img}.png</div></div>
              <button className="btn sm"><Icon name="image" size={15}/>이미지 교체</button>
            </div>
            <div className="hint">앱 성장 트리·홈·내정보에 노출되는 캐릭터 이미지입니다.</div>
          </div>
          <div className="field">
            <div className="label">해금 요소</div>
            <div style={{display:'flex',flexDirection:'column',gap:8}}>
              {L.unlocks.map((u,i)=>(
                <div key={i} className="row" style={{gap:8}}>
                  <span style={{width:24,height:24,borderRadius:7,background:'var(--gold-soft)',color:'var(--gold-ink)',display:'grid',placeItems:'center',fontSize:12,fontWeight:800,flex:'0 0 auto'}}>{i+1}</span>
                  <input className="input" value={u} onChange={e=>setUnlock(i,e.target.value)}/>
                </div>
              ))}
            </div>
            <div className="hint">이 레벨에 도달하면 해금되는 외형·아이템입니다.</div>
          </div>
        </div>
        <div style={{padding:'16px 26px',borderTop:'1px solid var(--line)',display:'flex',gap:10,justifyContent:'flex-end',position:'sticky',bottom:0,background:'var(--panel)'}}>
          <button className="btn ghost" onClick={onClose}>취소</button>
          <button className="btn gold" onClick={onSave}><Icon name="check" size={16} sw={2.5}/>저장하기</button>
        </div>
      </div>
    </div>
  );
}
window.LevelEditor = LevelEditor;