/* The Upper Room — Post detail + comments thread. */
const { useState: usePostState, useContext: usePostContext, useRef: usePostRef } = React;

function Comment({ comment }) {
  const room = usePostContext(window.RoomContext);
  const guard = !room.canEngage;
  const [amened, setAmened] = usePostState(false);
  const amenCount = (comment.amens || 0) + (amened ? 1 : 0);
  return (
    <div className="ur-comment">
      <div className="ur-clickable-author" onClick={() => room.openProfile({ name: comment.author, from: comment.from, church: comment.church })}>
        <Avatar name={comment.author} />
      </div>
      <div className="ur-comment-main">
        <div className="ur-comment-bubble">
          <div className="ur-comment-head">
            <span className="name ur-author-link" onClick={() => room.openProfile({ name: comment.author, from: comment.from, church: comment.church })}>{comment.author}{comment.you && <span className="you-tag">You</span>}</span>
            <span className="meta">{comment.from} · {comment.church}</span>
          </div>
          <div className="ur-comment-body">{comment.body}</div>
        </div>
        <div className="ur-comment-actions">
          <button className={amened ? 'active' : ''} onClick={guard ? room.promptComplete : () => setAmened(!amened)}>Amen{amenCount ? ' · ' + amenCount : ''}</button>
          <span className="dot">·</span>
          <button onClick={guard ? room.promptComplete : undefined}>Reply</button>
          <span className="time">{comment.time}</span>
        </div>
      </div>
    </div>
  );
}

function CommentComposer({ onAdd }) {
  const room = usePostContext(window.RoomContext);
  const inputRef = usePostRef(null);
  if (!room.canEngage) {
    return (
      <div className="ur-comment-locked" onClick={room.promptComplete}>
        <Avatar name="Guest" />
        <div className="ur-comment-locked-text">Complete your profile to join the conversation</div>
      </div>
    );
  }
  const submit = () => {
    const t = (inputRef.current ? inputRef.current.value : '').trim();
    if (!t) return;
    onAdd({ author: CURRENT_USER.name, from: CURRENT_USER.from, church: CURRENT_USER.church, time: 'now', body: t, amens: 0, you: true });
    if (inputRef.current) { inputRef.current.value = ''; inputRef.current.focus(); }
  };
  return (
    <div className="ur-comment-composer">
      <Avatar name={CURRENT_USER.name} />
      <div className="ur-comment-inputwrap">
        <input ref={inputRef} placeholder="Share a thought, a verse, or a prayer…"
          onKeyDown={(e) => { if (e.key === 'Enter') submit(); }} />
        <button className="ur-comment-send" onClick={submit}>Comment</button>
      </div>
    </div>
  );
}

function PostDetail({ post, onBack }) {
  const seed = POST_COMMENTS[post.id] || DEFAULT_COMMENTS;
  const [comments, setComments] = usePostState(seed);

  return (
    <div className="ur-shell ur-shell-profile">
      <main className="ur-center">
        <button className="ur-back" onClick={onBack}><Icon name="arrow-left" size={16} />Back to the feed</button>
        <PostCard post={post} />
        <div className="card ur-comments">
          <div className="ur-comments-title">{comments.length} {comments.length === 1 ? 'comment' : 'comments'}</div>
          <CommentComposer onAdd={(c) => setComments([...comments, c])} />
          <div className="ur-comments-list">
            {comments.map((c, i) => <Comment key={i} comment={c} />)}
          </div>
        </div>
      </main>
      <RightRail />
    </div>
  );
}

Object.assign(window, { PostDetail });