/* ============================================================
   Devonew — Painel da Igreja · Corrente de Intercessão
   O líder de intercessão é o engenheiro da campanha:
   cria/configura, publica (liga o módulo no app), e monitora a
   cobertura 24h em tempo real — alocando manualmente e preenchendo
   os pontos cegos (vermelho), comuns na madrugada (01h–05h).
   ============================================================ */
const { useState: useStateAI } = React;

const SUGGEST = ['Mariana Alves', 'Rafael Souza', 'Juliana Dias', 'Tiago Ferreira',
  'Beatriz Carvalho', 'Carlos Nunes', 'Sara Ribeiro', 'André Nunes',
  'Larissa Monteiro', 'Felipe Castro', 'Priscila Gomes', 'Marcos Pereira'];
const initialsOf = (name) => name.trim().split(/\s+/).map((w) => w[0]).slice(0, 2).join('').toUpperCase();

/* ---------- alocação manual ---------- */
function AllocateModal({ slot, onConfirm, onClose }) {
  const [name, setName] = useStateAI('');
  return (
    <div className="pr-overlay" onClick={onClose}>
      <div className="assume-card" onClick={(e) => e.stopPropagation()} role="dialog" aria-label="Alocar intercessor">
        <span className="pr-eyebrow"><Icon name="userPlus" size={15}/>Alocar manualmente</span>
        <div className="assume-range">{slot.start} — {slot.end}</div>
        <p className="assume-p">Inclua um irmão que se voluntariou pessoalmente (útil para quem não usa o app).</p>
        <input className="inp" list="alloc-suggest" value={name} autoFocus placeholder="Nome do intercessor"
          onChange={(e) => setName(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter' && name.trim()) onConfirm(name.trim()); }}/>
        <datalist id="alloc-suggest">{SUGGEST.map((s) => <option key={s} value={s}/>)}</datalist>
        <div className="assume-actions">
          <button className="btn btn-quiet" onClick={onClose}>Cancelar</button>
          <button className="btn btn-primary" disabled={!name.trim()} onClick={() => name.trim() && onConfirm(name.trim())}><Icon name="check" size={16}/>Alocar</button>
        </div>
      </div>
    </div>
  );
}

/* ---------- dashboard de cobertura (grade 24h) ---------- */
function CoverageDashboard({ campaign, onAllocate, onRelease, toast }) {
  const I = window.INTER;
  const days = I.daysOf(campaign);
  const todayIso = I.isoDay(new Date());
  const [day, setDay] = useStateAI(days.some((d) => d.iso === todayIso) ? todayIso : (days[0] && days[0].iso));
  const [alloc, setAlloc] = useStateAI(null);
  const [, force] = useStateAI(0);
  React.useEffect(() => { const t = setInterval(() => force((n) => n + 1), 30000); return () => clearInterval(t); }, []);

  const slots = I.slotsForDay(campaign);
  const cov = I.coverage(campaign, day);
  const blind = slots.filter((s) => I.resForSlot(campaign, day, s.idx).length === 0);
  const blindMad = blind.filter((s) => s.madrugada);

  return (
    <div>
      {/* resumo */}
      <div className="cov-summary">
        <div className="cov-kpi"><div className="n">{cov.pct}%</div><div className="l">cobertura</div></div>
        <div className="cov-kpi"><div className="n">{cov.covered}/{cov.total}</div><div className="l">turnos preenchidos</div></div>
        <div className="cov-kpi danger"><div className="n">{blind.length}</div><div className="l">pontos cegos</div></div>
        <div className="cov-kpi danger"><div className="n">{blindMad.length}</div><div className="l">vazios na madrugada</div></div>
      </div>

      {blindMad.length > 0 && (
        <div className="cov-warn">
          <Icon name="warning" size={16}/>
          <span><b>{blindMad.length} turno(s) de madrugada sem cobertura.</b> Faça uma convocação direcionada ou aloque irmãos manualmente.</span>
        </div>
      )}

      {days.length > 1 && (
        <div className="day-strip" style={{ marginBottom: 16 }}>
          {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>
      )}

      {/* grade 24h */}
      <div className="cov-grid">
        {slots.map((slot) => {
          const res = I.resForSlot(campaign, day, slot.idx);
          const empty = res.length === 0;
          const isNow = day === todayIso && I.slotState(campaign, day, slot) === 'agora';
          const cls = ['cov-cell'];
          if (empty) cls.push('empty'); else cls.push('filled');
          if (empty && slot.madrugada) cls.push('blind-mad');
          else if (empty) cls.push('blind');
          if (isNow) cls.push('now');
          return (
            <div className={cls.join(' ')} key={slot.idx}>
              <div className="cc-time">{slot.start}{slot.madrugada && <Icon name="moon" size={11}/>}{isNow && <span className="cc-live">agora</span>}</div>
              {empty ? (
                <button className="cc-alloc" onClick={() => setAlloc(slot)}><Icon name="plus" size={13}/>Alocar</button>
              ) : (
                <div className="cc-people">
                  {res.map((r, i) => {
                    const d = I.displayName(r);
                    return (
                      <span className="cc-person" key={i} title={r.anon ? 'Anônimo (' + r.name + ')' : r.name}>
                        <span className={`avatar sm ${d.anon ? 'anon' : ''}`}>{r.anon ? '✦' : r.initials}</span>
                        <span className="cc-name">{r.anon ? 'Irmão(ã)' : r.name.split(' ')[0]}{r.mine ? '' : ''}</span>
                        {r.doneAt && <Icon name="check" size={12} className="cc-done"/>}
                      </span>
                    );
                  })}
                  <button className="cc-release" onClick={() => onRelease(day, slot.idx)} title="Liberar turno"><Icon name="x" size={13}/></button>
                </div>
              )}
            </div>
          );
        })}
      </div>

      {alloc && <AllocateModal slot={alloc} onClose={() => setAlloc(null)}
        onConfirm={(name) => { onAllocate(day, alloc.idx, name); setAlloc(null); toast(`${name.split(' ')[0]} alocado às ${alloc.start} ✓`); }}/>}
    </div>
  );
}

/* ---------- editor de campanha ---------- */
function CampaignEditor({ campaign, onChange, toast }) {
  const I = window.INTER;
  const set = (patch) => onChange({ ...campaign, ...patch });
  const motivesText = (campaign.motivesGeneral || []).join('\n');
  const [wd, setWd] = useStateAI('seg');
  const perDayText = ((campaign.motivesByDay || {})[wd] || []).join('\n');

  const setMotives = (txt) => set({ motivesGeneral: txt.split('\n').map((s) => s.trim()).filter(Boolean) });
  const setPerDay = (txt) => {
    const arr = txt.split('\n').map((s) => s.trim()).filter(Boolean);
    const next = { ...(campaign.motivesByDay || {}) };
    if (arr.length) next[wd] = arr; else delete next[wd];
    set({ motivesByDay: next });
  };

  return (
    <div>
      <Panel title="Identificação da campanha" sub="O propósito espiritual que move a corrente.">
        <span className="field-lab">Título</span>
        <input className="inp big" value={campaign.title} onChange={(e) => set({ title: e.target.value })}/>
        <span className="field-lab" style={{ marginTop: 14 }}>Descrição / propósito</span>
        <textarea className="inp" style={{ minHeight: 90, resize: 'vertical', lineHeight: 1.5 }} value={campaign.description} onChange={(e) => set({ description: e.target.value })}/>
      </Panel>

      <Panel title="Janela de tempo & turnos" sub="Quando a corrente acontece e como o dia é fracionado.">
        <div className="inp-row">
          <div className="flex1"><span className="field-lab">Início</span>
            <input type="datetime-local" className="inp" value={I.toLocalInput(campaign.startISO)} onChange={(e) => set({ startISO: I.fromLocalInput(e.target.value) })}/></div>
          <div className="flex1"><span className="field-lab">Término</span>
            <input type="datetime-local" className="inp" value={I.toLocalInput(campaign.endISO)} onChange={(e) => set({ endISO: I.fromLocalInput(e.target.value) })}/></div>
        </div>

        <span className="field-lab" style={{ marginTop: 16 }}>Duração de cada posto de vigília</span>
        <div className="seg-group">
          {I.SHIFT_OPTIONS.map((m) => (
            <button key={m} className={`seg ${campaign.shiftMin === m ? 'on' : ''}`} onClick={() => set({ shiftMin: m })}>
              {m === 60 ? '1 hora' : m + ' min'}
            </button>
          ))}
        </div>
        <p className="muted" style={{ fontSize: 12.5, margin: '8px 0 0' }}>O sistema quebra as 24h automaticamente: <b>{Math.floor(1440 / campaign.shiftMin)} turnos</b> por dia.</p>

        <span className="field-lab" style={{ marginTop: 16 }}>Intercessores por turno</span>
        <div className="seg-group">
          <button className={`seg ${campaign.exclusive ? 'on' : ''}`} onClick={() => set({ exclusive: true, capacity: 1 })}>Exclusivo · 1 pessoa</button>
          <button className={`seg ${!campaign.exclusive ? 'on' : ''}`} onClick={() => set({ exclusive: false, capacity: campaign.capacity > 1 ? campaign.capacity : 5 })}>Comunitário · vários</button>
        </div>
        {!campaign.exclusive && (
          <div style={{ marginTop: 10 }}>
            <span className="field-lab">Limite por turno</span>
            <input type="number" min="2" max="50" className="inp" style={{ maxWidth: 120 }} value={campaign.capacity}
              onChange={(e) => set({ capacity: Math.max(2, parseInt(e.target.value) || 2) })}/>
          </div>
        )}
      </Panel>

      <Panel title="Guia de motivos de oração" sub="A pauta que aparece na Sala de Clamor do intercessor.">
        <span className="field-lab">Motivos fixos (um por linha) — valem para toda a campanha</span>
        <textarea className="inp" style={{ minHeight: 120, resize: 'vertical', lineHeight: 1.6 }} value={motivesText}
          onChange={(e) => setMotives(e.target.value)} placeholder={'Pela restauração das famílias\nPela salvação dos não convertidos\n…'}/>

        <div className="perday-box">
          <span className="field-lab" style={{ marginTop: 0 }}>Motivos específicos por dia da semana (opcional)</span>
          <div className="seg-group wrap" style={{ marginBottom: 10 }}>
            {I.WD.map((d, i) => (
              <button key={d} className={`seg sm ${wd === d ? 'on' : ''}`} onClick={() => setWd(d)}>{I.WD_LABEL[i].slice(0, 3)}</button>
            ))}
          </div>
          <textarea className="inp" style={{ minHeight: 80, resize: 'vertical', lineHeight: 1.6 }} value={perDayText}
            onChange={(e) => setPerDay(e.target.value)} placeholder={`Motivos só para ${I.WD_LABEL[I.WD.indexOf(wd)]} (substituem os fixos nesse dia)`}/>
        </div>
      </Panel>
    </div>
  );
}

/* ---------- screen ---------- */
function CorrenteAdminScreen({ campaign, onChange, onToggleStatus, onCreate, onDelete, onAllocate, onRelease, toast }) {
  const [tab, setTab] = useStateAI('cobertura');

  if (!campaign) {
    return (
      <div className="awrap">
        <div className="ci-empty">
          <div className="ci-empty-ico"><Icon name="pray" size={30}/></div>
          <div className="ci-empty-t">Nenhuma corrente de oração ativa</div>
          <p>Enquanto não houver campanha publicada, o módulo fica <b>oculto</b> para os membros — sem poluir a interface. Crie uma campanha para convocar a igreja ao clamor.</p>
          <button className="btn btn-primary" onClick={onCreate}><Icon name="plus" size={16}/>Criar campanha de oração</button>
        </div>
      </div>
    );
  }

  const published = campaign.status === 'publicada';

  return (
    <div className="awrap">
      {/* publish control */}
      <div className="panel" style={{ marginBottom: 18 }}>
        <div className="panel-pad ci-publish">
          <span className={`st ${published ? 'st-pub' : 'st-draft'}`}>{published ? 'Publicada' : 'Rascunho'}</span>
          <div className="ci-publish-txt">
            <b>{campaign.title}</b>
            <span className="muted">{published ? 'Visível agora no app de todos os membros.' : 'Oculta — os membros ainda não veem o módulo.'}</span>
          </div>
          <button className={`btn btn-sm ${published ? 'btn-ghost' : 'btn-primary'}`} onClick={onToggleStatus}>
            {published ? <><Icon name="eye" size={15}/>Despublicar</> : <><Icon name="megaphone" size={15}/>Publicar campanha</>}
          </button>
        </div>
      </div>

      <div className="lead-tabs" style={{ marginBottom: 18 }}>
        <button className={`lead-tab ${tab === 'cobertura' ? 'active' : ''}`} onClick={() => setTab('cobertura')}>Cobertura em tempo real</button>
        <button className={`lead-tab ${tab === 'config' ? 'active' : ''}`} onClick={() => setTab('config')}>Configuração</button>
      </div>

      {tab === 'cobertura'
        ? <CoverageDashboard campaign={campaign} onAllocate={onAllocate} onRelease={onRelease} toast={toast}/>
        : <CampaignEditor campaign={campaign} onChange={onChange} toast={toast}/>}

      <div className="cedit-actions" style={{ marginTop: 18 }}>
        <button className="btn btn-quiet btn-sm" style={{ color: 'oklch(0.55 0.14 35)' }}
          onClick={() => { if (confirm('Encerrar e excluir esta campanha? Os turnos serão perdidos e o módulo some do app.')) onDelete(); }}>
          <Icon name="trash" size={15}/>Encerrar campanha
        </button>
        <div className="flex1"></div>
        <span className="muted" style={{ fontSize: 12.5 }}><Icon name="check" size={14} style={{ verticalAlign: -2, color: 'var(--accent)' }}/> Salvo automaticamente</span>
      </div>
    </div>
  );
}

window.CorrenteAdminScreen = CorrenteAdminScreen;