/* Devonew — Painel da Igreja · module screens */
const { useState: useStateAS } = React;

const brl = (n) => 'R$ ' + (n || 0).toLocaleString('pt-BR');
const mkInitials = (name) => (name || '').trim().split(/\s+/).map((w) => w[0]).slice(0, 2).join('').toUpperCase();
const recalcPct = (arr) => { const tot = arr.reduce((s, x) => s + x.value, 0) || 1; return arr.map((x) => ({ ...x, pct: Math.round(x.value / tot * 100) })); };
const bumpCat = (arr, label, delta) => {
  const i = arr.findIndex((x) => x.label.toLowerCase() === (label || '').toLowerCase());
  if (i < 0) return delta > 0 ? [...arr, { label: label || 'Outros', value: delta, pct: 0 }] : arr;
  return arr.map((x, j) => j === i ? { ...x, value: Math.max(0, x.value + delta) } : x);
};

/* shared */
function Panel({ title, sub, action, children, pad }) {
  return (
    <div className="panel">
      {title && (
        <div className="panel-head">
          <div><h3>{title}</h3>{sub && <div className="sub">{sub}</div>}</div>
          {action}
        </div>
      )}
      <div className={pad === false ? '' : 'panel-pad'}>{children}</div>
    </div>
  );
}

/* modal de formulário reutilizável */
function Modal({ title, sub, onClose, onSave, saveLabel, children }) {
  return (
    <div className="modal-ov" onClick={onClose}>
      <div className="modal-card" onClick={(e) => e.stopPropagation()}>
        <h3>{title}</h3>
        {sub && <p>{sub}</p>}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>{children}</div>
        <div className="modal-actions">
          <button className="btn btn-quiet btn-sm" onClick={onClose}>Cancelar</button>
          <div className="flex1"></div>
          <button className="btn btn-primary btn-sm" onClick={onSave}>{saveLabel || 'Salvar'}</button>
        </div>
      </div>
    </div>
  );
}
const Field = ({ label, full, ...p }) => (
  <div className={full ? '' : 'flex1'} style={full ? { width: '100%' } : null}>
    <span className="field-lab">{label}</span>
    <input className="inp" {...p}/>
  </div>
);

function AreaChart({ data }) {
  const w = 100, h = 40, pad = 2.5;
  const min = Math.min(...data), max = Math.max(...data);
  const xs = (i) => pad + i * (w - 2 * pad) / (data.length - 1);
  const ys = (v) => h - pad - ((v - min) / (max - min || 1)) * (h - 2 * pad);
  const line = data.map((v, i) => `${i ? 'L' : 'M'}${xs(i).toFixed(1)} ${ys(v).toFixed(1)}`).join(' ');
  const area = `${line} L${xs(data.length - 1).toFixed(1)} ${h - pad} L${xs(0).toFixed(1)} ${h - pad} Z`;
  return (
    <svg className="chart" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      <path className="ar" d={area}/>
      <path className="ln" d={line} vectorEffect="non-scaling-stroke"/>
      <circle className="dt" cx={xs(data.length - 1)} cy={ys(data[data.length - 1])} r="2.4" vectorEffect="non-scaling-stroke"/>
    </svg>
  );
}

/* ============================================================
   DASHBOARD (Início)
   ============================================================ */
function DashboardScreen({ a, queue, members, cells, finance, events, go }) {
  const kpiVal = (k) => k.id === 'celulas' ? String(cells.length) : k.value;
  return (
    <div className="awrap">
      <div className="kpi-grid">
        {a.kpis.map((k) => (
          <div className="kpi" key={k.id}>
            <div className="kpi-ico"><Icon name={k.icon} size={20}/></div>
            <div className="kpi-value">{k.id === 'membros' ? a.church.members : kpiVal(k)}</div>
            <div className="kpi-label">{k.label}</div>
            <div className="kpi-delta"><Icon name="trending" size={13}/>{k.delta}</div>
          </div>
        ))}
      </div>

      <div className="cols c-2">
        <Panel title="Frequência nos cultos" sub="Últimas 12 semanas">
          <AreaChart data={a.attendance}/>
          <div className="chart-x"><span>12 sem.</span><span>9</span><span>6</span><span>3</span><span>agora</span></div>
        </Panel>

        <div className="panel">
          <div className="panel-pad" style={{ paddingBottom: 8 }}>
            <button className="lrow" style={{ width: '100%', textAlign: 'left', border: 'none', background: 'var(--accent-tint)', borderRadius: 'var(--r-md)', padding: '14px 16px', cursor: 'pointer' }} onClick={() => go('secretaria')}>
              <div className="ico-badge" style={{ background: 'var(--accent)', color: 'var(--accent-ink)' }}><Icon name="userPlus" size={18}/></div>
              <div>
                <div className="t" style={{ color: 'var(--accent-strong)' }}>{queue.length} cadastros pendentes</div>
                <div className="s">Aguardando validação no auto-cadastro</div>
              </div>
              <Icon name="chevron" size={18} style={{ marginLeft: 'auto', color: 'var(--accent-strong)' }}/>
            </button>
          </div>
          <div className="panel-head" style={{ borderTop: '1px solid var(--line)' }}><h3>Aniversariantes da semana</h3></div>
          <div className="panel-pad" style={{ paddingTop: 4 }}>
            {a.birthdays.map((b) => (
              <div className="lrow" key={b.name}>
                <div className="avatar sm">{b.initials}</div>
                <div className="t">{b.name}</div>
                <div className="meta">{b.day}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="cols c-2b">
        <Panel title="Atividade recente">
          {a.activity.map((x, i) => (
            <div className="lrow" key={i}>
              <div className="ico-badge"><Icon name={x.icon} size={17}/></div>
              <div style={{ minWidth: 0 }}>
                <div className="t"><b style={{ color: 'var(--ink)' }}>{x.who}</b> <span className="muted">{x.what}</span></div>
              </div>
              <div className="meta">{x.when}</div>
            </div>
          ))}
        </Panel>
        <Panel title="Próximos eventos" action={<button className="btn btn-quiet btn-sm" onClick={() => go('eventos')}>Ver agenda</button>}>
          {events.slice(0, 4).map((e) => (
            <div className="lrow" key={e.id || e.name}>
              <div className="ico-badge" style={{ background: 'var(--accent-tint)', color: 'var(--accent-strong)' }}><Icon name={e.online ? 'video' : 'calendar'} size={17}/></div>
              <div style={{ minWidth: 0 }}>
                <div className="t">{e.name}</div>
                <div className="s">{e.time}{e.status === 'rascunho' ? ' · rascunho' : ''}</div>
              </div>
              <div className="meta">{e.date}</div>
            </div>
          ))}
        </Panel>
      </div>
    </div>
  );
}

/* ============================================================
   SECRETARIA (membros + fila de aprovação + departamentos)
   ============================================================ */
const MEMBER_ROLES = ['Membro', 'Visitante', 'Líder', 'Diácono', 'Presbítero', 'Pastor', 'Tesoureiro'];
const MEMBER_STATUS = ['Ativo', 'Visitante', 'Inativo'];
const SECR_IS_DEMO = !(window.DEVO_TENANT) || String(window.DEVO_TENANT).toLowerCase() === 'comunidadevida';
/* igreja real: garante no servidor (D1) o usuário do membro — é o que permite
   o login no app com e-mail + senha. A senha (quando informada) é definida pela
   secretaria; vai só para o servidor (vira hash) e nunca é guardada no aparelho. */
function provisionAccess(member, toast, password) {
  if (SECR_IS_DEMO || !member.email || !member.email.includes('@')) return;
  const status = member.status === 'Inativo' ? 'inativo' : 'ativo'; // Inativo bloqueia o login
  fetch('/api/members', {
    method: 'POST', headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email: member.email, name: member.name, role: 'membro', status, password: password || undefined }),
  }).then((r) => { if (!r.ok) throw 0; })
    .catch(() => toast && toast('Membro salvo, mas não consegui liberar o acesso agora — verifique a conexão'));
}

/* select de função: cargos + departamentos criados pela igreja */
function RoleSelect({ value, onChange, departments }) {
  const depts = (departments || []).filter((d) => !MEMBER_ROLES.includes(d));
  return (
    <select className="inp" value={value} onChange={onChange}>
      {!MEMBER_ROLES.includes(value) && !depts.includes(value) && <option value={value}>{value}</option>}
      <optgroup label="Cargos">{MEMBER_ROLES.map((r) => <option key={r}>{r}</option>)}</optgroup>
      {depts.length > 0 && <optgroup label="Departamentos">{depts.map((d) => <option key={d}>{d}</option>)}</optgroup>}
    </select>
  );
}

const EMPTY_MEMBER = () => ({
  name: '', role: 'Membro', cell: '', since: String(new Date().getFullYear()), status: 'Ativo',
  email: '', whats: '', cpf: '', birth: '', baptism: '', address: '', civil: '', notes: '',
});

function SecretariaScreen({ members, setMembers, queue, onApprove, onReject, departments, setDepartments, toast }) {
  const [tab, setTab] = useStateAS('fila');
  const [q, setQ] = useStateAS('');
  const [editing, setEditing] = useStateAS(null); // { idx, draft } | { idx: -1, draft } (novo)

  const visible = members.map((m, idx) => ({ m, idx })).filter(({ m }) => (m.name + m.role + m.cell + (m.email || '') + (m.whats || '')).toLowerCase().includes(q.toLowerCase()));
  const openNew = () => setEditing({ idx: -1, draft: EMPTY_MEMBER() });
  const openEdit = (idx) => setEditing({ idx, draft: { ...EMPTY_MEMBER(), ...members[idx] } });
  const setD = (k, v) => setEditing((e) => ({ ...e, draft: { ...e.draft, [k]: v } }));
  const save = () => {
    const d = editing.draft;
    if (!d.name.trim()) { toast('Informe o nome'); return; }
    if (d.email && !d.email.includes('@')) { toast('E-mail de acesso inválido'); return; }
    if (d.pw && d.pw.length < 6) { toast('A senha precisa de ao menos 6 caracteres'); return; }
    const pw = d.pw || '';
    const m = { ...d, name: d.name.trim(), email: (d.email || '').trim().toLowerCase(), initials: mkInitials(d.name) };
    delete m.pw; // a senha nunca é guardada no aparelho (só vai ao servidor)
    if (editing.idx === -1) setMembers((ms) => [{ ...m, id: 'm' + Date.now().toString(36) }, ...ms]);
    else setMembers((ms) => ms.map((x, i) => i === editing.idx ? { ...x, ...m } : x));
    provisionAccess(m, toast, pw);
    setEditing(null);
    toast(editing.idx === -1
      ? (m.email ? 'Membro cadastrado ✓ · acesso liberado para ' + m.email : 'Membro cadastrado ✓')
      : 'Membro atualizado ✓');
  };
  const del = (idx) => {
    const m = members[idx];
    if (!confirm('Remover este membro? Isso também remove o acesso dele ao app.')) return;
    setMembers((ms) => ms.filter((_, i) => i !== idx));
    if (!SECR_IS_DEMO && m && m.email && m.email.includes('@')) {
      fetch('/api/members', { method: 'DELETE', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: m.email }) })
        .then((r) => { if (!r.ok) throw 0; toast('Membro removido — acesso revogado'); })
        .catch(() => toast('Removido do painel, mas não consegui revogar o acesso no servidor'));
    } else {
      toast('Membro removido');
    }
  };

  return (
    <div className="awrap">
      <div className="lead-tabs" style={{ marginBottom: 18 }}>
        <button className={`lead-tab ${tab === 'fila' ? 'active' : ''}`} onClick={() => setTab('fila')}>Fila de aprovação · {queue.length}</button>
        <button className={`lead-tab ${tab === 'membros' ? 'active' : ''}`} onClick={() => setTab('membros')}>Membros · {members.length}</button>
        <button className={`lead-tab ${tab === 'deptos' ? 'active' : ''}`} onClick={() => setTab('deptos')}>Departamentos · {departments.length}</button>
      </div>

      {tab === 'fila' ? (
        <Panel title="Auto-cadastro" sub="Pessoas que se inscreveram pela página da igreja. Aprove para liberar o acesso ao app.">
          {queue.length === 0 ? (
            <div className="lrow" style={{ justifyContent: 'center', color: 'var(--muted)', padding: '24px 0' }}>
              <Icon name="check" size={18}/> Nenhum cadastro pendente. Tudo em dia!
            </div>
          ) : queue.map((p) => (
            <div className="queue-item" key={p.id}>
              <div className="avatar sm" style={{ background: 'var(--bg-2)', color: 'var(--muted)' }}>{mkInitials(p.name)}</div>
              <div className="queue-info">
                <div className="nm">{p.name}</div>
                <div className="det"><span><Icon name="mail" size={12} style={{ verticalAlign: -2 }}/> {p.email}</span><span>{p.whats}</span><span className="muted">{p.via} · {p.when}</span></div>
              </div>
              <div className="queue-actions">
                <button className="btn btn-sm btn-reject" onClick={() => onReject(p.id)}>Recusar</button>
                <button className="btn btn-sm btn-approve" onClick={() => onApprove(p.id)}><Icon name="check" size={15}/>Aprovar</button>
              </div>
            </div>
          ))}
        </Panel>
      ) : tab === 'membros' ? (
        <Panel pad={false} title="Membros" sub="O banco de dados da sua igreja — ficha completa e acesso ao app."
          action={<button className="btn btn-primary btn-sm" onClick={openNew}><Icon name="plus" size={15}/>Novo membro</button>}>
          <div className="panel-pad" style={{ paddingBottom: 0 }}>
            <div className="searchbox" style={{ display: 'flex', marginBottom: 14 }}>
              <Icon name="search" size={15}/>
              <input placeholder="Buscar por nome, função, célula, e-mail…" value={q} onChange={(e) => setQ(e.target.value)}/>
            </div>
          </div>
          <div className="tbl-wrap">
            <table className="tbl">
              <thead><tr><th>Nome</th><th>Função</th><th>Contato</th><th>Célula</th><th>Desde</th><th>Status</th><th></th></tr></thead>
              <tbody>
                {visible.map(({ m, idx }) => (
                  <tr key={m.id || m.name + idx}>
                    <td><div className="cell-name"><div className="avatar sm">{m.initials}</div>
                      <div style={{ minWidth: 0 }}>
                        <div className="nm">{m.name}</div>
                        {m.email ? <div className="muted" style={{ fontSize: 11.5, fontFamily: 'var(--font-mono)' }}>{m.email}</div> : null}
                      </div>
                    </div></td>
                    <td>{m.role}</td>
                    <td className="muted">{m.whats || '—'}</td>
                    <td>{m.cell || '—'}</td>
                    <td>{m.since}</td>
                    <td><span className={`st ${m.status === 'Ativo' ? 'st-ok' : 'st-pend'}`}>{m.status}</span></td>
                    <td><div className="row-actions">
                      <button className="del-btn" title="Editar" onClick={() => openEdit(idx)}><Icon name="pencil" size={14}/></button>
                      <button className="del-btn" title="Remover" onClick={() => del(idx)}><Icon name="trash" size={14}/></button>
                    </div></td>
                  </tr>
                ))}
                {visible.length === 0 && <tr><td colSpan={7} className="muted" style={{ textAlign: 'center', padding: '20px 0' }}>Nenhum membro encontrado.</td></tr>}
              </tbody>
            </table>
          </div>
        </Panel>
      ) : (
        <DepartamentosTab departments={departments} setDepartments={setDepartments} members={members} toast={toast}/>
      )}

      {editing && (
        <Modal title={editing.idx === -1 ? 'Novo membro' : 'Ficha do membro'} sub="Os dados ficam na Secretaria; o e-mail libera o acesso ao app."
          onClose={() => setEditing(null)} onSave={save} saveLabel={editing.idx === -1 ? 'Cadastrar' : 'Salvar'}>
          <Field label="Nome completo" full value={editing.draft.name} onChange={(e) => setD('name', e.target.value)}/>
          <div className="inp-row">
            <div className="flex1"><span className="field-lab">Função</span>
              <RoleSelect value={editing.draft.role} departments={departments} onChange={(e) => setD('role', e.target.value)}/>
            </div>
            <div className="flex1"><span className="field-lab">Status</span>
              <select className="inp" value={editing.draft.status} onChange={(e) => setD('status', e.target.value)}>{MEMBER_STATUS.map((s) => <option key={s}>{s}</option>)}</select>
            </div>
          </div>
          <div className="inp-row">
            <Field label="Telefone / WhatsApp" placeholder="(00) 90000-0000" value={editing.draft.whats} onChange={(e) => setD('whats', e.target.value)}/>
            <Field label="CPF" placeholder="000.000.000-00" value={editing.draft.cpf} onChange={(e) => setD('cpf', e.target.value)}/>
          </div>
          <div className="inp-row">
            <Field label="Data de nascimento" type="date" value={editing.draft.birth} onChange={(e) => setD('birth', e.target.value)}/>
            <Field label="Data de batismo" type="date" value={editing.draft.baptism} onChange={(e) => setD('baptism', e.target.value)}/>
          </div>
          <Field label="Endereço" full placeholder="Rua, número, bairro, cidade" value={editing.draft.address} onChange={(e) => setD('address', e.target.value)}/>
          <div className="inp-row">
            <Field label="Célula" value={editing.draft.cell} onChange={(e) => setD('cell', e.target.value)}/>
            <Field label="Membro desde" value={editing.draft.since} onChange={(e) => setD('since', e.target.value)}/>
          </div>
          <div className="full" style={{ width: '100%' }}>
            <span className="field-lab">Observações</span>
            <textarea className="inp" rows={2} style={{ resize: 'vertical', lineHeight: 1.5 }} placeholder="Anotações da secretaria (visíveis só no painel)"
              value={editing.draft.notes} onChange={(e) => setD('notes', e.target.value)}/>
          </div>
          <div style={{ background: 'var(--accent-tint)', borderRadius: 'var(--r-sm)', padding: '12px 14px' }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--accent-strong)', display: 'flex', alignItems: 'center', gap: 7 }}>
              <Icon name="lock" size={14}/>Acesso à plataforma
            </div>
            <div className="inp-row" style={{ marginTop: 8 }}>
              <div className="flex1">
                <span className="field-lab">E-mail de acesso</span>
                <input className="inp" type="email" placeholder="email@exemplo.com" value={editing.draft.email} onChange={(e) => setD('email', e.target.value)}/>
              </div>
              <div className="flex1">
                <span className="field-lab">{editing.idx === -1 ? 'Senha de acesso' : 'Nova senha (opcional)'}</span>
                <input className="inp" type="password" autoComplete="new-password" placeholder={editing.idx === -1 ? 'mínimo 6 caracteres' : 'em branco = manter'} value={editing.draft.pw || ''} onChange={(e) => setD('pw', e.target.value)}/>
              </div>
            </div>
            <p className="muted" style={{ fontSize: 12, margin: '8px 0 0', lineHeight: 1.5 }}>
              Com o <b>e-mail e a senha</b> o membro entra no app da igreja. Você define a senha aqui e pode <b>redefini-la</b> quando
              precisar — por segurança, a senha atual não fica visível. Na edição, deixe em branco para manter a senha que ele já usa.
            </p>
          </div>
        </Modal>
      )}
    </div>
  );
}

/* ---------- Secretaria · aba Departamentos ---------- */
function DepartamentosTab({ departments, setDepartments, members, toast }) {
  const [novo, setNovo] = useStateAS('');
  const [editing, setEditing] = useStateAS(null); // { idx, value }
  const countIn = (d) => members.filter((m) => (m.role || '').toLowerCase() === d.toLowerCase()).length;

  const add = () => {
    const name = novo.trim();
    if (!name) { toast('Digite o nome do departamento'); return; }
    if (departments.some((d) => d.toLowerCase() === name.toLowerCase())) { toast('Esse departamento já existe'); return; }
    setDepartments((ds) => [...ds, name]);
    setNovo('');
    toast('Departamento criado ✓');
  };
  const rename = () => {
    const name = editing.value.trim();
    if (!name) { toast('Digite o nome'); return; }
    if (departments.some((d, i) => i !== editing.idx && d.toLowerCase() === name.toLowerCase())) { toast('Já existe um departamento com esse nome'); return; }
    setDepartments((ds) => ds.map((d, i) => i === editing.idx ? name : d));
    setEditing(null);
    toast('Departamento renomeado ✓');
  };
  const del = (idx) => {
    if (confirm(`Remover o departamento "${departments[idx]}"?`)) {
      setDepartments((ds) => ds.filter((_, i) => i !== idx));
      toast('Departamento removido');
    }
  };

  return (
    <Panel title="Departamentos da igreja" sub="Aparecem como opção de função no cadastro de membros e nas escalas de Colaboradores." pad={false}>
      <div className="panel-pad" style={{ paddingBottom: 8 }}>
        <div className="inp-row" style={{ alignItems: 'flex-end' }}>
          <div className="flex1"><span className="field-lab">Novo departamento</span>
            <input className="inp" placeholder="Ex.: Louvor, Mídia, Recepção…" value={novo}
              onChange={(e) => setNovo(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') add(); }}/>
          </div>
          <button className="btn btn-primary btn-sm" style={{ height: 42 }} onClick={add}><Icon name="plus" size={15}/>Criar</button>
        </div>
      </div>
      <div className="panel-pad" style={{ paddingTop: 4 }}>
        {departments.map((d, idx) => (
          <div className="lrow" key={d}>
            <div className="ico-badge" style={{ background: 'var(--accent-tint)', color: 'var(--accent-strong)' }}><Icon name="users" size={16}/></div>
            <div className="t">{d}</div>
            <div className="meta">{countIn(d)} {countIn(d) === 1 ? 'membro' : 'membros'}</div>
            <div className="row-actions">
              <button className="del-btn" title="Renomear" onClick={() => setEditing({ idx, value: d })}><Icon name="pencil" size={14}/></button>
              <button className="del-btn" title="Remover" onClick={() => del(idx)}><Icon name="trash" size={14}/></button>
            </div>
          </div>
        ))}
        {departments.length === 0 && (
          <div className="lrow" style={{ justifyContent: 'center', color: 'var(--muted)', padding: '20px 0' }}>
            Nenhum departamento ainda. Crie o primeiro acima — ele aparece na função do membro e nas escalas.
          </div>
        )}
      </div>
      {editing && (
        <Modal title="Renomear departamento" onClose={() => setEditing(null)} onSave={rename} saveLabel="Salvar">
          <Field label="Nome do departamento" full value={editing.value} onChange={(e) => setEditing((ed) => ({ ...ed, value: e.target.value }))}/>
        </Modal>
      )}
    </Panel>
  );
}

/* ============================================================
   PEQUENOS GRUPOS
   ============================================================ */
function GruposScreen({ cells, setCells, toast }) {
  const [editing, setEditing] = useStateAS(null);
  const total = cells.reduce((s, c) => s + (parseInt(c.members) || 0), 0);
  const novos = cells.reduce((s, c) => s + (parseInt(c.growth) || 0), 0);

  const openNew = () => setEditing({ idx: -1, draft: { name: '', leader: '', host: '', day: '', members: 0, growth: '0' } });
  const openEdit = (idx) => setEditing({ idx, draft: { ...cells[idx] } });
  const setD = (k, v) => setEditing((e) => ({ ...e, draft: { ...e.draft, [k]: v } }));
  const save = () => {
    const d = editing.draft;
    if (!d.name.trim()) { toast('Informe o nome da célula'); return; }
    const c = { ...d, members: parseInt(d.members) || 0 };
    if (editing.idx === -1) setCells((cs) => [c, ...cs]);
    else setCells((cs) => cs.map((x, i) => i === editing.idx ? c : x));
    setEditing(null);
    toast(editing.idx === -1 ? 'Célula criada ✓' : 'Célula atualizada ✓');
  };
  const del = (idx) => { if (confirm('Remover esta célula?')) { setCells((cs) => cs.filter((_, i) => i !== idx)); toast('Célula removida'); } };

  return (
    <div className="awrap">
      <div className="kpi-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
        <div className="kpi"><div className="kpi-value">{cells.length}</div><div className="kpi-label">Células ativas</div></div>
        <div className="kpi"><div className="kpi-value">{total}</div><div className="kpi-label">Pessoas em células</div></div>
        <div className="kpi"><div className="kpi-value">{novos >= 0 ? '+' : ''}{novos}</div><div className="kpi-label">Crescimento no mês</div></div>
      </div>
      <Panel title="Células / Grupos pequenos" sub="Relatórios semanais (ata) chegam aqui para aprovação." action={<button className="btn btn-primary btn-sm" onClick={openNew}><Icon name="plus" size={15}/>Nova célula</button>} pad={false}>
        <div className="tbl-wrap">
          <table className="tbl">
            <thead><tr><th>Célula</th><th>Líder</th><th>Anfitrião</th><th>Reunião</th><th>Membros</th><th>Crescimento</th><th></th></tr></thead>
            <tbody>
              {cells.map((c, idx) => (
                <tr key={c.name + idx}>
                  <td><span className="nm" style={{ color: 'var(--ink)', fontWeight: 600 }}>{c.name}</span></td>
                  <td>{c.leader}</td>
                  <td className="muted">{c.host}</td>
                  <td>{c.day}</td>
                  <td>{c.members}</td>
                  <td><span className={`st ${String(c.growth) === '0' ? 'st-draft' : 'st-ok'}`}>{c.growth}</span></td>
                  <td><div className="row-actions">
                    <button className="del-btn" title="Editar" onClick={() => openEdit(idx)}><Icon name="pencil" size={14}/></button>
                    <button className="del-btn" title="Remover" onClick={() => del(idx)}><Icon name="trash" size={14}/></button>
                  </div></td>
                </tr>
              ))}
              {cells.length === 0 && <tr><td colSpan={7} className="muted" style={{ textAlign: 'center', padding: '20px 0' }}>Nenhuma célula. Clique em “Nova célula”.</td></tr>}
            </tbody>
          </table>
        </div>
      </Panel>

      {editing && (
        <Modal title={editing.idx === -1 ? 'Nova célula' : 'Editar célula'} onClose={() => setEditing(null)} onSave={save} saveLabel={editing.idx === -1 ? 'Criar' : 'Salvar'}>
          <Field label="Nome da célula" full value={editing.draft.name} onChange={(e) => setD('name', e.target.value)}/>
          <div className="inp-row">
            <Field label="Líder" value={editing.draft.leader} onChange={(e) => setD('leader', e.target.value)}/>
            <Field label="Reunião" placeholder="Quarta · 20h" value={editing.draft.day} onChange={(e) => setD('day', e.target.value)}/>
          </div>
          <Field label="Anfitrião / endereço" full value={editing.draft.host} onChange={(e) => setD('host', e.target.value)}/>
          <div className="inp-row">
            <Field label="Membros" type="number" min="0" value={editing.draft.members} onChange={(e) => setD('members', e.target.value)}/>
            <Field label="Crescimento" placeholder="+2" value={editing.draft.growth} onChange={(e) => setD('growth', e.target.value)}/>
          </div>
        </Modal>
      )}
    </div>
  );
}

/* ============================================================
   COLABORADORES (escalas por departamento + conflito)
   ============================================================ */
function ColaboradoresScreen({ a, scale, setScale, departments, members, toast, go }) {
  const [addingDept, setAddingDept] = useStateAS(null); // string = depto selecionado no modal
  const depts = Object.keys(scale.grid);
  const services = scale.services;
  const available = (departments || []).filter((d) => !scale.grid[d]);
  // conflitos recalculados: mesma pessoa em 2+ deptos no mesmo culto
  const conflicts = [];
  services.forEach((s, si) => {
    const seen = {};
    depts.forEach((d) => { const nm = (scale.grid[d][si] || '').trim(); if (nm) (seen[nm] = seen[nm] || []).push(d); });
    Object.keys(seen).forEach((nm) => { if (seen[nm].length > 1) conflicts.push({ name: nm, service: s, depts: seen[nm] }); });
  });
  const conflictCells = {};
  conflicts.forEach((c) => c.depts.forEach((d) => { conflictCells[d + '|' + services.indexOf(c.service)] = true; }));

  const setSlot = (dept, si, v) => setScale((sc) => ({ ...sc, grid: { ...sc.grid, [dept]: sc.grid[dept].map((x, i) => i === si ? v : x) }, published: false }));
  const openAddDept = () => {
    if (!available.length) { setAddingDept(''); return; }
    setAddingDept(available[0]);
  };
  const addDept = () => {
    const name = (addingDept || '').trim();
    if (!name) { toast('Escolha um departamento'); return; }
    if (scale.grid[name]) { toast('Esse departamento já está na escala'); return; }
    setScale((sc) => ({ ...sc, grid: { ...sc.grid, [name]: services.map(() => '') }, published: false }));
    setAddingDept(null);
    toast('Departamento adicionado à escala ✓');
  };
  const delDept = (dept) => { if (confirm(`Remover o departamento "${dept}" da escala?`)) setScale((sc) => { const g = { ...sc.grid }; delete g[dept]; return { ...sc, grid: g, published: false }; }); };
  const publish = () => {
    if (conflicts.length) { toast('Resolva os conflitos antes de publicar'); return; }
    setScale((sc) => ({ ...sc, published: true }));
    toast('Escala publicada — colaboradores avisados ✓');
  };
  const monthName = new Date().toLocaleDateString('pt-BR', { month: 'long' });
  const monthTitle = monthName.charAt(0).toUpperCase() + monthName.slice(1);

  return (
    <div className="awrap">
      {/* nomes dos membros da Secretaria para escolher nas células da escala */}
      <datalist id="colab-names">
        {(members || []).map((m) => <option key={m.id || m.name} value={m.name}/>)}
      </datalist>
      {conflicts.length > 0 && (
        <div className="panel" style={{ marginBottom: 18, background: 'oklch(0.97 0.03 40)', borderColor: 'oklch(0.88 0.05 40)' }}>
          <div className="panel-pad" style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <Icon name="warning" size={20} style={{ color: 'oklch(0.55 0.14 35)', flex: 'none' }}/>
            <div style={{ fontSize: 13.5 }}>
              <b>Conflito de escala:</b> {conflicts.map((c) => `${c.name} está em ${c.depts.join(' e ')} (${c.service})`).join('; ')}. Ajuste antes de publicar.
            </div>
          </div>
        </div>
      )}

      <Panel title={`Escala de cultos · ${monthTitle}`} sub="Escolha quem serve em cada culto (os nomes vêm da Secretaria). Conflitos são destacados automaticamente."
        action={<div className="row gap-8">
          <button className="btn btn-quiet btn-sm" onClick={openAddDept}><Icon name="plus" size={15}/>Departamento</button>
          <button className="btn btn-primary btn-sm" onClick={publish}><Icon name="megaphone" size={15}/>{scale.published ? 'Republicar' : 'Publicar escala'}</button>
        </div>} pad={false}>
        <div className="tbl-wrap">
          <table className="tbl matrix">
            <thead><tr><th>Departamento</th>{services.map((s) => <th key={s}>{s}</th>)}<th></th></tr></thead>
            <tbody>
              {depts.map((d) => (
                <tr key={d}>
                  <td className="dept">{d}</td>
                  {services.map((s, si) => (
                    <td key={si}>
                      <input className={`slot-inp ${conflictCells[d + '|' + si] ? 'conflict' : ''}`} value={scale.grid[d][si] || ''}
                        list="colab-names" placeholder="—" onChange={(e) => setSlot(d, si, e.target.value)}/>
                    </td>
                  ))}
                  <td><button className="del-btn" title="Remover da escala" onClick={() => delDept(d)}><Icon name="trash" size={14}/></button></td>
                </tr>
              ))}
              {depts.length === 0 && (
                <tr><td colSpan={services.length + 2} className="muted" style={{ textAlign: 'center', padding: '22px 0' }}>
                  Nenhum departamento na escala. Clique em “Departamento” para adicionar.
                </td></tr>
              )}
            </tbody>
          </table>
        </div>
      </Panel>
      <p className="muted" style={{ fontSize: 12.5, marginTop: 12 }}>
        {scale.published ? <><Icon name="check" size={13} style={{ verticalAlign: -2, color: 'var(--accent)' }}/> Escala publicada e visível para os colaboradores.</> : 'Rascunho — publique para avisar os colaboradores.'}
      </p>

      {addingDept != null && (
        available.length ? (
          <Modal title="Adicionar departamento à escala" sub="Os departamentos são criados na Secretaria → Departamentos."
            onClose={() => setAddingDept(null)} onSave={addDept} saveLabel="Adicionar">
            <div style={{ width: '100%' }}>
              <span className="field-lab">Departamento</span>
              <select className="inp" value={addingDept} onChange={(e) => setAddingDept(e.target.value)}>
                {available.map((d) => <option key={d}>{d}</option>)}
              </select>
            </div>
          </Modal>
        ) : (
          <Modal title="Sem departamentos disponíveis" sub="Todos os departamentos criados já estão na escala — ou ainda não existe nenhum."
            onClose={() => setAddingDept(null)} onSave={() => { setAddingDept(null); go && go('secretaria'); }} saveLabel="Criar na Secretaria">
            <p className="muted" style={{ fontSize: 13.5, margin: 0, lineHeight: 1.6 }}>
              Os departamentos da igreja são criados na <b>Secretaria → aba Departamentos</b>. Crie lá e volte aqui para montar a escala.
            </p>
          </Modal>
        )
      )}
    </div>
  );
}

/* ============================================================
   FINANÇAS
   ============================================================ */
function FinancasScreen({ finance, setFinance, toast }) {
  const f = finance;
  const saldo = f.monthIn - f.monthOut;
  const [adding, setAdding] = useStateAS(null);

  const openNew = () => setAdding({ type: 'in', label: '', who: '', value: '', when: 'Hoje', cat: '' });
  const setD = (k, v) => setAdding((a) => ({ ...a, [k]: v }));
  const save = () => {
    const d = adding; const val = parseFloat(String(d.value).replace(',', '.')) || 0;
    if (!d.label.trim() || val <= 0) { toast('Informe descrição e valor'); return; }
    setFinance((fin) => {
      const tx = { type: d.type, label: d.label.trim(), who: d.who.trim() || '—', value: val, when: d.when.trim() || 'Hoje', cat: d.cat.trim() };
      const recent = [tx, ...fin.recent];
      if (d.type === 'in') return { ...fin, recent, monthIn: fin.monthIn + val, entradas: recalcPct(bumpCat(fin.entradas, tx.cat, val)) };
      return { ...fin, recent, monthOut: fin.monthOut + val, saidas: recalcPct(bumpCat(fin.saidas, tx.cat, val)) };
    });
    setAdding(null);
    toast('Lançamento registrado ✓');
  };
  const del = (idx) => {
    if (!confirm('Excluir este lançamento?')) return;
    setFinance((fin) => {
      const tx = fin.recent[idx]; if (!tx) return fin;
      const recent = fin.recent.filter((_, i) => i !== idx);
      if (tx.type === 'in') return { ...fin, recent, monthIn: Math.max(0, fin.monthIn - tx.value), entradas: tx.cat ? recalcPct(bumpCat(fin.entradas, tx.cat, -tx.value)) : fin.entradas };
      return { ...fin, recent, monthOut: Math.max(0, fin.monthOut - tx.value), saidas: tx.cat ? recalcPct(bumpCat(fin.saidas, tx.cat, -tx.value)) : fin.saidas };
    });
    toast('Lançamento excluído');
  };

  return (
    <div className="awrap">
      <div className="fin-top" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
        <div className="fin-big in"><div className="lab">Entradas no mês</div><div className="val">{brl(f.monthIn)}</div></div>
        <div className="fin-big out"><div className="lab">Saídas no mês</div><div className="val">{brl(f.monthOut)}</div></div>
        <div className="fin-big" style={{ background: 'var(--accent-tint)', borderColor: 'transparent' }}>
          <div className="lab">Saldo</div><div className="val" style={{ color: 'var(--accent-strong)' }}>{brl(saldo)}</div>
        </div>
      </div>

      <div className="cols c-2b">
        <Panel title="Entradas" sub="Por categoria">
          <div className="bars">
            {f.entradas.map((e) => (
              <div className="bar-row" key={e.label}>
                <div className="bar-top"><span>{e.label}</span><span className="v">{brl(e.value)}</span></div>
                <div className="bar-track"><i style={{ width: e.pct + '%' }}/></div>
              </div>
            ))}
          </div>
        </Panel>
        <Panel title="Saídas" sub="Por categoria">
          <div className="bars">
            {f.saidas.map((e) => (
              <div className="bar-row" key={e.label}>
                <div className="bar-top"><span>{e.label}</span><span className="v">{brl(e.value)}</span></div>
                <div className="bar-track warm"><i style={{ width: e.pct + '%' }}/></div>
              </div>
            ))}
          </div>
        </Panel>
      </div>

      <div className="sec-h" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span>Lançamentos recentes</span>
        <button className="btn btn-primary btn-sm" onClick={openNew}><Icon name="plus" size={15}/>Novo lançamento</button>
      </div>
      <Panel pad={false}>
        <div className="tbl-wrap">
          <table className="tbl">
            <thead><tr><th>Descrição</th><th>Origem</th><th>Data</th><th style={{ textAlign: 'right' }}>Valor</th><th></th></tr></thead>
            <tbody>
              {f.recent.map((t, i) => (
                <tr key={i}>
                  <td><div className="cell-name"><div className="ico-badge" style={{ width: 30, height: 30, background: t.type === 'in' ? 'oklch(0.95 0.03 150)' : 'var(--bg-2)', color: t.type === 'in' ? 'oklch(0.5 0.1 150)' : 'var(--muted)' }}><Icon name={t.type === 'in' ? 'trending' : 'wallet'} size={14}/></div><span className="nm">{t.label}</span></div></td>
                  <td className="muted">{t.who}</td>
                  <td>{t.when}</td>
                  <td style={{ textAlign: 'right', fontFamily: 'var(--font-mono)', fontWeight: 600, color: t.type === 'in' ? 'oklch(0.5 0.1 150)' : 'var(--ink)' }}>{t.type === 'in' ? '+' : '−'} {brl(t.value)}</td>
                  <td><button className="del-btn" title="Excluir" onClick={() => del(i)}><Icon name="trash" size={14}/></button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Panel>

      {adding && (
        <Modal title="Novo lançamento" onClose={() => setAdding(null)} onSave={save} saveLabel="Registrar">
          <div className="kind-toggle" style={{ alignSelf: 'flex-start' }}>
            <button className={adding.type === 'in' ? 'on' : ''} onClick={() => setD('type', 'in')}><Icon name="trending" size={14}/>Entrada</button>
            <button className={adding.type === 'out' ? 'on' : ''} onClick={() => setD('type', 'out')}><Icon name="wallet" size={14}/>Saída</button>
          </div>
          <Field label="Descrição" full value={adding.label} onChange={(e) => setD('label', e.target.value)}/>
          <div className="inp-row">
            <Field label="Origem / responsável" value={adding.who} onChange={(e) => setD('who', e.target.value)}/>
            <Field label="Categoria" placeholder={adding.type === 'in' ? 'Dízimos' : 'Aluguel & contas'} value={adding.cat} onChange={(e) => setD('cat', e.target.value)}/>
          </div>
          <div className="inp-row">
            <Field label="Valor (R$)" type="number" min="0" step="0.01" value={adding.value} onChange={(e) => setD('value', e.target.value)}/>
            <Field label="Data" value={adding.when} onChange={(e) => setD('when', e.target.value)}/>
          </div>
        </Modal>
      )}
    </div>
  );
}

/* ============================================================
   CONFIGURAÇÕES
   ============================================================ */
function ConfigScreen({ settings, setSettings, setSite, toast }) {
  const [d, setDraft] = useStateAS(settings);
  const set = (k, v) => setDraft((s) => ({ ...s, [k]: v }));
  const save = () => { setSettings(d); if (setSite) setSite((s) => ({ ...(s || {}), name: d.name })); toast('Configurações salvas ✓'); };
  return (
    <div className="awrap" style={{ maxWidth: 720 }}>
      <Panel title="Dados da igreja">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div><span className="field-lab">Nome da igreja</span><input className="inp" value={d.name} onChange={(e) => set('name', e.target.value)}/></div>
          <div className="inp-row">
            <div className="flex1"><span className="field-lab">Subdomínio</span><input className="inp" value={d.subdomain} onChange={(e) => set('subdomain', e.target.value)}/></div>
            <div style={{ width: 160 }}><span className="field-lab">Plano</span><input className="inp" value={d.plan} disabled/></div>
          </div>
          <div><span className="field-lab">Endereço do templo</span><input className="inp" value={d.address} onChange={(e) => set('address', e.target.value)}/></div>
          <div className="inp-row">
            <div className="flex1"><span className="field-lab">Instagram</span><input className="inp" value={d.instagram} onChange={(e) => set('instagram', e.target.value)}/></div>
            <div className="flex1"><span className="field-lab">WhatsApp</span><input className="inp" value={d.whatsapp} onChange={(e) => set('whatsapp', e.target.value)}/></div>
          </div>
        </div>
      </Panel>
      <div className="cedit-actions" style={{ background: 'transparent' }}>
        <span className="muted" style={{ fontSize: 13 }}>O nome e o subdomínio aparecem no painel e no app dos membros.</span>
        <div className="flex1"></div>
        <button className="btn btn-primary" onClick={save}>Salvar alterações</button>
      </div>
    </div>
  );
}

Object.assign(window, { Panel, Modal, Field, AreaChart, brl, DashboardScreen, SecretariaScreen, GruposScreen, ColaboradoresScreen, FinancasScreen, ConfigScreen });