// ============ AI-Men 관리자 콘솔 · App Shell ============
const { useState, useMemo, useCallback, useEffect, useRef } = React;

const NAV = [
  { id:'dashboard', label:'대시보드', icon:'dashboard', group:'한눈에 보기' },
  { id:'notices', label:'홈 · 공지·말씀', icon:'notice', group:'앱 화면 관리', app:'홈' },
  { id:'content', label:'멘토 · 콘텐츠', icon:'content', group:'앱 화면 관리', app:'멘토' },
  { id:'community', label:'커뮤니티 관리', icon:'community', group:'앱 화면 관리', app:'커뮤니티' },
  { id:'members', label:'성도 관리', icon:'members', group:'앱 화면 관리', app:'내정보' },
  { id:'analytics', label:'통계 · 후원', icon:'analytics', group:'운영 · 시스템' },
  { id:'settings', label:'설정 · 권한', icon:'settings', group:'운영 · 시스템' },
];

const PAGE_META = {
  dashboard:{ t:'대시보드', s:'성도님들의 앱 운영 현황을 한눈에', app:'앱 전체', icon:'dashboard',
    guide:'성도님들이 쓰는 앱의 전체 사용 현황을 한눈에 보고, 지금 바로 처리할 일을 확인하는 곳입니다.' },
  members:{ t:'성도 관리', s:"앱 '내정보' 화면의 성도 정보를 관리", app:'내정보', icon:'members',
    guide:"앱에 가입한 성도(회원)를 관리하는 곳입니다. 새 가입을 승인하고, 앱 '내정보' 화면에 표시되는 학년·직분·레벨을 관리합니다." },
  notices:{ t:'홈 · 공지 · 오늘의 말씀', s:"앱 '홈'의 말씀·교회소식을 발송", app:'홈', icon:'notice',
    guide:"앱 '홈' 화면의 「오늘의 말씀」과 「교회 소식」 게시판에 올라가는 글을 작성하고 발송하는 곳입니다." },
  community:{ t:'커뮤니티 관리', s:'앱 커뮤니티 글을 검토·관리', app:'커뮤니티', icon:'community',
    guide:"앱 '커뮤니티' 탭의 묵상·간증 글과 신고를 검토하고, 게시·숨김·제재를 처리하는 곳입니다." },
  content:{ t:'멘토 · 콘텐츠 관리', s:'앱 멘토 20인·캐릭터·미션·AI코칭', app:'멘토', icon:'content',
    guide:"앱의 핵심인 '멘토' 20인과 캐릭터 성장·미션·AI 코칭 등 앱 콘텐츠를 직접 수정하는 곳입니다." },
  analytics:{ t:'통계 · 후원 현황', s:'앱 사용 통계와 후원을 분석', app:'앱 전체', icon:'analytics',
    guide:'성도님들의 앱 사용(출석·기록)과 후원 현황을 분석해 보는 곳입니다.' },
  settings:{ t:'설정 · 권한', s:'관리자 계정·알림·접속 기록', app:'관리자 사이트', icon:'settings',
    guide:'이 관리자 사이트 자체를 설정하는 곳입니다. 관리자 계정과 권한, 알림, 접속 기록을 관리합니다.' },
};

function App(){
  const [screen, setScreen] = useState('dashboard');
  const [members, setMembers] = useState(() => MEMBERS.map(m => ({...m})));
  const [reports, setReports] = useState(() => REPORTS.map(r => ({...r})));
  const [mentors, setMentors] = useState(() => MENTORS.map(m => ({...m})));
  const [notices, setNotices] = useState(() => NOTICES.map(n => ({...n})));
  const [toasts, setToasts] = useState([]);
  const [globalQ, setGlobalQ] = useState('');
  const tid = useRef(0);

  const showToast = useCallback((msg, type='ok') => {
    const id = ++tid.current;
    setToasts(t => [...t, { id, msg, type }]);
    setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 3000);
  }, []);

  const pendingCount = members.filter(m => m.status === 'pending').length;
  const reportCount = reports.filter(r => r.status === 'pending').length;

  useEffect(() => { document.querySelector('.content').scrollTo?.(0,0); window.scrollTo(0,0); }, [screen]);

  const go = useCallback((s) => setScreen(s), []);

  const screenProps = { members, setMembers, reports, setReports, mentors, setMentors, notices, setNotices, showToast, go, globalQ };

  const Screen = {
    dashboard: window.DashboardScreen,
    members: window.MembersScreen,
    notices: window.NoticesScreen,
    community: window.CommunityScreen,
    content: window.ContentScreen,
    analytics: window.AnalyticsScreen,
    settings: window.SettingsScreen,
  }[screen];

  const meta = PAGE_META[screen];

  return (
    <div className="shell">
      <aside className="sidebar">
        <div className="sb-brand">
          <div className="logo"><span className="cross"></span></div>
          <div>
            <div className="bt">AI-Men</div>
            <div className="bs">중문교회 관리자</div>
          </div>
        </div>
        {['한눈에 보기','앱 화면 관리','운영 · 시스템'].map(grp => (
          <div key={grp}>
            <div className="sb-sec">{grp}</div>
            <nav className="sb-nav">
              {NAV.filter(n => n.group === grp).map(n => {
                const badge = n.id === 'members' ? pendingCount : n.id === 'community' ? reportCount : 0;
                return (
                  <button key={n.id} className={`sb-item ${screen === n.id ? 'on' : ''}`} onClick={() => go(n.id)}>
                    <span className="ic"><Icon name={n.icon} /></span>
                    <span className="sb-item-text">
                      <span className="sb-item-label">{n.label}</span>
                      {n.app && <span className="sb-item-app">앱 · {n.app} 화면</span>}
                    </span>
                    {badge > 0 && <span className={`badge ${n.id==='community'?'red':''}`}>{badge}</span>}
                  </button>
                );
              })}
            </nav>
          </div>
        ))}
        <div className="sb-foot">
          <div className="sb-user">
            <div className="av">정</div>
            <div className="grow">
              <div className="nm">정한별 목사</div>
              <div className="rl">담임목사 · 전체 권한</div>
            </div>
            <button className="out" title="로그아웃" onClick={() => showToast('로그아웃되었습니다 (데모)','info')}><Icon name="logout" size={18}/></button>
          </div>
        </div>
      </aside>

      <div className="main">
        <header className="topbar">
          <div className="tb-title">
            <div className="t">{meta.t}</div>
            <div className="s">{meta.s}</div>
          </div>
          <div className="tb-spacer"></div>
          <label className="tb-search">
            <Icon name="search" size={17}/>
            <input placeholder="성도·공지·멘토 검색" value={globalQ} onChange={e=>setGlobalQ(e.target.value)}
              onKeyDown={e=>{ if(e.key==='Enter' && globalQ.trim()){ go('members'); } }}/>
          </label>
          <button className="tb-icon" title="알림" onClick={()=>showToast('새 알림 '+ (pendingCount+reportCount) +'건','info')}>
            <Icon name="bell" size={19}/>{(pendingCount+reportCount)>0 && <span className="dot"></span>}
          </button>
          <button className="tb-icon" title="설정" onClick={()=>go('settings')}><Icon name="settings" size={19}/></button>
        </header>

        <main className="content">
          <div className="page screen-anim" key={screen}>
            {meta.guide && (
              <div className="page-guide">
                <span className="pg-icon"><Icon name={meta.icon} size={20}/></span>
                <div className="pg-body">
                  <span className="pg-app">📱 {meta.app}</span>
                  <span className="pg-text">{meta.guide}</span>
                </div>
              </div>
            )}
            {Screen ? <Screen {...screenProps} /> : <div className="empty">화면을 준비 중입니다.</div>}
          </div>
        </main>
      </div>

      <div className="toast-wrap">
        {toasts.map(t => (
          <div key={t.id} className={`toast ${t.type}`}>
            <span className="ic"><Icon name={t.type==='danger'?'x':'check'} size={14} sw={3}/></span>
            {t.msg}
          </div>
        ))}
      </div>
    </div>
  );
}

window.AdminApp = App;