Usuário	Nome / E-mail	Role	2FA	Status	Último login	Ações
`@{u.username}`	{u.full_name \|\| '—'} {u.email && {u.email} }	{u.role}	{u.totp_enabled ? ativo : —}	{u.is_active ? ativo : desativado}	{u.last_login_at ? new Date(u.last_login_at).toLocaleString('pt-BR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' }) : '—'}	{!u.is_active && u.email && u.role !== 'owner' && ( )} {u.role !== 'owner' && (u.is_active ? : )}

e.stopPropagation()} onSubmit={submit}>

Convidar novo usuário

{manualLink ? ( <>

SMTP não enviou o e-mail. {' '}Usuário foi criado, mas você precisa mandar o link manualmente:

Link do convite

 e.target.select()} />
              </div>
              <button type="button" className="btn btn-soft btn-sm" onClick={copyLink}>
                <i className="fas fa-copy"></i> Copiar link
              </button>
            </>
          ) : (
            <>
              <div style={{ padding: '10px 12px', background: 'var(--bg1)', border: '1px solid var(--b1)', borderRadius: 'var(--r-input)', fontSize: 12, color: 'var(--t2)', marginBottom: 12 }}>
                <i className="fas fa-info-circle" style={{ color: 'var(--bl)', marginRight: 4 }}></i>
                O usuário recebe um e-mail com link pra <strong>definir a própria senha</strong> e entrar no painel. Convite expira em 7 dias.
              </div>
              <div className="form-row">
                <div className="field">
                  <label>Username</label>
                  <input className="input" value={vals.username} onChange={(e) => setV('username', e.target.value.toLowerCase())} required pattern="[a-z0-9_.-]{3,32}" placeholder="ex: maria.silva" autoFocus />
                </div>
                <div className="field">
                  <label>Role</label>
                  <select className="input" value={vals.role} onChange={(e) => setV('role', e.target.value)}>
                    <option value="admin">admin</option>
                    <option value="editor">editor</option>
                    <option value="viewer">viewer</option>
                  </select>
                </div>
              </div>
              <div className="field">
                <label>Nome completo (recomendado)</label>
                <input className="input" value={vals.full_name} onChange={(e) => setV('full_name', e.target.value)} maxLength={100} />
              </div>
              <div className="field">
                <label>E-mail *</label>
                <input type="email" className="input" value={vals.email} onChange={(e) => setV('email', e.target.value)} required placeholder="usuario@empresa.com" maxLength={150} />
                <span className="hint">Obrigatório — convite vai pra este endereço.</span>
              </div>
            </>
          )}
        </div>
        <div className="modal-foot">
          <button type="button" className="btn btn-ghost" onClick={onClose}>{manualLink ? 'Fechar' : 'Cancelar'}</button>
          {!manualLink && (
            <button type="submit" className="btn btn-primary" disabled={busy}>
              {busy ? <><i className="fas fa-circle-notch fa-spin"></i> Enviando…</> : <><i className="fas fa-paper-plane"></i> Enviar convite</>}
            </button>
          )}
          {manualLink && (
            <button type="button" className="btn btn-primary" onClick={onCreated}>
              <i className="fas fa-check"></i> Concluído
            </button>
          )}
        </div>
      </form>
    </div>
  );
}

function UserCreateModal({ onClose, onCreated }) {
  const toast = useToast();
  const [vals, setVals] = useState({ username: '', full_name: '', email: '', password: '', role: 'admin' });
  const [busy, setBusy] = useState(false);
  const setV = (k, v) => setVals((s) => ({ ...s, [k]: v }));

  const submit = (e) => {
    e.preventDefault();
    setBusy(true);
    api('/api/admin/users', { method: 'POST', body: vals })
      .then(() => { toast({ title: 'Usuário criado', msg: `@${vals.username}`, kind: 'success' }); onCreated(); })
      .catch((e) => { toast({ title: 'Falha', msg: e.message, kind: 'error' }); setBusy(false); });
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <form className="modal" onClick={(e) => e.stopPropagation()} onSubmit={submit}>
        <div className="modal-head">
          <h3><i className="fas fa-user-plus"></i> Novo usuário</h3>
          <button type="button" className="icon-btn" onClick={onClose}><i className="fas fa-times"></i></button>
        </div>
        <div className="modal-body">
          <div className="form-row">
            <div className="field">
              <label>Username</label>
              <input className="input" value={vals.username} onChange={(e) => setV('username', e.target.value.toLowerCase())} required pattern="[a-z0-9_.-]{3,32}" placeholder="ex: maria.silva" autoFocus />
              <span className="hint">3-32 chars, minúsculas, números e ._-</span>
            </div>
            <div className="field">
              <label>Role</label>
              <select className="input" value={vals.role} onChange={(e) => setV('role', e.target.value)}>
                <option value="admin">admin — acesso total</option>
                <option value="editor">editor — edita conteúdo</option>
                <option value="viewer">viewer — só leitura</option>
              </select>
              <span className="hint">Enforcement de role no middleware vem em fase futura. Por enquanto, todos têm acesso total.</span>
            </div>
          </div>
          <div className="field">
            <label>Nome completo (opcional)</label>
            <input className="input" value={vals.full_name} onChange={(e) => setV('full_name', e.target.value)} maxLength={100} />
          </div>
          <div className="field">
            <label>E-mail (opcional, recomendado)</label>
            <input type="email" className="input" value={vals.email} onChange={(e) => setV('email', e.target.value)} placeholder="usuario@empresa.com" maxLength={150} />
            <span className="hint">Necessário pra recuperação de senha e convites quando SMTP estiver configurado.</span>
          </div>
          <div className="field">
            <label>Senha inicial</label>
            <input type="password" className="input" value={vals.password} onChange={(e) => setV('password', e.target.value)} required minLength={8} />
            <span className="hint">Mínimo 8 chars. O usuário pode trocar depois em Meu Perfil.</span>
          </div>
        </div>
        <div className="modal-foot">
          <button type="button" className="btn btn-ghost" onClick={onClose}>Cancelar</button>
          <button type="submit" className="btn btn-primary" disabled={busy}>
            {busy ? <><i className="fas fa-circle-notch fa-spin"></i> Criando…</> : <><i className="fas fa-user-plus"></i> Criar usuário</>}
          </button>
        </div>
      </form>
    </div>
  );
}

function UserEditModal({ user, onClose, onSaved }) {
  const toast = useToast();
  const [vals, setVals] = useState({
    full_name: user.full_name || '',
    email: user.email || '',
    role: user.role,
    is_active: user.is_active,
  });
  const [resetPw, setResetPw] = useState('');
  const [busy, setBusy] = useState(false);
  const setV = (k, v) => setVals((s) => ({ ...s, [k]: v }));
  const isOwner = user.role === 'owner';

  const submit = (e) => {
    e.preventDefault();
    setBusy(true);
    const body = {
      full_name: vals.full_name,
      email: vals.email,
    };
    if (!isOwner) {
      body.role = vals.role;
      body.is_active = vals.is_active;
    }
    if (resetPw.trim().length >= 8) body.password = resetPw;
    api('/api/admin/users/' + user.id, { method: 'PATCH', body })
      .then(() => { toast({ title: 'Salvo', kind: 'success' }); onSaved(); })
      .catch((e) => { toast({ title: 'Falha', msg: e.message, kind: 'error' }); setBusy(false); });
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <form className="modal" onClick={(e) => e.stopPropagation()} onSubmit={submit}>
        <div className="modal-head">
          <h3><i className="fas fa-user-pen"></i> Editar @{user.username}</h3>
          <button type="button" className="icon-btn" onClick={onClose}><i className="fas fa-times"></i></button>
        </div>
        <div className="modal-body">
          {isOwner && (
            <div style={{ padding: '8px 12px', background: 'rgba(245,158,11,0.08)', border: '1px solid var(--am)', borderRadius: 'var(--r-input)', fontSize: 11.5, marginBottom: 12 }}>
              <i className="fas fa-shield" style={{ color: 'var(--am)', marginRight: 4 }}></i>
              <strong>Owner</strong> — role e status não podem ser alterados (proteção do admin original).
            </div>
          )}
          <div className="form-row">
            <div className="field">
              <label>Nome completo</label>
              <input className="input" value={vals.full_name} onChange={(e) => setV('full_name', e.target.value)} maxLength={100} />
            </div>
            <div className="field">
              <label>E-mail</label>
              <input type="email" className="input" value={vals.email} onChange={(e) => setV('email', e.target.value)} maxLength={150} />
            </div>
          </div>
          <div className="form-row">
            <div className="field">
              <label>Role</label>
              <select className="input" value={vals.role} onChange={(e) => setV('role', e.target.value)} disabled={isOwner}>
                {isOwner && <option value="owner">owner</option>}
                <option value="admin">admin</option>
                <option value="editor">editor</option>
                <option value="viewer">viewer</option>
              </select>
            </div>
            <div className="field" style={{ alignItems: 'center' }}>
              <label style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <Switch on={vals.is_active} onChange={(v) => setV('is_active', v)} disabled={isOwner} />
                <span>{vals.is_active ? 'Ativo' : 'Desativado'}</span>
              </label>
            </div>
          </div>
          <div className="field">
            <label>Resetar senha (opcional)</label>
            <input type="password" className="input" value={resetPw} onChange={(e) => setResetPw(e.target.value)} placeholder="Deixe em branco pra não alterar" minLength={8} />
            <span className="hint">Se preenchido, sobrescreve a senha do usuário e revoga sessões dele. Mínimo 8 chars.</span>
          </div>
        </div>
        <div className="modal-foot">
          <button type="button" className="btn btn-ghost" onClick={onClose}>Cancelar</button>
          <button type="submit" className="btn btn-primary" disabled={busy}>
            {busy ? <><i className="fas fa-circle-notch fa-spin"></i> Salvando…</> : <><i className="fas fa-save"></i> Salvar</>}
          </button>
        </div>
      </form>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// SmtpPane — config SMTP + teste de conexão + envio de e-mail de teste.
// Senha do SMTP é sensível: GET retorna '***' quando preenchida; PATCH
// ignora '***' pra não sobrescrever.
// ─────────────────────────────────────────────────────────────────────────
function SmtpPane() {
  const toast = useToast();
  const [cfg, setCfg] = useState({
    smtp_host: '', smtp_port: '587', smtp_secure: 'false',
    smtp_user: '', smtp_password: '',
    smtp_from_name: '', smtp_from_email: '',
  });
  const [saving, setSaving]   = useState(false);
  const [verifying, setVerifying] = useState(false);
  const [sending, setSending] = useState(false);
  const [testTo, setTestTo]   = useState('');
  const upd = (k, v) => setCfg((s) => ({ ...s, [k]: v }));
  const canEdit = Auth.userCan('edit_smtp');

  const reload = () => api('/api/admin/system-config')
    .then((r) => {
      if (!r) return;
      setCfg({
        smtp_host:       r.smtp_host       || '',
        smtp_port:       r.smtp_port       || '587',
        smtp_secure:     r.smtp_secure     || 'false',
        smtp_user:       r.smtp_user       || '',
        smtp_password:   r.smtp_password   || '', // backend retorna '***' se setada
        smtp_from_name:  r.smtp_from_name  || '',
        smtp_from_email: r.smtp_from_email || '',
      });
    })
    .catch(() => {});

  useEffect(() => { reload(); }, []);

  const save = () => {
    setSaving(true);
    api('/api/admin/system-config', {
      method: 'PATCH',
      body: {
        smtp_host: cfg.smtp_host,
        smtp_port: cfg.smtp_port,
        smtp_secure: cfg.smtp_secure,
        smtp_user: cfg.smtp_user,
        smtp_password: cfg.smtp_password, // se valor é '***', backend mantém o atual
        smtp_from_name: cfg.smtp_from_name,
        smtp_from_email: cfg.smtp_from_email,
      },
    })
      .then(() => { toast({ title: 'SMTP salvo', kind: 'success' }); reload(); })
      .catch((e) => toast({ title: 'Falha', msg: e.message, kind: 'error' }))
      .finally(() => setSaving(false));
  };

  const verifyConn = () => {
    setVerifying(true);
    api('/api/admin/smtp/verify', { method: 'POST' })
      .then((r) => toast({ title: 'Conexão OK', msg: `${r.host}:${r.port} (${r.secure ? 'SSL' : 'STARTTLS'})`, kind: 'success' }))
      .catch((e) => toast({ title: 'Falha na conexão', msg: e.message, kind: 'error' }))
      .finally(() => setVerifying(false));
  };

  const sendTest = () => {
    setSending(true);
    api('/api/admin/smtp/send-test', { method: 'POST', body: testTo ? { to: testTo } : {} })
      .then((r) => toast({ title: 'E-mail de teste enviado', msg: `Pra ${r.to}. Verifique a caixa.`, kind: 'success' }))
      .catch((e) => toast({ title: 'Falha ao enviar', msg: e.message, kind: 'error' }))
      .finally(() => setSending(false));
  };

  const configured = cfg.smtp_host && cfg.smtp_from_email;

  if (!canEdit) {
    return (
      <div className="card" style={{ background: 'var(--bg1)' }}>
        <div style={{ padding: 30, textAlign: 'center', color: 'var(--t3)' }}>
          <i className="fas fa-lock" style={{ fontSize: 28, marginBottom: 10, color: 'var(--t3)' }}></i>
          <h4 style={{ margin: '0 0 6px', fontSize: 14, color: 'var(--t2)' }}>Sem permissão</h4>
          <p style={{ fontSize: 12, margin: 0, lineHeight: 1.55 }}>
            Configuração SMTP disponível só pra <strong>admin</strong> ou <strong>owner</strong>.
            Sua role atual: <code>{Auth.userRole || 'admin'}</code>.
          </p>
        </div>
      </div>
    );
  }

  return (
    <>
      <div className="card">
        <div className="card-header">
          <h3><i className="fas fa-envelope" style={{ color: 'var(--or)' }}></i> Servidor SMTP</h3>
          <span className="meta">
            {configured
              ? <span style={{ color: 'var(--gr)' }}><i className="fas fa-check-circle"></i> Configurado</span>
              : <span style={{ color: 'var(--am)' }}><i className="fas fa-exclamation-circle"></i> Não configurado</span>}
          </span>
        </div>

        <div style={{ padding: '10px 14px', background: 'var(--bg1)', border: '1px solid var(--b1)', borderRadius: 'var(--r-input)', fontSize: 12, color: 'var(--t2)', marginBottom: 12, lineHeight: 1.55 }}>
          <i className="fas fa-info-circle" style={{ color: 'var(--bl)', marginRight: 4 }}></i>
          Usado pra enviar e-mails transacionais: <strong>recuperação de senha</strong>, <strong>convite de novo usuário</strong> e notificações de segurança.
          Exemplos de servidores comuns: Gmail (smtp.gmail.com:587 + senha de app), SendGrid, Mailgun, AWS SES, ou seu próprio servidor.
        </div>

        <div className="form-row-3">
          <div className="field" style={{ gridColumn: 'span 2' }}>
            <label>Host SMTP</label>
            <input className="input" value={cfg.smtp_host} onChange={(e) => upd('smtp_host', e.target.value)} placeholder="smtp.gmail.com" />
          </div>
          <div className="field">
            <label>Porta</label>
            <input className="input" value={cfg.smtp_port} onChange={(e) => upd('smtp_port', e.target.value)} placeholder="587" />
            <span className="hint">587 = STARTTLS, 465 = SSL.</span>
          </div>
        </div>

        <div className="form-row">
          <div className="field">
            <label>Conexão segura</label>
            <select className="input" value={cfg.smtp_secure} onChange={(e) => upd('smtp_secure', e.target.value)}>
              <option value="false">STARTTLS (recomendado pra porta 587)</option>
              <option value="true">SSL/TLS direto (pra porta 465)</option>
            </select>
          </div>
        </div>

        <div className="form-row">
          <div className="field">
            <label>Usuário SMTP</label>
            <input className="input" value={cfg.smtp_user} onChange={(e) => upd('smtp_user', e.target.value)} placeholder="seu-usuario@empresa.com" autoComplete="username" />
          </div>
          <div className="field">
            <label>Senha SMTP</label>
            <input
              type="password"
              className="input"
              value={cfg.smtp_password}
              onChange={(e) => upd('smtp_password', e.target.value)}
              placeholder={cfg.smtp_password === '***' ? '(configurada — deixe assim pra manter)' : 'sua senha SMTP'}
              autoComplete="new-password"
            />
            <span className="hint">Pra Gmail, gere uma <a href="https://myaccount.google.com/apppasswords" target="_blank" rel="noopener" style={{ color: 'var(--or)' }}>senha de app</a>.</span>
          </div>
        </div>

        <div className="form-row">
          <div className="field">
            <label>Nome do remetente</label>
            <input className="input" value={cfg.smtp_from_name} onChange={(e) => upd('smtp_from_name', e.target.value)} placeholder="SINTRACON-SP" />
          </div>
          <div className="field">
            <label>E-mail do remetente</label>
            <input type="email" className="input" value={cfg.smtp_from_email} onChange={(e) => upd('smtp_from_email', e.target.value)} placeholder="no-reply@empresa.com" />
            <span className="hint">Aparece como "De:" nos e-mails. Pode ser igual ao usuário SMTP.</span>
          </div>
        </div>

        <div className="row" style={{ justifyContent: 'flex-end', gap: 8, marginTop: 8 }}>
          <button className="btn btn-soft btn-sm" onClick={verifyConn} disabled={verifying || !configured}>
            {verifying ? <><i className="fas fa-circle-notch fa-spin"></i> Verificando…</> : <><i className="fas fa-plug"></i> Testar conexão</>}
          </button>
          <button className="btn btn-primary btn-sm" onClick={save} disabled={saving}>
            {saving ? <><i className="fas fa-circle-notch fa-spin"></i> Salvando…</> : <><i className="fas fa-save"></i> Salvar SMTP</>}
          </button>
        </div>
      </div>

      {configured && (
        <div className="card">
          <div className="card-header">
            <h3><i className="fas fa-paper-plane" style={{ color: 'var(--or)' }}></i> Enviar e-mail de teste</h3>
            <span className="meta">Manda um e-mail real pra confirmar fim-a-fim</span>
          </div>
          <div className="form-row" style={{ alignItems: 'flex-end' }}>
            <div className="field" style={{ flex: 1 }}>
              <label>Destinatário</label>
              <input type="email" className="input" value={testTo} onChange={(e) => setTestTo(e.target.value)} placeholder="Deixe em branco pra enviar pra você (e-mail do perfil)" />
            </div>
            <div className="field">
              <button className="btn btn-primary btn-sm" onClick={sendTest} disabled={sending}>
                {sending ? <><i className="fas fa-circle-notch fa-spin"></i> Enviando…</> : <><i className="fas fa-paper-plane"></i> Enviar teste</>}
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

function ConfigPane() {
  const toast = useToast();
  const [cfg, setCfg] = useState({
    lgpd: 90,
    upload: 25,
    jwt: "24h",
    llm: "llama3.2:3b-instruct-q4_K_M",
    embed: "nomic-embed-text:latest",
    aiAutoAccept: false,
  });
  const upd = (k, v) => setCfg((c) => ({ ...c, [k]: v }));

  useEffect(() => {
    api('/api/admin/system-config').then((r) => {
      if (!r) return;
      setCfg((c) => ({
        ...c,
        lgpd: r.lgpd_retention_days || c.lgpd,
        upload: r.upload_max_mb || c.upload,
        jwt: r.jwt_ttl || c.jwt,
        llm: r.ollama_llm_model || c.llm,
        embed: r.ollama_embed_model || c.embed,
        aiAutoAccept: r.ai_auto_accept_when_clean === 'true',
      }));
    }).catch(() => {});
  }, []);

  const save = () => {
    api('/api/admin/system-config', {
      method: 'PATCH',
      body: {
        lgpd_retention_days: cfg.lgpd,
        upload_max_mb: cfg.upload,
        jwt_ttl: cfg.jwt,
        ollama_llm_model: cfg.llm,
        ollama_embed_model: cfg.embed,
        ai_auto_accept_when_clean: cfg.aiAutoAccept ? 'true' : 'false',
      },
    })
      .then(() => toast({ title: "Configurações salvas", kind: "success" }))
      .catch((e) => toast({ title: "Falha ao salvar", msg: e.message, kind: "error" }));
  };

  const clearCache = () => api('/api/admin/cache', { method: 'DELETE' })
    .then(() => toast({ title: "Cache limpo", kind: "success" }))
    .catch((e) => toast({ title: "Falha", msg: e.message, kind: "error" }));

  const reindex = () => api('/api/admin/reindex', { method: 'POST' })
    .then(() => toast({ title: "Reindexação iniciada", msg: "Refazendo embeddings…", kind: "info" }))
    .catch((e) => toast({ title: "Falha", msg: e.message, kind: "error" }));

  const canEdit = Auth.userCan('edit_system');
  if (!canEdit) {
    return (
      <div className="card" style={{ background: 'var(--bg1)' }}>
        <div style={{ padding: 30, textAlign: 'center', color: 'var(--t3)' }}>
          <i className="fas fa-lock" style={{ fontSize: 28, marginBottom: 10, color: 'var(--t3)' }}></i>
          <h4 style={{ margin: '0 0 6px', fontSize: 14, color: 'var(--t2)' }}>Sem permissão</h4>
          <p style={{ fontSize: 12, margin: 0, lineHeight: 1.55 }}>
            Configurações de sistema disponíveis só pra <strong>admin</strong> ou <strong>owner</strong>.
            Sua role atual: <code>{Auth.userRole || 'admin'}</code>.
          </p>
        </div>
      </div>
    );
  }

  return (
    <>
      <BrandingCard />

      <LlmProviderCard />

      <TtsProviderCard />

      <div className="dash-grid">
        <div className="card">
          <div className="card-header">
            <h3><i className="fas fa-vector-square"></i> Embeddings (RAG)</h3>
            <span className="badge b-gr"><span className="dot"></span> local</span>
          </div>
          <div className="field">
            <label>Modelo</label>
            <select className="input" value={cfg.embed} onChange={(e) => upd("embed", e.target.value)}>
              <option value="nomic-embed-text:latest">nomic-embed-text:latest</option>
            </select>
            <span className="hint">Modelo do RAG (sempre local via Ollama — grátis). <strong style={{ color: "var(--am)" }}>Trocar exige reindexar arquivos.</strong></span>
          </div>
        </div>

        <div className="card">
          <div className="card-header">
            <h3><i className="fas fa-shield-alt"></i> LGPD & Segurança</h3>
          </div>
          <div className="form-row" style={{ gridTemplateColumns: "1fr" }}>
            <div className="field">
              <label><i className="fas fa-eraser"></i> Retenção de logs <code style={{ color: "var(--or)" }}>{cfg.lgpd} dias</code></label>
              <Range min={7} max={365} step={1} value={cfg.lgpd} onChange={(v) => upd("lgpd", v)} format={(v) => v + "d"} />
              <span className="hint">Logs mais antigos são apagados automaticamente. Aplica imediato.</span>
            </div>
            <div className="field">
              <label><i className="fas fa-clock"></i> JWT TTL</label>
              <input className="input" value={cfg.jwt} onChange={(e) => upd("jwt", e.target.value)} placeholder="24h" />
              <span className="hint">Duração do token de login admin (ex.: 12h, 24h, 7d). <strong>Requer reinício.</strong></span>
            </div>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-header">
          <h3><i className="fas fa-upload"></i> Upload & manutenção</h3>
        </div>
        <div className="form-row-3">
          <div className="field">
            <label>Upload máximo</label>
            <div className="row gap-sm">
              <input type="number" className="input" value={cfg.upload} onChange={(e) => upd("upload", parseInt(e.target.value))} style={{ flex: 1 }} />
              <span className="tag">MB</span>
            </div>
            <span className="hint">Tamanho máximo por arquivo. <strong>Requer reinício.</strong></span>
          </div>
          <div className="field">
            <label>Cache de respostas</label>
            <button className="btn btn-soft" style={{ width: "100%", justifyContent: "center" }} onClick={clearCache}>
              <i className="fas fa-trash-alt"></i> Limpar cache agora
            </button>
            <span className="hint">Força regerar todas as próximas respostas.</span>
          </div>
          <div className="field">
            <label>Índice vetorial</label>
            <button className="btn btn-soft" style={{ width: "100%", justifyContent: "center" }} onClick={reindex}>
              <i className="fas fa-sync"></i> Reindexar tudo
            </button>
            <span className="hint">Refaz embeddings de todos os arquivos.</span>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-header">
          <h3><i className="fas fa-wand-magic-sparkles" style={{ color: 'var(--or)' }}></i> Melhoria de conteúdo por IA</h3>
          <span className="meta">Configura o comportamento do botão "✨ Melhorar com IA" no ingest.</span>
        </div>
        <div className="form-row" style={{ alignItems: 'center' }}>
          <div className="field" style={{ flex: 1 }}>
            <label style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <Switch on={cfg.aiAutoAccept} onChange={(v) => upd('aiAutoAccept', v)} />
              <span>Aceitar melhoria automaticamente quando a IA não detectar alucinações</span>
            </label>
            <span className="hint">
              Quando <strong>ON</strong>: se o passo 3 do pipeline (validação) retornar 0 alucinações
              <strong> e</strong> 0 fatos removidos, a melhoria é aplicada sem mostrar o preview.
              Reduz fricção mas remove revisão humana — só ative quando você já confiar no sistema.
              Default: <strong>OFF</strong> (preview obrigatório).
            </span>
          </div>
        </div>
      </div>

      <InfraCard />

      <div className="row" style={{ justifyContent: "flex-end" }}>
        <button className="btn btn-primary" onClick={save}>
          <i className="fas fa-save"></i> Salvar configurações
        </button>
      </div>
    </>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// SecurityCard — gerenciamento de 2FA + dispositivos confiáveis do user.
// Tudo opera no user do token atual. Multi-user fica preparado mas sem
// admin-de-admin nesta fase (cada admin gerencia o próprio 2FA).
// ─────────────────────────────────────────────────────────────────────────
// ─────────────────────────────────────────────────────────────────────────
// BrandingCard — identidade da org na sidebar + login screen.
// Salva em system_config: brand_name (nome), brand_initial (letra do mark),
// brand_logo_path (URL/caminho — quando definido, substitui a letra).
// Após salvar, chama window.appReloadBranding() pra refresh instantâneo.
// ─────────────────────────────────────────────────────────────────────────
function BrandingCard() {
  const toast = useToast();
  const fileInputRef = useRef(null);
  const devLogoInputRef = useRef(null);
  const [vals, setVals] = useState({ brand_name: '', brand_initial: '', brand_logo_path: '', developer_logo_path: '', developer_url: '' });
  const [busy, setBusy] = useState(false);
  const [uploading, setUploading] = useState(false);
  const [uploadingDev, setUploadingDev] = useState(false);
  const setV = (k, v) => setVals((s) => ({ ...s, [k]: v }));

  useEffect(() => {
    api('/api/admin/system-config')
      .then((r) => {
        if (!r) return;
        setVals({
          brand_name:          r.brand_name          || '',
          brand_initial:       r.brand_initial       || '',
          brand_logo_path:     r.brand_logo_path     || '',
          developer_logo_path: r.developer_logo_path || '',
          developer_url:       r.developer_url       || '',
        });
      })
      .catch(() => {});
  }, []);

  const save = () => {
    setBusy(true);
    api('/api/admin/system-config', {
      method: 'PATCH',
      body: {
        brand_name:          vals.brand_name.trim()    || 'SINTRACON-SP',
        brand_initial:       vals.brand_initial.trim() || 'S',
        brand_logo_path:     vals.brand_logo_path     || '',
        developer_logo_path: vals.developer_logo_path || '',
        developer_url:       vals.developer_url.trim() || '',
      },
    })
      .then(() => {
        toast({ title: 'Identidade salva', msg: 'Aplicada na sidebar, login e widget.', kind: 'success' });
        if (typeof window.appReloadBranding === 'function') window.appReloadBranding();
      })
      .catch((e) => toast({ title: 'Falha ao salvar', msg: e.message, kind: 'error' }))
      .finally(() => setBusy(false));
  };

  // Upload reusável pros 2 campos de logo. `targetKey` decide onde gravar.
  const uploadImage = async (file, targetKey, setBusyFn) => {
    if (!file.type.startsWith('image/')) {
      toast({ title: 'Arquivo inválido', msg: 'Selecione uma imagem.', kind: 'error' });
      return;
    }
    const fd = new FormData();
    fd.append('file', file);
    setBusyFn(true);
    try {
      const r = await fetch('/api/admin/upload-avatar-video', {
        method: 'POST',
        body: fd,
        headers: { Authorization: 'Bearer ' + (Auth && Auth.token ? Auth.token : '') },
      });
      const data = await r.json();
      if (!r.ok || !data.url) throw new Error(data.error || 'Falha no upload');
      setV(targetKey, data.url);
      toast({ title: 'Imagem carregada', msg: 'Lembre de clicar em Salvar.', kind: 'success' });
    } catch (err) {
      toast({ title: 'Falha no upload', msg: err.message, kind: 'error' });
    } finally {
      setBusyFn(false);
    }
  };

  const onPickFile = () => fileInputRef.current && fileInputRef.current.click();
  const onFile = async (e) => {
    const file = e.target.files && e.target.files[0];
    if (!file) return;
    await uploadImage(file, 'brand_logo_path', setUploading);
    if (fileInputRef.current) fileInputRef.current.value = '';
  };

  const onPickDevLogo = () => devLogoInputRef.current && devLogoInputRef.current.click();
  const onDevLogoFile = async (e) => {
    const file = e.target.files && e.target.files[0];
    if (!file) return;
    await uploadImage(file, 'developer_logo_path', setUploadingDev);
    if (devLogoInputRef.current) devLogoInputRef.current.value = '';
  };

  const absPath = (p) => p ? (p.startsWith('http') || p.startsWith('/') ? p : '/' + p) : null;
  const previewLogoSrc    = absPath(vals.brand_logo_path);
  const previewDevLogoSrc = absPath(vals.developer_logo_path);

  const canEdit = Auth.userCan('edit_branding');
  if (!canEdit) {
    return (
      <div className="card" style={{ background: 'var(--bg1)' }}>
        <div style={{ padding: 30, textAlign: 'center', color: 'var(--t3)' }}>
          <i className="fas fa-lock" style={{ fontSize: 28, marginBottom: 10, color: 'var(--t3)' }}></i>
          <h4 style={{ margin: '0 0 6px', fontSize: 14, color: 'var(--t2)' }}>Sem permissão</h4>
          <p style={{ fontSize: 12, margin: 0, lineHeight: 1.55 }}>
            Configuração de identidade disponível só pra <strong>admin</strong> ou <strong>owner</strong>.
            Sua role atual: <code>{Auth.userRole || 'admin'}</code>.
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="card">
      <div className="card-header">
        <h3><i className="fas fa-tag" style={{ color: 'var(--or)' }}></i> Identidade do painel</h3>
        <span className="meta">Nome, sigla e logo que aparecem na sidebar e tela de login.</span>
      </div>

      {/* Preview ao vivo */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: 12, background: 'var(--bg1)', border: '1px solid var(--b1)', borderRadius: 'var(--r-input)', marginBottom: 12 }}>
        <div style={{
          width: 40, height: 40, borderRadius: 10,
          background: previewLogoSrc ? 'transparent' : 'var(--or)',
          color: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 16,
          overflow: 'hidden', flexShrink: 0,
        }}>
          {previewLogoSrc
            ? <img src={previewLogoSrc} alt="" style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
            : (vals.brand_initial || 'S').charAt(0).toUpperCase()}
        </div>
        <div>
          <div style={{ fontSize: 14, fontWeight: 600 }}>{vals.brand_name || 'SINTRACON-SP'}</div>
          <div style={{ fontSize: 11, color: 'var(--t3)' }}>admin</div>
        </div>
        <span className="hint" style={{ marginLeft: 'auto', fontSize: 11 }}>← preview da sidebar</span>
      </div>

      <div className="form-row">
        <div className="field">
          <label>Nome (aparece embaixo do logo)</label>
          <input
            className="input"
            value={vals.brand_name}
            onChange={(e) => setV('brand_name', e.target.value)}
            placeholder="SINTRACON-SP"
            maxLength={50}
          />
        </div>
        <div className="field">
          <label>Sigla (letra do logo padrão)</label>
          <input
            className="input"
            value={vals.brand_initial}
            onChange={(e) => setV('brand_initial', e.target.value.toUpperCase().slice(0, 2))}
            placeholder="S"
            style={{ maxWidth: 80, textAlign: 'center', fontSize: 16, fontWeight: 700 }}
            maxLength={2}
          />
          <span className="hint">Usado quando não há logo enviado. Máximo 2 caracteres.</span>
        </div>
      </div>

      <div className="form-row">
        <div className="field" style={{ flex: 1 }}>
          <label>Logo (substitui o ícone laranja)</label>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <button
              type="button"
              className="btn btn-soft btn-sm"
              onClick={onPickFile}
              disabled={uploading}
            >
              <i className={'fas ' + (uploading ? 'fa-spinner fa-spin' : 'fa-upload')}></i>
              {uploading ? ' Enviando…' : ' Carregar imagem'}
            </button>
            {vals.brand_logo_path && (
              <>
                <code style={{ fontSize: 11, color: 'var(--t3)', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }}>{vals.brand_logo_path}</code>
                <button
                  type="button"
                  className="btn btn-ghost btn-sm"
                  onClick={() => setV('brand_logo_path', '')}
                  title="Remover logo (volta a usar a sigla)"
                >
                  <i className="fas fa-trash"></i>
                </button>
              </>
            )}
            <input
              ref={fileInputRef}
              type="file"
              accept="image/*"
              style={{ display: 'none' }}
              onChange={onFile}
            />
          </div>
          <span className="hint">PNG/JPG quadrado (ideal 128×128). Fundo transparente preserva o quadrado laranja.</span>
        </div>
      </div>

      {/* Logo "desenvolvido por" + URL clicável no footer do widget. Em 2
          colunas pra ficar compacto e claro que os campos andam juntos. */}
      <div className="form-row" style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--b1)' }}>
        <div className="field" style={{ flex: 1 }}>
          <label>Logo "desenvolvido por" (footer do widget)</label>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
            <div style={{
              width: 80, height: 28, borderRadius: 4,
              background: 'var(--bg2)', border: '1px solid var(--b1)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              overflow: 'hidden', flexShrink: 0,
            }}>
              {previewDevLogoSrc
                ? <img src={previewDevLogoSrc} alt="" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} />
                : <span style={{ fontSize: 9, color: 'var(--t3)' }}>sem logo</span>}
            </div>
            <button
              type="button"
              className="btn btn-soft btn-sm"
              onClick={onPickDevLogo}
              disabled={uploadingDev}
            >
              <i className={'fas ' + (uploadingDev ? 'fa-spinner fa-spin' : 'fa-upload')}></i>
              {uploadingDev ? ' Enviando…' : ' Carregar logo'}
            </button>
            {vals.developer_logo_path && (
              <button
                type="button"
                className="btn btn-ghost btn-sm"
                onClick={() => setV('developer_logo_path', '')}
                title="Remover logo (linha 'desenvolvido por' some do widget)"
              >
                <i className="fas fa-trash"></i>
              </button>
            )}
            <input
              ref={devLogoInputRef}
              type="file"
              accept="image/*"
              style={{ display: 'none' }}
              onChange={onDevLogoFile}
            />
          </div>
          <span className="hint">
            Imagem horizontal pequena (ideal 80×16). Vazio = linha não aparece no widget.
          </span>
        </div>

        <div className="field" style={{ flex: 1 }}>
          <label>URL do desenvolvedor (link da logo)</label>
          <input
            type="url"
            className="input"
            value={vals.developer_url}
            onChange={(e) => setV('developer_url', e.target.value)}
            placeholder="https://vazto.com.br"
          />
          <span className="hint">
            URL aberta em nova aba ao clicar na logo. Vazio = logo não é clicável.
          </span>
        </div>
      </div>

      <div className="row" style={{ justifyContent: 'flex-end', marginTop: 8 }}>
        <button className="btn btn-primary btn-sm" onClick={save} disabled={busy}>
          {busy ? <><i className="fas fa-circle-notch fa-spin"></i> Salvando…</> : <><i className="fas fa-save"></i> Salvar identidade</>}
        </button>
      </div>
    </div>
  );
}

// TermsPane — editor do texto "Termos de IA" exibido no footer do widget.
// Texto inicial vem da migration 029 (modelo inspirado em jotform.com/ai-terms
// adaptado pra realidade do SINTRACON). Marcadores ***DADO*** devem ser
// substituídos pelo admin pelos dados reais (DPO, e-mail, telefone, endereço).
// Só admin/owner conseguem editar (PATCH /system-config exige requireRole('admin')).
function TermsPane() {
  const toast = useToast();
  const [text, setText] = useState('');
  const [original, setOriginal] = useState('');
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    api('/api/admin/system-config')
      .then((r) => {
        const t = (r && r.ai_terms_text) || '';
        setText(t);
        setOriginal(t);
      })
      .catch((e) => toast({ title: 'Falha ao carregar termos', msg: e.message, kind: 'error' }))
      .finally(() => setLoading(false));
  }, []);

  const canEdit = Auth.userCan('edit_system');
  if (!canEdit) {
    return (
      <div className="card" style={{ background: 'var(--bg1)' }}>
        <div style={{ padding: 30, textAlign: 'center', color: 'var(--t3)' }}>
          <i className="fas fa-lock" style={{ fontSize: 28, marginBottom: 10, color: 'var(--t3)' }}></i>
          <h4 style={{ margin: '0 0 6px', fontSize: 14, color: 'var(--t2)' }}>Sem permissão</h4>
          <p style={{ fontSize: 12, margin: 0, lineHeight: 1.55 }}>
            Edição dos Termos de IA disponível só pra <strong>admin</strong> ou <strong>owner</strong>.
            Sua role atual: <code>{Auth.userRole || 'admin'}</code>.
          </p>
        </div>
      </div>
    );
  }

  const dirty = text !== original;
  const markersFound = (text.match(/\*\*\*[A-Z_-]+\*\*\*/g) || []).length;

  const save = () => {
    setSaving(true);
    api('/api/admin/system-config', {
      method: 'PATCH',
      body: { ai_terms_text: text },
    })
      .then(() => {
        setOriginal(text);
        toast({ title: 'Termos salvos', msg: 'Já estão disponíveis no widget.', kind: 'success' });
      })
      .catch((e) => toast({ title: 'Falha ao salvar', msg: e.message, kind: 'error' }))
      .finally(() => setSaving(false));
  };

  const resetToModel = async () => {
    if (!window.confirm('Recarregar o texto-modelo padrão? Suas alterações locais serão perdidas (clique em Salvar pra aplicar de fato).')) return;
    try {
      // Endpoint público devolve o que está no DB. Pra resetar, melhor o admin
      // copiar manualmente do arquivo de migration — aqui só recarregamos o
      // valor atual do servidor (descarta edição não salva).
      const r = await api('/api/admin/system-config');
      const t = (r && r.ai_terms_text) || '';
      setText(t);
      toast({ title: 'Texto recarregado do servidor', kind: 'info' });
    } catch (e) {
      toast({ title: 'Falha', msg: e.message, kind: 'error' });
    }
  };

  return (
    <div className="card">
      <div className="card-header">
        <h3><i className="fas fa-file-contract" style={{ color: 'var(--or)' }}></i> Termos de uso de IA</h3>
        <span className="meta">
          Exibido no widget quando o usuário clica em "Termos de IA" no footer da conversa.
          Pode usar quebras de linha. Substitua os marcadores <code>***DADO***</code> pelos dados reais.
        </span>
      </div>

      {loading ? (
        <div style={{ padding: 24, textAlign: 'center', color: 'var(--t3)' }}>
          <i className="fas fa-circle-notch fa-spin"></i> Carregando…
        </div>
      ) : (
        <>
          {markersFound > 0 && (
            <div style={{
              padding: '10px 14px', marginBottom: 12,
              background: 'rgba(245, 158, 11, 0.1)',
              border: '1px solid rgba(245, 158, 11, 0.3)',
              borderRadius: 'var(--r-input)',
              fontSize: 12, color: 'var(--t2)',
            }}>
              <i className="fas fa-exclamation-triangle" style={{ color: '#f59e0b', marginRight: 6 }}></i>
              <strong>{markersFound} marcador{markersFound > 1 ? 'es' : ''}</strong> <code>***DADO***</code> ainda não preenchido{markersFound > 1 ? 's' : ''}.
              Localize com Ctrl+F e substitua pelos dados reais antes de salvar.
            </div>
          )}

          <div className="field">
            <label style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span>Texto dos termos (exibido literalmente, com quebras de linha)</span>
              <span style={{ fontSize: 10.5, color: 'var(--t3)', fontFamily: 'var(--ff-mono)' }}>
                {text.length.toLocaleString('pt-BR')} caracteres
              </span>
            </label>
            <textarea
              className="input"
              value={text}
              onChange={(e) => setText(e.target.value)}
              spellCheck="false"
              style={{ minHeight: 480, fontFamily: 'var(--ff-mono)', fontSize: 12.5, lineHeight: 1.5 }}
            >

Marcadores ***DADO***: ***DATA_ATUALIZACAO***, ***DIAS_RETENCAO***, ***E-MAIL_DPO***, ***E-MAIL_CONTATO***, ***TELEFONE***, ***ENDERECO_SINTRACON***.

)}

); } function SecurityCard() { const toast = useToast(); const confirm = useConfirm(); const [status, setStatus] = useState(null); // { totp_enabled, ... } const [setupData, setSetupData] = useState(null); // { qr_data_url, secret_text, backup_codes, setup_token } const [showSetup, setShowSetup] = useState(false); const [showCodes, setShowCodes] = useState(null); // array de plaintext codes (mostrar UMA vez) const [devices, setDevices] = useState([]); const [loading, setLoading] = useState(true); const reload = () => Promise.all([ api('/api/admin/security/2fa/status'), api('/api/admin/security/trusted-devices'), ]).then(([s, d]) => { setStatus(s); setDevices((d && d.devices) || []); setLoading(false); }).catch(() => setLoading(false)); useEffect(() => { reload(); }, []); const startSetup = () => { api('/api/admin/security/2fa/setup', { method: 'POST' }) .then((r) => { setSetupData(r); setShowSetup(true); }) .catch((e) => toast({ title: 'Falha', msg: e.message, kind: 'error' })); }; const confirmSetup = (code) => { return api('/api/admin/security/2fa/confirm', { method: 'POST', body: { setup_token: setupData.setup_token, code }, }).then(() => { // 2FA ativado — mostra backup codes uma vez, fecha modal de setup. setShowCodes(setupData.backup_codes); setShowSetup(false); setSetupData(null); reload(); toast({ title: '2FA ativado', msg: 'Guarde os códigos de backup com segurança.', kind: 'success' }); }); }; const disable2fa = async () => { const pass = window.prompt('Confirme sua senha pra desabilitar 2FA:'); if (!pass) return; api('/api/admin/security/2fa/disable', { method: 'POST', body: { password: pass } }) .then(() => { toast({ title: '2FA desabilitado', kind: 'success' }); reload(); }) .catch((e) => toast({ title: 'Falha', msg: e.message, kind: 'error' })); }; const regenerateBackupCodes = async () => { const pass = window.prompt('Confirme sua senha pra gerar novos códigos de backup (os antigos serão invalidados):'); if (!pass) return; api('/api/admin/security/2fa/regenerate-backup-codes', { method: 'POST', body: { password: pass } }) .then((r) => { setShowCodes(r.backup_codes); reload(); }) .catch((e) => toast({ title: 'Falha', msg: e.message, kind: 'error' })); }; const revokeDevice = async (id) => { api('/api/admin/security/trusted-devices/' + id, { method: 'DELETE' }) .then(() => { toast({ title: 'Dispositivo revogado', kind: 'success' }); reload(); }) .catch((e) => toast({ title: 'Falha', msg: e.message, kind: 'error' })); }; const revokeAllDevices = async () => { const ok = await confirm({ title: 'Esquecer todos os dispositivos?', message: 'Você será forçado a digitar o código 2FA no próximo login em qualquer navegador.', confirmLabel: 'Esquecer todos', danger: true, icon: 'fa-shield-halved', }); if (!ok) return; api('/api/admin/security/trusted-devices', { method: 'DELETE' }) .then((r) => { toast({ title: 'Dispositivos esquecidos', msg: `${r.revoked} revogados`, kind: 'success' }); reload(); }) .catch((e) => toast({ title: 'Falha', msg: e.message, kind: 'error' })); }; return (

Segurança da conta

2FA (TOTP) + dispositivos confiáveis (lembrar 30 dias)

{loading && (

Carregando…

)} {!loading && status && ( <> {/* Status do 2FA */}

Autenticação em 2 fatores: {status.totp_enabled ? Ativa : Desativada}

Usuário: {status.username} · role: {status.role} {status.totp_enabled && status.totp_enabled_at && ( <> · ativada em {new Date(status.totp_enabled_at).toLocaleString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' })} )}

{!status.totp_enabled ? ( ) : ( )}

{/* Backup codes status */} {status.totp_enabled && (

{status.backup_codes_unused} de {status.backup_codes_total} códigos de backup disponíveis {status.backup_codes_unused < 3 && · considere regenerar!}

)} {/* Trusted devices */} {status.totp_enabled && (

Dispositivos confiáveis ({devices.length}) {devices.length > 0 && ( )}

{devices.length === 0 ? (

Nenhum dispositivo confiável ativo. Marque "Lembrar deste dispositivo" no próximo login pra adicionar.

) : (

{devices.map((d) => (

{d.user_agent || '(user-agent desconhecido)'}

IP: {d.last_ip || '—'} · último uso: {new Date(d.last_used_at).toLocaleString('pt-BR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })} · expira em {new Date(d.expires_at).toLocaleDateString('pt-BR')}

))}

)}

)} )} {/* Modal: setup 2FA — mostra QR + secret + input pra confirmar */} {showSetup && setupData && ( { setShowSetup(false); setSetupData(null); }} /> )} {/* Modal: mostra backup codes (UMA VEZ) */} {showCodes && ( setShowCodes(null)} /> )}

); } function Setup2FAModal({ data, onConfirm, onClose }) { const [code, setCode] = useState(''); const [busy, setBusy] = useState(false); const [err, setErr] = useState(''); const submit = (e) => { e.preventDefault(); if (!code) return; setBusy(true); setErr(''); onConfirm(code.trim()) .catch((e) => { setErr(e.message); setBusy(false); }); }; return (

e.stopPropagation()} style={{ maxWidth: 560 }}>

Ativar 2FA

Abra um app authenticator (Google Authenticator, Authy, 1Password, Microsoft Authenticator…)
Escaneie o QR abaixo (ou digite o secret manualmente)
Digite o código de 6 dígitos que aparecer no app pra confirmar

Não conseguiu escanear? Digite o secret manual:{' '} {data.secret_text}

Código de confirmação (6 dígitos) setCode(e.target.value)} autoFocus required inputMode="numeric" maxLength={6} placeholder="123456" style={{ fontFamily: 'var(--ff-mono)', fontSize: 18, letterSpacing: 4, textAlign: 'center' }} />

{err &&

{err}

}

); } function BackupCodesModal({ codes, onClose }) { const [copied, setCopied] = useState(false); const copy = () => { const text = codes.join('\n'); navigator.clipboard.writeText(text).then(() => { setCopied(true); setTimeout(() => setCopied(false), 2000); }); }; return (

e.stopPropagation()} style={{ maxWidth: 500 }}>

Códigos de backup

Anote, imprima ou copie agora. Estes códigos só aparecem UMA vez. Cada um pode ser usado UMA vez no lugar do código TOTP — usar se perder o celular.

{codes.map((c) => (

{c}

))}

); } // ───────────────────────────────────────────────────────────────────────── // InfraCard — memória/disco/Ollama version em tempo real (poll 10s) // ───────────────────────────────────────────────────────────────────────── function InfraCard() { const [stats, setStats] = useState(null); const [err, setErr] = useState(null); useEffect(() => { let alive = true; const load = () => api('/api/admin/system-stats') .then((s) => { if (alive) { setStats(s); setErr(null); } }) .catch((e) => { if (alive) setErr(e.message); }); load(); const t = setInterval(load, 10000); return () => { alive = false; clearInterval(t); }; }, []); if (err) { return (

Infraestrutura

Falha ao ler stats: {err}

); } if (!stats || !stats.current) { return (

Infraestrutura

Coletando primeira amostra…

); } const c = stats.current; const memPctColor = c.memPct >= 90 ? 'var(--rd)' : c.memPct >= 75 ? 'var(--am)' : 'var(--gr)'; const diskPctColor = c.diskPct == null ? 'var(--t3)' : c.diskPct >= 90 ? 'var(--rd)' : c.diskPct >= 80 ? 'var(--am)' : 'var(--gr)'; const memSpark = stats.history.map((h) => h.memPct); const rssSpark = stats.history.map((h) => h.procRss / (1024 * 1024)); // em MB return (

Infraestrutura

amostragem a cada {Math.round(stats.sample_interval_ms / 1000)}s · histórico {stats.history_window_minutes}min · {stats.samples_total} pontos

{/* Linha 1: Ollama + Node + uptime */}

{/* Linha 2: Memória + Disco */}

Memória RAM

{c.memPct.toFixed(1)}%

{humanSize(c.memUsed)} / {humanSize(c.memTotal)}

5 min: {stats.averages.mem_pct_5min}%

15 min: {stats.averages.mem_pct_15min}%

1 h: {stats.averages.mem_pct_60min}%

Node processo: RSS {humanSize(c.procRss)} · heap {humanSize(c.procHeapUsed)} / {humanSize(c.procHeapTotal)}

Disco da partição do projeto

{c.diskTotal != null ? ( <>

{c.diskPct.toFixed(1)}% usado

{humanSize(c.diskUsed)} usado · {humanSize(c.diskFree)} livre · {humanSize(c.diskTotal)} total

) : (

fs.statfs indisponível (Node < 18.15)

)}

{c.diskTotal != null && (

)}

Load average (1 / 5 / 15 min)

{(c.load1 || 0).toFixed(2)} · {(c.load5 || 0).toFixed(2)} · {(c.load15 || 0).toFixed(2)} em {stats.cpu_count} CPU{stats.cpu_count === 1 ? '' : 's'} {c.load1 != null && c.load1 > stats.cpu_count && (sobrecarga)}

Atualizado em {new Date(c.ts).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit', second: '2-digit' })} · refresh automático

); } function InfoTile({ icon, iconCls, label, main, sub }) { return (

{label}

{main}

{sub}

); } function DiagPane() { const toast = useToast(); const [checks, setChecks] = useState(null); const [loading, setLoading] = useState(false); const [summary, setSummary] = useState({ ok: 0, warn: 0, error: 0, total: 0 }); const [ts, setTs] = useState(null); const run = () => { setLoading(true); api('/api/admin/diagnostic') .then((r) => { setChecks(r.checks || []); setSummary(r.summary || { ok: 0, warn: 0, error: 0, total: 0 }); setTs(r.timestamp); }) .catch((e) => toast({ title: "Falha no diagnóstico", msg: e.message, kind: "error" })) .finally(() => setLoading(false)); }; useEffect(() => { run(); }, []); const summaryBadge = summary.error > 0 ? { cls: 'b-rd', label: `${summary.ok} ok · ${summary.warn} alerta · ${summary.error} falha` } : summary.warn > 0 ? { cls: 'b-am', label: `${summary.ok} saudáveis · ${summary.warn} alerta` } : { cls: 'b-gr', label: `${summary.ok} saudáveis` }; return ( <>

Diagnóstico

{checks && {summaryBadge.label}}

{!checks && !loading && (

Clique em "Rodar de novo" para iniciar.

)} {loading && !checks && (

Executando checks…

)} {checks && (

{checks.map((c) => (

{c.name}

{c.value}

))}

)} {ts && (

Última execução: {new Date(ts).toLocaleString('pt-BR')}

)}

); } // ---- Console de debug com logs reais do RAG pipeline --------------------- function DebugConsole() { const toast = useToast(); const [lines, setLines] = useState(null); const [loading, setLoading] = useState(false); const load = () => { setLoading(true); DataLoader.debugLogs().then((ls) => { setLines(ls || []); setLoading(false); }); }; useEffect(() => { load(); }, []); const copy = () => { if (!lines) return; const text = lines.join('\n'); if (navigator.clipboard) { navigator.clipboard.writeText(text); toast({ title: "Log copiado", kind: "success" }); } }; return (

Console de debug

        {loading && !lines ? 'Carregando logs reais do pipeline RAG…' :
         !lines || lines.length === 0 ? 'Sem traces no log ainda. Faça uma pergunta no chatbot pra gerar logs.' :
         lines.join('\n')}

Origem: GET /api/admin/debug-logs — últimos 20 traces da tabela chat_logs.

); } function ApiPane() { const toast = useToast(); const copy = (text) => { navigator.clipboard && navigator.clipboard.writeText(text); toast({ title: "Copiado!", msg: "Snippet copiado para a área de transferência.", kind: "success" }); }; // URL real do host atual — sem hardcode da nip.io const baseUrl = window.location.origin; // Versão atual do servidor (informativa no snippet) const [ver, setVer] = useState(''); useEffect(() => { fetch('/api/version').then((r) => r.json()).then((j) => setVer(j.version || '')).catch(() => {}); }, []); const versionTag = ver ? `?v=${ver}` : ''; const embedCode = ` `; return ( <>

Embedar o widget no site

3 domínios autorizados

Para adicionar o chatbot em qualquer página do site SINTRACON, cole o snippet abaixo logo antes do fechamento de {``}:

{embedCode}

CORS: o domínio do site precisa estar autorizado. Use o endpoint POST /api/admin/origins para adicionar o domínio.
Customização visual: cores, mascote, fonte, voz e mensagem são controlados pelo painel — nenhuma edição de código necessária.

Endpoints públicos

sem autenticação · chamados pelo widget

{Data.endpoints.public.map((e, i) => )}

Endpoints admin JWT

requerem Authorization: Bearer <token>

Integração mobile (iOS/Android)

Para o app SINTRACON, há duas opções:

WebView: a forma mais rápida — abrir {baseUrl} dentro de um WebView. Funciona com o widget já implementado.
API REST nativa: para experiência 100% nativa, consumir /api/v1/chat/stream + /api/tts.

); } function ApiGroup({ title, eps }) { return (

{title}

{eps.map((e, i) => )}

); } function Endpoint({ ep }) { return (

{ep.m}

{ep.p} {ep.d}

); } // ───────────────────────────────────────────────────────────────────────── // LlmProviderCard — workbench Unbox: banner do provider ativo + alternativas // colapsáveis com expand inline (API key + modelo + ações) // ───────────────────────────────────────────────────────────────────────── // Metadata visual por provider (mark, tier, latência, preço médio por 1M tokens // em USD — só pra exibição; cálculo de custo real vem do backend). const PROV_META = { ollama: { mark: '🦙', tier: 'Grátis', tierColor: 'gr', tagline: 'local · grátis', latency: '~820ms', pricePer1M: 0, desc: 'Roda no servidor. Sem custo, mais lento.' }, groq: { mark: '⚡', tier: 'Rápido', tierColor: 'bl', tagline: 'mais rápido — recomendado', latency: '~140ms', pricePer1M: 0.59, desc: '10–50× mais rápido. Free tier: 30 req/min.' }, gemini: { mark: 'G', tier: 'Balanceado', tierColor: 'or', tagline: 'balanceado', latency: '~320ms', pricePer1M: 0.39, desc: 'Boa qualidade, preço competitivo.' }, openai: { mark: '○', tier: 'Premium', tierColor: 'rd', tagline: 'ChatGPT · referência', latency: '~410ms', pricePer1M: 0.78, desc: 'Maior qualidade média, mais caro.' }, deepseek: { mark: '◆', tier: 'Econômico', tierColor: 'gr', tagline: 'muito barato', latency: '~520ms', pricePer1M: 0.27, desc: 'Menor custo entre APIs pagas.' }, }; function LlmProviderCard() { const toast = useToast(); const [data, setData] = useState(null); const [busy, setBusy] = useState(false); const [keyDrafts, setKeyDrafts] = useState({}); // por provider id const [showKey, setShowKey] = useState({}); // toggle visibilidade const [expanded, setExpanded] = useState({}); // qual provider está expandido const [modelDrafts, setModelDrafts] = useState({}); // modelo selecionado por provider const load = () => api('/api/admin/llm/providers').then((d) => { setData(d); // hidrata modelDrafts com o modelo atualmente selecionado por provider const drafts = {}; (d.providers || []).forEach((p) => { drafts[p.id] = p.selectedModel; }); setModelDrafts((prev) => ({ ...drafts, ...prev })); }).catch((e) => toast({ title: "Falha", msg: e.message, kind: "error" })); useEffect(() => { load(); }, []); if (!data) { return (

Provider de LLM

Carregando…

); } const activeProvider = data.active.provider; const selectProvider = async (provider, model) => { setBusy(true); try { await api('/api/admin/llm/select', { method: 'POST', body: { provider, model } }); toast({ title: "Provider ativo", msg: `${provider} / ${model}`, kind: "success" }); await load(); } catch (e) { toast({ title: "Falha", msg: e.message, kind: "error" }); } finally { setBusy(false); } }; const saveKey = async (provider) => { const key = keyDrafts[provider]; if (key == null) return; setBusy(true); try { await api('/api/admin/llm/api-key', { method: 'POST', body: { provider, api_key: key } }); toast({ title: "API key salva", kind: "success" }); setKeyDrafts((d) => ({ ...d, [provider]: undefined })); await load(); } catch (e) { toast({ title: "Falha", msg: e.message, kind: "error" }); } finally { setBusy(false); } }; const testProvider = async (provider) => { try { const r = await api('/api/admin/llm/ping', { method: 'POST', body: { provider, api_key: keyDrafts[provider] } }); if (r.ok) toast({ title: "Conexão testada", msg: `API key válida ✓ — ${r.models_available || 0} modelos`, kind: "success" }); else toast({ title: "Conexão falhou", msg: r.error || 'sem detalhes', kind: "error" }); } catch (e) { toast({ title: "Falha", msg: e.message, kind: "error" }); } }; const active = data.providers.find((p) => p.id === activeProvider) || data.providers[0]; const activeMeta = PROV_META[active.id] || { mark: '?', tier: '—', tierColor: 'gr', latency: '', pricePer1M: 0, desc: '' }; const activeBrl = (activeMeta.pricePer1M * data.usd_to_brl); const activeModelDraft = modelDrafts[active.id] || active.selectedModel; return (

Provider de LLM

ativo: {active.label.split(' ')[0]} · {activeModelDraft.split(':')[0]}

{/* Active banner */}

{activeMeta.mark}

{active.label} {activeMeta.tier} ativo · responde ao usuário

{activeModelDraft} {activeMeta.latency} {activeMeta.pricePer1M === 0 ? 'grátis' : `R$ ${activeBrl.toFixed(2)} / 1M tokens`}

A troca aplica imediato na próxima pergunta. Custos no card Custos da IA do Dashboard.

{/* Alternatives */}

Alternativas — clique para selecionar

{data.providers.map((p) => { const meta = PROV_META[p.id] || { mark: '?', tier: '—', tierColor: 'gr', latency: '', pricePer1M: 0, desc: '' }; const isActive = p.id === activeProvider; const isExpanded = !!expanded[p.id]; const draft = keyDrafts[p.id]; const dirty = draft != null && draft !== ''; const showK = showKey[p.id]; const isPaid = p.requiresKey; const configured = p.keyConfigured || !isPaid; // free providers are always "configured" const modelDraft = modelDrafts[p.id] || p.selectedModel; const brlPer1M = (meta.pricePer1M * data.usd_to_brl); return (

{isExpanded && (

Modelo

{isPaid && (

API key

setKeyDrafts((d) => ({ ...d, [p.id]: e.target.value }))} />

)}

{meta.desc}

{isPaid && p.signup && !p.keyConfigured && ( obter key )} {isPaid && ( )} {isPaid && ( )}

)}

); })}

Cotação USD→BRL usada no cálculo de custo: R$ {data.usd_to_brl.toFixed(2)}

); } function ExchangeRateEditor({ current, onSaved }) { const toast = useToast(); const [editing, setEditing] = useState(false); const [val, setVal] = useState(String(current)); const save = () => { const n = parseFloat(val); if (!n || n <= 0) { toast({ title: "Valor inválido", kind: "info" }); return; } api('/api/admin/llm/exchange-rate', { method: 'POST', body: { rate: n } }) .then(() => { toast({ title: "Cotação atualizada", kind: "success" }); setEditing(false); onSaved(); }) .catch((e) => toast({ title: "Falha", msg: e.message, kind: "error" })); }; if (!editing) { return ; } return ( setVal(e.target.value)} style={{ width: 80, padding: '2px 6px' }} /> ); } // ───────────────────────────────────────────────────────────────────────── // TtsProviderCard — mesma estrutura do LlmProviderCard, adaptada pra TTS // ───────────────────────────────────────────────────────────────────────── function TtsProviderCard() { const toast = useToast(); const confirm = useConfirm(); const [data, setData] = useState(null); const [busy, setBusy] = useState(false); const [keyDrafts, setKeyDrafts] = useState({}); const [showKey, setShowKey] = useState({}); const [expanded, setExpanded] = useState({}); const [modelDrafts, setModelDrafts] = useState({}); const [voiceDrafts, setVoiceDrafts] = useState({}); const [previewBusy, setPreviewBusy] = useState(false); const load = () => api('/api/admin/tts/providers').then((d) => { setData(d); const m = {}, v = {}; (d.providers || []).forEach((p) => { m[p.id] = p.selectedModel; v[p.id] = p.selectedVoice; }); setModelDrafts((prev) => ({ ...m, ...prev })); setVoiceDrafts((prev) => ({ ...v, ...prev })); }).catch((e) => toast({ title: "Falha", msg: e.message, kind: "error" })); useEffect(() => { load(); }, []); if (!data) { return (

Provider de TTS (voz do bot)

Carregando…

); } const activeProvider = data.active.provider; const active = data.providers.find((p) => p.id === activeProvider) || data.providers[0]; const activeModel = modelDrafts[active.id] || active.selectedModel; const activeVoice = voiceDrafts[active.id] || active.selectedVoice; const selectProvider = async (provider, model, voice) => { setBusy(true); try { await api('/api/admin/tts/select', { method: 'POST', body: { provider, model, voice } }); toast({ title: "Provider de voz ativo", msg: `${provider}` + (model ? ' / ' + model : ''), kind: "success" }); await load(); } catch (e) { toast({ title: "Falha", msg: e.message, kind: "error" }); } finally { setBusy(false); } }; const saveKey = async (provider) => { const key = keyDrafts[provider]; if (key == null) return; setBusy(true); try { await api('/api/admin/tts/api-key', { method: 'POST', body: { provider, api_key: key } }); toast({ title: "API key salva", kind: "success" }); setKeyDrafts((d) => ({ ...d, [provider]: undefined })); await load(); } catch (e) { toast({ title: "Falha", msg: e.message, kind: "error" }); } finally { setBusy(false); } }; const testProvider = async (provider) => { try { const r = await api('/api/admin/tts/ping', { method: 'POST', body: { provider, api_key: keyDrafts[provider] } }); if (r.ok) toast({ title: "Conexão testada", msg: `✓ ${r.voices_available || 0} vozes`, kind: "success" }); else toast({ title: "Conexão falhou", msg: r.error || 'sem detalhes', kind: "error" }); } catch (e) { toast({ title: "Falha", msg: e.message, kind: "error" }); } }; const previewActive = async () => { setPreviewBusy(true); try { const r = await fetch('/api/admin/tts/preview', { method: 'POST', headers: { 'Authorization': 'Bearer ' + Auth.token, 'Content-Type': 'application/json' }, body: JSON.stringify({}), }); if (!r.ok) throw new Error('HTTP ' + r.status); const blob = await r.blob(); const url = URL.createObjectURL(blob); const audio = new Audio(url); audio.onended = () => URL.revokeObjectURL(url); await audio.play(); } catch (e) { toast({ title: "Falha no preview", msg: e.message, kind: "error" }); } finally { setPreviewBusy(false); } }; const clearCache = async () => { const ok = await confirm({ title: 'Limpar cache de áudio?', message: <>Apagar todos os áudios cacheados ({data.cache_stats.entries} entradas, {((data.cache_stats.total_bytes || 0) / (1024 * 1024)).toFixed(1)} MB)?, details: 'Próximas respostas precisarão gerar áudio novamente (custo). Útil pra forçar refresh quando trocar de provider/voz e quiser ouvir o novo.', confirmLabel: 'Limpar cache', danger: true, icon: 'fa-trash-alt', }); if (!ok) return; try { await api('/api/admin/tts/cache/clear', { method: 'POST' }); toast({ title: "Cache de áudio limpo", kind: "success" }); await load(); } catch (e) { toast({ title: "Falha", msg: e.message, kind: "error" }); } }; const usdBrl = 5.20; // poderia vir do system_config, mas TTS card é independente return (

Provider de TTS (voz que o bot fala)

ativo: {active.label.replace(/\s*\(.*$/, '')}

{active.mark}

{active.label} {active.tier} ativo · gera o áudio

{activeVoice} {activeModel} {active.pricePer1M === 0 ? 'grátis' : `R$ ${(active.pricePer1M * usdBrl).toFixed(2)} / 1M chars`}

A troca aplica imediato — próxima resposta usa a voz nova. Cache: {data.cache_stats.entries || 0} áudios guardados ({((data.cache_stats.total_bytes || 0) / (1024 * 1024)).toFixed(1)} MB), {data.cache_stats.total_hits || 0} hits acumulados.

Alternativas — clique para configurar

{data.providers.map((p) => { const isActive = p.id === activeProvider; const isExpanded = !!expanded[p.id]; const draft = keyDrafts[p.id]; const dirty = draft != null && draft !== ''; const showK = showKey[p.id]; const isPaid = p.requiresKey; const configured = p.keyConfigured; const modelDraft = modelDrafts[p.id] || p.selectedModel; const voiceDraft = voiceDrafts[p.id] || p.selectedVoice; const brlPer1M = (p.pricePer1M * usdBrl); return (

{isExpanded && (

Modelo

Voz

{isPaid && (

API key

setKeyDrafts((d) => ({ ...d, [p.id]: e.target.value }))} />

)}

{p.desc}

{isPaid && p.signup && !p.keyConfigured && ( obter key )} {isPaid && ( )} {isPaid && ( )}

)}

); })}

O cache armazena cada frase gerada (hash do texto + voz + provider). Respostas frequentes ("Como me filiar?", "Qual o endereço?") tocam de cache em <100ms, custo R$ 0.

); } window.ScreenSystem = ScreenSystem;

Sistema

Meu perfil

Usuários ({users.length})

Convidar novo usuário

Segurança da conta

Ativar 2FA

Códigos de backup

Infraestrutura

Infraestrutura

Infraestrutura

Diagnóstico

Console de debug

Embedar o widget no site

Endpoints públicos

Endpoints admin JWT

Integração mobile (iOS/Android)

Provider de LLM

Provider de LLM

Provider de TTS (voz do bot)

Provider de TTS (voz que o bot fala)