/* The Upper Room — Gatherings: member-planned events for a church / community. */
const { useState: useGthState, useRef: useGthRef, useContext: useGthContext } = React;

function YourChurchCard() {
  const c = YOUR_CHURCH;
  return (
    <div className="card ur-church-card">
      <div className="ur-church-cover"></div>
      <Avatar name={c.name} className="square ur-church-logo" />
      <div className="ur-church-body">
        <div className="ur-church-name">{c.name} <Icon name="badge-check" size={15} /></div>
        <div className="ur-church-meta"><Icon name="map-pin" size={13} />{c.from}</div>
        <div className="ur-church-meta"><Icon name="clock" size={13} />{c.services}</div>
        <a className="ur-church-link" href={'https://' + c.website} target="_blank" rel="noopener noreferrer"><Icon name="globe" size={13} />{c.website}</a>
        <div className="ur-church-members"><b>{c.members}</b> believers here from the Upper Room</div>
      </div>
    </div>
  );
}

function PlanGathering({ onCreate }) {
  const room = useGthContext(window.RoomContext);
  const [open, setOpen] = useGthState(false);
  const titleRef = useGthRef(null), whenRef = useGthRef(null), whereRef = useGthRef(null);

  if (!room.canEngage) {
    return (
      <div className="card ur-plan-locked" onClick={room.promptComplete}>
        <div className="ur-plan-locked-ic"><Icon name="calendar-plus" size={20} /></div>
        <div>Set up your profile to plan a gathering for your church or community.</div>
      </div>
    );
  }
  if (!open) {
    return (
      <button className="card ur-plan-cta" onClick={() => setOpen(true)}>
        <Avatar name={CURRENT_USER.name} />
        <span className="ur-plan-cta-text"><Icon name="calendar-plus" size={18} />Plan a gathering…</span>
      </button>
    );
  }
  const create = () => {
    const title = (titleRef.current && titleRef.current.value.trim()) || '';
    if (!title) { titleRef.current && titleRef.current.focus(); return; }
    onCreate({
      id: 'g' + Date.now(), host: CURRENT_USER.name, isChurch: false, church: CURRENT_USER.church,
      title: title,
      when: (whenRef.current && whenRef.current.value.trim()) || 'Date & time TBD',
      where: (whereRef.current && whereRef.current.value.trim()) || YOUR_CHURCH.name,
      going: [], goingCount: 0, mine: true, justAdded: true,
    });
    setOpen(false);
  };
  return (
    <div className="card ur-plan-form">
      <div className="ur-plan-form-title">Plan a gathering</div>
      <div className="ur-field"><label>What is it?</label><input ref={titleRef} placeholder="e.g. Wednesday Night Prayer" autoFocus /></div>
      <div className="ur-field-row">
        <div className="ur-field"><label>When</label><input ref={whenRef} placeholder="e.g. Wed · 7:00 PM" /></div>
        <div className="ur-field"><label>Where</label><input ref={whereRef} placeholder="e.g. Main Sanctuary" /></div>
      </div>
      <div className="ur-plan-form-actions">
        <button className="ur-ghost" onClick={() => setOpen(false)}>Cancel</button>
        <button className="ur-primary" onClick={create}>Post gathering</button>
      </div>
    </div>
  );
}

function GatheringCard({ g }) {
  const room = useGthContext(window.RoomContext);
  const guard = !room.canEngage;
  const [going, setGoing] = useGthState(false);
  const [praying, setPraying] = useGthState(false);
  const count = g.goingCount + (going ? 1 : 0);
  return (
    <div className="card ur-gathering">
      <div className="ur-gathering-date"><Icon name="calendar-heart" size={18} /><span>{g.when}</span></div>
      <div className="ur-gathering-title">{g.title}</div>
      <div className="ur-gathering-host" onClick={() => room.openProfile(g.isChurch ? { name: g.host, kind: 'ministry' } : { name: g.host, church: g.church })}>
        <Avatar name={g.host} className={g.isChurch ? 'square' : ''} style={{ width: 28, height: 28, fontSize: '0.7rem', cursor: 'pointer' }} />
        <span className="ur-author-link">{g.host}</span>
      </div>
      <div className="ur-gathering-where"><Icon name="map-pin" size={14} />{g.where}</div>
      <div className="ur-gathering-foot">
        <div className="ur-gathering-going">
          <div className="ur-going-avatars">
            {g.going.slice(0, 3).map((n) => <Avatar key={n} name={n} style={{ width: 26, height: 26, fontSize: '0.62rem', border: '2px solid #fff' }} />)}
          </div>
          <span>{count} going</span>
        </div>
        <div className="ur-gathering-actions">
          <button className={'ur-gathering-pray' + (praying ? ' active' : '')} onClick={guard ? room.promptComplete : () => setPraying(!praying)}><Icon name="hand-heart" size={15} />Pray</button>
          <button className={'ur-gathering-rsvp' + (going ? ' done' : '')} onClick={guard ? room.promptComplete : () => setGoing(!going)}>
            <Icon name={going ? 'check' : 'plus'} size={15} />{going ? 'Going' : 'I\u2019m going'}
          </button>
        </div>
      </div>
    </div>
  );
}

function NearbyChurches() {
  const room = useGthContext(window.RoomContext);
  return (
    <aside className="ur-right">
      <div className="card rail-card">
        <div className="rail-title">Churches near you</div>
        <div className="rail-sub">Orlando, Florida · fellowships with believers here.</div>
        {NEARBY_CHURCHES.map((ch) => (
          <div className="ur-suggest" key={ch.name}>
            <Avatar name={ch.name} className="square" onClick={() => room.openProfile({ name: ch.name, kind: 'ministry' })} style={{ cursor: 'pointer' }} />
            <div className="ur-suggest-info">
              <div className="name ur-author-link" onClick={() => room.openProfile({ name: ch.name, kind: 'ministry' })}>{ch.name}</div>
              <div className="meta">{ch.from} · {ch.members} here</div>
              <button className="ur-connect">{ch.mine ? 'Your church' : 'Follow'}</button>
            </div>
          </div>
        ))}
      </div>
      <div className="ur-foot-note">The Upper Room · A Prophecy Voices community</div>
    </aside>
  );
}

function GatheringsPage() {
  const [gatherings, setGatherings] = useGthState(GATHERINGS);
  return (
    <div className="ur-shell ur-shell-profile">
      <main className="ur-center">
        <YourChurchCard />
        <PlanGathering onCreate={(g) => setGatherings([g].concat(gatherings))} />
        <div className="ur-gathering-grid">
          {gatherings.map((g) => <GatheringCard key={g.id} g={g} />)}
        </div>
      </main>
      <NearbyChurches />
    </div>
  );
}

Object.assign(window, { GatheringsPage });