/* global React, Icon, Badge, PageHead, KTile, TraceView */
/* ============================================================
   Modules1 — Execuções · Aprovações · Alertas
   ============================================================ */
const IconM = window.Icon, BadgeM = window.Badge, PageHeadM = window.PageHead, KTileM = window.KTile, TraceViewM = window.TraceView;
const GridFx = window.GridFx;
const { useState: useS, useEffect: useE } = React;

function ModulePage({ t, children }) {
  return (
    <div className="module-scroll" style={{ position: "absolute", inset: 0, overflowY: "auto", background: t.pageBg, backgroundImage: `radial-gradient(${t.gridDot} 1.1px, transparent 1.1px)`, backgroundSize: "26px 26px" }}>
      <div style={{ maxWidth: 1180, margin: "0 auto", padding: "26px 30px 64px" }}>{children}</div>
    </div>
  );
}

// =================== EXECUÇÕES — design NN.ai (Execuções.dc.html) ===================
const RUN_ST = {
  ok:    { color: "#5fd0a6", glow: "rgba(95,208,166,.55)", label: "Operacional", pillBg: "rgba(95,208,166,.08)", pillBd: "rgba(95,208,166,.26)" },
  warn:  { color: "#e3b25b", glow: "rgba(227,178,91,.55)", label: "Atenção",     pillBg: "rgba(227,178,91,.08)", pillBd: "rgba(227,178,91,.28)" },
  error: { color: "#e07a82", glow: "rgba(224,122,130,.6)", label: "Falha",       pillBg: "rgba(224,122,130,.1)",  pillBd: "rgba(224,122,130,.32)" },
};
const MetricCard = ({ accent = "#aecbe0", icon, label, children }) => (
  <div className="nn-metric" style={{ position: "relative", borderRadius: 20, padding: "20px 22px", background: "linear-gradient(180deg,rgba(20,21,23,.9),rgba(13,15,17,.92))", border: "1px solid #232327", overflow: "hidden" }}>
    <div style={{ position: "absolute", top: 0, left: 22, right: 22, height: 1, background: `linear-gradient(90deg,transparent,${accent}66,transparent)` }} />
    <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
      <span style={{ width: 30, height: 30, borderRadius: 9, background: `${accent}1a`, border: `1px solid ${accent}33`, display: "flex", alignItems: "center", justifyContent: "center", color: accent }}>{icon}</span>
      <span style={{ fontSize: 10.5, letterSpacing: ".16em", color: "rgba(207,207,207,.5)" }}>{label}</span>
    </div>
    {children}
  </div>
);

function RunsModule({ agents, t, dark, onSelect }) {
  const { fmtTokens, fmtBRL, fmtNum, TRACES } = window.AgentData;
  const [filter, setFilter] = useS("todos");
  const [open, setOpen] = useS(null);

  const all = agents.flatMap((a) => a.runs.map((r) => ({ ...r, agentId: a.id, agent: a })));
  all.sort((x, y) => (y.started > x.started ? 1 : -1));
  const shown = filter === "todos" ? all : all.filter((r) => r.status === filter);
  const totalTokens = all.reduce((s, r) => s + r.tokens, 0);
  const totalCost = all.reduce((s, r) => s + r.cost, 0);
  const okRate = Math.round((all.filter((r) => r.status === "ok").length / all.length) * 1000) / 10;
  const ringOff = (138.2 * (1 - okRate / 100)).toFixed(1);
  const FILTERS = [["todos", "Todos"], ["ok", "OK"], ["warn", "Atenção"], ["error", "Falha"]];

  return (
    <div className="nn-scroll" style={{ position: "absolute", inset: 0, overflowY: "auto", overflowX: "hidden", background: "radial-gradient(ellipse 900px 520px at 30% -8%, rgba(58,143,220,.08), transparent 70%), #000" }}>
      <GridFx dark={dark} />
      <div style={{ position: "relative", maxWidth: 1640, margin: "0 auto", padding: "42px 56px 80px" }}>

        {/* page header */}
        <div style={{ display: "flex", alignItems: "center", gap: 22 }}>
          <div style={{ position: "relative", width: 72, height: 72, flex: "none", borderRadius: "50%", background: "radial-gradient(circle at 50% 38%, #16242f, #080d11)", border: "1px solid rgba(174,203,224,.28)", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 0 0 6px rgba(174,203,224,.04), 0 0 60px rgba(58,143,220,.32)" }}>
            <span style={{ position: "absolute", inset: -1, borderRadius: "50%", border: "1px solid rgba(174,203,224,.18)", animation: "nnBreathe 3.4s ease-in-out infinite" }} />
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#cfe0ec" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7L3 8" /><path d="M3 4v4h4" /><path d="M12 8v4l3 2" /></svg>
          </div>
          <div>
            <h2 style={{ margin: 0, fontSize: 38, fontWeight: 700, letterSpacing: "-.03em", color: "#fff", lineHeight: 1 }}>Execuções</h2>
            <p style={{ margin: "11px 0 0", fontSize: 15, lineHeight: 1.4, color: "rgba(207,207,207,.62)", maxWidth: 760 }}>Atividade em tempo real de todas as esteiras. Clique numa execução para abrir o trace passo a passo.</p>
          </div>
          <div style={{ marginLeft: "auto", alignSelf: "flex-start", marginTop: 6, display: "flex", alignItems: "center", gap: 9, height: 38, padding: "0 16px", borderRadius: 200, background: "rgba(95,208,166,.08)", border: "1px solid rgba(95,208,166,.26)", color: "#7fe0bc", fontSize: 12.5, fontWeight: 600, letterSpacing: ".04em" }}>
            <span style={{ position: "relative", width: 8, height: 8 }}><span style={{ position: "absolute", inset: 0, borderRadius: "50%", background: "#5fd0a6" }} /><span style={{ position: "absolute", inset: -4, borderRadius: "50%", background: "#5fd0a6", animation: "nnPulse 2s ease-in-out infinite" }} /></span>
            Ao vivo
          </div>
        </div>

        {/* metric cards */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 20, marginTop: 34 }}>
          <MetricCard label="EXECUÇÕES HOJE" icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12h4l2.5 7 4-15L18 12h3" /></svg>}>
            <div style={{ fontSize: 42, fontWeight: 800, color: "#fff", letterSpacing: "-.03em", marginTop: 14, lineHeight: 1 }}>{fmtNum(all.length * 7)}</div>
            <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginTop: 14 }}>
              <span style={{ fontSize: 12, color: "rgba(207,207,207,.5)" }}>entre todas as esteiras</span>
              <svg width="84" height="30" viewBox="0 0 84 30" fill="none" style={{ display: "block" }}>
                <g fill="#aecbe0" fillOpacity=".22"><rect x="2" y="18" width="6" height="12" rx="2" /><rect x="13" y="12" width="6" height="18" rx="2" /><rect x="24" y="20" width="6" height="10" rx="2" /><rect x="35" y="8" width="6" height="22" rx="2" /><rect x="46" y="14" width="6" height="16" rx="2" /></g>
                <g fill="#aecbe0"><rect x="57" y="5" width="6" height="25" rx="2" /><rect x="68" y="11" width="6" height="19" rx="2" /></g>
              </svg>
            </div>
          </MetricCard>

          <MetricCard accent="#5fd0a6" label="TAXA DE SUCESSO" icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M8.5 12.5l2.5 2.5 4.5-5" /></svg>}>
            <div style={{ display: "flex", alignItems: "center", gap: 16, marginTop: 14 }}>
              <div style={{ fontSize: 42, fontWeight: 800, color: "#fff", letterSpacing: "-.03em", lineHeight: 1 }}>{okRate}%</div>
              <svg width="56" height="56" viewBox="0 0 56 56" fill="none" style={{ display: "block", marginLeft: "auto" }}>
                <circle cx="28" cy="28" r="22" stroke="#23262b" strokeWidth="6" />
                <circle cx="28" cy="28" r="22" stroke="#5fd0a6" strokeWidth="6" strokeLinecap="round" strokeDasharray="138.2" strokeDashoffset={ringOff} transform="rotate(-90 28 28)" style={{ filter: "drop-shadow(0 0 5px rgba(95,208,166,.5))" }} />
              </svg>
            </div>
            <span style={{ display: "block", fontSize: 12, color: "rgba(207,207,207,.5)", marginTop: 14 }}>média ponderada</span>
          </MetricCard>

          <MetricCard label="TOKENS (AMOSTRA)" icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M12 7v10M9.2 9.2a3 3 0 1 1 0 5.6" /></svg>}>
            <div style={{ fontSize: 42, fontWeight: 800, color: "#fff", letterSpacing: "-.03em", marginTop: 14, lineHeight: 1 }}>{fmtTokens(totalTokens)}</div>
            <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginTop: 14 }}>
              <span style={{ fontSize: 12, color: "rgba(207,207,207,.5)" }}>últimas execuções</span>
              <svg width="92" height="30" viewBox="0 0 92 30" preserveAspectRatio="none" style={{ display: "block" }}><defs><linearGradient id="mt1" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#72b2e6" stopOpacity=".3" /><stop offset="1" stopColor="#72b2e6" stopOpacity="0" /></linearGradient></defs><polygon points="0,20 15,14 31,22 46,10 61,16 77,6 92,12 92,30 0,30" fill="url(#mt1)" /><polyline points="0,20 15,14 31,22 46,10 61,16 77,6 92,12" fill="none" stroke="#72b2e6" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </div>
          </MetricCard>

          <MetricCard label="CUSTO (AMOSTRA)" icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v18M16.5 7.5C16 5.7 14.2 4.8 12 4.8 9.4 4.8 7.5 6 7.5 8.1c0 4.6 9 2.8 9 7.5 0 2.1-1.9 3.6-4.5 3.6-2.4 0-4.2-1-4.7-3" /></svg>}>
            <div style={{ fontSize: 42, fontWeight: 800, color: "#fff", letterSpacing: "-.03em", marginTop: 14, lineHeight: 1 }}>{fmtBRL(totalCost)}</div>
            <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginTop: 14 }}>
              <span style={{ fontSize: 12, color: "rgba(207,207,207,.5)" }}>últimas execuções</span>
              <svg width="92" height="30" viewBox="0 0 92 30" preserveAspectRatio="none" style={{ display: "block" }}><defs><linearGradient id="mt2" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="#72b2e6" stopOpacity=".3" /><stop offset="1" stopColor="#72b2e6" stopOpacity="0" /></linearGradient></defs><polygon points="0,16 15,18 31,12 46,20 61,14 77,18 92,8 92,30 0,30" fill="url(#mt2)" /><polyline points="0,16 15,18 31,12 46,20 61,14 77,18 92,8" fill="none" stroke="#72b2e6" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </div>
          </MetricCard>
        </div>

        {/* timeline header */}
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 46 }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 13 }}>
            <h3 style={{ margin: 0, fontSize: 21, fontWeight: 700, color: "#fff", letterSpacing: "-.01em" }}>Linha do tempo</h3>
            <span style={{ fontSize: 12.5, letterSpacing: ".04em", color: "rgba(207,207,207,.42)" }}>{shown.length} execuções recentes</span>
          </div>
          <div style={{ display: "flex", padding: 4, gap: 3, borderRadius: 12, background: "#0c0c0e", border: "1px solid #1f1f22" }}>
            {FILTERS.map(([k, l]) => {
              const on = filter === k;
              return <span key={k} onClick={() => setFilter(k)} style={{ display: "flex", alignItems: "center", gap: 7, height: 32, padding: "0 15px", borderRadius: 9, fontSize: 12.5, fontWeight: 600, cursor: "pointer", color: on ? "#e8eff6" : "#8e8e93", background: on ? "rgba(174,203,224,.12)" : "transparent", border: `1px solid ${on ? "rgba(174,203,224,.24)" : "transparent"}` }}>{l}</span>;
            })}
          </div>
        </div>

        {/* timeline list */}
        <div style={{ position: "relative", marginTop: 22 }}>
          {shown.map((r) => {
            const S = RUN_ST[r.status] || RUN_ST.ok;
            const isOpen = open === r.agentId + r.id;
            const durColor = r.status === "error" ? "rgba(207,207,207,.4)" : "rgba(226,225,223,.78)";
            return (
              <div key={r.agentId + r.id}>
                <div style={{ position: "relative", display: "flex", alignItems: "stretch", gap: 20, paddingLeft: 4 }}>
                  <div style={{ position: "relative", width: 30, flex: "none" }}>
                    <span style={{ position: "absolute", left: 14, top: 0, bottom: 0, width: 2, background: "linear-gradient(180deg,rgba(174,203,224,.16),rgba(174,203,224,.08))" }} />
                    <span style={{ position: "absolute", left: 8, top: "50%", transform: "translateY(-50%)", width: 14, height: 14, borderRadius: "50%", background: "#0a0b0d", border: `2px solid ${S.color}`, boxShadow: `0 0 12px ${S.glow}` }} />
                    <span style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", width: 6, height: 6, borderRadius: "50%", background: S.color }} />
                  </div>
                  <div className="nn-row" onClick={() => setOpen(isOpen ? null : r.agentId + r.id)} style={{ flex: 1, minWidth: 0, marginBottom: 12, display: "flex", alignItems: "center", gap: 16, padding: "17px 20px", borderRadius: 15, background: "linear-gradient(180deg,#121315,#0d0f11)", border: `1px solid ${isOpen ? "rgba(174,203,224,.36)" : "#202024"}`, cursor: "pointer", overflow: "hidden" }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 11, flex: "1 1 170px", minWidth: 96, overflow: "hidden" }}>
                      <span style={{ width: 9, height: 9, borderRadius: "50%", flex: "none", background: S.color, boxShadow: `0 0 8px ${S.glow}` }} />
                      <span style={{ fontSize: 14.5, fontWeight: 700, color: "#f1f1ef", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{r.agent.short}</span>
                    </div>
                    <div style={{ flex: "none", display: "flex", alignItems: "baseline", gap: 9, whiteSpace: "nowrap" }}>
                      <span style={{ fontSize: 14, fontWeight: 700, letterSpacing: ".02em", color: "#dcdcda", fontFeatureSettings: "'tnum'" }}>{r.id}</span>
                      <span style={{ fontSize: 13, color: "rgba(207,207,207,.42)", fontFeatureSettings: "'tnum'" }}>{r.started}</span>
                    </div>
                    <div style={{ flex: "1 1 130px", minWidth: 0, display: "flex" }}>
                      <span style={{ display: "inline-flex", alignItems: "center", gap: 8, maxWidth: "100%", height: 28, padding: "0 12px", borderRadius: 200, background: "rgba(255,255,255,.03)", border: "1px solid #26262a", fontSize: 12.5, color: "rgba(226,225,223,.82)" }}>
                        <span style={{ width: 5, height: 5, borderRadius: "50%", flex: "none", background: "#aecbe0", opacity: .7 }} /><span style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{r.trigger}</span>
                      </span>
                    </div>
                    <span style={{ width: 50, flex: "none", textAlign: "right", fontSize: 13.5, color: durColor, fontFeatureSettings: "'tnum'" }}>{r.dur}</span>
                    <span style={{ width: 58, flex: "none", textAlign: "right", fontSize: 13.5, fontWeight: 600, color: "#e2e1df", fontFeatureSettings: "'tnum'" }}>{fmtTokens(r.tokens)}</span>
                    <span style={{ flex: "none", display: "flex", justifyContent: "flex-end" }}>
                      <span style={{ display: "inline-flex", alignItems: "center", gap: 7, height: 28, padding: "0 13px", borderRadius: 200, fontSize: 12.5, fontWeight: 600, whiteSpace: "nowrap", color: S.color, background: S.pillBg, border: `1px solid ${S.pillBd}` }}>
                        <span style={{ width: 6, height: 6, borderRadius: "50%", flex: "none", background: S.color, boxShadow: `0 0 7px ${S.glow}` }} />{S.label}
                      </span>
                    </span>
                    <svg className="nn-chev" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#5b5b60" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flex: "none", transform: isOpen ? "rotate(90deg)" : "none", transition: "transform .3s", color: isOpen ? "#aecbe0" : undefined }}><path d="M9 6l6 6-6 6" /></svg>
                  </div>
                </div>
                {isOpen && (
                  <div style={{ marginLeft: 54, marginTop: -4, marginBottom: 14, borderRadius: 14, border: "1px solid #202024", background: "rgba(255,255,255,.02)", padding: "14px 16px" }}>
                    <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12, alignItems: "center" }}>
                      <span style={{ fontSize: 10, color: "rgba(207,207,207,.42)", fontFamily: "var(--font-mono)", letterSpacing: ".06em" }}>TRACE · {r.agent.name}</span>
                      <button onClick={(e) => { e.stopPropagation(); onSelect(r.agentId); }} className="btn-ghost" style={{ color: "#aecbe0", borderColor: "#26262a" }}>Abrir agente <IconM name="arrow-right" size={12} /></button>
                    </div>
                    <TraceViewM steps={TRACES[r.agentId] || []} t={t} dark={dark} />
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// =================== APROVAÇÕES — design NN.ai (Aprovações.dc.html) ===================
const APPR_RISK = {
  alto:  { risk: "Risco alto",  color: "#e07a82", colorFade: "rgba(224,122,130,.15)", riskBg: "rgba(224,122,130,.1)", riskBd: "rgba(224,122,130,.34)", iconBd: "rgba(224,122,130,.3)", iconGlow: "rgba(224,122,130,.3)" },
  medio: { risk: "Risco médio", color: "#e3b25b", colorFade: "rgba(227,178,91,.15)", riskBg: "rgba(227,178,91,.1)", riskBd: "rgba(227,178,91,.32)", iconBd: "rgba(227,178,91,.28)", iconGlow: "rgba(227,178,91,.26)" },
  baixo: { risk: "Risco baixo", color: "#5fd0a6", colorFade: "rgba(95,208,166,.15)", riskBg: "rgba(95,208,166,.1)", riskBd: "rgba(95,208,166,.3)", iconBd: "rgba(95,208,166,.26)", iconGlow: "rgba(95,208,166,.24)" },
};
const APPR_ITEMS = [
  { id: "AP-3391", risk: "alto",  title: "Conciliação acima do teto", meta: "AP-3391 · há 6 min", value: 18450,
    desc: "6 lançamentos somando R$ 18.450,00 ultrapassam o teto de R$ 10.000 e exigem liberação manual.",
    chips: [["Lançamentos", "6 itens"], ["Conta sugerida", "1.1.02 · Bancos"], ["Confiança do agente", "91%"], ["Janela", "abril/2026"]], esteira: "Conciliação Contábil" },
  { id: "AP-3390", risk: "medio", title: "Contrato para assinatura", meta: "AP-3390 · há 4 min", value: 4200,
    desc: "Minuta CLT gerada com 12 cláusulas. Requer liberação humana antes do envio para assinatura digital.",
    chips: [["Modalidade", "CLT"], ["Remuneração", "R$ 4.200,00"], ["Cláusulas", "12 · LGPD ok"], ["Template", "v5"]], esteira: "Geração de Contratos" },
  { id: "AP-3389", risk: "medio", title: "Resposta sensível ao cliente", meta: "AP-3389 · há 12 min", value: 0,
    desc: "Tema fiscal sensível. A política exige validação de um contador humano antes do envio da resposta.",
    chips: [["Canal", "WhatsApp"], ["Tema", "DAS em atraso"], ["Sugestão do agente", "Parcelamento"], ["Escalado p/", "Contador"]], esteira: "Atendimento ao Cliente" },
  { id: "AP-3388", risk: "baixo", title: "Desempate de candidatos", meta: "AP-3388 · há 20 min", value: 0,
    desc: "Dois candidatos com score idêntico (88/100). Desempate humano sugerido antes de avançar.",
    chips: [["Candidatos", "2 empatados"], ["Score", "88 / 100"], ["Vaga", "Analista Pleno"]], esteira: "Triagem de Currículos" },
  { id: "AP-3387", risk: "baixo", title: "Aditivo de prazo", meta: "AP-3387 · há 26 min", value: 0,
    desc: "Aditivo de prazo gerado automaticamente. Liberação de baixo risco.",
    chips: [["Tipo", "Aditivo"], ["Prazo", "+12 meses"], ["Partes", "2"]], esteira: "Geração de Contratos" },
];

function ApprovalsModule({ agents, t, dark, onSelect }) {
  const fmtBRL = window.AgentData.fmtBRL;
  const [state, setState] = useS({});
  const act = (id, v) => setState((s) => ({ ...s, [id]: v }));
  const pending = APPR_ITEMS.filter((a) => !state[a.id]);
  const valueWaiting = pending.reduce((s, a) => s + (a.value || 0), 0);
  const highRisk = pending.filter((a) => a.risk === "alto").length;

  return (
    <div className="nn-scroll" style={{ position: "absolute", inset: 0, overflowY: "auto", overflowX: "hidden", background: "radial-gradient(ellipse 900px 520px at 30% -8%, rgba(58,143,220,.08), transparent 70%), #000" }}>
      <GridFx dark={dark} />
      <div style={{ position: "relative", maxWidth: 1640, margin: "0 auto", padding: "42px 56px 80px" }}>

        {/* page header */}
        <div style={{ display: "flex", alignItems: "center", gap: 22 }}>
          <div style={{ position: "relative", width: 72, height: 72, flex: "none", borderRadius: "50%", background: "radial-gradient(circle at 50% 38%, #122319, #080d0a)", border: "1px solid rgba(95,208,166,.3)", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 0 0 6px rgba(95,208,166,.04), 0 0 60px rgba(95,208,166,.28)" }}>
            <span style={{ position: "absolute", inset: -1, borderRadius: "50%", border: "1px solid rgba(95,208,166,.2)", animation: "nnBreathe 3.4s ease-in-out infinite" }} />
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#7fe0bc" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" /></svg>
          </div>
          <div>
            <h2 style={{ margin: 0, fontSize: 38, fontWeight: 700, letterSpacing: "-.03em", color: "#fff", lineHeight: 1 }}>Aprovações</h2>
            <p style={{ margin: "11px 0 0", fontSize: 15, lineHeight: 1.45, color: "rgba(207,207,207,.62)", maxWidth: 820 }}>Fila human-in-the-loop. Itens que a política exige que um humano libere antes do agente seguir — alto valor, temas sensíveis, assinatura.</p>
          </div>
        </div>

        {/* metric cards */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20, marginTop: 34 }}>
          <div className="nn-metric" style={{ position: "relative", borderRadius: 20, padding: "22px 24px", background: "linear-gradient(180deg,rgba(20,21,23,.9),rgba(13,15,17,.92))", border: "1px solid #232327", overflow: "hidden" }}>
            <div style={{ position: "absolute", top: 0, left: 24, right: 24, height: 1, background: "linear-gradient(90deg,transparent,rgba(227,178,91,.45),transparent)" }} />
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ width: 32, height: 32, borderRadius: 9, background: "rgba(227,178,91,.1)", border: "1px solid rgba(227,178,91,.26)", display: "flex", alignItems: "center", justifyContent: "center", color: "#e3b25b" }}><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg></span>
              <span style={{ fontSize: 11, letterSpacing: ".16em", color: "rgba(207,207,207,.5)" }}>PENDENTES</span>
            </div>
            <div style={{ fontSize: 48, fontWeight: 800, color: "#fff", letterSpacing: "-.03em", marginTop: 14, lineHeight: 1 }}>{pending.length}</div>
            <span style={{ display: "block", fontSize: 12.5, color: "rgba(207,207,207,.5)", marginTop: 14 }}>aguardando liberação</span>
          </div>

          <div className="nn-metric" style={{ position: "relative", borderRadius: 20, padding: "22px 24px", background: "linear-gradient(180deg,rgba(20,21,23,.9),rgba(13,15,17,.92))", border: "1px solid #232327", overflow: "hidden" }}>
            <div style={{ position: "absolute", top: 0, left: 24, right: 24, height: 1, background: "linear-gradient(90deg,transparent,rgba(95,208,166,.45),transparent)" }} />
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ width: 32, height: 32, borderRadius: 9, background: "rgba(95,208,166,.1)", border: "1px solid rgba(95,208,166,.24)", display: "flex", alignItems: "center", justifyContent: "center", color: "#7fe0bc" }}><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v18M16.5 7.5C16 5.7 14.2 4.8 12 4.8 9.4 4.8 7.5 6 7.5 8.1c0 4.6 9 2.8 9 7.5 0 2.1-1.9 3.6-4.5 3.6-2.4 0-4.2-1-4.7-3" /></svg></span>
              <span style={{ fontSize: 11, letterSpacing: ".16em", color: "rgba(207,207,207,.5)" }}>VALOR EM ESPERA</span>
            </div>
            <div style={{ fontSize: 40, fontWeight: 800, color: "#fff", letterSpacing: "-.03em", marginTop: 18, lineHeight: 1 }}>{fmtBRL(valueWaiting)}</div>
            <span style={{ display: "block", fontSize: 12.5, color: "rgba(207,207,207,.5)", marginTop: 16 }}>soma dos itens financeiros</span>
          </div>

          <div className="nn-metric" style={{ position: "relative", borderRadius: 20, padding: "22px 24px", background: "linear-gradient(180deg,rgba(22,17,18,.92),rgba(14,11,12,.94))", border: "1px solid rgba(224,122,130,.24)", overflow: "hidden", boxShadow: "0 0 40px rgba(224,122,130,.06)" }}>
            <div style={{ position: "absolute", top: 0, left: 24, right: 24, height: 1, background: "linear-gradient(90deg,transparent,rgba(224,122,130,.5),transparent)" }} />
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ width: 32, height: 32, borderRadius: 9, background: "rgba(224,122,130,.12)", border: "1px solid rgba(224,122,130,.3)", display: "flex", alignItems: "center", justifyContent: "center", color: "#f09aa1" }}><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l9 16H3z" /><path d="M12 9v4M12 16v.5" /></svg></span>
              <span style={{ fontSize: 11, letterSpacing: ".16em", color: "rgba(207,207,207,.5)" }}>RISCO ALTO</span>
            </div>
            <div style={{ fontSize: 48, fontWeight: 800, color: "#fff", letterSpacing: "-.03em", marginTop: 14, lineHeight: 1 }}>{highRisk}</div>
            <span style={{ display: "block", fontSize: 12.5, color: "rgba(240,154,161,.7)", marginTop: 14 }}>exigem atenção imediata</span>
          </div>
        </div>

        {/* approval cards */}
        {pending.length === 0 ? (
          <div style={{ textAlign: "center", padding: "70px 20px", color: "rgba(207,207,207,.5)", marginTop: 30 }}>
            <div style={{ width: 64, height: 64, borderRadius: "50%", background: "radial-gradient(circle at 50% 38%, #122319, #080d0a)", border: "1px solid rgba(95,208,166,.3)", color: "#7fe0bc", display: "grid", placeItems: "center", margin: "0 auto 16px", boxShadow: "0 0 50px rgba(95,208,166,.2)" }}><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" /></svg></div>
            <div style={{ fontSize: 17, fontWeight: 700, color: "#fff" }}>Tudo aprovado</div>
            <div style={{ fontSize: 13.5, marginTop: 5 }}>Nenhum item aguardando liberação humana agora.</div>
          </div>
        ) : (
          <div style={{ display: "flex", flexDirection: "column", gap: 18, marginTop: 30 }}>
            {pending.map((it) => {
              const R = APPR_RISK[it.risk];
              return (
                <article key={it.id} className="nn-appr" style={{ position: "relative", borderRadius: 20, background: "linear-gradient(180deg,#121315,#0d0f11)", border: "1px solid #202024", overflow: "hidden", boxShadow: "0 18px 40px rgba(0,0,0,.4)" }}>
                  <span style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 4, background: `linear-gradient(180deg,${R.color},${R.colorFade})` }} />
                  <div style={{ padding: "24px 28px 0 30px" }}>
                    <div style={{ display: "flex", alignItems: "flex-start", gap: 18 }}>
                      <span style={{ width: 52, height: 52, flex: "none", borderRadius: 14, background: "radial-gradient(circle at 50% 35%, #1a1d20, #101113)", border: `1px solid ${R.iconBd}`, display: "flex", alignItems: "center", justifyContent: "center", color: R.color, boxShadow: `0 0 22px ${R.iconGlow}` }}>
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3" /><path d="M12 3v6M12 15v6M3 12h6M15 12h6" /></svg>
                      </span>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ display: "flex", alignItems: "center", gap: 13, flexWrap: "wrap" }}>
                          <h3 style={{ margin: 0, fontSize: 19, fontWeight: 700, color: "#fff", letterSpacing: "-.01em" }}>{it.title}</h3>
                          <span style={{ display: "inline-flex", alignItems: "center", gap: 7, height: 26, padding: "0 12px", borderRadius: 200, fontSize: 12, fontWeight: 700, color: R.color, background: R.riskBg, border: `1px solid ${R.riskBd}` }}>
                            <span style={{ width: 6, height: 6, borderRadius: "50%", background: R.color, boxShadow: `0 0 7px ${R.iconGlow}` }} />{R.risk}
                          </span>
                          <span style={{ fontSize: 13, color: "rgba(207,207,207,.42)", fontFeatureSettings: "'tnum'" }}>{it.meta}</span>
                        </div>
                        <p style={{ margin: "10px 0 0", fontSize: 14.5, lineHeight: 1.5, color: "rgba(207,207,207,.74)", maxWidth: 1020 }}>{it.desc}</p>
                        <div style={{ display: "flex", flexWrap: "wrap", gap: 9, marginTop: 16 }}>
                          {it.chips.map(([k, v]) => (
                            <span key={k} style={{ display: "inline-flex", alignItems: "center", gap: 7, height: 32, padding: "0 13px", borderRadius: 9, background: "rgba(255,255,255,.03)", border: "1px solid #26262a", fontSize: 12.5, whiteSpace: "nowrap" }}><span style={{ color: "rgba(207,207,207,.5)" }}>{k}:</span><span style={{ color: "#e2e1df", fontWeight: 600 }}>{v}</span></span>
                          ))}
                        </div>
                      </div>
                    </div>
                    <div style={{ height: 1, background: "#1c1c1f", margin: "20px 0 0" }} />
                    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 18, padding: "16px 2px 18px", flexWrap: "wrap" }}>
                      <span style={{ display: "inline-flex", alignItems: "center", gap: 9, height: 34, padding: "0 14px", borderRadius: 200, background: "rgba(174,203,224,.06)", border: "1px solid #232629", fontSize: 13, fontWeight: 600, color: "#cfd6dc" }}>
                        <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#aecbe0", boxShadow: "0 0 7px rgba(174,203,224,.6)" }} />{it.esteira}
                      </span>
                      <div style={{ display: "flex", alignItems: "center", gap: 11, marginLeft: "auto" }}>
                        <button className="nn-reject" onClick={() => act(it.id, "rejected")} style={{ display: "flex", alignItems: "center", gap: 8, height: 42, padding: "0 20px", borderRadius: 11, background: "transparent", border: "1px solid rgba(224,122,130,.4)", color: "#f09aa1", fontSize: 13.5, fontWeight: 700, cursor: "pointer", fontFamily: "inherit" }}>
                          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>Rejeitar
                        </button>
                        <button className="nn-approve" onClick={() => act(it.id, "approved")} style={{ display: "flex", alignItems: "center", gap: 8, height: 42, padding: "0 22px", borderRadius: 11, background: "linear-gradient(180deg,#2fad6f,#258c59)", border: "1px solid rgba(95,208,166,.5)", color: "#fff", fontSize: 13.5, fontWeight: 700, cursor: "pointer", fontFamily: "inherit", boxShadow: "0 6px 18px rgba(47,173,111,.28)" }}>
                          <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>Aprovar
                        </button>
                      </div>
                    </div>
                  </div>
                </article>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}

// =================== ALERTAS & INCIDENTES — design NN.ai (Alertas & Incidentes.dc.html) ===================
const ALERT_SEV = {
  crit: { severity: "Crítico", color: "#e07a82", colorFade: "rgba(224,122,130,.12)", glow: "rgba(224,122,130,.6)", badgeBg: "rgba(224,122,130,.1)", badgeBd: "rgba(224,122,130,.34)", iconBd: "rgba(224,122,130,.3)", iconGlow: "rgba(224,122,130,.28)" },
  aten: { severity: "Atenção", color: "#e3b25b", colorFade: "rgba(227,178,91,.12)", glow: "rgba(227,178,91,.55)", badgeBg: "rgba(227,178,91,.1)", badgeBd: "rgba(227,178,91,.32)", iconBd: "rgba(227,178,91,.28)", iconGlow: "rgba(227,178,91,.24)" },
  info: { severity: "Info", color: "#aecbe0", colorFade: "rgba(174,203,224,.12)", glow: "rgba(174,203,224,.5)", badgeBg: "rgba(174,203,224,.08)", badgeBd: "rgba(174,203,224,.28)", iconBd: "rgba(174,203,224,.24)", iconGlow: "rgba(174,203,224,.2)" },
};
const ALERT_ITEMS = [
  { id: "AL-9001", sev: "crit", title: "WhatsApp API offline", tool: "WhatsApp API", esteira: "Atendimento ao Cliente", meta: "AL-9001 · há 1 min",
    desc: "Token de acesso expirado (HTTP 401). 34 mensagens represadas na fila. Fallback de canal não configurado." },
  { id: "AL-9000", sev: "crit", title: "Inferência local saturada", tool: "", esteira: "Atendimento ao Cliente", meta: "AL-9000 · há 40 min",
    desc: "Fila do modelo Llama 3.1 (on-premise) acima de 80% da capacidade de GPU." },
  { id: "AL-8998", sev: "aten", title: "Open Finance degradado", tool: "Open Finance", esteira: "Conciliação Contábil", meta: "AL-8998 · há 18 min",
    desc: "Latência p95 em 1,8 s (limite de SLA 1,0 s) há 22 minutos." },
  { id: "AL-8995", sev: "info", title: "Pico de volume", tool: "", esteira: "Processamento de Notas Fiscais", meta: "AL-8995 · há 1 h",
    desc: "412 acionamentos hoje, +38% acima da média móvel de 7 dias." },
];

function AlertsModule({ agents, t, dark, onSelect }) {
  const [state, setState] = useS({});
  const st = (it) => state[it.id] || "open";
  const [filter, setFilter] = useS("abertos");
  const open = ALERT_ITEMS.filter((it) => st(it) === "open");
  const crit = open.filter((it) => it.sev === "crit").length;
  const aten = open.filter((it) => it.sev === "aten").length;
  const FMAP = { abertos: "open", reconhecidos: "ack", resolvidos: "resolved" };
  const shown = filter === "todos" ? ALERT_ITEMS : ALERT_ITEMS.filter((it) => st(it) === FMAP[filter]);
  const FILTERS = [["abertos", "Abertos"], ["reconhecidos", "Reconhecidos"], ["resolvidos", "Resolvidos"], ["todos", "Todos"]];
  const triIcon = <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l9 16H3z" /><path d="M12 9v4M12 16v.5" /></svg>;
  const metric = (accent, special, icon, label, value) => (
    <div className="nn-metric" style={{ position: "relative", borderRadius: 20, padding: "22px 24px", background: special ? "linear-gradient(180deg,rgba(22,17,18,.92),rgba(14,11,12,.94))" : "linear-gradient(180deg,rgba(20,21,23,.9),rgba(13,15,17,.92))", border: `1px solid ${special ? "rgba(224,122,130,.26)" : "#232327"}`, overflow: "hidden", boxShadow: special ? "0 0 40px rgba(224,122,130,.07)" : "none" }}>
      <div style={{ position: "absolute", top: 0, left: 24, right: 24, height: 1, background: `linear-gradient(90deg,transparent,${accent}73,transparent)` }} />
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <span style={{ width: 32, height: 32, borderRadius: 9, background: `${accent}1f`, border: `1px solid ${accent}44`, display: "flex", alignItems: "center", justifyContent: "center", color: accent }}>{icon}</span>
        <span style={{ fontSize: 11, letterSpacing: ".16em", color: "rgba(207,207,207,.5)" }}>{label}</span>
      </div>
      <div style={{ fontSize: 48, fontWeight: 800, color: "#fff", letterSpacing: "-.03em", marginTop: 14, lineHeight: 1 }}>{value}</div>
    </div>
  );

  return (
    <div className="nn-scroll" style={{ position: "absolute", inset: 0, overflowY: "auto", overflowX: "hidden", background: "radial-gradient(ellipse 900px 520px at 30% -8%, rgba(224,122,130,.07), transparent 70%), #000" }}>
      <GridFx dark={dark} />
      <div style={{ position: "relative", maxWidth: 1500, margin: "0 auto", padding: "42px 56px 80px" }}>

        {/* page header */}
        <div style={{ display: "flex", alignItems: "center", gap: 22 }}>
          <div style={{ position: "relative", width: 72, height: 72, flex: "none", borderRadius: "50%", background: "radial-gradient(circle at 50% 38%, #231417, #0d0809)", border: "1px solid rgba(224,122,130,.3)", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 0 0 6px rgba(224,122,130,.04), 0 0 60px rgba(224,122,130,.26)" }}>
            <span style={{ position: "absolute", inset: 0, borderRadius: "50%", border: "1px solid rgba(224,122,130,.4)", animation: "nnRing 2.6s ease-out infinite" }} />
            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#f09aa1" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6Z" /><path d="M10 19a2 2 0 0 0 4 0" /></svg>
          </div>
          <div>
            <h2 style={{ margin: 0, fontSize: 38, fontWeight: 700, letterSpacing: "-.03em", color: "#fff", lineHeight: 1 }}>Alertas &amp; Incidentes</h2>
            <p style={{ margin: "11px 0 0", fontSize: 15, lineHeight: 1.45, color: "rgba(207,207,207,.62)", maxWidth: 820 }}>Saúde operacional em tempo real — falhas de tools, SLA estourado, orçamento e picos de volume.</p>
          </div>
          <div style={{ marginLeft: "auto", alignSelf: "flex-start", marginTop: 6, display: "flex", alignItems: "center", gap: 9, height: 38, padding: "0 16px", borderRadius: 200, background: "rgba(224,122,130,.08)", border: "1px solid rgba(224,122,130,.26)", color: "#f09aa1", fontSize: 12.5, fontWeight: 600, letterSpacing: ".04em" }}>
            <span style={{ position: "relative", width: 8, height: 8 }}><span style={{ position: "absolute", inset: 0, borderRadius: "50%", background: "#e07a82" }} /><span style={{ position: "absolute", inset: -4, borderRadius: "50%", background: "#e07a82", animation: "nnPulse 1.6s ease-in-out infinite" }} /></span>
            Monitorando
          </div>
        </div>

        {/* metric cards */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20, marginTop: 34 }}>
          {metric("#e07a82", true, triIcon, "CRÍTICOS ABERTOS", crit)}
          {metric("#e3b25b", false, triIcon, "ATENÇÃO ABERTOS", aten)}
          {metric("#aecbe0", false, <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12h4l2.5 7 4-15L18 12h3" /></svg>, "TOTAL ABERTOS", open.length)}
        </div>

        {/* incidents header */}
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 44 }}>
          <h3 style={{ margin: 0, fontSize: 21, fontWeight: 700, color: "#fff", letterSpacing: "-.01em" }}>Incidentes</h3>
          <div style={{ display: "flex", padding: 4, gap: 3, borderRadius: 12, background: "#0c0c0e", border: "1px solid #1f1f22" }}>
            {FILTERS.map(([k, l]) => {
              const on = filter === k;
              return <span key={k} onClick={() => setFilter(k)} style={{ display: "flex", alignItems: "center", height: 32, padding: "0 15px", borderRadius: 9, fontSize: 12.5, fontWeight: 600, cursor: "pointer", color: on ? "#e8eff6" : "#8e8e93", background: on ? "rgba(174,203,224,.12)" : "transparent", border: `1px solid ${on ? "rgba(174,203,224,.24)" : "transparent"}` }}>{l}</span>;
            })}
          </div>
        </div>

        {/* incident cards */}
        <div style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 20 }}>
          {shown.map((it) => {
            const S = ALERT_SEV[it.sev]; const status = st(it);
            return (
              <article key={it.id} className="nn-inc" style={{ position: "relative", borderRadius: 18, background: "linear-gradient(180deg,#121315,#0d0f11)", border: "1px solid #202024", overflow: "hidden", boxShadow: "0 16px 36px rgba(0,0,0,.4)", opacity: status === "resolved" ? 0.6 : 1 }}>
                <span style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 4, background: `linear-gradient(180deg,${S.color},${S.colorFade})`, boxShadow: `0 0 16px ${S.glow}` }} />
                <div style={{ display: "flex", alignItems: "flex-start", gap: 18, padding: "22px 26px 22px 28px" }}>
                  <span style={{ width: 46, height: 46, flex: "none", borderRadius: 13, background: "radial-gradient(circle at 50% 35%, #1a1d20, #101113)", border: `1px solid ${S.iconBd}`, display: "flex", alignItems: "center", justifyContent: "center", color: S.color, boxShadow: `0 0 20px ${S.iconGlow}` }}>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l9 16H3z" /><path d="M12 9v4M12 16v.5" /></svg>
                  </span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
                      <h4 style={{ margin: 0, fontSize: 17.5, fontWeight: 700, color: "#fff", letterSpacing: "-.01em" }}>{it.title}</h4>
                      <span style={{ display: "inline-flex", alignItems: "center", gap: 7, height: 25, padding: "0 11px", borderRadius: 200, fontSize: 11.5, fontWeight: 700, color: S.color, background: S.badgeBg, border: `1px solid ${S.badgeBd}` }}>
                        <span style={{ width: 6, height: 6, borderRadius: "50%", background: S.color, boxShadow: `0 0 7px ${S.glow}` }} />{S.severity}
                      </span>
                      {it.tool && (
                        <span style={{ display: "inline-flex", alignItems: "center", gap: 7, height: 25, padding: "0 11px", borderRadius: 200, background: "rgba(174,203,224,.06)", border: "1px solid #26282c", fontSize: 11.5, color: "rgba(207,213,220,.85)" }}>
                          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#aecbe0" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M9 2v6M15 2v6M7 8h10v3a5 5 0 0 1-10 0V8ZM12 16v6" /></svg>{it.tool}
                        </span>
                      )}
                      {status === "ack" && <span style={{ display: "inline-flex", alignItems: "center", height: 25, padding: "0 11px", borderRadius: 200, background: "rgba(255,255,255,.04)", border: "1px solid #2a2a2e", fontSize: 11.5, color: "rgba(207,207,207,.7)" }}>Reconhecido</span>}
                      {status === "resolved" && <span style={{ display: "inline-flex", alignItems: "center", gap: 6, height: 25, padding: "0 11px", borderRadius: 200, background: "rgba(95,208,166,.1)", border: "1px solid rgba(95,208,166,.3)", fontSize: 11.5, fontWeight: 600, color: "#7fe0bc" }}>Resolvido</span>}
                    </div>
                    <p style={{ margin: "10px 0 0", fontSize: 14, lineHeight: 1.5, color: "rgba(207,207,207,.7)", maxWidth: 780 }}>{it.desc}</p>
                    <div style={{ display: "flex", alignItems: "center", gap: 13, marginTop: 14 }}>
                      <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 13, fontWeight: 600, color: "#cfd6dc" }}>
                        <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#aecbe0", boxShadow: "0 0 7px rgba(174,203,224,.6)" }} />{it.esteira}
                      </span>
                      <span style={{ fontSize: 12.5, color: "rgba(207,207,207,.4)", fontFeatureSettings: "'tnum'" }}>{it.meta}</span>
                    </div>
                  </div>
                  {status !== "resolved" && (
                    <div style={{ display: "flex", flexDirection: "column", gap: 10, flex: "none", alignSelf: "center" }}>
                      {status === "open" && (
                        <button className="nn-ack" onClick={() => setState((s) => ({ ...s, [it.id]: "ack" }))} style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 8, width: 148, height: 40, borderRadius: 11, background: "rgba(255,255,255,.02)", border: "1px solid #2a2a2e", color: "#cfcfcf", fontSize: 13, fontWeight: 700, cursor: "pointer", fontFamily: "inherit" }}>
                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 8v4M12 16v.5" /><circle cx="12" cy="12" r="9" /></svg>Reconhecer
                        </button>
                      )}
                      <button className="nn-resolve" onClick={() => setState((s) => ({ ...s, [it.id]: "resolved" }))} style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 8, width: 148, height: 40, borderRadius: 11, background: "rgba(95,208,166,.07)", border: "1px solid rgba(95,208,166,.36)", color: "#7fe0bc", fontSize: 13, fontWeight: 700, cursor: "pointer", fontFamily: "inherit" }}>
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" /></svg>Resolver
                      </button>
                    </div>
                  )}
                </div>
              </article>
            );
          })}
          {shown.length === 0 && (
            <div style={{ textAlign: "center", padding: "60px 20px", color: "rgba(207,207,207,.5)", fontSize: 14 }}>Nenhum incidente neste filtro.</div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ModulePage, RunsModule, ApprovalsModule, AlertsModule });