/* Devonew — Painel da Igreja · Devocional diário
   Autoria + agenda (por data) + biblioteca devonew + publicação.
   Publica para o app do membro pela ponte localStorage (devotionals_pub),
   lida pela aba Devocional do Portal do Membro (mesma origem). */
const { useState: useStateAD } = React;

const did = () => 'd' + Math.random().toString(36).slice(2, 7);
const D_MESES = ['janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro', 'outubro', 'novembro', 'dezembro'];
const D_DIAS = ['domingo', 'segunda-feira', 'terça-feira', 'quarta-feira', 'quinta-feira', 'sexta-feira', 'sábado'];
const todayISOd = () => { const d = new Date(); return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`; };
function fmtDevoDate(iso) {
  if (!iso) return '';
  const [y, m, dd] = iso.split('-').map(Number);
  const dt = new Date(y, m - 1, dd);
  return `${dd} de ${D_MESES[m - 1]} · ${D_DIAS[dt.getDay()]}`;
}
const dInitials = (name) => (name || '').trim().split(/\s+/).map((w) => w[0]).slice(0, 2).join('').toUpperCase();
// texto do editor (parágrafos separados por linha em branco; "> " vira destaque) ↔ array
function parseParas(text) {
  return (text || '').split(/\n{2,}/).map((s) => s.trim()).filter(Boolean).map((s) => s.startsWith('>') ? { pull: s.replace(/^>\s?/, '').trim() } : s);
}
function parasToText(paras) {
  return (paras || []).map((p) => typeof p === 'string' ? p : '> ' + p.pull).join('\n\n');
}

/* prévia no celular — usa as classes reais do app do membro (styles.css é carregado no painel) */
function DevoPreview({ d }) {
  const paras = d.parasText != null ? parseParas(d.parasText) : (d.paragraphs || []);
  return (
    <div className="jprev">
      <div className="jprev-notch"><span/></div>
      <div className="jprev-screen" style={{ padding: 0, overflowY: 'auto' }}>
        <div style={{ height: 92, background: 'var(--accent-tint)', color: 'var(--accent-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, textAlign: 'center', padding: 10, overflow: 'hidden' }}>
          {d.coverImg ? <img src={d.coverImg} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/> : (d.cover || 'capa')}
        </div>
        <div style={{ padding: '14px 16px 20px' }}>
          <div className="jprev-eyebrow">{d.date || fmtDevoDate(d.dateISO)}</div>
          <div className="read-title" style={{ fontSize: 20, lineHeight: 1.2, margin: '4px 0 10px' }}>{d.title || 'Título do devocional'}</div>
          <div className="read-meta" style={{ fontSize: 12, marginBottom: 12 }}>
            <div className="avatar sm">{d.authorInitials || dInitials(d.author) || '–'}</div>
            <span>{d.author || 'Autor'}</span><span style={{ color: 'var(--faint)' }}>·</span><span>{d.readTime || ''}</span>
          </div>
          {d.verse && <div className="j-verse" style={{ marginBottom: 12 }}>“{d.verse}”{d.verseRef && <span className="j-verse-ref"> · {d.verseRef}</span>}</div>}
          <div className="prose" style={{ fontSize: 13.5 }}>
            {paras.length ? paras.map((p, i) => typeof p === 'string' ? <p key={i}>{p}</p> : <p key={i} className="pull">{p.pull}</p>)
              : <p className="muted">O texto do devocional aparece aqui…</p>}
          </div>
          {d.prayer && <div className="prayer-box" style={{ marginTop: 8 }}><span className="eyebrow">Oração sugerida</span><p>{d.prayer}</p></div>}
        </div>
      </div>
    </div>
  );
}

function DevocionalAdminScreen({ devotionals, setDevotionals, library, toast }) {
  const [tab, setTab] = useStateAD('agenda');
  const [draft, setDraft] = useStateAD(null);
  const today = todayISOd();
  const list = devotionals || [];
  const sorted = [...list].sort((a, b) => (b.dateISO || '').localeCompare(a.dateISO || ''));
  const pubCount = list.filter((d) => d.status === 'publicado').length;
  // engajamento do membro (mesma origem) — fecha o ciclo: o pastor vê améns e reflexões
  const memAmen = (() => { try { return JSON.parse(localStorage.getItem('devonew_devo_amen') || '[]'); } catch { return []; } })();
  const memNotes = (() => { try { return JSON.parse(localStorage.getItem('devonew_devo_notes') || '{}'); } catch { return {}; } })();
  const scheduled = list.filter((d) => d.status === 'publicado' && d.dateISO > today).length;
  const exists = draft && list.some((d) => d.id === draft.id);

  const blank = () => ({ id: did(), dateISO: today, title: '', author: '', readTime: '4 min de leitura', cover: 'imagem de capa · amanhecer', verse: '', verseRef: '', parasText: '', prayer: '', xp: 5, status: 'rascunho' });
  const toDraft = (d) => ({ ...d, verse: d.verse || '', verseRef: d.verseRef || '', parasText: parasToText(d.paragraphs), xp: d.xp != null ? d.xp : 5 });
  const fromDraft = (dr) => {
    const o = {
      id: dr.id, dateISO: dr.dateISO, date: fmtDevoDate(dr.dateISO),
      title: (dr.title || '').trim(), author: (dr.author || '').trim(), authorInitials: dInitials(dr.author),
      readTime: (dr.readTime || '').trim(), cover: (dr.cover || '').trim(),
      paragraphs: parseParas(dr.parasText), prayer: (dr.prayer || '').trim(),
      xp: Math.max(0, parseInt(dr.xp) || 0), status: dr.status || 'rascunho',
    };
    if (dr.coverImg) o.coverImg = dr.coverImg;
    if (dr.amens != null) o.amens = dr.amens;
    if (dr.verse && dr.verse.trim()) { o.verse = dr.verse.trim(); o.verseRef = (dr.verseRef || '').trim(); }
    return o;
  };

  const save = (publish) => {
    if (!draft.title.trim()) { toast('Dê um título ao devocional'); return; }
    if (!draft.parasText.trim()) { toast('Escreva o texto do devocional'); return; }
    const obj = fromDraft({ ...draft, status: publish ? 'publicado' : (draft.status === 'publicado' ? 'publicado' : 'rascunho') });
    setDevotionals((cur) => {
      const arr = cur || [];
      return arr.some((d) => d.id === obj.id) ? arr.map((d) => d.id === obj.id ? obj : d) : [obj, ...arr];
    });
    setDraft(null);
    toast(obj.status === 'publicado' ? 'Devocional publicado — já aparece no app dos membros ✓' : 'Rascunho salvo');
  };
  const del = (id) => { if (confirm('Excluir este devocional?')) { setDevotionals((cur) => (cur || []).filter((d) => d.id !== id)); if (draft && draft.id === id) setDraft(null); toast('Devocional excluído'); } };
  const togglePub = (id) => setDevotionals((cur) => (cur || []).map((d) => d.id === id ? { ...d, status: d.status === 'publicado' ? 'rascunho' : 'publicado' } : d));
  const useFromLibrary = (item) => { setDraft({ ...blank(), ...toDraft(item), id: did(), dateISO: today, date: undefined, status: 'rascunho' }); setTab('agenda'); toast('Modelo carregado — ajuste a data e publique'); };
  // upload da capa → reduz e guarda como data URL (mesmo padrão dos cursos)
  const pickCover = (e) => {
    const file = e.target.files && e.target.files[0]; if (!file) return;
    downscaleImg(file, 1000, (dataUrl) => {
      if (!dataUrl) { toast('Não consegui processar a imagem'); return; }
      if (!fitsStorage(dataUrl)) { toast('Imagem muito grande — tente uma menor'); return; }
      setDraft((dr) => ({ ...dr, coverImg: dataUrl }));
      toast('Capa atualizada');
    });
    e.target.value = '';
  };

  return (
    <div className="awrap">
      <div className="lead-tabs" style={{ marginBottom: 18 }}>
        <button className={`lead-tab ${tab === 'agenda' ? 'active' : ''}`} onClick={() => { setTab('agenda'); }}>Agenda</button>
        <button className={`lead-tab ${tab === 'biblioteca' ? 'active' : ''}`} onClick={() => { setTab('biblioteca'); setDraft(null); }}>Biblioteca devonew</button>
      </div>

      {/* ---------- AGENDA · lista ---------- */}
      {tab === 'agenda' && !draft && (<>
        <p className="muted" style={{ fontSize: 13.5, margin: '0 0 16px' }}>
          <Icon name="book" size={15} style={{ verticalAlign: -2 }}/> O devocional diário é a sua voz pastoral no app. Escreva, <b>agende por data</b> e <b>publique</b>. O app do membro mostra automaticamente o de hoje e guarda os anteriores no histórico.
        </p>
        <div className="panel" style={{ marginBottom: 18 }}>
          <div className="panel-pad" style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
            <div className="clib-stat"><div className="n" style={{ fontSize: 22 }}>{pubCount}</div><div className="l">publicados</div></div>
            <div className="clib-stat"><div className="n" style={{ fontSize: 22 }}>{scheduled}</div><div className="l">agendados (futuros)</div></div>
            <div style={{ flex: 1 }}/>
            <button className="btn btn-primary btn-sm" onClick={() => setDraft(blank())}><Icon name="plus" size={15}/>Novo devocional</button>
          </div>
        </div>

        {sorted.length === 0 && <div className="panel"><div className="panel-pad muted">Nenhum devocional ainda. Clique em “Novo devocional” ou use a Biblioteca devonew.</div></div>}

        {sorted.map((d) => {
          const isToday = d.dateISO === today, future = d.dateISO > today;
          return (
            <div className="panel" style={{ marginBottom: 10 }} key={d.id}>
              <div className="panel-pad" style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
                <div style={{ textAlign: 'center', minWidth: 48 }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, lineHeight: 1 }}>{d.dateISO ? d.dateISO.slice(8, 10) : '--'}</div>
                  <div className="muted" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '.06em' }}>{d.dateISO ? D_MESES[+d.dateISO.slice(5, 7) - 1].slice(0, 3) : ''}</div>
                </div>
                <div style={{ flex: 1, minWidth: 180 }}>
                  <div style={{ fontWeight: 600, fontSize: 15 }}>
                    {d.title || '(sem título)'}
                    {isToday && <span className="funnel-tag" style={{ marginLeft: 8 }}>hoje</span>}
                    {future && <span className="funnel-tag" style={{ marginLeft: 8 }}>agendado</span>}
                  </div>
                  <div className="muted" style={{ fontSize: 12.5 }}>
                    {d.author || '—'} · {d.readTime || ''}
                    {(() => { const k = d.id || d.dateISO || d.title; const am = (d.amens || 0) + (memAmen.includes(k) ? 1 : 0); const rf = memNotes[k] ? 1 : 0; return (am || rf) ? <span> · <Icon name="hands" size={12} style={{ verticalAlign: -1 }}/> {am} <Icon name="edit" size={12} style={{ verticalAlign: -1, marginLeft: 6 }}/> {rf}</span> : null; })()}
                  </div>
                </div>
                <span className={`st ${d.status === 'publicado' ? 'st-pub' : 'st-draft'}`}>{d.status === 'publicado' ? 'Publicado' : 'Rascunho'}</span>
                <button className="btn btn-quiet btn-sm" onClick={() => setDraft(toDraft(d))}><Icon name="edit" size={15}/>Editar</button>
                <button className={`btn btn-sm ${d.status === 'publicado' ? 'btn-ghost' : 'btn-primary'}`} onClick={() => togglePub(d.id)}>
                  {d.status === 'publicado' ? <><Icon name="eye" size={15}/>Despublicar</> : <><Icon name="megaphone" size={15}/>Publicar</>}
                </button>
                <button className="btn btn-quiet btn-sm" onClick={() => del(d.id)} title="Excluir"><Icon name="trash" size={15}/></button>
              </div>
            </div>
          );
        })}
      </>)}

      {/* ---------- AGENDA · editor ---------- */}
      {tab === 'agenda' && draft && (
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 22 }}>
          <div style={{ flex: 1, minWidth: 300 }}>
            <div className="sec-h">{exists ? 'Editar devocional' : 'Novo devocional'}</div>
            <div className="panel"><div className="panel-pad" style={{ display: 'grid', gap: 14 }}>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'flex-end' }}>
                <div style={{ flex: '1 1 160px' }}><span className="field-lab">Data da publicação</span><input className="inp" type="date" value={draft.dateISO} onChange={(e) => setDraft({ ...draft, dateISO: e.target.value })}/></div>
                <div style={{ flex: '0 1 130px' }}><span className="field-lab">XP ao concluir</span><input className="inp" type="number" min="0" value={draft.xp} onChange={(e) => setDraft({ ...draft, xp: e.target.value })}/></div>
                <div className="muted" style={{ fontSize: 12, paddingBottom: 12 }}>{fmtDevoDate(draft.dateISO)}</div>
              </div>
              <div><span className="field-lab">Título</span><input className="inp" value={draft.title} onChange={(e) => setDraft({ ...draft, title: e.target.value })} placeholder="Um novo fôlego para a alma cansada"/></div>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <div style={{ flex: '2 1 200px' }}><span className="field-lab">Autor</span><input className="inp" value={draft.author} onChange={(e) => setDraft({ ...draft, author: e.target.value })} placeholder="Pr. André Martins"/></div>
                <div style={{ flex: '1 1 150px' }}><span className="field-lab">Tempo de leitura</span><input className="inp" value={draft.readTime} onChange={(e) => setDraft({ ...draft, readTime: e.target.value })} placeholder="4 min de leitura"/></div>
              </div>
              <div>
                <span className="field-lab">Capa</span>
                <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                  <label style={{ position: 'relative', width: 150, height: 88, borderRadius: 12, overflow: 'hidden', cursor: 'pointer', flex: 'none', border: '1px solid var(--line)', background: 'var(--surface-2)', ...(draft.coverImg ? { backgroundImage: `url(${draft.coverImg})`, backgroundSize: 'cover', backgroundPosition: 'center' } : null) }}>
                    <span style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontSize: 12, fontWeight: 600, background: draft.coverImg ? 'oklch(0 0 0 / 0.34)' : 'transparent', color: draft.coverImg ? '#fff' : 'var(--muted)' }}>
                      <Icon name="image" size={15}/>{draft.coverImg ? 'Trocar' : 'Enviar capa'}
                    </span>
                    <input type="file" accept="image/*" hidden onChange={pickCover}/>
                  </label>
                  <div style={{ flex: '1 1 180px', display: 'flex', flexDirection: 'column', gap: 8 }}>
                    <input className="inp" value={draft.cover} onChange={(e) => setDraft({ ...draft, cover: e.target.value })} placeholder="descrição da capa (usada quando não há imagem)"/>
                    {draft.coverImg && <button className="btn btn-quiet btn-sm" style={{ alignSelf: 'flex-start' }} onClick={() => setDraft({ ...draft, coverImg: null })}><Icon name="trash" size={14}/>Remover imagem</button>}
                  </div>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <div style={{ flex: '2 1 220px' }}><span className="field-lab">Versículo (opcional)</span><input className="inp" value={draft.verse} onChange={(e) => setDraft({ ...draft, verse: e.target.value })} placeholder="Renova dentro de mim um espírito reto."/></div>
                <div style={{ flex: '1 1 130px' }}><span className="field-lab">Referência</span><input className="inp" value={draft.verseRef} onChange={(e) => setDraft({ ...draft, verseRef: e.target.value })} placeholder="Salmos 51.12"/></div>
              </div>
              <div>
                <span className="field-lab">Texto · separe parágrafos com uma linha em branco · use “&gt; ” para destaque</span>
                <textarea className="inp" rows={8} style={{ resize: 'vertical', lineHeight: 1.6 }} value={draft.parasText} onChange={(e) => setDraft({ ...draft, parasText: e.target.value })} placeholder={'Primeiro parágrafo da reflexão…\n\n> Uma frase de destaque\n\nOutro parágrafo…'}/>
              </div>
              <div><span className="field-lab">Oração sugerida</span><textarea className="inp" rows={3} style={{ resize: 'vertical', lineHeight: 1.6 }} value={draft.prayer} onChange={(e) => setDraft({ ...draft, prayer: e.target.value })} placeholder="Senhor, renova o meu coração…"/></div>
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 4 }}>
                <button className="btn btn-primary btn-sm" onClick={() => save(true)}><Icon name="megaphone" size={15}/>Publicar</button>
                <button className="btn btn-ghost btn-sm" onClick={() => save(false)}><Icon name="check" size={15}/>Salvar rascunho</button>
                <div style={{ flex: 1 }}/>
                <button className="btn btn-quiet btn-sm" onClick={() => setDraft(null)}>Cancelar</button>
              </div>
            </div></div>
          </div>
          <div style={{ width: 320, flex: '0 0 auto' }}>
            <div className="sec-h">Prévia · app do membro</div>
            <DevoPreview d={draft}/>
          </div>
        </div>
      )}

      {/* ---------- BIBLIOTECA devonew ---------- */}
      {tab === 'biblioteca' && (<>
        <p className="muted" style={{ fontSize: 13.5, margin: '0 0 16px' }}>
          <Icon name="book" size={15} style={{ verticalAlign: -2 }}/> Devocionais prontos do devonew para quando a igreja não quiser escrever. Clique em <b>Usar este</b> para carregar no editor, ajustar a data e publicar.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 14 }}>
          {(library || []).map((item) => (
            <div className="panel" key={item.id}><div className="panel-pad">
              <div className="jprev-eyebrow" style={{ marginBottom: 6 }}>{item.serie || 'devonew'}</div>
              <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 4 }}>{item.title}</div>
              <div className="muted" style={{ fontSize: 12.5, marginBottom: 10 }}>{item.author} · {item.readTime}</div>
              <p className="muted" style={{ fontSize: 13, lineHeight: 1.5, margin: '0 0 14px' }}>
                {typeof (item.paragraphs || [])[0] === 'string' ? item.paragraphs[0].slice(0, 120) + '…' : ''}
              </p>
              <button className="btn btn-primary btn-sm" onClick={() => useFromLibrary(item)}><Icon name="plus" size={15}/>Usar este</button>
            </div></div>
          ))}
          {(!library || !library.length) && <div className="panel"><div className="panel-pad muted">Biblioteca vazia.</div></div>}
        </div>
      </>)}
    </div>
  );
}

window.DevocionalAdminScreen = DevocionalAdminScreen;