// =================== CONFIGURAÇÕES — design NN.ai ===================
const { useState: useStateCfg, useRef: useRefCfg } = React;
const GridFxCfg = window.GridFx;

const CFG_GEAR_D = "M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 0 1-4 0v-.1A1.6 1.6 0 0 0 7 19.3a1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0-1.1-2.7H1a2 2 0 0 1 0-4h.1A1.6 1.6 0 0 0 2.7 7a1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3H7a1.6 1.6 0 0 0 1-1.5V1a2 2 0 0 1 4 0v.1a1.6 1.6 0 0 0 2.7 1.1l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8V7a1.6 1.6 0 0 0 1.5 1H23a2 2 0 0 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1Z";

// generic single/multi path icon
function Ico({ d, size = 17, sw = 1.7, fill = "none" }) {
  const paths = Array.isArray(d) ? d : [d];
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      {paths.map((p, i) => <path key={i} d={p} />)}
    </svg>
  );
}

function CfgToggle({ on, onToggle }) {
  return (
    <span onClick={onToggle} style={{ width: 42, height: 24, flex: "none", borderRadius: 200, position: "relative", cursor: "pointer",
      background: on ? "rgba(174,203,224,.9)" : "#26262a", border: `1px solid ${on ? "transparent" : "#303034"}`,
      boxShadow: on ? "0 0 12px rgba(174,203,224,.4)" : "none", transition: "background .2s" }}>
      <span style={{ position: "absolute", top: 2.5, width: 18, height: 18, borderRadius: "50%", transition: "left .2s, background .2s",
        left: on ? 21 : 2.5, background: on ? "#06121c" : "#6a6a70" }} />
    </span>
  );
}

const CARD = { padding: 24, borderRadius: 18, background: "linear-gradient(180deg,#141416,#0f0f11)", border: "1px solid #242427" };
const CARD_LIST = { padding: "8px 24px", borderRadius: 18, background: "linear-gradient(180deg,#141416,#0f0f11)", border: "1px solid #242427" };
const LABEL = { display: "block", fontSize: 10, letterSpacing: ".16em", textTransform: "uppercase", color: "rgba(207,207,207,.45)", marginBottom: 9 };
const H2 = { margin: 0, fontSize: 21, fontWeight: 700, letterSpacing: "-.02em", color: "#fff" };
const SUB = { margin: "6px 0 0", fontSize: 13.5, color: "rgba(207,207,207,.55)" };
const panelIn = { animation: "nnPanelIn .35s cubic-bezier(.22,1,.36,1)" };
const dvd = (i, n) => (i === n - 1 ? "transparent" : "#1c1c20");

function PanelHead({ title, desc, right }) {
  return (
    <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 20, marginBottom: 26 }}>
      <div><h2 style={H2}>{title}</h2><p style={SUB}>{desc}</p></div>
      {right}
    </div>
  );
}

function SettingsModule({ t, dark }) {
  const [cat, setCat] = useStateCfg("geral");
  const [idioma, setIdioma] = useStateCfg("pt");
  const [tema, setTema] = useStateCfg("escuro");
  const [saved, setSaved] = useStateCfg(false);
  const [toggles, setToggles] = useStateCfg({
    int_totvs: true, int_whats: false, int_openfinance: true, int_sefaz: true, int_crm: true, int_email: true,
    ch_email: true, ch_whats: true, ch_slack: false,
    ev_falhas: true, ev_aprovacoes: true, ev_custo: true, ev_resumo: false,
    sec_2fa: true, sec_sso: false,
  });
  const saveTimer = useRefCfg(null);
  const tog = (k) => { setToggles((s) => ({ ...s, [k]: !s[k] })); setSaved(false); };
  const pick = (set, v) => { set(v); setSaved(false); };
  const onSave = () => { setSaved(true); clearTimeout(saveTimer.current); saveTimer.current = setTimeout(() => setSaved(false), 2200); };

  const Seg = ({ active, label, icon, onClick }) => (
    <span onClick={onClick} style={{ display: "flex", alignItems: "center", gap: icon ? 7 : 0, justifyContent: "center", height: 34, padding: "0 16px", borderRadius: 8,
      fontSize: 12.5, fontWeight: active ? 700 : 600, color: active ? "#e8eff6" : "#76767c",
      background: active ? "rgba(174,203,224,.12)" : "transparent", border: `1px solid ${active ? "rgba(174,203,224,.24)" : "transparent"}`,
      cursor: "pointer", whiteSpace: "nowrap" }}>{icon}{label}</span>
  );
  const segWrap = { display: "flex", padding: 4, gap: 3, borderRadius: 11, background: "#0c0c0e", border: "1px solid #1f1f22" };
  const rowSel = { display: "flex", alignItems: "center", justifyContent: "space-between", height: 44, padding: "0 14px", borderRadius: 11, background: "#0e0e10", border: "1px solid #242427", cursor: "pointer" };
  const caret = <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#76767c" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6" /></svg>;

  // ---- category rail ----
  const catDefs = [
    { key: "geral", label: "Geral", desc: "Nome, idioma, tema", iconD: "M4 6h10M18 6h2M4 12h2M10 12h10M4 18h7M15 18h5" },
    { key: "modelos", label: "Modelos & Provedores", desc: "Chaves de API e padrão", iconD: "M7 7h10v10H7zM9 3v2M15 3v2M9 19v2M15 19v2M3 9h2M3 15h2M19 9h2M19 15h2" },
    { key: "integracoes", label: "Integrações & MCPs", desc: "Ferramentas conectadas", iconD: "M9 2v6M15 2v6M7 8h10v3a5 5 0 0 1-10 0V8ZM12 16v6" },
    { key: "notificacoes", label: "Notificações", desc: "Canais e eventos", iconD: "M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6ZM10 19a2 2 0 0 0 4 0" },
    { key: "faturamento", label: "Faturamento & Uso", desc: "Plano e consumo", iconD: "M3 6h18v12H3zM3 10h18M7 15h4" },
    { key: "equipe", label: "Equipe", desc: "Membros e papéis", iconD: "M9 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM3 20c0-3.3 2.7-5.5 6-5.5M16 5.5a3 3 0 0 1 0 5.8M15 20c0-2.7 1.5-4.6 4-5" },
    { key: "seguranca", label: "Segurança", desc: "Acesso e chaves", iconD: "M12 3l8 3v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3Z" },
  ];

  // ---- data ----
  const provDefs = [
    { tag: "AI", name: "OpenAI", model: "GPT-4o · GPT-4o mini", key: "sk-····················4f2a", ok: true, color: "#5fd0a6" },
    { tag: "AN", name: "Anthropic", model: "Claude Sonnet 4 · Haiku", key: "sk-ant-············9c1b", ok: true, color: "#d98a5b" },
    { tag: "GO", name: "Google", model: "Gemini 1.5 Pro", key: "··················7e30", ok: true, color: "#7fa8e0" },
    { tag: "DS", name: "DeepSeek", model: "DeepSeek V3", key: "sk-············2a55", ok: true, color: "#6e8fe0" },
    { tag: "ME", name: "Meta", model: "Llama 3.1 70B", key: "chave expirada", ok: false, color: "#b78fe0" },
  ];
  const intDefs = [
    { key: "int_totvs", name: "TOTVS Protheus", desc: "ERP · notas, lançamentos e estoque", iconD: "M5 6c0-1.7 3.1-3 7-3s7 1.3 7 3-3.1 3-7 3-7-1.3-7-3ZM5 6v12c0 1.7 3.1 3 7 3s7-1.3 7-3V6M5 12c0 1.7 3.1 3 7 3s7-1.3 7-3" },
    { key: "int_openfinance", name: "Open Finance", desc: "Conciliação de extratos bancários", iconD: "M3 21h18M5 21V10l7-5 7 5v11M9 21v-6h6v6" },
    { key: "int_sefaz", name: "SEFAZ · NF-e", desc: "Validação e emissão de notas fiscais", iconD: "M7 4h7l4 4v12H7zM13 4v5h5M10 13h5M10 16h5" },
    { key: "int_whats", name: "WhatsApp Business", desc: "Atendimento e notificações ao cliente", iconD: "M4 5h16v11H8l-4 3z" },
    { key: "int_crm", name: "CRM", desc: "Cadastro e histórico de clientes", iconD: "M12 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM5 20c0-3.6 3.1-6 7-6s7 2.4 7 6" },
    { key: "int_email", name: "E-mail · SMTP", desc: "Envio transacional e relatórios", iconD: "M3 6h18v12H3zM3 7l9 6 9-6" },
  ];
  const canalDefs = [
    { key: "ch_email", name: "E-mail", desc: "financeiro@nnstudio.ai", iconD: "M3 6h18v12H3zM3 7l9 6 9-6" },
    { key: "ch_whats", name: "WhatsApp", desc: "+55 11 9····-1200", iconD: "M4 5h16v11H8l-4 3z" },
    { key: "ch_slack", name: "Slack", desc: "#ops-agentes · workspace NN.ai", iconD: "M9 3v12a3 3 0 1 1-3-3h12a3 3 0 1 1-3 3V3a3 3 0 1 1 3 3H6a3 3 0 1 1 3-3Z" },
  ];
  const evDefs = [
    { key: "ev_falhas", name: "Falhas de execução", desc: "Quando um agente falha ou fica offline" },
    { key: "ev_aprovacoes", name: "Aprovações pendentes", desc: "Quando há item aguardando sua decisão" },
    { key: "ev_custo", name: "Limite de custo", desc: "Ao atingir 90% do orçamento mensal" },
    { key: "ev_resumo", name: "Resumo diário", desc: "Digest às 8h com as métricas do dia" },
  ];
  const memDefs = [
    { ini: "FC", name: "Felipe Costa", email: "felipe@nnstudio.ai", role: "Owner", you: true },
    { ini: "MA", name: "Marina Alves", email: "marina@nnstudio.ai", role: "Admin" },
    { ini: "RL", name: "Rafael Lima", email: "rafael@nnstudio.ai", role: "Editor" },
    { ini: "JS", name: "Juliana Souza", email: "juliana@nnstudio.ai", role: "Visualizador" },
  ];
  const roleStyle = (r) => r === "Owner" ? { bg: "rgba(174,203,224,.12)", bd: "rgba(174,203,224,.3)", color: "#cfe0ec" }
    : r === "Admin" ? { bg: "rgba(95,208,166,.1)", bd: "rgba(95,208,166,.28)", color: "#7fe0bc" }
    : { bg: "rgba(255,255,255,.04)", bd: "#2a2a2e", color: "rgba(226,225,223,.75)" };
  const segDefs = [
    { key: "sec_2fa", name: "Autenticação em duas etapas (2FA)", desc: "Exigir código além da senha em cada login" },
    { key: "sec_sso", name: "SSO · SAML", desc: "Login único via provedor corporativo" },
  ];
  const keyDefs = [
    { name: "Produção", prefix: "nn_live_····8f2a", meta: "Criada há 3 meses · usada agora" },
    { name: "Desenvolvimento", prefix: "nn_test_····1c0d", meta: "Criada há 1 mês · usada há 2 dias" },
  ];
  const sesDefs = [
    { device: "MacBook Pro · São Paulo", browser: "Chrome · este dispositivo", iconD: "M3 5h18v11H3zM8 20h8M12 16v4", current: true },
    { device: "iPhone 15 · São Paulo", browser: "App NN · ativo há 4 h", iconD: "M7 3h10v18H7zM11 18h2", current: false },
  ];

  // toggle row (used in integrações / notificações / segurança)
  const ToggleRow = ({ icon, name, desc, k, i, n, right }) => (
    <div style={{ display: "flex", alignItems: "center", gap: 16, padding: "16px 0", borderBottom: `1px solid ${dvd(i, n)}` }}>
      {icon && <span style={{ width: 42, height: 42, flex: "none", borderRadius: 11, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(174,203,224,.08)", border: "1px solid #232327", color: "#aecbe0" }}><Ico d={icon} size={19} /></span>}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: "#fff" }}>{name}</div>
        <div style={{ fontSize: 12, color: "rgba(207,207,207,.5)", marginTop: 2 }}>{desc}</div>
      </div>
      {right}
      <CfgToggle on={!!toggles[k]} onToggle={() => tog(k)} />
    </div>
  );

  return (
    <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", background: "#000", color: "#cfcfcf" }}>

      {/* topbar */}
      <header className="nn-cfg-topbar" style={{ flex: "none", display: "flex", alignItems: "center", gap: 30, padding: "0 32px", height: 84, background: "linear-gradient(180deg,#0a0a0c,#070708)", borderBottom: "1px solid #18181b" }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <h1 style={{ margin: 0, fontSize: 22, fontWeight: 700, letterSpacing: "-.02em", color: "#fff" }}>Configurações</h1>
          <p style={{ margin: "5px 0 0", fontSize: 11, letterSpacing: ".16em", textTransform: "uppercase", color: "rgba(207,207,207,.42)" }}>NN.ai · workspace &amp; preferências</p>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <button className="nn-cfg-row nn-cfg-discard" style={{ display: "flex", alignItems: "center", gap: 8, height: 42, padding: "0 17px", borderRadius: 12, background: "#101012", border: "1px solid #262629", color: "#cfcfcf", fontSize: 13.5, fontWeight: 600, cursor: "pointer", fontFamily: "inherit" }}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7L3 8" /><path d="M3 4v4h4" /></svg>
            Descartar
          </button>
          <button onClick={onSave} style={{ display: "flex", alignItems: "center", gap: 9, height: 42, padding: "0 20px", borderRadius: 12, background: saved ? "#7fe0bc" : "#aecbe0", border: "none", color: "#06121c", fontSize: 13.5, fontWeight: 700, cursor: "pointer", boxShadow: "0 0 20px rgba(174,203,224,.32)", fontFamily: "inherit", transition: "background .2s" }}>
            {saved
              ? <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" /></svg>
              : <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><path d="M5 4h11l3 3v13H5zM8 4v5h7M8 14h8" /></svg>}
            <span className="nn-cfg-savelabel">{saved ? "Salvo" : "Salvar alterações"}</span>
          </button>
        </div>
      </header>

      {/* body */}
      <div className="nn-cfg-body" style={{ flex: 1, display: "flex", minHeight: 0 }}>

        {/* category rail */}
        <nav className="nn-scroll nn-cfg-rail" style={{ width: 266, flex: "none", overflowY: "auto", padding: "22px 16px", borderRight: "1px solid #161619", background: "#08080a" }}>
          <div className="nn-cfg-railhead" style={{ padding: "0 10px 12px", fontSize: 10, letterSpacing: ".2em", textTransform: "uppercase", color: "rgba(207,207,207,.4)" }}>Workspace</div>
          {catDefs.map((c) => {
            const on = c.key === cat;
            return (
              <div key={c.key} className="nn-cat" onClick={() => setCat(c.key)} title={c.label}
                style={{ position: "relative", display: "flex", alignItems: "center", gap: 13, padding: "11px 12px", borderRadius: 12, cursor: "pointer", marginBottom: 3,
                  background: on ? "rgba(174,203,224,.08)" : "transparent", border: `1px solid ${on ? "rgba(174,203,224,.18)" : "transparent"}` }}>
                <span style={{ position: "absolute", left: -16, top: 13, width: 3, height: 20, borderRadius: 3, background: on ? "#aecbe0" : "transparent" }} />
                <span style={{ width: 34, height: 34, flex: "none", borderRadius: 10, display: "flex", alignItems: "center", justifyContent: "center",
                  background: on ? "rgba(174,203,224,.12)" : "rgba(255,255,255,.03)", border: `1px solid ${on ? "rgba(174,203,224,.28)" : "#232327"}`, color: on ? "#cfe0ec" : "#85858b" }}>
                  <Ico d={c.iconD} size={17} />
                </span>
                <div className="nn-cfg-cattext" style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 600, color: on ? "#fff" : "#cfcfcf", lineHeight: 1.2, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.label}</div>
                  <div style={{ fontSize: 11, color: "rgba(207,207,207,.4)", marginTop: 2, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.desc}</div>
                </div>
              </div>
            );
          })}
        </nav>

        {/* content panel */}
        <div className="nn-scroll nn-cfg-panel" style={{ position: "relative", flex: 1, overflowY: "auto", padding: "34px 44px 64px", minWidth: 0 }}>
          <GridFxCfg dark />
          <div style={{ position: "relative", maxWidth: 880 }}>

            {/* GERAL */}
            {cat === "geral" && (
              <div style={panelIn}>
                <PanelHead title="Geral" desc="Identidade do workspace, idioma e preferências de exibição." />
                <section style={{ ...CARD, marginBottom: 18 }}>
                  <div style={{ display: "flex", gap: 22, flexWrap: "wrap" }}>
                    <div style={{ flex: 1, minWidth: 220 }}>
                      <label style={LABEL}>Nome do workspace</label>
                      <input className="nn-field" defaultValue="NN.ai" style={{ width: "100%", height: 44, padding: "0 14px", borderRadius: 11, background: "#0e0e10", border: "1px solid #242427", color: "#fff", fontSize: 13.5, fontFamily: "inherit" }} onChange={() => setSaved(false)} />
                    </div>
                    <div style={{ flex: 1, minWidth: 220 }}>
                      <label style={LABEL}>URL do workspace</label>
                      <div style={{ display: "flex", alignItems: "center", height: 44, padding: "0 14px", borderRadius: 11, background: "#0c0c0e", border: "1px solid #1f1f22" }}>
                        <span style={{ fontSize: 13.5, color: "rgba(207,207,207,.4)" }}>nn.ai/</span>
                        <input className="nn-field" defaultValue="nnstudio" style={{ flex: 1, minWidth: 0, height: 42, border: "none", background: "transparent", color: "#fff", fontSize: 13.5, fontFamily: "inherit" }} onChange={() => setSaved(false)} />
                      </div>
                    </div>
                  </div>
                  <div style={{ height: 1, background: "#1c1c20", margin: "22px 0" }} />
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
                    <div style={{ minWidth: 200 }}>
                      <div style={{ fontSize: 13.5, fontWeight: 600, color: "#fff" }}>Idioma da interface</div>
                      <div style={{ fontSize: 12, color: "rgba(207,207,207,.45)", marginTop: 3 }}>Aplica a toda a plataforma.</div>
                    </div>
                    <div style={segWrap}>
                      <Seg active={idioma === "pt"} label="Português (BR)" onClick={() => pick(setIdioma, "pt")} />
                      <Seg active={idioma === "en"} label="English" onClick={() => pick(setIdioma, "en")} />
                    </div>
                  </div>
                  <div style={{ height: 1, background: "#1c1c20", margin: "22px 0" }} />
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
                    <div style={{ minWidth: 200 }}>
                      <div style={{ fontSize: 13.5, fontWeight: 600, color: "#fff" }}>Tema</div>
                      <div style={{ fontSize: 12, color: "rgba(207,207,207,.45)", marginTop: 3 }}>A NN é otimizada para o tema escuro.</div>
                    </div>
                    <div style={segWrap}>
                      <Seg active={tema === "escuro"} label="Escuro" onClick={() => pick(setTema, "escuro")} />
                      <Seg active={tema === "sistema"} label="Sistema" onClick={() => pick(setTema, "sistema")} />
                    </div>
                  </div>
                </section>
                <section style={CARD}>
                  <div style={{ display: "flex", gap: 22, flexWrap: "wrap" }}>
                    <div style={{ flex: 1, minWidth: 220 }}>
                      <label style={LABEL}>Fuso horário</label>
                      <div className="nn-cfg-row" style={rowSel}>
                        <span style={{ fontSize: 13.5, color: "#fff" }}>América / São Paulo (GMT−3)</span>{caret}
                      </div>
                    </div>
                    <div style={{ flex: 1, minWidth: 220 }}>
                      <label style={LABEL}>Região de dados</label>
                      <div className="nn-cfg-row" style={rowSel}>
                        <span style={{ display: "flex", alignItems: "center", gap: 9, fontSize: 13.5, color: "#fff" }}><span style={{ width: 7, height: 7, borderRadius: "50%", background: "#5fd0a6", boxShadow: "0 0 7px #5fd0a6" }} />Brasil · LGPD</span>{caret}
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            )}

            {/* MODELOS */}
            {cat === "modelos" && (
              <div style={panelIn}>
                <PanelHead title="Modelos & Provedores" desc="Chaves de API, modelo padrão e orçamento de inferência." />
                <section style={{ ...CARD_LIST, marginBottom: 18 }}>
                  {provDefs.map((p, i) => (
                    <div key={p.name} style={{ display: "flex", alignItems: "center", gap: 16, padding: "18px 0", borderBottom: `1px solid ${dvd(i, provDefs.length)}` }}>
                      <span style={{ width: 44, height: 44, flex: "none", borderRadius: 12, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(255,255,255,.04)", border: "1px solid #2a2a2e", fontSize: 13, fontWeight: 700, color: p.color, letterSpacing: ".02em" }}>{p.tag}</span>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 14.5, fontWeight: 700, color: "#fff" }}>{p.name}</div>
                        <div style={{ fontSize: 12, color: "rgba(207,207,207,.5)", marginTop: 3 }}>{p.model}</div>
                      </div>
                      <div className="nn-cfg-key" style={{ display: "flex", alignItems: "center", height: 30, padding: "0 12px", borderRadius: 8, background: "#0c0c0e", border: "1px solid #1f1f22", fontSize: 12, color: "rgba(207,207,207,.6)", fontFamily: "'Space Grotesk',monospace", letterSpacing: ".02em" }}>{p.key}</div>
                      <span style={{ display: "flex", alignItems: "center", gap: 7, height: 30, padding: "0 12px", borderRadius: 200, whiteSpace: "nowrap",
                        background: p.ok ? "rgba(95,208,166,.1)" : "rgba(224,122,130,.12)", border: `1px solid ${p.ok ? "rgba(95,208,166,.3)" : "rgba(224,122,130,.34)"}`, fontSize: 11.5, fontWeight: 600, color: p.ok ? "#7fe0bc" : "#f09aa1" }}>
                        <span style={{ width: 7, height: 7, borderRadius: "50%", background: p.ok ? "#7fe0bc" : "#f09aa1", boxShadow: `0 0 6px ${p.ok ? "#7fe0bc" : "#f09aa1"}` }} />{p.ok ? "Conectado" : "Reconfigurar"}
                      </span>
                      <button className="nn-cfg-row" style={{ width: 34, height: 34, flex: "none", borderRadius: 10, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(255,255,255,.03)", border: "1px solid #242427", color: "#9a9a9f", cursor: "pointer" }}>
                        <Ico d={CFG_GEAR_D} size={16} sw={1.8} />
                      </button>
                    </div>
                  ))}
                </section>
                <div className="nn-cfg-2col" style={{ display: "flex", gap: 18, flexWrap: "wrap" }}>
                  <section style={{ flex: 1, minWidth: 260, padding: "22px 24px", borderRadius: 18, background: "linear-gradient(180deg,#141416,#0f0f11)", border: "1px solid #242427" }}>
                    <label style={{ ...LABEL, marginBottom: 11 }}>Modelo padrão de novos agentes</label>
                    <div className="nn-cfg-row" style={{ ...rowSel, height: 46 }}>
                      <span style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 13.5, color: "#fff" }}><span style={{ width: 7, height: 7, borderRadius: "50%", background: "#d98a5b" }} />Claude Sonnet 4</span>{caret}
                    </div>
                    <p style={{ margin: "12px 0 0", fontSize: 12, color: "rgba(207,207,207,.45)", lineHeight: 1.5 }}>Usado quando um agente é criado sem modelo definido.</p>
                  </section>
                  <section style={{ flex: 1, minWidth: 260, padding: "22px 24px", borderRadius: 18, background: "linear-gradient(180deg,#141416,#0f0f11)", border: "1px solid #242427" }}>
                    <label style={{ ...LABEL, marginBottom: 11 }}>Orçamento mensal de inferência</label>
                    <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
                      <span style={{ fontSize: 28, fontWeight: 800, color: "#fff", letterSpacing: "-.02em" }}>R$ 12.000</span>
                      <span style={{ fontSize: 12.5, color: "rgba(207,207,207,.45)" }}>/ mês</span>
                    </div>
                    <div style={{ height: 8, borderRadius: 200, background: "#1a1a1e", marginTop: 14, overflow: "hidden" }}><div style={{ width: "52%", height: "100%", borderRadius: 200, background: "linear-gradient(90deg,#5f92d8,#aecbe0)" }} /></div>
                    <p style={{ margin: "10px 0 0", fontSize: 12, color: "rgba(207,207,207,.45)" }}>R$ 6.240 usados · pausa automática ao atingir o teto.</p>
                  </section>
                </div>
              </div>
            )}

            {/* INTEGRAÇÕES */}
            {cat === "integracoes" && (
              <div style={panelIn}>
                <PanelHead title="Integrações & MCPs" desc="Ferramentas e fontes de dados que os agentes podem acessar." />
                <section style={CARD_LIST}>
                  {intDefs.map((d, i) => (
                    <ToggleRow key={d.key} icon={d.iconD} name={d.name} desc={d.desc} k={d.key} i={i} n={intDefs.length}
                      right={<span style={{ fontSize: 11.5, fontWeight: 600, whiteSpace: "nowrap", color: toggles[d.key] ? "#7fe0bc" : "rgba(207,207,207,.4)" }}>{toggles[d.key] ? "Conectado" : "Desativado"}</span>} />
                  ))}
                </section>
              </div>
            )}

            {/* NOTIFICAÇÕES */}
            {cat === "notificacoes" && (
              <div style={panelIn}>
                <PanelHead title="Notificações" desc="Por onde e quando a NN deve avisar você." />
                <section style={{ ...CARD_LIST, marginBottom: 18 }}>
                  <div style={{ padding: "18px 0 10px", fontSize: 10, letterSpacing: ".18em", textTransform: "uppercase", color: "rgba(207,207,207,.42)" }}>Canais</div>
                  {canalDefs.map((d, i) => (
                    <div key={d.key} style={{ display: "flex", alignItems: "center", gap: 16, padding: "15px 0", borderBottom: `1px solid ${dvd(i, canalDefs.length)}` }}>
                      <span style={{ width: 42, height: 42, flex: "none", borderRadius: 11, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(174,203,224,.08)", border: "1px solid #232327", color: "#aecbe0" }}><Ico d={d.iconD} size={19} /></span>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 14, fontWeight: 600, color: "#fff" }}>{d.name}</div>
                        <div style={{ fontSize: 12, color: "rgba(207,207,207,.5)", marginTop: 2 }}>{d.desc}</div>
                      </div>
                      <CfgToggle on={!!toggles[d.key]} onToggle={() => tog(d.key)} />
                    </div>
                  ))}
                </section>
                <section style={CARD_LIST}>
                  <div style={{ padding: "18px 0 10px", fontSize: 10, letterSpacing: ".18em", textTransform: "uppercase", color: "rgba(207,207,207,.42)" }}>Eventos</div>
                  {evDefs.map((d, i) => (
                    <div key={d.key} style={{ display: "flex", alignItems: "center", gap: 16, padding: "16px 0", borderBottom: `1px solid ${dvd(i, evDefs.length)}` }}>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 14, fontWeight: 600, color: "#fff" }}>{d.name}</div>
                        <div style={{ fontSize: 12, color: "rgba(207,207,207,.5)", marginTop: 2 }}>{d.desc}</div>
                      </div>
                      <CfgToggle on={!!toggles[d.key]} onToggle={() => tog(d.key)} />
                    </div>
                  ))}
                </section>
              </div>
            )}

            {/* FATURAMENTO */}
            {cat === "faturamento" && (
              <div style={panelIn}>
                <PanelHead title="Faturamento & Uso" desc="Plano, consumo do mês e método de pagamento." />
                <section style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap", padding: 24, borderRadius: 18, background: "linear-gradient(135deg,#16242f,#0d1217)", border: "1px solid rgba(174,203,224,.24)", marginBottom: 18, boxShadow: "0 0 40px rgba(58,143,220,.1)" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 17 }}>
                    <span style={{ width: 52, height: 52, flex: "none", borderRadius: 15, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(174,203,224,.12)", border: "1px solid rgba(174,203,224,.3)", color: "#cfe0ec", boxShadow: "0 0 22px rgba(58,143,220,.22)" }}>
                      <Ico d="M12 2l2.4 6.5L21 9l-5 4 1.8 7L12 16.5 6.2 20 8 13 3 9l6.6-.5L12 2Z" size={25} sw={1.6} />
                    </span>
                    <div>
                      <div style={{ fontSize: 10, letterSpacing: ".2em", textTransform: "uppercase", color: "rgba(207,207,207,.5)" }}>Plano atual</div>
                      <div style={{ fontSize: 22, fontWeight: 700, color: "#fff", letterSpacing: "-.01em", marginTop: 3 }}>Enterprise</div>
                      <div style={{ fontSize: 12.5, color: "rgba(207,207,207,.6)", marginTop: 3 }}>Ciclo anual · renova em 14 fev 2027</div>
                    </div>
                  </div>
                  <button style={{ display: "flex", alignItems: "center", gap: 8, height: 42, padding: "0 18px", borderRadius: 12, background: "#aecbe0", border: "none", color: "#06121c", fontSize: 13.5, fontWeight: 700, cursor: "pointer", fontFamily: "inherit" }}>Gerenciar plano</button>
                </section>
                <div className="nn-cfg-2col" style={{ display: "flex", gap: 18, flexWrap: "wrap", marginBottom: 18 }}>
                  <section style={{ flex: 1, minWidth: 260, padding: "22px 24px", borderRadius: 18, background: "linear-gradient(180deg,#141416,#0f0f11)", border: "1px solid #242427" }}>
                    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}><span style={{ fontSize: 10, letterSpacing: ".16em", textTransform: "uppercase", color: "rgba(207,207,207,.45)" }}>Tokens · junho</span><span style={{ fontSize: 12, color: "rgba(207,207,207,.5)" }}>8,79M / 50M</span></div>
                    <div style={{ height: 9, borderRadius: 200, background: "#1a1a1e", marginTop: 14, overflow: "hidden" }}><div style={{ width: "17.6%", height: "100%", borderRadius: 200, background: "linear-gradient(90deg,#5f92d8,#aecbe0)" }} /></div>
                    <p style={{ margin: "11px 0 0", fontSize: 12, color: "rgba(207,207,207,.45)" }}>18% do volume contratado.</p>
                  </section>
                  <section style={{ flex: 1, minWidth: 260, padding: "22px 24px", borderRadius: 18, background: "linear-gradient(180deg,#141416,#0f0f11)", border: "1px solid #242427" }}>
                    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}><span style={{ fontSize: 10, letterSpacing: ".16em", textTransform: "uppercase", color: "rgba(207,207,207,.45)" }}>Custo · junho</span><span style={{ fontSize: 12, color: "rgba(207,207,207,.5)" }}>R$ 6.240 / 12.000</span></div>
                    <div style={{ height: 9, borderRadius: 200, background: "#1a1a1e", marginTop: 14, overflow: "hidden" }}><div style={{ width: "52%", height: "100%", borderRadius: 200, background: "linear-gradient(90deg,#e3b25b,#edc278)" }} /></div>
                    <p style={{ margin: "11px 0 0", fontSize: 12, color: "rgba(207,207,207,.45)" }}>52% do orçamento mensal.</p>
                  </section>
                </div>
                <section style={{ display: "flex", alignItems: "center", gap: 16, padding: "20px 24px", borderRadius: 18, background: "linear-gradient(180deg,#141416,#0f0f11)", border: "1px solid #242427" }}>
                  <span style={{ width: 48, height: 34, flex: "none", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", background: "#0c0c0e", border: "1px solid #2a2a2e", fontSize: 11, fontWeight: 800, color: "#cfe0ec", letterSpacing: ".06em" }}>VISA</span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 600, color: "#fff" }}>Visa terminando em 4242</div>
                    <div style={{ fontSize: 12, color: "rgba(207,207,207,.5)", marginTop: 2 }}>Expira 09/28 · cobrança em BRL</div>
                  </div>
                  <button className="nn-cfg-row" style={{ height: 38, padding: "0 16px", borderRadius: 11, background: "rgba(255,255,255,.03)", border: "1px solid #242427", color: "#cfcfcf", fontSize: 13, fontWeight: 600, cursor: "pointer", fontFamily: "inherit" }}>Atualizar</button>
                </section>
              </div>
            )}

            {/* EQUIPE */}
            {cat === "equipe" && (
              <div style={panelIn}>
                <PanelHead title="Equipe" desc="Quem tem acesso a este workspace e seus papéis."
                  right={<button style={{ display: "flex", alignItems: "center", gap: 8, height: 42, padding: "0 18px", borderRadius: 12, background: "#aecbe0", border: "none", color: "#06121c", fontSize: 13.5, fontWeight: 700, cursor: "pointer", whiteSpace: "nowrap", fontFamily: "inherit" }}>
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>Convidar</button>} />
                <section style={CARD_LIST}>
                  {memDefs.map((m, i) => {
                    const r = roleStyle(m.role);
                    return (
                      <div key={m.email} style={{ display: "flex", alignItems: "center", gap: 15, padding: "16px 0", borderBottom: `1px solid ${dvd(i, memDefs.length)}` }}>
                        <span style={{ width: 42, height: 42, flex: "none", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", background: "linear-gradient(150deg,#1d2b36,#0c1318)", border: "1px solid rgba(174,203,224,.26)", fontSize: 13, fontWeight: 700, color: "#cfe0ec" }}>{m.ini}</span>
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div style={{ display: "flex", alignItems: "center", gap: 9 }}><span style={{ fontSize: 14, fontWeight: 600, color: "#fff" }}>{m.name}</span>{m.you && <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: ".06em", color: "#aecbe0" }}>· VOCÊ</span>}</div>
                          <div style={{ fontSize: 12, color: "rgba(207,207,207,.5)", marginTop: 2 }}>{m.email}</div>
                        </div>
                        <span style={{ display: "flex", alignItems: "center", height: 28, padding: "0 12px", borderRadius: 200, background: r.bg, border: `1px solid ${r.bd}`, fontSize: 11.5, fontWeight: 600, color: r.color, whiteSpace: "nowrap" }}>{m.role}</span>
                        <button className="nn-cat" style={{ width: 32, height: 32, flex: "none", borderRadius: 9, display: "flex", alignItems: "center", justifyContent: "center", background: "transparent", border: "1px solid transparent", color: "#6f6f74", cursor: "pointer" }}>
                          <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.7" /><circle cx="12" cy="12" r="1.7" /><circle cx="12" cy="19" r="1.7" /></svg>
                        </button>
                      </div>
                    );
                  })}
                </section>
              </div>
            )}

            {/* SEGURANÇA */}
            {cat === "seguranca" && (
              <div style={panelIn}>
                <PanelHead title="Segurança" desc="Autenticação, chaves de API e sessões ativas." />
                <section style={{ ...CARD_LIST, marginBottom: 18 }}>
                  {segDefs.map((d, i) => (
                    <div key={d.key} style={{ display: "flex", alignItems: "center", gap: 16, padding: "18px 0", borderBottom: `1px solid ${dvd(i, segDefs.length)}` }}>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 14, fontWeight: 600, color: "#fff" }}>{d.name}</div>
                        <div style={{ fontSize: 12, color: "rgba(207,207,207,.5)", marginTop: 2 }}>{d.desc}</div>
                      </div>
                      <CfgToggle on={!!toggles[d.key]} onToggle={() => tog(d.key)} />
                    </div>
                  ))}
                </section>

                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", margin: "0 0 14px" }}>
                  <span style={{ fontSize: 10, letterSpacing: ".18em", textTransform: "uppercase", color: "rgba(207,207,207,.45)" }}>Chaves de API</span>
                  <span style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12, color: "#aecbe0", cursor: "pointer" }}><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>Gerar nova chave</span>
                </div>
                <section style={{ ...CARD_LIST, marginBottom: 18 }}>
                  {keyDefs.map((k, i) => (
                    <div key={k.name} style={{ display: "flex", alignItems: "center", gap: 16, padding: "17px 0", borderBottom: `1px solid ${dvd(i, keyDefs.length)}` }}>
                      <span style={{ width: 38, height: 38, flex: "none", borderRadius: 10, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(174,203,224,.08)", border: "1px solid #232327", color: "#aecbe0" }}><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><circle cx="8" cy="15" r="4" /><path d="M10.8 12.2 19 4M16 7l3 3M14 9l2 2" /></svg></span>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ display: "flex", alignItems: "center", gap: 10 }}><span style={{ fontSize: 14, fontWeight: 600, color: "#fff" }}>{k.name}</span><span style={{ fontSize: 12, color: "rgba(207,207,207,.55)", fontFamily: "'Space Grotesk',monospace" }}>{k.prefix}</span></div>
                        <div style={{ fontSize: 11.5, color: "rgba(207,207,207,.42)", marginTop: 3 }}>{k.meta}</div>
                      </div>
                      <button style={{ height: 32, padding: "0 13px", borderRadius: 9, background: "transparent", border: "1px solid rgba(224,122,130,.34)", color: "#f09aa1", fontSize: 12, fontWeight: 600, cursor: "pointer", fontFamily: "inherit" }}>Revogar</button>
                    </div>
                  ))}
                </section>

                <div style={{ fontSize: 10, letterSpacing: ".18em", textTransform: "uppercase", color: "rgba(207,207,207,.45)", margin: "0 0 14px" }}>Sessões ativas</div>
                <section style={CARD_LIST}>
                  {sesDefs.map((s, i) => (
                    <div key={s.device} style={{ display: "flex", alignItems: "center", gap: 16, padding: "17px 0", borderBottom: `1px solid ${dvd(i, sesDefs.length)}` }}>
                      <span style={{ width: 38, height: 38, flex: "none", borderRadius: 10, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(255,255,255,.04)", border: "1px solid #2a2a2e", color: "#aecbe0" }}><Ico d={s.iconD} size={18} /></span>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 14, fontWeight: 600, color: "#fff" }}>{s.device}</div>
                        <div style={{ fontSize: 12, color: "rgba(207,207,207,.5)", marginTop: 2 }}>{s.browser}</div>
                      </div>
                      <span style={{ fontSize: 11.5, fontWeight: 600, color: s.current ? "#7fe0bc" : "#f09aa1", cursor: s.current ? "default" : "pointer" }}>{s.current ? "Atual" : "Encerrar"}</span>
                    </div>
                  ))}
                </section>
              </div>
            )}

          </div>
        </div>
      </div>
    </div>
  );
}

window.SettingsModule = SettingsModule;