/* The Upper Room — Circle page (LinkedIn "My Network" reskinned). */
const { useState: useCircleState, useContext: useCircleContext } = React;

function CircleOverview() {
  const s = CIRCLE_STATS;
  const room = useCircleContext(window.RoomContext);
  return (
    <aside className="ur-left">
      <div className="card ur-circle-overview">
        <div className="ovr-title">Circle overview</div>
        <div className="ovr-stats">
          <div className="ovr-stat"><b>{s.invites}</b><span>Invites sent</span></div>
          <div className="ovr-stat"><b>{s.circle}</b><span>In your circle</span></div>
          <div className="ovr-stat"><b>{s.following}</b><span>Following</span></div>
        </div>
        <div className="ur-divider"></div>
        <div className="ur-left-links">
          <a className="ur-left-link" onClick={() => room.search('')}><Icon name="search" size={18} />Find believers</a>
          <a className="ur-left-link" onClick={() => room.goView('gatherings')}><Icon name="map-pin" size={18} />Believers near you</a>
          <a className="ur-left-link" onClick={() => room.goView('prayer')}><Icon name="hand-heart" size={18} />Prayer wall</a>
        </div>
      </div>
    </aside>
  );
}

function InviteCard({ invite }) {
  const room = useCircleContext(window.RoomContext);
  const guard = !room.canEngage;
  const [state, setState] = useCircleState('pending'); // pending | accepted | ignored
  if (state === 'ignored') return null;
  return (
    <div className="ur-invite">
      <Avatar name={invite.name} />
      <div className="ur-invite-info">
        <div className="name">{invite.name}</div>
        <div className="meta">{invite.from} · {invite.church}</div>
        <div className="note">“{invite.note}”</div>
      </div>
      {state === 'accepted' ? (
        <div className="ur-invite-done"><Icon name="check" size={15} />In your circle</div>
      ) : (
        <div className="ur-invite-actions">
          <button className="ur-ghost" onClick={guard ? room.promptComplete : () => setState('ignored')}>Ignore</button>
          <button className="ur-solid" onClick={guard ? room.promptComplete : () => setState('accepted')}>Accept</button>
        </div>
      )}
    </div>
  );
}

function SuggestionTile({ item }) {
  const room = useCircleContext(window.RoomContext);
  const guard = !room.canEngage;
  const [followed, setFollowed] = useCircleState(false);
  const [dismissed, setDismissed] = useCircleState(false);
  if (dismissed) return null;
  const isMinistry = item.kind === 'ministry';
  return (
    <div className="card ur-tile">
      <button className="ur-tile-x" onClick={() => setDismissed(true)} aria-label="Dismiss"><Icon name="x" size={14} /></button>
      <div className="ur-tile-cover" onClick={() => room.openProfile(item)} style={{ cursor: 'pointer' }}></div>
      <Avatar name={item.name} className={isMinistry ? 'square' : ''} style={{ cursor: 'pointer' }} onClick={() => room.openProfile(item)} />
      <div className="ur-tile-name ur-author-link" onClick={() => room.openProfile(item)}>{item.name}{isMinistry && <Icon name="badge-check" size={14} />}</div>
      <div className="ur-tile-desc">{item.descriptor}</div>
      <div className="ur-tile-count">{item.followers} {isMinistry ? 'followers' : 'in their circle'}</div>
      <button className={'ur-tile-btn' + (followed ? ' done' : '')} onClick={guard ? room.promptComplete : () => setFollowed(!followed)}>
        <Icon name={followed ? 'check' : (isMinistry ? 'plus' : 'user-plus')} size={15} />
        {followed ? (isMinistry ? 'Following' : 'Pending') : (isMinistry ? 'Follow' : 'Connect')}
      </button>
    </div>
  );
}

function CirclePage() {
  const room = useCircleContext(window.RoomContext);
  return (
    <div className="ur-shell ur-shell-circle">
      <CircleOverview />
      <main className="ur-center">
        <div className="card ur-invites">
          <div className="ur-invites-head">
            <span>Pending invitations</span>
            <span className="ur-invites-count">{PENDING_INVITES.length}</span>
          </div>
          {PENDING_INVITES.map((iv) => <InviteCard key={iv.name} invite={iv} />)}
        </div>

        <div className="ur-suggest-head">
          <span>Voices &amp; fellowships to follow</span>
          <a className="ur-manage" onClick={() => room.search('')}>Find more</a>
        </div>
        <div className="ur-tile-grid">
          {CIRCLE_SUGGESTIONS.map((it) => <SuggestionTile key={it.name} item={it} />)}
        </div>
      </main>
    </div>
  );
}

Object.assign(window, { CirclePage });