/* ============================================================
   Devonew — membro · Corrente de Intercessão (Relógio de Oração)
   Termômetro de cobertura, mural de turnos e a Sala de Clamor.
   Só é renderizada quando há campanha publicada e ativa.
   ============================================================ */
const { useState: useStateMI, useEffect: useEffectMI, useRef: useRefMI } = React;

/* ---------- countdown helper ---------- */
function fmtCountdown(ms) {
  if (ms < 0) ms = 0;
  const s = Math.floor(ms / 1000);
  const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), ss = s % 60;
  const p = (n) => String(n).padStart(2, '0');
  return h > 0 ? `${p(h)}:${p(m)}:${p(ss)}` : `${p(m)}:${p(ss)}`;
}

/* ---------- Sala de Clamor (prayer room) ---------- */
function PrayerRoom({ c, campaign, day, slot, onFinish, onClose, toast }) {
  const { start, end } = window.INTER.slotWindow(campaign, day, slot);
  const [remaining, setRemaining] = useStateMI(end - new Date());
  const motives = window.INTER.motivesForDay(campaign, day);
  const xp = window.INTER.xpForHour(slot.hour);

  useEffectMI(() => {
    const t = setInterval(() => setRemaining(end - new Date()), 1000);
    return () => clearInterval(t);
  }, []);

  const finish = () => { onFinish(day, slot.idx); };

  return (
    <div className="pr-overlay" onClick={onClose}>
      <div className="pr-room" onClick={(e) => e.stopPropagation()} role="dialog" aria-label="Sala de clamor">
        <button className="pr-close" onClick={onClose} aria-label="Sair"><Icon name="x" size={20}/></button>
        <span className="pr-eyebrow"><Icon name="pray" size={15}/>Sala de Clamor · seu turno</span>
        <div className="pr-range">{slot.start} — {slot.end}</div>

        <div className="pr-timer">
          <div className="pr-timer-val">{fmtCountdown(remaining)}</div>
          <div className="pr-timer-lab">{remaining > 0 ? 'restante no seu turno' : 'turno concluído — pode finalizar'}</div>
        </div>
        {slot.madrugada && <div className="pr-vigil"><Icon name="moon" size={14}/>Vigília da madrugada · recompensa dobrada</div>}

        <div className="pr-motives">
          <span className="pr-motives-h">Motivos de oração de hoje</span>
          {motives.length ? motives.map((m, i) => (
            <div className="pr-motive" key={i}><span className="pr-dot"/>{m}</div>
          )) : <p className="pr-empty">A liderança não cadastrou motivos para hoje. Ore livremente conforme o Espírito conduzir.</p>}
        </div>

        <p className="pr-verse">“Vigiai e orai, para que não entreis em tentação.” — Mateus 26.41</p>

        <button className="btn btn-primary btn-lg btn-block" onClick={finish}>
          <Icon name="check" size={18}/>Finalizei meu turno · +{xp} XP
        </button>
      </div>
    </div>
  );
}

/* ---------- Assumir turno (confirm + anonimato) ---------- */
function AssumeModal({ slot, exclusive, onConfirm, onClose }) {
  const [anon, setAnon] = useStateMI(false);
  const xp = window.INTER.xpForHour(slot.hour);
  return (
    <div className="pr-overlay" onClick={onClose}>
      <div className="assume-card" onClick={(e) => e.stopPropagation()} role="dialog" aria-label="Assumir horário">
        <span className="pr-eyebrow"><Icon name="clock" size={15}/>Assumir este horário</span>
        <div className="assume-range">{slot.start} — {slot.end}</div>
        <p className="assume-p">
          Você se compromete a orar neste horário pela igreja. Avisaremos 15 minutos antes.
          {slot.madrugada && <> Turno de vigília: <b>+{xp} XP</b>.</>}
        </p>
        <button className={`tf-anon ${anon ? 'on' : ''}`} onClick={() => setAnon((v) => !v)} aria-pressed={anon} type="button">
          <span className="tf-check"><Icon name="check" size={15}/></span>
          <span className="tf-anon-body">
            <span className="tf-anon-t">Assumir anonimamente</span>
            <span className="tf-anon-s">No mural aparece apenas “Irmão(ã) em Cristo”.</span>
          </span>
        </button>
        <div className="assume-actions">
          <button className="btn btn-quiet" onClick={onClose}>Cancelar</button>
          <button className="btn btn-primary" onClick={() => onConfirm(anon)}><Icon name="hands" size={16}/>Confirmar turno</button>
        </div>
      </div>
    </div>
  );
}

/* ---------- one slot row ---------- */
function SlotRow({ c, campaign, day, slot, state, onAssumeClick, onEnter, onRelease, toast }) {
  const res = window.INTER.resForSlot(campaign, day, slot.idx);
  const mine = res.find((r) => r.mine);
  const full = window.INTER.slotFull(campaign, day, slot.idx);
  const cls = ['slot-row'];
  if (mine) cls.push('mine');
  else if (res.length) cls.push('taken');
  else cls.push('free');
  if (slot.madrugada) cls.push('madruga');

  return (
    <div className={cls.join(' ')}>
      <div className="slot-time">
        <span className="st-h">{slot.start}</span>
        <span className="st-e">{slot.end}</span>
        {slot.madrugada && <span className="st-vigil" title="Vigília da madrugada"><Icon name="moon" size={12}/></span>}
      </div>

      <div className="slot-body">
        {mine ? (
          <>
            <div className="slot-status mine-status"><Icon name="check" size={14}/>{mine.doneAt ? 'Turno concluído' : 'Meu turno'}{mine.anon ? ' · anônimo' : ''}</div>
            <div className="slot-people">
              {state === 'agora' && !mine.doneAt && <button className="btn btn-primary btn-sm" onClick={() => onEnter(slot)}><Icon name="pray" size={15}/>Entrar na sala</button>}
              {state === 'futuro' && !mine.doneAt && <span className="slot-when">Começa {slot.start}</span>}
              {state === 'passado' && !mine.doneAt && <span className="slot-when missed">Turno encerrado</span>}
              {mine.doneAt && <span className="slot-when done">Você cumpriu ✓</span>}
              {!mine.doneAt && <button className="slot-release" onClick={() => onRelease(slot)} title="Liberar meu turno"><Icon name="x" size={14}/></button>}
            </div>
          </>
        ) : res.length ? (
          <>
            <div className="slot-people">
              {res.slice(0, 4).map((r, i) => {
                const d = window.INTER.displayName(r);
                return <span key={i} className={`avatar sm ${d.anon ? 'anon' : ''}`} title={d.name}>{d.initials}</span>;
              })}
              <div className="slot-names">
                {(() => { const d = window.INTER.displayName(res[0]); return d.name; })()}
                {res.length > 1 && <span className="slot-more"> +{res.length - 1}</span>}
              </div>
            </div>
            {!campaign.exclusive && !full && (
              <button className="btn btn-ghost btn-sm" onClick={() => onAssumeClick(slot)}><Icon name="plus" size={14}/>Orar junto</button>
            )}
            {campaign.exclusive && <span className="slot-covered"><Icon name="check" size={13}/>Coberto</span>}
          </>
        ) : (
          <button className="btn btn-assume" onClick={() => onAssumeClick(slot)}>
            <Icon name="plus" size={16}/>Assumir este horário
            {slot.madrugada && <span className="assume-bonus">+{window.INTER.xpForHour(slot.hour)} XP</span>}
          </button>
        )}
      </div>
    </div>
  );
}

/* ---------- screen ---------- */
function CorrenteScreen({ c, campaign, onAssume, onRelease, onFinish, go, toast }) {
  const days = window.INTER.daysOf(campaign);
  const todayIso = window.INTER.isoDay(new Date());
  const [day, setDay] = useStateMI(days.some((d) => d.iso === todayIso) ? todayIso : (days[0] && days[0].iso));
  const [assume, setAssume] = useStateMI(null);   // slot pendente de confirmação
  const [room, setRoom] = useStateMI(null);       // slot da sala aberta
  const [, force] = useStateMI(0);

  // re-render a cada 30s para atualizar estados de turno (agora/futuro/passado)
  useEffectMI(() => { const t = setInterval(() => force((n) => n + 1), 30000); return () => clearInterval(t); }, []);

  const slots = window.INTER.slotsForDay(campaign);
  const cov = window.INTER.coverage(campaign, day);

  // alerta prévio: meu próximo turno hoje começando em ≤ 15 min
  const now = new Date();
  const upcoming = (campaign.reservations || [])
    .filter((r) => r.mine && r.day === todayIso && !r.doneAt)
    .map((r) => ({ r, slot: slots[r.idx], win: window.INTER.slotWindow(campaign, todayIso, slots[r.idx]) }))
    .filter((x) => x.slot && x.win.start - now > 0 && x.win.start - now <= 15 * 60000)
    .sort((a, b) => a.win.start - b.win.start)[0];

  const confirmAssume = (anon) => {
    const slot = assume;
    setAssume(null);
    onAssume(day, slot.idx, anon);
  };
  const enter = (slot) => setRoom(slot);
  const finishFromRoom = (d, idx) => { onFinish(d, idx); setRoom(null); };

  return (
    <div className="col fade-up">
      <button className="btn btn-quiet show-mobile" style={{ marginLeft: -8, marginBottom: 4 }} onClick={() => go('hoje')}>
        <Icon name="chevronL" size={18}/>Hoje
      </button>
      <PageHead title="Corrente de Intercessão" sub="Nossa muralha de oração — uma igreja, 24 horas em clamor." />
      <div className="show-mobile" style={{ marginBottom: 12 }}>
        <h2 className="greet" style={{ fontSize: 26 }}>Corrente de Oração</h2>
      </div>

      {/* campaign banner */}
      <div className="camp-banner">
        <div className="camp-ico"><Icon name="pray" size={22}/></div>
        <div className="camp-body">
          <span className="camp-flag"><Icon name="flame" size={12}/>Campanha de Clamor ativa</span>
          <div className="camp-title">{campaign.title}</div>
          <p className="camp-desc">{campaign.description}</p>
        </div>
      </div>

      {/* alerta prévio */}
      {upcoming && (
        <div className="pre-alert">
          <Icon name="bell" size={17}/>
          <div>
            <b>Seu turno começa às {upcoming.slot.start}.</b> Prepare seu coração — a sala de clamor abre no horário.
          </div>
        </div>
      )}

      {/* thermometer */}
      <div className="thermo">
        <div className="thermo-top">
          <span className="thermo-pct">{cov.pct}%</span>
          <span className="thermo-lab">da nossa muralha de oração já está coberta</span>
        </div>
        <div className="thermo-bar"><i style={{ width: cov.pct + '%' }}/></div>
        <div className="thermo-meta">
          <span>{cov.covered} de {cov.total} turnos preenchidos</span>
          <span>{cov.total - cov.covered} {cov.total - cov.covered === 1 ? 'lacuna' : 'lacunas'}</span>
        </div>
      </div>

      {/* day selector */}
      {days.length > 1 && (
        <div className="day-strip">
          {days.map((d) => (
            <button key={d.iso} className={`day-chip ${day === d.iso ? 'on' : ''}`} onClick={() => setDay(d.iso)}>
              {d.label}{d.iso === todayIso && <span className="day-today">hoje</span>}
            </button>
          ))}
        </div>
      )}

      {/* slot mural */}
      <div className="slot-list">
        {slots.map((slot) => (
          <SlotRow key={slot.idx} c={c} campaign={campaign} day={day} slot={slot}
            state={window.INTER.slotState(campaign, day, slot)}
            onAssumeClick={(s) => setAssume(s)} onEnter={enter}
            onRelease={(s) => onRelease(day, s.idx)} toast={toast}/>
        ))}
      </div>

      <p className="pray-sub" style={{ marginTop: 16, textAlign: 'center' }}>
        Turnos de madrugada (00h–05h) valem <b>+30 XP</b>. Cubra 3 vigílias e receba a medalha <b>Sentinela da Promessa</b>.
      </p>

      {assume && <AssumeModal slot={assume} exclusive={campaign.exclusive} onConfirm={confirmAssume} onClose={() => setAssume(null)}/>}
      {room && <PrayerRoom c={c} campaign={campaign} day={day} slot={room} onFinish={finishFromRoom} onClose={() => setRoom(null)} toast={toast}/>}
    </div>
  );
}

window.CorrenteScreen = CorrenteScreen;