// js/components/widgets/auditoria/StatsCards.jsx
// [Wave W1 PLAN 2026-05-18 v223.21] Extraído de AuditoriaAdmin.jsx L392-406 (4 cards topo).
// Props (3): stats, actionLabel, userName.
// Padrão: IIFE + window.ZNX.widgets.auditoria.StatsCards.
(function() {
  'use strict';

  function StatsCards({stats, actionLabel, userName}) {
    return (
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:12,marginBottom:18}}>
        <div className="stat-card"><div className="stat-label">Total no período</div><div className="stat-value">{stats.total}</div></div>
        <div className="stat-card"><div className="stat-label">⏱️ Últimas 24h</div><div className="stat-value" style={{color:'#2563EB'}}>{stats.last24h}</div></div>
        <div className="stat-card">
          <div className="stat-label">🔝 Ação mais comum</div>
          <div className="stat-value" style={{fontSize:14}}>{stats.topAction ? actionLabel(stats.topAction[0]) : '—'}</div>
          <div style={{fontSize:11,color:'#9CA3AF',marginTop:2}}>{stats.topAction ? `${stats.topAction[1]}× ações` : ''}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label">👤 Actor mais ativo</div>
          <div className="stat-value" style={{fontSize:14}}>{stats.topActor ? userName(stats.topActor[0]) : '—'}</div>
          <div style={{fontSize:11,color:'#9CA3AF',marginTop:2}}>{stats.topActor ? `${stats.topActor[1]}× ações` : ''}</div>
        </div>
      </div>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.auditoria = window.ZNX.widgets.auditoria || {};
  window.ZNX.widgets.auditoria.StatsCards = StatsCards;
})();