/* The Upper Room — right rail: suggestions + this week's word. */
const { useState: useRailState, useContext: useRailContext } = React;

function SuggestRow({ person }) {
  const room = useRailContext(window.RoomContext);
  const guard = !room.canEngage;
  const [connected, setConnected] = useRailState(false);
  return (
    <div className="ur-suggest">
      <Avatar name={person.name} style={{ cursor: 'pointer' }} onClick={() => room.openProfile(person)} />
      <div className="ur-suggest-info">
        <div className="name ur-author-link" onClick={() => room.openProfile(person)}>{person.name}</div>
        <div className="meta">{person.from} · {person.church}</div>
        <button className={'ur-connect' + (connected ? ' done' : '')} onClick={guard ? room.promptComplete : () => setConnected(!connected)}>
          <Icon name={connected ? 'check' : 'user-plus'} size={14} />{connected ? 'Pending' : 'Connect'}
        </button>
      </div>
    </div>
  );
}

function RightRail() {
  const room = useRailContext(window.RoomContext);
  return (
    <aside className="ur-right">
      <div className="card rail-card">
        <div className="rail-title">Believers you may know</div>
        <div className="rail-sub">Near you, or worshiping where friends gather.</div>
        {SUGGESTIONS.length > 0 ? (
          <>
            {SUGGESTIONS.map((p) => <SuggestRow key={p.name} person={p} />)}
            <div className="ur-rail-foot"><button onClick={() => room.goView('circle')}>See all suggestions</button></div>
          </>
        ) : (
          <div className="ur-rail-empty">
            <p>It’s quiet here for now. Head over to <button className="ur-rail-link" onClick={() => room.goView('settings')}>Settings</button> to add your contacts and invite the people you walk with.</p>
          </div>
        )}
      </div>

      <div className="card ur-word-card">
        <div className="ur-word-head">
          <div className="ur-word-eyebrow"><span>✝</span> This week’s word</div>
          <div className="ur-word-verse">“I will pour out my Spirit on all people. Your sons and daughters will prophesy.”</div>
          <div className="ur-word-ref">Acts 2:17</div>
        </div>
        <div className="ur-word-body">
          <p>Adam’s new word is live on Prophecy Voices — gathered with care and weighed against Scripture.</p>
          <a className="ur-word-link" href="../website/index.html" target="_blank" rel="noopener noreferrer">Read this week’s word <Icon name="arrow-right" size={14} /></a>
        </div>
      </div>

      <div className="ur-foot-note">The Upper Room · A Prophecy Voices community</div>
    </aside>
  );
}

Object.assign(window, { RightRail });