/* The Upper Room — left rail, composer, and post feed. */
const { useState: useFeedState, useEffect: useFeedEffect, useContext: useFeedContext } = React;

function NudgeBanner() {
  const room = useFeedContext(window.RoomContext);
  const [flashing, setFlashing] = useFeedState(false);
  useFeedEffect(() => {
    if (room.flash > 0) {
      setFlashing(true);
      const t = setTimeout(() => setFlashing(false), 1200);
      return () => clearTimeout(t);
    }
  }, [room.flash]);
  return (
    <div className={'card ur-nudge' + (flashing ? ' flash' : '')}>
      <div className="ur-nudge-ic">✝</div>
      <div className="ur-nudge-text">
        <b>You're browsing as a guest.</b>
        Read as long as you like — it's a safe place. Finish your profile when you're ready to share, amen, and connect.
      </div>
      <button className="ur-nudge-btn" onClick={room.resumeSetup}>Complete profile</button>
    </div>
  );
}

function LeftRail() {
  const room = useFeedContext(window.RoomContext);
  return (
    <aside className="ur-left">
      <div className="card profile-card">
        <div className="ur-cover"></div>
        <Avatar name={CURRENT_USER.name} style={{ cursor: 'pointer' }} onClick={() => room.openProfile(CURRENT_USER)} />
        <div className="profile-name ur-author-link" onClick={() => room.openProfile(CURRENT_USER)}>{CURRENT_USER.name}</div>
        <div className="profile-meta">{CURRENT_USER.from}</div>
        <div style={{ textAlign: 'center' }}>
          <span className="profile-church"><Icon name="church" size={14} />{CURRENT_USER.church}</span>
        </div>
        <div className="ur-divider"></div>
        <div className="ur-left-links">
          <a className="ur-left-link" onClick={() => room.goView('circle')}><Icon name="users" size={18} />Your circle</a>
          <a className="ur-left-link" onClick={() => room.goView('saved')}><Icon name="bookmark" size={18} />Saved words</a>
          <a className="ur-left-link" onClick={() => room.goView('gatherings')}><Icon name="calendar-heart" size={18} />Gatherings</a>
          <a className="ur-left-link" onClick={() => room.goView('prayer')}><Icon name="hand-heart" size={18} />Prayer wall</a>
        </div>
      </div>
    </aside>
  );
}

function Composer() {
  const room = useFeedContext(window.RoomContext);
  const guard = !room.canEngage;
  const actions = [
    { icon: 'image', label: 'Photo' },
    { icon: 'book-open', label: 'Verse' },
    { icon: 'mic', label: 'Testimony' },
  ];
  const act = guard ? room.promptComplete : room.openCompose;
  return (
    <div className={'card ur-composer' + (guard ? ' locked' : '')}>
      <div className="ur-composer-top">
        <Avatar name={CURRENT_USER.name} />
        <button className="ur-composer-fake" onClick={act}>
          {guard ? 'Complete your profile to share a word…' : 'Share a word with the room…'}
        </button>
      </div>
      <div className="ur-composer-actions">
        {actions.map((a) => (
          <button key={a.label} className="ur-composer-action" onClick={act}><Icon name={a.icon} size={18} />{a.label}</button>
        ))}
      </div>
    </div>
  );
}

function PostCard({ post }) {
  const room = useFeedContext(window.RoomContext);
  const guard = !room.canEngage;
  const [amened, setAmened] = useFeedState(false);
  const [following, setFollowing] = useFeedState(false);
  const [saved, setSaved] = useFeedState(false);
  const amenCount = post.amens + (amened ? 1 : 0);

  return (
    <article className="card ur-post">
      <div className="ur-post-head">
        <div className="ur-clickable-author" onClick={() => room.openProfile({ name: post.author, from: post.from, church: post.church })}>
          <Avatar name={post.author} />
        </div>
        <div className="ur-post-author">
          <div className="name ur-author-link" onClick={() => room.openProfile({ name: post.author, from: post.from, church: post.church })}>
            {post.author}
            {post.verified && <Icon name="badge-check" size={15} />}
          </div>
          <div className="meta">{post.from} · {post.church}</div>
          <div className="time">{post.time} · <Icon name="globe" size={11} /></div>
        </div>
        <button className="ur-post-follow" onClick={guard ? room.promptComplete : () => setFollowing(!following)}>
          <Icon name={following ? 'check' : 'plus'} size={15} />{following ? 'Walking together' : 'Walk together'}
        </button>
      </div>

      <div className="ur-post-body" onClick={() => room.openPost(post)} style={{ cursor: 'pointer' }}>{post.body}</div>

      {post.verse && (
        <span className="ur-post-verse">
          “{post.verse.text}”
          <span className="ref">{post.verse.ref}</span>
        </span>
      )}

      <div className="ur-post-counts">
        <span><span className="amen-dot">🙏</span>{amenCount} amens</span>
        <span className="ur-post-counts-right">
          <span className="ur-post-commentcount" onClick={() => room.openPost(post)}>{post.comments} reflections</span>
          <button className={'ur-post-save' + (saved ? ' active' : '')} aria-label={saved ? 'Saved' : 'Save'} onClick={guard ? room.promptComplete : () => setSaved(!saved)}>
            <Icon name="bookmark" size={15} fill={saved ? 'currentColor' : undefined} />
          </button>
        </span>
      </div>

      <div className="ur-post-bar">
        <button className={'ur-post-action' + (amened ? ' active' : '')} onClick={guard ? room.promptComplete : () => setAmened(!amened)}>
          <Icon name="hand-heart" size={18} fill={amened ? 'currentColor' : undefined} />Amen
        </button>
        <button className="ur-post-action" onClick={guard ? room.promptComplete : undefined}><Icon name="hands-praying" size={18} />Pray</button>
        <button className="ur-post-action" onClick={() => room.openPost(post)}><Icon name="message-circle" size={18} />Comment</button>
        <button className="ur-post-action" onClick={guard ? room.promptComplete : () => room.share('this word')}><Icon name="send" size={18} />Share</button>
      </div>
    </article>
  );
}

function Feed({ posts }) {
  const room = useFeedContext(window.RoomContext);
  const list = posts || FEED_POSTS;
  return (
    <main className="ur-center">
      {!room.canEngage && <NudgeBanner />}
      <Composer />
      {list.map((p) => <PostCard key={p.id} post={p} />)}
      <div className="ur-foot-note">You’re all caught up. Take everything before the Holy Spirit. ✝</div>
    </main>
  );
}

Object.assign(window, { LeftRail, Composer, PostCard, Feed });