set('mode', v)} opts={['claro','escuro','auto']} />

set('accent', v)} />

set('uiFont', v)} opts={UI_FONTS} /> set('displayFont', v)} opts={DISPLAY_FONTS} /> set('density', v)} opts={['compacto','confortável','espaçoso']} /> set('radius', v)} opts={['reto','médio','suave']} /> set('motion', !c.motion)} /> set('applyToReps', !c.applyToReps)} />

; } // ── SEÇÃO: Inteligência (IA) ───────────────────────────────────────────── function SecIA({ c, set, setSrc }) { const aggrLabel = ['Conservadora','Cautelosa','Equilibrada','Proativa','Agressiva'][c.aiAggr - 1] || 'Equilibrada'; const SRC = [['custo','Histórico de custo (entradas)'],['giro','Giro e curva ABC do ERP'],['validade','Validade / shelf-life'],['score','Score e prazo dos reps'],['concorrencia','Preço de concorrentes (InovaPrice)'],['sazonal','Sazonalidade e demanda']]; return

set('aiOn', !c.aiOn)} /> set('aiAggr', v)} min={1} max={5} />

{SRC.map(([k, label]) => { const on = c.aiSources[k]; return ( ); })}

set('aiAutosuggest', !c.aiAutosuggest)} /> set('aiAntiTypo', !c.aiAntiTypo)} /> set('aiForecast', !c.aiForecast)} /> set('aiCrossSell', !c.aiCrossSell)} /> set('aiSentiment', !c.aiSentiment)} /> set('aiAudio', !c.aiAudio)} /> set('aiTypoPct', v)} min={10} max={90} step={5} /> set('aiDivPct', v)} min={5} max={100} step={5} />

set('aiInstr', e.target.value)} rows={5} style={{ width: '100%', boxSizing: 'border-box', padding: '13px 15px', borderRadius: 12, border: `1px solid ${T.border}`, background: T.panel, color: T.text, fontFamily: 'inherit', fontSize: 13.5, lineHeight: 1.5, outline: 'none', resize: 'vertical' }} />
      <div style={{ fontSize: 11.5, color: T.mute2, marginTop: 8 }}>Essas instruções são enviadas ao modelo junto de cada análise. Ex.: regras de validade, prioridade de marca, política fiscal.</div>
    </CfgCard>
  </div>;
}

// ── SEÇÃO: Cotações & Aprovação ──────────────────────────────────────────
function SecCotacoes({ c, set }) {
  return <div>
    <CfgCard icon="check" title="Aprovação automática" accent="#2A8FEB">
      <CfgRow title="Aprovar pedidos sem revisão" desc="Abaixo do limite definido"><CfgToggle on={c.autoApprove} onClick={() => set('autoApprove', !c.autoApprove)} /></CfgRow>
      <CfgRow title="Limite de valor (R$)" desc="Acima disso exige aprovador" last><CfgInput value={c.autoLimit} onChange={v => set('autoLimit', v)} /></CfgRow>
    </CfgCard>
    <CfgCard icon="refresh" title="Automação de cotações">
      <CfgRow title="Reposição automática pelo giro" desc="Cria cotação quando o estoque baixa"><CfgToggle on={c.recorrente} onClick={() => set('recorrente', !c.recorrente)} /></CfgRow>
      <CfgRow title="Mover cotação parada p/ Mural" desc="Sem resposta, publica como demanda"><CfgToggle on={c.autoMural} onClick={() => set('autoMural', !c.autoMural)} /></CfgRow>
      <CfgRow title="Filtro de ruptura total" desc="Estoque zero + giro alto em destaque"><CfgToggle on={c.ruptura} onClick={() => set('ruptura', !c.ruptura)} /></CfgRow>
      <CfgRow title="Lote mínimo padrão (un.)" last><CfgInput value={c.loteMin} onChange={v => set('loteMin', v)} w={100} /></CfgRow>
    </CfgCard>
  </div>;
}

// ── SEÇÃO: Fiscal ────────────────────────────────────────────────────────
function SecFiscal({ c, set }) {
  return <CfgCard icon="receipt" title="Fiscal & impostos" desc="Base de comparação de custo" accent="#FF8A1F">
    <CfgRow title="Imposto padrão da oferta" desc="Como o rep declara por padrão"><CfgSeg value={c.impostoPadrao} onChange={v => set('impostoPadrao', v)} opts={['com','sem']} /></CfgRow>
    <CfgRow title="ICMS padrão (%)"><CfgInput value={c.icms} onChange={v => set('icms', v)} w={100} /></CfgRow>
    <CfgRow title="Considerar ST no custo real" desc="Substituição tributária embutida" last><CfgToggle on={c.st} onClick={() => set('st', !c.st)} /></CfgRow>
  </CfgCard>;
}

// ── SEÇÃO: ERP ───────────────────────────────────────────────────────────
function SecERP({ c, set }) {
  return <CfgCard icon="box" title="Integração ERP HOS" desc="24.830 produtos · sincronização de custo">
    <CfgRow title="Sincronização ativa"><CfgToggle on={c.hosSync} onClick={() => set('hosSync', !c.hosSync)} /></CfgRow>
    <CfgRow title="Endpoint da API"><CfgInput value={c.hosEndpoint} onChange={v => set('hosEndpoint', v)} w={190} left /></CfgRow>
    <CfgRow title="Frequência de sync"><CfgSeg value={c.hosFreq} onChange={v => set('hosFreq', v)} opts={['1h','6h','24h']} /></CfgRow>
    <CfgRow title="Testar conexão" desc="Verifica acesso ao HOS agora" last><button style={{ padding: '9px 16px', borderRadius: 10, border: `1px solid ${T.border}`, background: T.panel, color: T.text, fontWeight: 700, fontFamily: 'inherit', cursor: 'pointer', fontSize: 13 }}>Testar</button></CfgRow>
  </CfgCard>;
}

// ── SEÇÃO: Equipe (RBAC) — VIVA (/api/users) ─────────────────────────────
const ROLE_LABEL = { admin: 'Admin · acesso a tudo', aprovador: 'Aprovador', view: 'Visualização', rep: 'Representante' };
const ROLE_TONE = { admin: 'red', aprovador: 'yellow', view: 'mute', rep: 'green' };
function SecEquipe() {
  const [users, setUsers] = useState([]);
  const [open, setOpen] = useState(false);
  const [f, setF] = useState({ nome: '', email: '', senha: '', role: 'view' });
  const [err, setErr] = useState('');
  const [busy, setBusy] = useState(false);
  const load = () => { if (window.api) window.api.get('/users').then(r => setUsers(r.items || [])).catch(() => {}); };
  useEffect(load, []);
  const cadastrar = async () => {
    if (busy) return; setErr('');
    if (!f.nome || !f.email || !f.senha) { setErr('Preencha nome, e-mail e senha'); return; }
    setBusy(true);
    try {
      await window.api.post('/users', f);
      setF({ nome: '', email: '', senha: '', role: 'view' }); setOpen(false); load();
    } catch (e) { setErr(e.data && e.data.error ? e.data.error : 'Falha ao cadastrar'); }
    setBusy(false);
  };
  const toggle = async (id) => { try { await window.api.post('/users/' + id + '/toggle', {}); load(); } catch (e) {} };
  const approve = async (id) => { try { await window.api.post('/users/' + id + '/approve', {}); load(); } catch (e) {} };
  const reject = async (id) => { try { await window.api.post('/users/' + id + '/reject', {}); load(); } catch (e) {} };
  const inp = { width: '100%', boxSizing: 'border-box', padding: '10px 12px', borderRadius: 10, border: `1px solid ${T.border}`, background: T.panel, color: T.text, fontFamily: 'inherit', fontSize: 13.5, outline: 'none' };
  const pendentes = users.filter(u => !u.aprovado);
  const ativos = users.filter(u => u.aprovado);

return <div>
    {pendentes.length > 0 && (
      <CfgCard icon="bell" title={`Aprovações pendentes (${pendentes.length})`} desc="Representantes que se cadastraram — liberar acesso" accent="#FFC83D">
        {pendentes.map((u, i) => (
          <CfgRow key={u.id} title={u.nome} desc={u.email + ' · representante'} last={i === pendentes.length - 1}>
            <div style={{ display: 'flex', gap: 8 }}>
              <button onClick={() => approve(u.id)} style={{ padding: '7px 14px', borderRadius: 9, border: 'none', background: `linear-gradient(135deg, ${T.green}, #0AA968)`, color: '#fff', fontWeight: 800, fontFamily: 'inherit', cursor: 'pointer', fontSize: 12.5 }}>Aprovar</button>
              <button onClick={() => reject(u.id)} style={{ padding: '7px 12px', borderRadius: 9, border: `1px solid ${T.border}`, background: 'transparent', color: T.mute, fontWeight: 700, fontFamily: 'inherit', cursor: 'pointer', fontSize: 12.5 }}>Recusar</button>
            </div>
          </CfgRow>
        ))}
      </CfgCard>
    )}
    <CfgCard icon="user" title="Equipe & permissões (RBAC)" desc="Quem acessa o quê · cadastre novas pessoas" accent="#9B5DE5">
    {ativos.map((u, i) => (
      <CfgRow key={u.id} title={u.nome + (u.ativo ? '' : ' (inativo)')} desc={u.email} last={i === ativos.length - 1 && !open}>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <Pill tone={ROLE_TONE[u.role] || 'mute'}>{(ROLE_LABEL[u.role] || u.role).split(' ')[0]}</Pill>
          <button onClick={() => toggle(u.id)} title={u.ativo ? 'Desativar' : 'Ativar'} style={{ padding: '6px 11px', borderRadius: 9, border: `1px solid ${T.border}`, background: 'transparent', color: u.ativo ? T.mute : T.green, fontWeight: 700, fontFamily: 'inherit', cursor: 'pointer', fontSize: 12 }}>{u.ativo ? 'Desativar' : 'Ativar'}</button>
        </div>
      </CfgRow>
    ))}
    {open ? (
      <div style={{ marginTop: 14, padding: 16, borderRadius: 14, background: T.panel, border: `1px solid ${T.borderHi}` }}>
        <div style={{ fontWeight: 800, fontSize: 14, marginBottom: 12 }}>Cadastrar pessoa</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <input value={f.nome} onChange={e => setF({ ...f, nome: e.target.value })} placeholder="Nome" style={inp} />
          <input value={f.email} onChange={e => setF({ ...f, email: e.target.value })} placeholder="E-mail" style={inp} />
          <input type="password" value={f.senha} onChange={e => setF({ ...f, senha: e.target.value })} placeholder="Senha" style={inp} />
          <select value={f.role} onChange={e => setF({ ...f, role: e.target.value })} style={inp}>
            <option value="admin">Admin · acesso a tudo</option>
            <option value="aprovador">Aprovador</option>
            <option value="view">Visualização</option>
          </select>
        </div>
        {err && <div style={{ marginTop: 10, color: T.redBright, fontSize: 12.5, fontWeight: 600 }}>{err}</div>}
        <div style={{ display: 'flex', gap: 9, marginTop: 12 }}>
          <button onClick={() => { setOpen(false); setErr(''); }} style={{ padding: '10px 16px', borderRadius: 10, border: `1px solid ${T.border}`, background: 'transparent', color: T.mute, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer', fontSize: 13 }}>Cancelar</button>
          <button onClick={cadastrar} disabled={busy} style={{ padding: '10px 18px', borderRadius: 10, border: 'none', background: `linear-gradient(135deg, ${T.redBright}, ${T.redDeep})`, color: '#fff', fontWeight: 800, fontFamily: 'inherit', cursor: 'pointer', fontSize: 13, opacity: busy ? 0.6 : 1 }}>{busy ? 'Cadastrando…' : 'Cadastrar'}</button>
        </div>
      </div>
    ) : (
      <div style={{ marginTop: 12 }}><button onClick={() => setOpen(true)} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '9px 15px', borderRadius: 10, border: `1px dashed ${T.border}`, background: 'transparent', color: T.mute, fontWeight: 600, fontFamily: 'inherit', cursor: 'pointer', fontSize: 13 }}><Icon name="plus" size={15} color={T.mute} /> Cadastrar pessoa</button></div>
    )}
    </CfgCard>
  </div>;
}

// ── SEÇÃO: Notificações ──────────────────────────────────────────────────
function SecNotif({ c, set }) {
  return <CfgCard icon="bell" title="Notificações no sistema" desc="Avisos entregues na central interna — comprador e reps" accent="#00C277">
    <CfgRow title="Oferta abaixo do custo"><CfgToggle on={c.nOferta} onClick={() => set('nOferta', !c.nOferta)} /></CfgRow>
    <CfgRow title="Cotação encerrando"><CfgToggle on={c.nPrazo} onClick={() => set('nPrazo', !c.nPrazo)} /></CfgRow>
    <CfgRow title="Item cortado / não faturado"><CfgToggle on={c.nCorte} onClick={() => set('nCorte', !c.nCorte)} /></CfgRow>
    <CfgRow title="Divergência em XML"><CfgToggle on={c.nXml} onClick={() => set('nXml', !c.nXml)} /></CfgRow>
    <CfgRow title="Resumo diário" last><CfgToggle on={c.nResumo} onClick={() => set('nResumo', !c.nResumo)} /></CfgRow>
  </CfgCard>;
}

// ── SEÇÃO: Representantes ─────────────────────────────────────────────────
function SecReps({ c, set }) {
  return <CfgCard icon="user" title="Representantes & validade" accent="#FF8A1F">
    <CfgRow title={`Validade mínima: ${c.shelf} meses`} desc="Recusa lotes com validade menor"><CfgSlider value={c.shelf} onChange={v => set('shelf', v)} min={1} max={24} /></CfgRow>
    <CfgRow title="Fila prioritária p/ exclusivos" desc="Reps de contrato cotam primeiro"><CfgToggle on={c.exclusivo} onClick={() => set('exclusivo', !c.exclusivo)} /></CfgRow>
    <CfgRow title="Blacklist por pendência" desc="Bloqueia rep que fura prazo ou doc" last><CfgToggle on={c.blacklist} onClick={() => set('blacklist', !c.blacklist)} /></CfgRow>
  </CfgCard>;
}

// ── SEÇÃO: Dados & Backup ────────────────────────────────────────────────
function SecDados() {
  return <CfgCard icon="box" title="Dados & backup">
    <CfgRow title="Exportar base (Excel)" desc="Catálogo completo com custo"><button style={cfgBtnGhost()}>Exportar</button></CfgRow>
    <CfgRow title="Log de auditoria" desc="Toda alteração manual de preço"><button style={cfgBtnGhost()}>Ver log</button></CfgRow>
    <CfgRow title="Backup automático" desc="Diário · 30 dias de retenção" last><button style={cfgBtnGhost()}>Configurar</button></CfgRow>
  </CfgCard>;
}
const cfgBtnGhost = () => ({ padding: '9px 16px', borderRadius: 10, border: `1px solid ${T.border}`, background: T.panel, color: T.text, fontWeight: 700, fontFamily: 'inherit', cursor: 'pointer', fontSize: 13 });

window.CfgSections = { SecAparencia, SecIA, SecCotacoes, SecFiscal, SecERP, SecEquipe, SecNotif, SecReps, SecDados, CfgCard };

// ── SHELL com navegação por seções ───────────────────────────────────────
const CFG_NAV = [
  { id: 'aparencia', label: 'Aparência & Tema', icon: 'bolt' },
  { id: 'ia',        label: 'Inteligência (IA)', icon: 'shield' },
  { id: 'cotacoes',  label: 'Cotações & Aprovação', icon: 'check' },
  { id: 'fiscal',    label: 'Fiscal & Impostos', icon: 'receipt' },
  { id: 'erp',       label: 'Integração ERP HOS', icon: 'box' },
  { id: 'equipe',    label: 'Equipe & Permissões', icon: 'user' },
  { id: 'notif',     label: 'Notificações', icon: 'bell' },
  { id: 'reps',      label: 'Representantes', icon: 'user' },
  { id: 'dados',     label: 'Dados & Backup', icon: 'table' },
];

// aplica tema (fonte/accent) ao vivo conforme muda
  useEffect(() => { applyTheme(c); }, [c.uiFont, c.displayFont, c.accent, c.density]);

const save = () => { try { localStorage.setItem(CFG_KEY, JSON.stringify(c)); } catch {} applyTheme(c); setSaved(true); setTimeout(() => setSaved(false), 2200); };

return (
    <div>
      <TopbarCfg title="Configurações" sub="Personalize o sistema inteiro — tema, IA, regras, equipe e integrações"
        action={<button onClick={save} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '10px 20px', borderRadius: 11, border: 'none', cursor: 'pointer', fontWeight: 700, fontFamily: 'inherit', fontSize: 13.5, color: '#fff', background: saved ? `linear-gradient(135deg, ${T.green}, #0AA968)` : `linear-gradient(135deg, ${T.redBright}, ${T.redDeep})`, boxShadow: '0 4px 14px rgba(255,19,48,0.3)' }}>
          {saved ? <><Icon name="check" size={16} color="#fff" strokeWidth={3} /> Salvo!</> : 'Salvar alterações'}</button>} />

<div style={{ display: 'grid', gridTemplateColumns: '230px 1fr', gap: 20, alignItems: 'start' }} className="cfg-grid">
        {/* nav lateral de seções */}
        <Glass pad={8} style={{ position: 'sticky', top: 0 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {CFG_NAV.map(n => { const on = sec === n.id; return (
              <button key={n.id} onClick={() => setSec(n.id)} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '11px 13px', borderRadius: 10, border: 'none', cursor: 'pointer', fontFamily: 'inherit', fontSize: 13.5, fontWeight: on ? 700 : 600, textAlign: 'left', width: '100%',
                background: on ? cfgA(T.red, 0.13) : 'transparent', color: on ? T.redBright : T.mute }}>
                <Icon name={n.icon} size={17} color={on ? T.redBright : T.mute} /> {n.label}
              </button>
            ); })}
          </div>
        </Glass>

{/* conteúdo da seção */}
        <div style={{ minWidth: 0 }}>
          {sec === 'aparencia' && <SecAparencia c={c} set={set} />}
          {sec === 'ia'        && <SecIA c={c} set={set} setSrc={setSrc} />}
          {sec === 'cotacoes'  && <SecCotacoes c={c} set={set} />}
          {sec === 'fiscal'    && <SecFiscal c={c} set={set} />}
          {sec === 'erp'       && <SecERP c={c} set={set} />}
          {sec === 'equipe'    && <SecEquipe />}
          {sec === 'notif'     && <SecNotif c={c} set={set} />}
          {sec === 'reps'      && <SecReps c={c} set={set} />}
          {sec === 'dados'     && <SecDados />}
        </div>
      </div>
    </div>
  );
}

// aplica o tema salvo logo no load
try { applyTheme(cfgLoad()); } catch {}

// sobrescreve o Settings simples do buyer-7
if (window.BuyerParts7) window.BuyerParts7.Settings = ConfigCompleta;
window.BuyerConfig = { ConfigCompleta };