/* ============================================================
   Devonew — Painel da Igreja · Central de Moderação de Testemunhos
   Triagem de conteúdo: Aprovar · Recusar/Arquivar · Editar e Aprovar.
   Aprovar credita +20 XP ao membro e publica no mural do app.
   ============================================================ */
const { useState: useStateAT } = React;

/* ---------- read / edit modal ---------- */
function ModerationModal({ t, onClose, onApprove, onReject, onEditApprove }) {
  const [editing, setEditing] = useStateAT(false);
  const [title, setTitle] = useStateAT(t.title);
  const [body, setBody] = useStateAT(t.body);
  const cat = window.TESTI.catOf(t.cat);

  return (
    <div className="tmod-overlay" onClick={onClose}>
      <div className="tmod" onClick={(e) => e.stopPropagation()} role="dialog" aria-label="Moderar testemunho">
        <header className="tmod-head">
          <div className={`avatar ${t.anon ? 'anon' : ''}`}>{t.anon ? '✦' : t.initials}</div>
          <div className="tmod-head-id">
            <div className="tmod-head-name">{t.anon ? 'Anônimo' : t.author}{t.anon && t.author ? ` · ${t.author}` : ''}</div>
            <div className="tmod-head-meta">
              <span className="tcat"><Icon name={cat.icon} size={13}/>{cat.label}</span>
              <span>{window.TESTI.relTime(t.ts)}</span>
            </div>
          </div>
          <button className="tmod-close" onClick={onClose} aria-label="Fechar"><Icon name="x" size={20}/></button>
        </header>

        <div className="tmod-scroll">
          {editing ? (
            <>
              <div className="tmod-edit-banner"><Icon name="pencil" size={15}/>Corrija a digitação e o português antes de publicar. O conteúdo continua sendo do irmão.</div>
              <span className="tmod-edit-lab">Título</span>
              <input className="inp big" value={title} onChange={(e) => setTitle(e.target.value)} />
              <span className="tmod-edit-lab mt">Relato</span>
              <textarea className="inp t-edit-body" value={body} onChange={(e) => setBody(e.target.value)} />
            </>
          ) : (
            <>
              <h2 className="tmod-title">{t.title}</h2>
              <p className="tmod-body">{t.body}</p>
              {t.anon && (
                <div className="tmod-anon-note"><Icon name="lock" size={14}/>O membro pediu para publicar anonimamente — o nome e a foto não aparecerão no mural.</div>
              )}
            </>
          )}
        </div>

        <footer className="tmod-foot">
          {editing ? (
            <>
              <button className="btn btn-quiet btn-sm" onClick={() => { setEditing(false); setTitle(t.title); setBody(t.body); }}>Cancelar edição</button>
              <div className="spacer"></div>
              <button className="btn btn-glory btn-sm" onClick={() => onEditApprove(t.id, { title: title.trim() || t.title, body: body.trim() || t.body })}>
                <Icon name="check" size={15}/>Salvar e aprovar
              </button>
            </>
          ) : (
            <>
              <button className="btn btn-archive btn-sm" onClick={() => onReject(t.id)}><Icon name="trash" size={15}/>Recusar</button>
              <div className="spacer"></div>
              <button className="btn btn-edit btn-sm" onClick={() => setEditing(true)}><Icon name="pencil" size={15}/>Editar</button>
              <button className="btn btn-glory btn-sm" onClick={() => onApprove(t.id)}><Icon name="check" size={15}/>Aprovar</button>
            </>
          )}
        </footer>
      </div>
    </div>
  );
}

/* ---------- screen ---------- */
function TestemunhosAdminScreen({ testimonies, onApprove, onReject, onEditApprove, onArchive, onRestore }) {
  const [tab, setTab] = useStateAT('pendentes');
  const [openId, setOpenId] = useStateAT(null);

  const byNew = (a, b) => b.ts - a.ts;
  const pendentes = testimonies.filter((t) => t.status === 'pendente').sort(byNew);
  const publicados = testimonies.filter((t) => t.status === 'aprovado').sort(byNew);
  const arquivados = testimonies.filter((t) => t.status === 'recusado').sort(byNew);
  const open = testimonies.find((t) => t.id === openId) || null;

  const close = () => setOpenId(null);
  const wrap = (fn) => (...a) => { fn(...a); close(); };

  return (
    <div className="awrap">
      <p className="muted" style={{ fontSize: 13.5, margin: '0 0 16px' }}>
        <Icon name="shield" size={15} style={{ verticalAlign: -2 }}/> Todo testemunho passa por moderação antes de ir ao mural. Aprovar credita <b>+20 XP</b> ao membro e publica no app.
      </p>

      <div className="lead-tabs" style={{ marginBottom: 18 }}>
        <button className={`lead-tab ${tab === 'pendentes' ? 'active' : ''}`} onClick={() => setTab('pendentes')}>Pendentes · {pendentes.length}</button>
        <button className={`lead-tab ${tab === 'publicados' ? 'active' : ''}`} onClick={() => setTab('publicados')}>Publicados · {publicados.length}</button>
        <button className={`lead-tab ${tab === 'arquivados' ? 'active' : ''}`} onClick={() => setTab('arquivados')}>Arquivados · {arquivados.length}</button>
      </div>

      {tab === 'pendentes' && (
        <Panel title="Fila de moderação" sub="Leia o relato na íntegra antes de decidir.">
          {pendentes.length === 0 ? (
            <div className="mod-empty">
              <div className="ic"><Icon name="check" size={24}/></div>
              <div className="et">Nenhum testemunho pendente</div>
              <div>Tudo em dia! Os novos envios aparecem aqui automaticamente.</div>
            </div>
          ) : (
            <div className="mod-list">
              {pendentes.map((t) => {
                const cat = window.TESTI.catOf(t.cat);
                return (
                  <div className="mod-row" key={t.id}>
                    <div className={`avatar sm ${t.anon ? 'anon' : ''}`}>{t.anon ? '✦' : t.initials}</div>
                    <div className="mod-main">
                      <div className="mod-top">
                        <span className="mod-author">{t.anon ? 'Anônimo' : t.author}</span>
                        <span className="tcat"><Icon name={cat.icon} size={12}/>{cat.label}</span>
                        <span className="mod-when">{window.TESTI.relTime(t.ts)}</span>
                      </div>
                      <div className="mod-title">{t.title}</div>
                      <p className="mod-snippet">{t.body}</p>
                      <div className="mod-actions">
                        <button className="btn btn-edit btn-sm" onClick={() => setOpenId(t.id)}><Icon name="eye" size={15}/>Ler e moderar</button>
                        <button className="btn btn-archive btn-sm" onClick={() => onReject(t.id)}>Recusar</button>
                        <button className="btn btn-glory btn-sm" onClick={() => onApprove(t.id)}><Icon name="check" size={15}/>Aprovar</button>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </Panel>
      )}

      {tab === 'publicados' && (
        <Panel title="No mural" sub="Visíveis para todos os membros no app.">
          {publicados.length === 0 ? (
            <div className="mod-empty"><div className="ic"><Icon name="quote" size={24}/></div><div className="et">Nada publicado ainda</div><div>Aprove um testemunho da fila para vê-lo aqui.</div></div>
          ) : (
            <div className="mod-pub-grid">
              {publicados.map((t) => {
                const cat = window.TESTI.catOf(t.cat);
                return (
                  <div className="mod-pub" key={t.id}>
                    <div className="pub-head">
                      <span className="tcat"><Icon name={cat.icon} size={12}/>{cat.label}</span>
                      <span className="mod-when" style={{ marginLeft: 'auto' }}>{t.anon ? 'Anônimo' : t.author}</span>
                    </div>
                    <div className="pub-title">{t.title}</div>
                    <p className="pub-body">{t.body}</p>
                    <div className="pub-foot">
                      <span className="pub-react"><Icon name="hands" size={14}/>{t.reactions.toLocaleString('pt-BR')} celebrações</span>
                      <button className="btn btn-archive btn-sm" onClick={() => onArchive(t.id)}><Icon name="eye" size={14}/>Tirar do ar</button>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </Panel>
      )}

      {tab === 'arquivados' && (
        <Panel title="Arquivados" sub="Recusados ou retirados do mural. Não notificam o membro.">
          {arquivados.length === 0 ? (
            <div className="mod-empty"><div className="ic"><Icon name="trash" size={22}/></div><div className="et">Arquivo vazio</div><div>Testemunhos recusados ficam guardados aqui.</div></div>
          ) : (
            <div className="mod-list">
              {arquivados.map((t) => {
                const cat = window.TESTI.catOf(t.cat);
                return (
                  <div className="mod-row" key={t.id}>
                    <div className={`avatar sm ${t.anon ? 'anon' : ''}`} style={{ opacity: 0.6 }}>{t.anon ? '✦' : t.initials}</div>
                    <div className="mod-main">
                      <div className="mod-top">
                        <span className="mod-author">{t.anon ? 'Anônimo' : t.author}</span>
                        <span className="tcat"><Icon name={cat.icon} size={12}/>{cat.label}</span>
                      </div>
                      <div className="mod-title" style={{ color: 'var(--muted)' }}>{t.title}</div>
                      <p className="mod-snippet">{t.body}</p>
                      <div className="mod-actions">
                        <button className="btn btn-edit btn-sm" onClick={() => onRestore(t.id)}><Icon name="megaphone" size={14}/>Restaurar e publicar</button>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </Panel>
      )}

      {open && (
        <ModerationModal t={open} onClose={close}
          onApprove={wrap(onApprove)} onReject={wrap(onReject)} onEditApprove={wrap(onEditApprove)} />
      )}
    </div>
  );
}

window.TestemunhosAdminScreen = TestemunhosAdminScreen;