// ============================================================
// AI-Men · 신규 기능 화면 (성도 앱)
//   1) AICoachingScreen — 기록 분석 기반 신앙 코칭 + 말씀 3개
//   2) LifeVerseScreen — 나의 인생 구절 락인 타임라인(+편집)
// 전역 스코프 공유: Icon, NightSky, MainAvatar, UserStore,
//   fireConfetti, titleForXp, STAGE_TITLES (다른 Babel 파일에서 정의됨)
// ============================================================
const { useState: fxState, useEffect: fxEffect, useRef: fxRef } = React;

// ---- 데모 코칭 결과 (개발 전 프로토타입: 그럴듯한 샘플) ----
const COACHING_RESULT = {
  records: 48,
  prayers: 21,
  thanks: 14,
  meditations: 13,
  summary: '최근 3주간의 기록에서 \u201c감사\u201d와 \u201c진로\u201d 단어가 가장 자주 나타났어요. 마음의 무게를 정직하게 적어 내려가는 모습이 인상적입니다.',
  sections: [
    {
      icon: '🙏', tone: 'blue', title: '신앙생활',
      insight: '예배와 묵상을 꾸준히 이어가고 있어요. 다만 \u201c조급함\u201d이라는 표현이 6번 등장했어요. 하나님의 때를 신뢰하는 연습이 필요한 시기예요.',
      action: '이번 주 \u201c기다림\u201d을 주제로 3일 연속 묵상을 기록해 보세요.',
    },
    {
      icon: '🕯️', tone: 'gold', title: '기도생활',
      insight: '기도 제목의 대부분이 \u201c가족\u201d과 \u201c진로\u201d에 집중되어 있어요. 응답을 기록한 기도가 4건 있어요 \u2014 작은 응답을 놓치지 않고 적은 점이 좋습니다.',
      action: '응답받은 기도에 \u201c감사\u201d 태그를 달아 다시 읽어보세요.',
    },
    {
      icon: '🌟', tone: 'purple', title: '미래의 꿈과 소명',
      insight: '\u201c교사\u201d, \u201c도움\u201d, \u201c아이들\u201d이라는 단어가 반복돼요. 다른 사람을 세우고 가르치는 일에 마음이 향하고 있는 것 같아요. 이 방향을 위해 기도해 온 흔적이 보입니다.',
      action: '소명을 적은 \u201c비전 노트\u201d를 한 편 작성해 보세요.',
    },
  ],
  verses: [
    { verse: '너는 마음을 다하여 여호와를 신뢰하고 네 명철을 의지하지 말라', ref: '잠언 3:5', why: '조급함을 내려놓고 하나님을 신뢰하라는 권면' },
    { verse: '여호와를 기다리는 자는 새 힘을 얻으리니 독수리가 날개치며 올라감 같을 것이요', ref: '이사야 40:31', why: '기다림의 시간에 주시는 위로' },
    { verse: '네 시작은 미약하였으나 네 나중은 심히 창대하리라', ref: '욥기 8:7', why: '소명을 향한 첫걸음을 격려' },
  ],
};

function AICoachingScreen({ onBack }) {
  const u = (window.UserStore && window.UserStore.get()) || { name: '은혜' };
  const [phase, setPhase] = fxState('analyzing'); // analyzing | result
  const [step, setStep] = fxState(0);
  const steps = ['기도 기록을 읽는 중', '감사노트를 묵상하는 중', '꿈과 소명을 정리하는 중', '말씀을 고르는 중'];

  fxEffect(() => {
    if (phase !== 'analyzing') return;
    const t1 = setInterval(() => setStep(s => Math.min(s + 1, steps.length - 1)), 620);
    const t2 = setTimeout(() => { setPhase('result'); clearInterval(t1); }, 2700);
    return () => { clearInterval(t1); clearTimeout(t2); };
  }, [phase]);

  const R = COACHING_RESULT;

  return (
    <>
      {typeof NightSky === 'function' && <NightSky showMoon={false} />}
      <div className="welcome-shell coach-screen">
        <div className="home-night-topbar">
          <button className="hnt-icon" aria-label="Back" onClick={onBack}><Icon name="chev-left" /></button>
          <div className="hnt-brand"><span>AI 신앙 코칭</span></div>
          <div style={{ width: 34 }} />
        </div>

        {phase === 'analyzing' ? (
          <div className="coach-analyzing">
            <div className="ca-orb">
              <div className="ca-orb-core">✨</div>
              <div className="ca-ring r1" /><div className="ca-ring r2" /><div className="ca-ring r3" />
            </div>
            <div className="ca-title">{u.name}님의 기록을<br/>묵상하고 있어요</div>
            <div className="ca-steps">
              {steps.map((s, i) => (
                <div key={i} className={`ca-step ${i < step ? 'done' : ''} ${i === step ? 'active' : ''}`}>
                  <span className="cas-dot">{i < step ? '✓' : ''}</span>{s}
                </div>
              ))}
            </div>
            <div className="ca-note">분석한 기록 {R.records}개 · 기도 {R.prayers} · 감사 {R.thanks} · 묵상 {R.meditations}</div>
          </div>
        ) : (
          <div className="coach-result">
            {/* intro */}
            <div className="cr-intro">
              <div className="cri-badge">✨ {R.records}개의 기록을 묵상했어요</div>
              <div className="cri-summary">{R.summary}</div>
            </div>

            {/* sections */}
            <div className="cr-sections">
              {R.sections.map((sec, i) => (
                <div key={i} className={`cr-card tone-${sec.tone}`}>
                  <div className="crc-head">
                    <span className="crc-emoji">{sec.icon}</span>
                    <span className="crc-title">{sec.title}</span>
                  </div>
                  <div className="crc-insight">{sec.insight}</div>
                  <div className="crc-action"><span className="crca-label">이렇게 해보세요</span>{sec.action}</div>
                </div>
              ))}
            </div>

            {/* verses */}
            <div className="cr-verses">
              <div className="crv-head">
                <span className="crv-head-title">{u.name}님에게 드리는 오늘의 말씀</span>
                <span className="crv-head-count">{R.verses.length}구절</span>
              </div>
              {R.verses.map((v, i) => (
                <div key={i} className="crv-card">
                  <div className="crv-num">{i + 1}</div>
                  <div className="crv-body">
                    <div className="crv-quote">"{v.verse}"</div>
                    <div className="crv-meta"><span className="crv-ref">{v.ref}</span><span className="crv-why">{v.why}</span></div>
                  </div>
                </div>
              ))}
            </div>

            <div className="cr-actions">
              <button className="wa-primary" onClick={() => { setPhase('analyzing'); setStep(0); }}>다시 분석하기</button>
              <button className="wa-secondary" onClick={onBack}>홈으로 돌아가기</button>
            </div>
            <div className="cr-foot">AI 코칭은 {u.name}님의 기록을 바탕으로 생성된 참고용 가이드예요. 자세한 권면은 담당 교역자와 나눠보세요.</div>
          </div>
        )}
      </div>
    </>
  );
}

// ============================================================
// 나의 인생 구절 — 락인 타임라인 (+ 새 구절 추가)
// ============================================================
function LifeVerseScreen({ onBack }) {
  const [user, setUser] = fxState(() => (window.UserStore && window.UserStore.get()) || {});
  const [adding, setAdding] = fxState(false);
  const [verse, setVerse] = fxState('');
  const [ref, setRef] = fxState('');
  const [note, setNote] = fxState('');
  const [toast, setToast] = fxState('');

  const list = user.lifeVerses || [];
  const current = list[0];
  const title = (window.titleForXp && window.titleForXp(user.xp || 0)) || { title: '동행자', emoji: '🌿' };

  function save() {
    if (!verse.trim() || !ref.trim()) return;
    const next = window.UserStore.addLifeVerse({ verse: verse.trim(), ref: ref.trim(), note: note.trim(), stageTitle: title.title });
    setUser(Object.assign({}, next));
    setVerse(''); setRef(''); setNote(''); setAdding(false);
    setToast('나의 인생 구절이 기록되었어요 🔒');
    setTimeout(() => setToast(''), 2200);
  }

  return (
    <>
      {typeof NightSky === 'function' && <NightSky showMoon={false} />}
      <div className="welcome-shell lifeverse-screen">
        <div className="home-night-topbar">
          <button className="hnt-icon" aria-label="Back" onClick={onBack}><Icon name="chev-left" /></button>
          <div className="hnt-brand"><span>나의 인생 구절</span></div>
          <div style={{ width: 34 }} />
        </div>

        {/* current */}
        <div className="lv-current">
          <div className="lvc-eyebrow">📖 지금 나의 인생 구절</div>
          {current ? (
            <>
              <div className="lvc-quote">"{current.verse}"</div>
              <div className="lvc-ref">{current.ref}</div>
              {current.note && <div className="lvc-note">{current.note}</div>}
            </>
          ) : <div className="lvc-empty">아직 등록한 구절이 없어요</div>}
          {!adding && (
            <button className="lvc-add" onClick={() => setAdding(true)}>＋ 인생구절 바꾸기</button>
          )}
        </div>

        {/* add form */}
        {adding && (
          <div className="lv-form">
            <div className="lvf-title">지금 마음에 새긴 말씀을 기록해요</div>
            <textarea className="lvf-input area" placeholder="구절 내용 (예: 항상 기뻐하라 쉬지 말고 기도하라)" value={verse} onChange={e => setVerse(e.target.value)} maxLength={140} />
            <input className="lvf-input" placeholder="출처 (예: 데살로니가전서 5:16)" value={ref} onChange={e => setRef(e.target.value)} maxLength={40} />
            <input className="lvf-input" placeholder="이 구절을 고른 이유 (선택)" value={note} onChange={e => setNote(e.target.value)} maxLength={60} />
            <div className="lvf-actions">
              <button className="lvf-cancel" onClick={() => setAdding(false)}>취소</button>
              <button className={`lvf-save ${verse.trim() && ref.trim() ? '' : 'disabled'}`} onClick={save}>기록하기</button>
            </div>
            <div className="lvf-hint">🔒 이전 구절은 사라지지 않고 아래 타임라인에 차곡차곡 쌓여요.</div>
          </div>
        )}

        {/* timeline (lock-in) */}
        <div className="lv-timeline">
          <div className="lvt-head">나의 성장 구절 기록 <span>{list.length}</span></div>
          <div className="lvt-track">
            {list.map((v, i) => (
              <div key={v.id || i} className={`lvt-node ${i === 0 ? 'now' : ''}`}>
                <div className="lvt-dot"><span /></div>
                <div className="lvt-card">
                  <div className="lvt-top">
                    <span className="lvt-stage">{v.stageTitle || '기록'}</span>
                    <span className="lvt-date">{v.at}</span>
                  </div>
                  <div className="lvt-quote">"{v.verse}"</div>
                  <div className="lvt-ref">{v.ref}</div>
                  {v.note && <div className="lvt-note">{v.note}</div>}
                  {i === 0 && <span className="lvt-now-badge">현재</span>}
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="lv-foot">시간이 흐르며 바뀌는 인생 구절이 곧 나의 신앙 성장 이야기가 돼요.</div>
      </div>
      {toast && <div className="cm-toast" style={{ bottom: 30 }}>{toast}</div>}
    </>
  );
}

window.AICoachingScreen = AICoachingScreen;
window.LifeVerseScreen = LifeVerseScreen;

// ============================================================
// 추천(전달) 바텀시트 + 성장점수 + 팡파레
//   글(성경구절/기도/감사)을 다른 성도에게 추천 → +5점
//   50·100·200점 도달 시 컨페티 팡파레
// ============================================================
const RECIPIENTS = [
  { id: 'u_minjun', name: '최민준', dept: '청년1부', title: '믿음 지킴이', emoji: '⭐' },
  { id: 'u_sohee', name: '한소희', dept: '청년2부', title: '비저너리', emoji: '🌟' },
  { id: 'u_jia', name: '오지아', dept: '대학부', title: '기도나무', emoji: '🌿' },
  { id: 'u_taek', name: '윤태경', dept: '장년부', title: '드림챔피언', emoji: '🏆' },
  { id: 'u_haneul', name: '강하늘', dept: '청년1부', title: '기도 새싹', emoji: '🌱' },
  { id: 'u_subin', name: '임수빈', dept: '청년2부', title: '믿음 지킴이', emoji: '⭐' },
];
const REC_MILESTONES = [50, 100, 200];

function RecommendSheet({ open, item, onClose, onSent }) {
  const [picked, setPicked] = fxState(null);
  const [msg, setMsg] = fxState('');
  const [phase, setPhase] = fxState('pick'); // pick | success
  const [award, setAward] = fxState({ points: 5, total: 0, milestone: null });

  fxEffect(() => {
    if (open) { setPicked(null); setMsg(''); setPhase('pick'); }
  }, [open]);

  if (!open) return null;

  const item0 = item || { kind: '성경 구절', text: '내게 능력 주시는 자 안에서 내가 모든 것을 할 수 있느니라', ref: '빌립보서 4:13' };

  function send() {
    const before = (window.UserStore && window.UserStore.get().growthPoints) || 0;
    const next = window.UserStore ? window.UserStore.addRecommend(5) : { growthPoints: before + 5 };
    const total = next.growthPoints;
    const milestone = REC_MILESTONES.find(m => before < m && total >= m) || null;
    setAward({ points: 5, total, milestone });
    setPhase('success');
    // confetti
    if (window.fireConfetti) {
      window.fireConfetti({ count: milestone ? 150 : 60 });
      if (milestone) setTimeout(() => window.fireConfetti({ count: 120 }), 400);
    }
    onSent && onSent(total, milestone);
  }

  const nextMilestone = REC_MILESTONES.find(m => m > award.total) || (award.total + 50);

  return (
    <div className="rec-scrim" onClick={onClose}>
      <div className={`rec-sheet ${phase}`} onClick={e => e.stopPropagation()}>
        {phase === 'pick' ? (
          <>
            <div className="rec-grip" />
            <div className="rec-title">이 글을 전달하기 🎁</div>
            <div className="rec-sub">마음에 닿은 말씀·기도·감사를 다른 성도에게 추천해요</div>

            <div className="rec-item">
              <span className="rec-item-kind">{item0.kind}</span>
              <div className="rec-item-text">"{item0.text}"</div>
              {item0.ref && <div className="rec-item-ref">{item0.ref}</div>}
            </div>

            <div className="rec-label">받을 성도 선택</div>
            <div className="rec-people">
              {RECIPIENTS.map(p => (
                <button key={p.id} className={`rec-person ${picked === p.id ? 'on' : ''}`} onClick={() => setPicked(p.id)}>
                  <span className="rec-ava">{p.emoji}</span>
                  <span className="rec-person-body">
                    <span className="rec-person-name">{p.name}</span>
                    <span className="rec-person-dept">{p.dept} · {p.title}</span>
                  </span>
                  <span className="rec-check">{picked === p.id ? '✓' : ''}</span>
                </button>
              ))}
            </div>

            <input className="rec-msg" placeholder="한마디 남기기 (선택)" value={msg} onChange={e => setMsg(e.target.value)} maxLength={50} />

            <button className={`rec-send ${picked ? '' : 'disabled'}`} onClick={() => picked && send()}>
              추천 보내기 <span className="rec-send-pts">+5점</span>
            </button>
            <div className="rec-foot">추천한 만큼 나의 성장 점수가 쌓여요 · 받은 분께 알림이 가요</div>
          </>
        ) : (
          <div className="rec-success">
            <div className="rec-burst">{award.milestone ? '🎉' : '🎁'}</div>
            {award.milestone ? (
              <>
                <div className="rec-big">{award.milestone}점 달성! 🎊</div>
                <div className="rec-success-sub">나눔으로 <b>{award.milestone}점</b>을 돌파했어요!<br/>당신의 따뜻한 추천이 공동체를 세웁니다.</div>
              </>
            ) : (
              <>
                <div className="rec-big">추천을 보냈어요</div>
                <div className="rec-success-sub">{RECIPIENTS.find(p => p.id === picked)?.name}님에게 전달되었어요</div>
              </>
            )}
            <div className="rec-award">
              <span className="rec-award-plus">+{award.points}점</span>
              <span className="rec-award-total">누적 성장점수 {award.total}점</span>
            </div>
            <div className="rec-progress">
              <div className="rec-progress-bar"><div className="rec-progress-fill" style={{ width: `${Math.min(100, (award.total / nextMilestone) * 100)}%` }} /></div>
              <div className="rec-progress-label">다음 {nextMilestone}점까지 {Math.max(0, nextMilestone - award.total)}점</div>
            </div>
            <button className="rec-done" onClick={onClose}>닫기</button>
          </div>
        )}
      </div>
    </div>
  );
}

// ============================================================
// 이달의 랭킹 + 성장나무별 획득 닉네임 목록
// ============================================================
const RANK_DATA = {
  growth: [
    { rank: 1, name: '윤태경', dept: '장년부', value: 412, title: '드림챔피언', emoji: '🏆' },
    { rank: 2, name: '한소희', dept: '청년2부', value: 388, title: '비저너리', emoji: '🌟' },
    { rank: 3, name: '서준호', dept: '대학부', value: 351, title: '비저너리', emoji: '🌟' },
    { rank: 4, name: '최민준', dept: '청년1부', value: 295, title: '믿음 지킴이', emoji: '⭐' },
    { rank: 5, name: '배유진', dept: '청년1부', value: 270, title: '믿음 지킴이', emoji: '⭐' },
  ],
  prayer: [
    { rank: 1, name: '한소희', dept: '청년2부', value: 64, title: '비저너리', emoji: '🌟' },
    { rank: 2, name: '윤태경', dept: '장년부', value: 58, title: '드림챔피언', emoji: '🏆' },
    { rank: 3, name: '오지아', dept: '대학부', value: 47, title: '기도나무', emoji: '🌿' },
  ],
  thanks: [
    { rank: 1, name: '서준호', dept: '대학부', value: 52, title: '비저너리', emoji: '🌟' },
    { rank: 2, name: '임수빈', dept: '청년2부', value: 49, title: '믿음 지킴이', emoji: '⭐' },
    { rank: 3, name: '강하늘', dept: '청년1부', value: 41, title: '기도나무', emoji: '🌿' },
  ],
  share: [
    { rank: 1, name: '최민준', dept: '청년1부', value: 38, title: '믿음 지킴이', emoji: '⭐' },
    { rank: 2, name: '배유진', dept: '청년1부', value: 33, title: '믿음 지킴이', emoji: '⭐' },
    { rank: 3, name: '한소희', dept: '청년2부', value: 29, title: '비저너리', emoji: '🌟' },
  ],
};
const RANK_TABS = [
  { id: 'growth', label: '성장왕', icon: '📈', unit: '점', desc: '이달 가장 많이 성장한 성도' },
  { id: 'prayer', label: '기도왕', icon: '🕯️', unit: '개', desc: '기도글을 가장 많이 작성' },
  { id: 'thanks', label: '감사왕', icon: '💛', unit: '개', desc: '감사글을 가장 많이 작성' },
  { id: 'share', label: '나눔왕', icon: '🎁', unit: '회', desc: '말씀·기도·감사를 가장 많이 전달' },
];
// 5단계 성장나무별 달성 닉네임 목록 (동기부여)
const STAGE_MEMBERS = [
  { stage: 5, title: '드림챔피언', emoji: '🏆', members: ['윤태경', '한결'] },
  { stage: 4, title: '비저너리', emoji: '🌟', members: ['한소희', '서준호', '김다윗'] },
  { stage: 3, title: '믿음 지킴이', emoji: '⭐', members: ['최민준', '배유진', '임수빈', '홍석현', '신예원'] },
  { stage: 2, title: '기도나무', emoji: '🌿', members: ['오지아', '강하늘', '문가람', '권민서', '이서연', '박지훈'] },
  { stage: 1, title: '기도 새싹', emoji: '🌱', members: ['김은혜', '정도윤', '외 38명'] },
];

function RankingScreen({ onSwitch, onTab, sub = 'ranking', onNotifications }) {
  const [tab, setTab] = fxState('growth');
  const list = RANK_DATA[tab];
  const meta = RANK_TABS.find(t => t.id === tab);
  const podium = [list[1], list[0], list[2]].filter(Boolean); // 2,1,3

  return (
    <>
      <div className="appbar">
        <button className="iconbtn" aria-label="알림" onClick={onNotifications}><Icon name="bell" /></button>
        <div className="appbar-title">커뮤니티</div>
        <div style={{ width: 36 }} />
      </div>

      <div className="cm-subtabs three">
        <button className="cm-subtab" onClick={() => onSwitch('feed')}>묵상·간증</button>
        <button className="cm-subtab" onClick={() => onSwitch('encouragement')}>격려 카드</button>
        <button className="cm-subtab active" onClick={() => onSwitch('ranking')}>이달의 랭킹</button>
      </div>

      <div className="content cm-content rank-content">
        <div className="rank-hero">
          <div className="rank-hero-eyebrow">🗓️ 2026년 6월 · 이달의 동행자</div>
          <div className="rank-hero-title">함께 자라는 우리</div>
          <div className="rank-hero-sub">경쟁이 아닌 격려예요. 서로의 성장을 응원해요 💛</div>
        </div>

        {/* category tabs */}
        <div className="rank-cats">
          {RANK_TABS.map(t => (
            <button key={t.id} className={`rank-cat ${tab === t.id ? 'on' : ''}`} onClick={() => setTab(t.id)}>
              <span className="rank-cat-ic">{t.icon}</span>
              <span className="rank-cat-label">{t.label}</span>
            </button>
          ))}
        </div>
        <div className="rank-cat-desc">{meta.icon} {meta.desc}</div>

        {/* podium */}
        <div className="rank-podium">
          {podium.map((p, i) => {
            const place = p.rank;
            return (
              <div key={p.name} className={`podium-col p${place}`}>
                <div className="podium-ava">{p.emoji}<span className="podium-medal">{place === 1 ? '🥇' : place === 2 ? '🥈' : '🥉'}</span></div>
                <div className="podium-name">{p.name}</div>
                <div className="podium-value">{p.value}{meta.unit}</div>
                <div className="podium-bar" style={{ height: place === 1 ? 64 : place === 2 ? 46 : 34 }}>{place}</div>
              </div>
            );
          })}
        </div>

        {/* full list */}
        <div className="rank-list">
          {list.map(p => (
            <div key={p.name} className={`rank-row ${p.rank <= 3 ? 'top' : ''}`}>
              <span className="rank-num">{p.rank}</span>
              <span className="rank-ava">{p.emoji}</span>
              <span className="rank-body">
                <span className="rank-name">{p.name}</span>
                <span className="rank-dept">{p.dept} · {p.title}</span>
              </span>
              <span className="rank-value">{p.value}<i>{meta.unit}</i></span>
            </div>
          ))}
        </div>

        {/* stage member roster */}
        <div className="stage-roster">
          <div className="stage-roster-title">🌳 성장나무 단계별 달성 성도</div>
          <div className="stage-roster-sub">레벨에 도달한 동행자들이에요. 다음 단계를 함께 향해요!</div>
          {STAGE_MEMBERS.map(s => (
            <div key={s.stage} className={`stage-group lv${s.stage}`}>
              <div className="stage-group-head">
                <span className="stage-group-emoji">{s.emoji}</span>
                <span className="stage-group-name">Lv.{s.stage} {s.title}</span>
                <span className="stage-group-count">{s.members.length > 2 && !isNaN(parseInt(s.members[s.members.length-1])) ? '' : s.members.length + '명'}</span>
              </div>
              <div className="stage-group-members">
                {s.members.map((m, i) => <span key={i} className="stage-member-chip">{m}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

window.RecommendSheet = RecommendSheet;
window.RankingScreen = RankingScreen;

// ============================================================
// 교회 소식 게시판 (성도 앱) — 목록 → 상세
//   관리자 「공지·말씀」에서 발송한 글이 여기로 흐릅니다.
//   BOARD_POSTS 는 관리자 NOTICES 와 동일 스키마(연동 구조).
// ============================================================
const BOARD_POSTS = [
  {
    id: 'b01', cat: '이벤트', pinned: true,
    title: '2026 중문교회 여름페스티벌 · 중고등부 성경학교',
    target: '전체', date: '2026-06-08', author: '교육위원회', views: 412,
    summary: '7월 1일부터 8월 30일까지 진행되는 여름 성경학교와 페스티벌 일정 안내입니다.',
    body: [
      '사랑하는 성도 여러분, 2026년 여름 중문교회 여름페스티벌과 중고등부 성경학교를 안내드립니다.',
      '■ 기간: 2026년 7월 1일(화) ~ 8월 30일(토)\n■ 장소: 본당 및 교육관 전체\n■ 대상: 중등부·고등부 전체 (친구 초청 환영)',
      '매주 토요일 저녁 찬양집회와 말씀, 그리고 다양한 공동체 활동이 준비되어 있습니다. 여름 동안 말씀 안에서 더욱 자라가는 귀한 시간이 되길 바랍니다.',
      '신청은 각 부서 담당 교역자 또는 앱 내 공지를 통해 가능합니다. 많은 참여 부탁드립니다.',
    ],
    push: true,
  },
  {
    id: 'b02', cat: '공지', pinned: true,
    title: '2026 맥추감사주일 예배 안내',
    target: '전체', date: '2026-06-05', author: '예배부', views: 838,
    summary: '한 해의 절반을 지키신 하나님께 감사하는 맥추감사주일 예배로 함께 나아갑시다.',
    body: [
      '6월 셋째 주일은 맥추감사주일입니다. 상반기 동안 베풀어주신 하나님의 은혜를 감사하며 예배합니다.',
      '■ 일시: 2026년 6월 15일(주일) 1·2·3부 예배\n■ 감사헌금 봉투는 각 좌석과 안내석에 비치되어 있습니다.',
      '한 해의 절반을 인도하신 주님께 감사의 예배를 드리며, 남은 하반기도 신실하게 동행해 주시길 함께 기도합시다.',
    ],
    push: true,
  },
  {
    id: 'b03', cat: '청년부', pinned: false,
    title: '청년부 여름 수련회 신청 안내 (~6/20)',
    target: '청년1부·청년2부', date: '2026-06-04', author: '청년부', views: 316,
    summary: '"다시, 부르심" — 2박 3일 청년부 여름 수련회 참가자를 모집합니다.',
    body: [
      '청년부 여름 수련회를 안내합니다. 이번 수련회의 주제는 "다시, 부르심"입니다.',
      '■ 일시: 2026년 7월 25일(금) ~ 27일(주일) 2박 3일\n■ 장소: 양평 수련원\n■ 회비: 9만원 (장학 지원 가능)\n■ 신청 마감: 6월 20일(금)',
      '말씀과 기도, 공동체 안에서 다시 한 번 주님의 부르심을 확인하는 시간이 되길 바랍니다. 신청은 순장님 또는 청년부 담당 간사에게 해주세요.',
    ],
    push: true,
  },
  {
    id: 'b04', cat: '공지', pinned: false,
    title: '특별새벽기도회 셋째 주 일정',
    target: '활동 성도', date: '2026-06-02', author: '기도부', views: 254,
    summary: '매일 새벽 5시 30분, 함께 깨어 기도하는 자리로 초대합니다.',
    body: [
      '6월 특별새벽기도회 셋째 주 일정을 안내드립니다.',
      '■ 기간: 6월 16일(월) ~ 21일(토)\n■ 시간: 매일 새벽 5:30\n■ 장소: 본당',
      '한 주간 말씀과 기도로 깨어 하나님 앞에 나아가는 복된 시간이 되시길 바랍니다.',
    ],
    push: false,
  },
  {
    id: 'b05', cat: '나눔', pinned: false,
    title: '교회 도서관 새 도서 입고 안내',
    target: '전체', date: '2026-05-30', author: '도서부', views: 188,
    summary: '신앙 서적과 어린이 도서 60여 권이 새롭게 입고되었습니다.',
    body: [
      '교회 도서관에 신간 도서가 입고되었습니다. 신앙 성장에 도움이 되는 책들로 준비했습니다.',
      '■ 위치: 교육관 2층 도서관\n■ 대출: 주일 예배 전후 가능 (1인 2권, 2주)',
      '말씀과 함께 좋은 책으로 영혼을 살찌우는 시간 되시길 바랍니다.',
    ],
    push: false,
  },
];

const BOARD_CATS = ['전체', '공지', '이벤트', '청년부', '나눔'];
const BOARD_CAT_TONE = { '공지': 'blue', '이벤트': 'gold', '청년부': 'purple', '나눔': 'green' };

function NoticeBoardScreen({ onBack, onOpen }) {
  const [cat, setCat] = fxState('전체');
  const list = BOARD_POSTS.filter(p => cat === '전체' || p.cat === cat);
  const pinned = list.filter(p => p.pinned);
  const normal = list.filter(p => !p.pinned);

  const Row = (p) => (
    <button key={p.id} className="nb-row" onClick={() => onOpen(p.id)}>
      <div className="nb-row-head">
        <span className={`nb-cat tone-${BOARD_CAT_TONE[p.cat] || 'blue'}`}>{p.cat}</span>
        {p.pinned && <span className="nb-pin">📌 고정</span>}
        <span className="nb-date">{p.date.slice(5).replace('-', '.')}</span>
      </div>
      <div className="nb-row-title">{p.title}</div>
      <div className="nb-row-sub">{p.summary}</div>
      <div className="nb-row-foot">
        <span>{p.author}</span><span className="nb-dot">·</span><span>조회 {p.views}</span>
        {p.push && <><span className="nb-dot">·</span><span className="nb-push">🔔 알림 발송</span></>}
      </div>
    </button>
  );

  return (
    <>
      {typeof NightSky === 'function' && <NightSky showMoon={false} />}
      <div className="welcome-shell board-screen">
        <div className="home-night-topbar">
          <button className="hnt-icon" aria-label="Back" onClick={onBack}><Icon name="chev-left" /></button>
          <div className="hnt-brand"><span>교회 소식</span></div>
          <div style={{ width: 34 }} />
        </div>

        <div className="nb-cats">
          {BOARD_CATS.map(c => (
            <button key={c} className={`nb-cat-chip ${cat === c ? 'on' : ''}`} onClick={() => setCat(c)}>{c}</button>
          ))}
        </div>

        <div className="nb-list">
          {pinned.map(Row)}
          {pinned.length > 0 && normal.length > 0 && <div className="nb-divider" />}
          {normal.map(Row)}
          {list.length === 0 && <div className="nb-empty">해당 분류의 소식이 없어요</div>}
        </div>
        <div className="nb-foot">관리자 「공지·말씀」에서 발송한 소식이 이곳에 표시됩니다.</div>
      </div>
    </>
  );
}

function NoticeDetailScreen({ postId, onBack }) {
  const p = BOARD_POSTS.find(x => x.id === postId) || BOARD_POSTS[0];
  return (
    <>
      {typeof NightSky === 'function' && <NightSky showMoon={false} />}
      <div className="welcome-shell board-screen">
        <div className="home-night-topbar">
          <button className="hnt-icon" aria-label="Back" onClick={onBack}><Icon name="chev-left" /></button>
          <div className="hnt-brand"><span>교회 소식</span></div>
          <div style={{ width: 34 }} />
        </div>

        <div className="nd-head">
          <div className="nd-cat-row">
            <span className={`nb-cat tone-${BOARD_CAT_TONE[p.cat] || 'blue'}`}>{p.cat}</span>
            {p.pinned && <span className="nb-pin">📌 고정</span>}
          </div>
          <div className="nd-title">{p.title}</div>
          <div className="nd-meta">
            <span>{p.author}</span><span className="nb-dot">·</span><span>{p.date}</span><span className="nb-dot">·</span><span>조회 {p.views}</span>
          </div>
          <div className="nd-target">받는 대상 · {p.target}</div>
        </div>

        <div className="nd-body">
          {p.body.map((para, i) => (
            <p key={i} className="nd-para">{para}</p>
          ))}
        </div>

        <div className="nd-card-foot">
          <span className="ndcf-ic">⛪</span>
          <span className="ndcf-text">중문교회 · 함께 자라는 공동체</span>
        </div>
      </div>
    </>
  );
}

window.NoticeBoardScreen = NoticeBoardScreen;
window.NoticeDetailScreen = NoticeDetailScreen;

// ============================================================
// 멘토의 편지 — 한 주를 마친 성도에게 도착하는 손편지
//   커뮤니티 '격려 카드' → '편지 열어보기'로 진입.
//   봉투 → (탭) → 편지 펼침 애니메이션.
// ============================================================
const LETTER = {
  mentorId: 'abraham',
  mentorKo: '아브라함',
  mentorRole: '믿음의 조상',
  week: 24, // 누적 주차
  greetingName: '은혜',
  paragraphs: [
    '사랑하는 은혜님께.',
    '이번 한 주, 참 잘 걸어주셨어요. 기도노트를 다섯 번 펴고, 감사할 것을 세 가지 적으셨더군요. 작아 보이는 그 걸음들이 사실은 가장 단단한 믿음의 발자국이랍니다.',
    '나도 한때는 다음 한 걸음이 보이지 않아 밤하늘의 별을 세던 사람이었어요. 본토 친척 아비 집을 떠나라는 음성 앞에서, 어디로 가는지도 모른 채 길을 나섰지요. 그러나 한 가지는 분명했습니다 — 나를 부르신 분이 끝까지 함께하신다는 것.',
    '은혜님이 조급해하던 그 마음도 압니다. 응답이 더디다고 느껴질 때, 그것은 하나님이 잊으신 게 아니라 더 좋은 때를 준비하고 계신 거예요. 백 세에 약속의 아들을 안은 나처럼요.',
    '오늘은 이 한 구절을 품고 쉬어가셨으면 합니다.',
  ],
  verse: { text: '여호와를 기다리는 자는 새 힘을 얻으리니 독수리가 날개치며 올라감 같을 것이요', ref: '이사야 40:31' },
  closing: '먼저 그 길을 걸은 벗,\n아브라함 드림',
};

function LetterScreen({ onBack }) {
  const [opened, setOpened] = fxState(false);
  const L = LETTER;
  // 앱 멘토 데이터(assets/ 경로)와 해상도 자원 해서를 재사용
  const mentor = (window.MENTORS && window.MENTORS.find(m => m.id === L.mentorId)) || null;
  const imgSrc = mentor && mentor.image && window.__res ? window.__res(mentor.image) : (mentor && mentor.image) || null;

  return (
    <>
      {typeof NightSky === 'function' && <NightSky showMoon={true} />}
      <div className="welcome-shell letter-screen">
        <div className="home-night-topbar">
          <button className="hnt-icon" aria-label="Back" onClick={onBack}><Icon name="chev-left" /></button>
          <div className="hnt-brand"><span>멘토의 편지</span></div>
          <div style={{ width: 34 }} />
        </div>

        {!opened ? (
          <div className="letter-envelope-stage">
            <button className="letter-envelope" onClick={() => setOpened(true)} aria-label="편지 열기">
              <div className="le-flap" />
              <div className="le-pocket" />
              <div className="le-seal">
                {imgSrc
                  ? <img src={imgSrc} alt={L.mentorKo} className="le-seal-img" style={{ objectPosition: (mentor && mentor.avatarPos) || 'center 6%' }} />
                  : <span>✉️</span>}
              </div>
              <div className="le-stamp">중문<br/>교회</div>
            </button>
            <div className="le-from">📮 {L.mentorKo} 멘토가 보낸 편지</div>
            <div className="le-title">"한 주를 잘 걸어주셨어요"</div>
            <div className="le-hint">봉투를 눌러 편지를 펼쳐보세요</div>
          </div>
        ) : (
          <div className="letter-paper">
            <div className="lp-head">
              <div className="lp-mentor">
                {imgSrc && <img src={imgSrc} alt={L.mentorKo} className="lp-mentor-img" style={{ objectPosition: (mentor && mentor.avatarPos) || 'center 6%' }} />}
                <div className="lp-mentor-meta">
                  <div className="lp-mentor-name">{L.mentorKo} <span>{L.mentorRole}</span></div>
                  <div className="lp-mentor-week">동행 {L.week}주차 · 한 주를 마치며</div>
                </div>
              </div>
            </div>

            <div className="lp-body">
              {L.paragraphs.map((p, i) => (
                <p key={i} className={`lp-para ${i === 0 ? 'greeting' : ''}`}>{p}</p>
              ))}

              <div className="lp-verse">
                <div className="lp-verse-text">"{L.verse.text}"</div>
                <div className="lp-verse-ref">{L.verse.ref}</div>
              </div>

              <p className="lp-closing">{L.closing}</p>
            </div>

            <div className="lp-actions">
              <button className="wa-primary" onClick={() => onBack()}>💛 감사히 받았어요</button>
              <button className="wa-secondary" onClick={() => setOpened(false)}>봉투로 돌아가기</button>
            </div>
            <div className="lp-foot">매주 한 통씩, 함께 걷는 멘토가 당신의 한 주를 응원합니다.</div>
          </div>
        )}
      </div>
    </>
  );
}

window.LetterScreen = LetterScreen;