// Community feature · feed, post detail, compose, encouragement card
// All in B (sky/duolingo) style. Anonymity toggleable per post.
// No leaderboard — internal streak surfaced as solidarity, never as rank.

const { useState: cuseState, useMemo: cuseMemo } = React;

// ---------- Data ----------
const COMMUNITY_POSTS = [
  {
    id: 'p1',
    author: '익명의 동행',
    isAnon: true,
    timeAgo: '12분 전',
    tag: '묵상',
    mentorId: 'abraham',
    body: '오늘 새벽 창세기 22장을 읽으며 멈췄어요.\n\n"네 사랑하는 독자 이삭을…" 이 부분에서 한참 머물렀습니다. 25년을 기다려 얻은 아들을 다시 내려놓으라는 말씀 앞에서 아브라함은 어떤 마음이었을까요. 제가 가장 사랑하는 것을 하나님께 맡길 수 있을지, 오늘도 묵상합니다.',
    likes: 24,
    comments: 6,
    liked: false,
  },
  {
    id: 'p2',
    author: '김은혜',
    isAnon: false,
    timeAgo: '1시간 전',
    tag: '간증',
    mentorId: 'nehemiah',
    body: '52일 만에 성벽을 재건한 느헤미야처럼, 저도 무너졌던 마음의 자리를 한 칸씩 다시 쌓고 있어요. 7개월 만에 다시 새벽기도를 시작했고, 작은 변화가 보입니다. 함께 기도해주세요. 🌱',
    likes: 87,
    comments: 14,
    liked: true,
  },
  {
    id: 'p3',
    author: '익명의 동행',
    isAnon: true,
    timeAgo: '3시간 전',
    tag: '묵상',
    mentorId: null,
    body: '시편 23편이 오늘따라 다르게 읽혀요. 부족함이 없는 게 아니라, 그분이 함께 계셔서 부족함을 느끼지 않는다는 것. 그 차이를 깨달았습니다.',
    likes: 156,
    comments: 22,
    liked: false,
  },
  {
    id: 'p4',
    author: '박소망',
    isAnon: false,
    timeAgo: '오늘',
    tag: '간증',
    mentorId: 'david',
    body: '한 달 동안 시편을 하루 한 편씩 필사했어요. 다윗이 절망과 찬양을 같은 사람 안에서 오가는 게, 저에게 큰 위로가 됩니다.',
    likes: 42,
    comments: 8,
    liked: false,
  },
  {
    id: 'p5',
    author: '익명의 동행',
    isAnon: true,
    timeAgo: '어제',
    tag: '묵상',
    mentorId: 'daniel',
    body: '다니엘이 사자굴에 들어가기 전에도 평소처럼 하루 세 번 기도했다는 그 평범함이, 사실은 가장 비범한 거구나 싶었습니다.',
    likes: 203,
    comments: 31,
    liked: false,
  },
];

const COMMUNITY_COMMENTS = {
  p1: [
    { id: 'c1', author: '익명의 동행', isAnon: true, time: '8분 전', body: '저도 오늘 같은 본문이었어요. 함께 묵상하고 있다는 것만으로도 큰 위로가 됩니다.' },
    { id: 'c2', author: '이평안', isAnon: false, time: '5분 전', body: '하나님은 결국 이삭을 살리셨어요. 우리의 순종 너머에 그분의 더 큰 계획이 있음을 기억해요. 🤍' },
    { id: 'c3', author: '익명의 동행', isAnon: true, time: '2분 전', body: '오늘 묵상 함께해요.' },
  ],
};

const MILESTONES = [
  { id: 'm7',   day: 7,   label: '한 주의 동행', icon: '🌱', earned: true },
  { id: 'm30',  day: 30,  label: '한 달의 동행', icon: '🌿', earned: false },
  { id: 'm100', day: 100, label: '백 일의 동행', icon: '🌳', earned: false },
  { id: 'm365', day: 365, label: '한 해의 동행', icon: '🕊️', earned: false },
];

// ---------- Helpers ----------
function findMentorById(id) {
  return (window.MENTORS || []).find(m => m.id === id);
}

// Small reusable: anon-or-named avatar dot
function AuthorAvatar({ post, size = 36 }) {
  if (post.isAnon) {
    return (
      <div className="anon-avatar" style={{ width: size, height: size, fontSize: Math.round(size * 0.5) }}>
        <span>?</span>
      </div>
    );
  }
  // Named user — first letter
  const letter = (post.author || '?').slice(0, 1);
  return (
    <div className="user-avatar" style={{ width: size, height: size, fontSize: Math.round(size * 0.46) }}>
      {letter}
    </div>
  );
}

// =================== Feed ===================
function FeedScreen({ onOpenPost, onCompose, onSwitch, onNotifications, onTab, sub = 'feed' }) {
  const [filter, setFilter] = cuseState('all'); // all | 묵상 | 간증
  const [showSearch, setShowSearch] = cuseState(false);
  const [query, setQuery] = cuseState('');
  const posts = cuseMemo(() => {
    let list = filter === 'all' ? COMMUNITY_POSTS : COMMUNITY_POSTS.filter(p => p.tag === filter);
    const q = query.trim().toLowerCase();
    if (q) {
      list = list.filter(p => {
        const mentor = p.mentorId ? findMentorById(p.mentorId) : null;
        return (
          (p.body && p.body.toLowerCase().includes(q)) ||
          (p.author && p.author.toLowerCase().includes(q)) ||
          (p.tag && p.tag.toLowerCase().includes(q)) ||
          (mentor && mentor.kr.includes(q))
        );
      });
    }
    return list;
  }, [filter, query]);

  function toggleSearch() {
    setShowSearch(v => {
      if (v) setQuery('');
      return !v;
    });
  }

  return (
    <>
      <div className="appbar">
        <button className="iconbtn" aria-label="Notifications" onClick={onNotifications}><Icon name="bell" /></button>
        <div className="appbar-title">커뮤니티</div>
        <button className={`iconbtn ${showSearch ? 'active' : ''}`} aria-label="Search" onClick={toggleSearch}><Icon name={showSearch ? 'x' : 'search'} /></button>
      </div>

      {showSearch && (
        <div className="cm-searchbar">
          <Icon name="search" size={18} stroke={2} />
          <input
            type="text"
            className="cm-search-input"
            placeholder="기도·간증·멘토 이름으로 검색"
            value={query}
            onChange={e => setQuery(e.target.value)}
            autoFocus
          />
          {query && (
            <button className="cm-search-clear" aria-label="지우기" onClick={() => setQuery('')}>
              <Icon name="x" size={16} stroke={2.2} />
            </button>
          )}
        </div>
      )}

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

      <div className="content cm-content">
        {/* Today's encouragement banner */}
        {!showSearch && (
        <div className="today-banner">
          <div className="tb-text">
            <div className="tb-eyebrow">오늘의 격려</div>
            <div className="tb-quote">"수고하고 무거운 짐 진 자들아 다 내게로 오라"</div>
            <div className="tb-ref">마태복음 11:28</div>
          </div>
          <div className="tb-art">🕊️</div>
        </div>
        )}

        {/* Filter chips */}
        <div className="filter-row">
          {[
            { v: 'all', label: '전체' },
            { v: '묵상', label: '#묵상' },
            { v: '간증', label: '#간증' },
          ].map(opt => (
            <button
              key={opt.v}
              className={`filter-chip ${filter === opt.v ? 'active' : ''}`}
              onClick={() => setFilter(opt.v)}
            >
              {opt.label}
            </button>
          ))}
        </div>

        {/* Post list */}
        <div className="post-list">
          {posts.map(p => (
            <button key={p.id} className="post-card" onClick={() => onOpenPost(p)}>
              <div className="pc-head">
                <AuthorAvatar post={p} size={36} />
                <div className="pc-meta">
                  <div className="pc-author">
                    {p.author}
                    {p.isAnon && <span className="pc-anon-badge">익명</span>}
                  </div>
                  <div className="pc-time">{p.timeAgo} · #{p.tag}</div>
                </div>
                {p.mentorId && (
                  <span className="pc-mentor-tag">
                    <MentorAvatar mentor={findMentorById(p.mentorId)} size={20} />
                    {findMentorById(p.mentorId)?.kr}
                  </span>
                )}
              </div>
              <div className="pc-body">{p.body}</div>
              <div className="pc-actions">
                <span className={`pc-action ${p.liked ? 'liked' : ''}`}>
                  <Icon name={p.liked ? 'heart-fill' : 'heart'} size={16} stroke={2} />
                  {p.likes}
                </span>
                <span className="pc-action">
                  <Icon name="comment" size={16} stroke={2} />
                  {p.comments}
                </span>
              </div>
            </button>
          ))}
          {posts.length === 0 && (
            <div className="cm-search-empty">
              <div className="cse-art" aria-hidden="true">🔍</div>
              <div className="cse-title">검색 결과가 없어요</div>
              <div className="cse-desc">"{query}"와 일치하는 나눔을 찾지 못했어요.<br/>다른 단어로 검색해 보세요.</div>
            </div>
          )}
        </div>
      </div>

      {/* Floating compose */}
      <button className="fab" onClick={onCompose} aria-label="글쓰기">
        <Icon name="pencil" size={22} stroke={2.2} />
        <span>나누기</span>
      </button>

      <BottomTabs active="community" themeKey="sky" onTab={onTab} />
    </>
  );
}

// =================== Post Detail ===================
function PostDetailScreen({ post, onBack }) {
  const [liked, setLiked] = cuseState(post.liked);
  const [likes, setLikes] = cuseState(post.likes);
  const [comments, setComments] = cuseState(COMMUNITY_COMMENTS[post.id] || []);
  const [draft, setDraft] = cuseState('');
  const [sent, setSent] = cuseState(false);
  const [menuOpen, setMenuOpen] = cuseState(false);
  const [toast, setToast] = cuseState('');
  const [recOpen, setRecOpen] = cuseState(false);

  function flashToast(msg) {
    setMenuOpen(false);
    setToast(msg);
    setTimeout(() => setToast(''), 1800);
  }

  function toggleLike() {
    setLiked(v => !v);
    setLikes(n => liked ? n - 1 : n + 1);
  }

  function postComment() {
    if (!draft.trim()) return;
    setComments(prev => [...prev, { id: 'c-' + Date.now(), author: '익명의 동행', isAnon: true, time: '방금', body: draft }]);
    setDraft('');
  }

  function sendEncouragement() {
    setSent(true);
    setTimeout(() => setSent(false), 1600);
  }

  return (
    <>
      <div className="appbar">
        <button className="iconbtn" aria-label="Back" onClick={onBack}><Icon name="chev-left" /></button>
        <div className="appbar-title">묵상·간증</div>
        <button className="iconbtn" aria-label="More" onClick={() => setMenuOpen(true)}><Icon name="dots" /></button>
      </div>

      <div className="content cm-content" style={{ paddingBottom: 96 }}>
        <div className="pd-author-row">
          <AuthorAvatar post={post} size={44} />
          <div>
            <div className="pd-author">
              {post.author}
              {post.isAnon && <span className="pc-anon-badge">익명</span>}
            </div>
            <div className="pd-meta">{post.timeAgo} · #{post.tag}</div>
          </div>
        </div>

        {post.mentorId && (
          <div className="pd-mentor-card">
            <MentorAvatar mentor={findMentorById(post.mentorId)} size={36} />
            <div>
              <div className="pd-mentor-label">함께 묵상한 멘토</div>
              <div className="pd-mentor-name">AI {findMentorById(post.mentorId)?.kr}</div>
            </div>
          </div>
        )}

        <div className="pd-body">{post.body}</div>

        <div className="pd-action-bar">
          <button className={`pd-action ${liked ? 'liked' : ''}`} onClick={toggleLike}>
            <Icon name={liked ? 'heart-fill' : 'heart'} size={18} stroke={2.2} />
            <span>{likes}</span>
          </button>
          <button className="pd-action enc" onClick={sendEncouragement}>
            <span style={{ fontSize: 16 }}>💚</span>
            <span>{sent ? '응원 보냈어요' : '응원 보내기'}</span>
          </button>
          <button className="pd-action rec" onClick={() => setRecOpen(true)}>
            <span style={{ fontSize: 16 }}>🎁</span>
            <span>추천하기</span>
          </button>
        </div>

        <div className="pd-comments-header">
          댓글 {comments.length}
        </div>
        <div className="pd-comments">
          {comments.map(c => (
            <div key={c.id} className="pd-comment">
              <AuthorAvatar post={c} size={30} />
              <div className="pd-comment-body">
                <div className="pd-comment-meta">
                  <span className="pd-comment-author">{c.author}</span>
                  <span className="pd-comment-time">{c.time}</span>
                </div>
                <div className="pd-comment-text">{c.body}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="composer">
        <input
          className="input"
          placeholder="따뜻한 한마디 남기기…"
          value={draft}
          onChange={e => setDraft(e.target.value)}
          onKeyDown={e => { if (e.key === 'Enter') postComment(); }}
        />
        <button
          className={`send ${draft.trim() ? '' : 'disabled'}`}
          onClick={postComment}
          aria-label="Send"
        >
          <Icon name="send" size={20} stroke={2.2} />
        </button>
      </div>

      {menuOpen && (
        <div className="action-scrim" onClick={() => setMenuOpen(false)}>
          <div className="action-sheet" onClick={e => e.stopPropagation()}>
            <div className="as-grabber" />
            <button className="as-item" onClick={() => flashToast('링크를 복사했어요')}>
              <Icon name="link" size={19} stroke={2} /><span>링크 복사</span>
            </button>
            <button className="as-item" onClick={() => flashToast('이 글을 숨겼어요')}>
              <Icon name="eye-off" size={19} stroke={2} /><span>이 글 숨기기</span>
            </button>
            <button className="as-item danger" onClick={() => flashToast('신고가 접수되었어요')}>
              <Icon name="flag" size={19} stroke={2} /><span>신고하기</span>
            </button>
            <button className="as-cancel" onClick={() => setMenuOpen(false)}>취소</button>
          </div>
        </div>
      )}

      {toast && <div className="cm-toast">{toast}</div>}
      {window.RecommendSheet && (
        <window.RecommendSheet
          open={recOpen}
          item={{ kind: post.tag === '간증' ? '간증 나눔' : '묵상 글', text: (post.body || '').slice(0, 60) + ((post.body || '').length > 60 ? '…' : ''), ref: post.mentorId ? ('AI ' + (findMentorById(post.mentorId)?.kr || '') + ' 멘토와 함께') : '' }}
          onClose={() => setRecOpen(false)}
        />
      )}
    </>
  );
}

// =================== Compose ===================
function ComposeScreen({ onBack, onSubmit }) {
  const [tag, setTag] = cuseState('묵상');
  const [body, setBody] = cuseState('');
  const [isAnon, setIsAnon] = cuseState(false);
  const [mentorId, setMentorId] = cuseState(null);
  const [confirmExit, setConfirmExit] = cuseState(false);

  const canSubmit = body.trim().length >= 5;
  const dirty = body.trim().length > 0;

  function tryBack() {
    if (dirty) setConfirmExit(true);
    else onBack && onBack();
  }

  return (
    <>
      <div className="appbar">
        <button className="iconbtn" aria-label="Close" onClick={tryBack}><Icon name="x" /></button>
        <div className="appbar-title">나누기</div>
        <button
          className={`submit-pill ${canSubmit ? '' : 'disabled'}`}
          onClick={() => canSubmit && onSubmit({ tag, body, isAnon, mentorId })}
        >
          게시
        </button>
      </div>

      <div className="content cm-content" style={{ paddingBottom: 24 }}>
        <div className="compose-section-label">어떤 나눔인가요?</div>
        <div className="tag-picker">
          {[
            { v: '묵상', label: '#묵상', sub: '오늘의 말씀이 준 깨달음' },
            { v: '간증', label: '#간증', sub: '하나님이 일하신 이야기' },
          ].map(t => (
            <button
              key={t.v}
              className={`tag-card ${tag === t.v ? 'active' : ''}`}
              onClick={() => setTag(t.v)}
            >
              <div className="tc-label">{t.label}</div>
              <div className="tc-sub">{t.sub}</div>
            </button>
          ))}
        </div>

        <div className="compose-section-label">함께한 멘토 (선택)</div>
        <div className="compose-section-hint">이 글을 쓰며 함께 대화한 AI 멘토를 골라보세요. 선택하면 글에 "함께 묵상한 멘토"로 표시돼요.</div>
        <div className="mentor-picker">
          <button
            className={`mp-item ${mentorId === null ? 'active' : ''}`}
            onClick={() => setMentorId(null)}
          >
            <div className="mp-empty">선택<br/>안함</div>
            <div className="mp-name">—</div>
          </button>
          {(window.MENTORS || []).map(m => (
            <button
              key={m.id}
              className={`mp-item ${mentorId === m.id ? 'active' : ''}`}
              onClick={() => setMentorId(m.id)}
            >
              <MentorAvatar mentor={m} size={48} />
              <div className="mp-name">{m.kr}</div>
            </button>
          ))}
        </div>

        <div className="compose-section-label">
          <span>나눔 내용</span>
          <span className={`csl-count ${body.length >= 500 ? 'max' : ''}`}>{body.length}/500자</span>
        </div>
        <textarea
          className="compose-body"
          placeholder="오늘 받은 은혜를 나눠보세요. 다른 분께 큰 위로가 됩니다. (5자 이상 500자 이하)"
          value={body}
          onChange={e => setBody(e.target.value)}
          rows={8}
          maxLength={500}
        />

        <button
          className={`anon-toggle ${isAnon ? 'on' : ''}`}
          onClick={() => setIsAnon(v => !v)}
        >
          <div className="at-left">
            <span className="at-emoji">{isAnon ? '🤫' : '😊'}</span>
            <div>
              <div className="at-title">{isAnon ? '익명으로 게시' : '내 이름으로 게시'}</div>
              <div className="at-sub">{isAnon ? '익명의 동행으로 표시됩니다' : '프로필 이름과 사진이 보입니다'}</div>
            </div>
          </div>
          <div className={`at-switch ${isAnon ? 'on' : ''}`}>
            <div className="at-knob" />
          </div>
        </button>
      </div>

      {confirmExit && (
        <div className="confirm-scrim" onClick={() => setConfirmExit(false)}>
          <div className="confirm-sheet" onClick={e => e.stopPropagation()}>
            <div className="cs-title">작성 중인 글이 있어요</div>
            <div className="cs-desc">지금 나가면 작성한 내용이 저장되지 않아요. 그래도 나가시겠어요?</div>
            <div className="cs-actions">
              <button className="cs-btn ghost" onClick={() => setConfirmExit(false)}>계속 작성</button>
              <button className="cs-btn danger" onClick={() => { setConfirmExit(false); onBack && onBack(); }}>나가기</button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

// =================== Encouragement Card (ranking alternative) ===================
function EncouragementScreen({ onSwitch, onNotifications, onTab, sub = 'encouragement' }) {
  // 7-day stamp card — fills up by the week
  const weekStamps = [true, true, true, true, true, true, true]; // today is the 7th
  const monthDays = 30;
  const earnedDays = 18; // out of 30

  return (
    <>
      <div className="appbar">
        <button className="iconbtn" aria-label="Notifications" 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 ${sub === 'feed' ? 'active' : ''}`} onClick={() => onSwitch('feed')}>
          묵상·간증
        </button>
        <button className={`cm-subtab ${sub === 'encouragement' ? 'active' : ''}`} onClick={() => onSwitch('encouragement')}>
          격려 카드
        </button>
        <button className={`cm-subtab ${sub === 'ranking' ? 'active' : ''}`} onClick={() => onSwitch('ranking')}>
          이달의 랭킹
        </button>
      </div>

      <div className="content cm-content">
        {/* Today greeting */}
        <div className="enc-hello">
          <div className="enc-eyebrow">오늘도 출석</div>
          <div className="enc-title">7일째 함께 걷고 있어요</div>
          <div className="enc-sub">조용히 매일 같은 걸음. 그게 가장 큰 믿음이에요.</div>
        </div>

        {/* Letter from mentor — 가장 위 강조 */}
        <div className="enc-card letter-card">
          <div className="letter-mentor">
            {window.MENTORS && (
              <MentorAvatar mentor={window.MENTORS[0]} size={48} />
            )}
          </div>
          <div className="letter-body">
            <div className="letter-eyebrow">아브라함의 편지가 도착했어요</div>
            <div className="letter-title">"한 주를 잘 걸어주셨어요"</div>
            <button className="letter-btn" onClick={() => onTab && onTab('letter')}>편지 열어보기 →</button>
          </div>
        </div>

        {/* This week stamp card */}
        <div className="enc-card stamp-card">
          <div className="enc-card-head">
            <div>
              <div className="enc-card-title">이번 주 마음 도장</div>
              <div className="enc-card-sub">매일 한 번씩, 작은 동행의 흔적</div>
            </div>
            <div className="stamp-streak">🔥 7</div>
          </div>
          <div className="stamp-row">
            {['월','화','수','목','금','토','일'].map((d, i) => (
              <div key={i} className={`stamp ${weekStamps[i] ? 'filled' : ''}`}>
                {weekStamps[i] ? '✓' : d}
                <div className="stamp-day">{d}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Garden — meditation grows a plant */}
        <div className="enc-card garden-card">
          <div className="enc-card-head">
            <div>
              <div className="enc-card-title">내 묵상 정원</div>
              <div className="enc-card-sub">묵상할수록 함께 자라요</div>
            </div>
            <div className="garden-level">새싹 → 어린나무</div>
          </div>
          <div className="garden-art">
            <div className="garden-ground" />
            <div className="garden-tree">
              <div className="gt-leaves" />
              <div className="gt-trunk" />
            </div>
            <div className="garden-bud" style={{ left: '22%' }}>🌱</div>
            <div className="garden-bud" style={{ left: '74%' }}>🌿</div>
            <div className="garden-sun">☀️</div>
          </div>
          <div className="garden-progress">
            <div className="garden-progress-bar"><div className="garden-progress-fill" style={{ width: `${(earnedDays/monthDays)*100}%` }} /></div>
            <div className="garden-progress-label">{earnedDays} / {monthDays}일 · 다음 단계까지 12일</div>
          </div>
        </div>

        {/* Walking together count (solidarity, no comparison) */}
        <div className="enc-card walking-card">
          <div className="walking-num">245명</div>
          <div className="walking-label">오늘 함께 걸은 분들</div>
          <div className="walking-avatars">
            {[0,1,2,3,4,5,6].map(i => (
              <div key={i} className="wa-dot" style={{
                background: ['#FFB58A','#A6D5F5','#B9D9A4','#E2C3D9','#F0CF6A','#A8C2EE','#E69084'][i],
              }} />
            ))}
            <div className="wa-more">+238</div>
          </div>
          <div className="walking-sub">혼자 같지만 혼자가 아니에요</div>
        </div>

        {/* Milestones */}
        <div className="enc-card milestones-card">
          <div className="enc-card-head">
            <div>
              <div className="enc-card-title">동행의 발자취</div>
              <div className="enc-card-sub">시간이 쌓일수록 깊어져요</div>
            </div>
          </div>
          <div className="milestone-row">
            {MILESTONES.map(m => (
              <div key={m.id} className={`milestone ${m.earned ? 'earned' : ''}`}>
                <div className="ms-icon">{m.icon}</div>
                <div className="ms-day">{m.day}일</div>
                <div className="ms-label">{m.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <BottomTabs active="community" themeKey="sky" onTab={onTab} />
    </>
  );
}

window.FeedScreen = FeedScreen;
window.PostDetailScreen = PostDetailScreen;
window.ComposeScreen = ComposeScreen;
window.EncouragementScreen = EncouragementScreen;
window.COMMUNITY_POSTS = COMMUNITY_POSTS;