// js/components/widgets/dashboard/KpiCard.jsx
// [REFACTOR Wave 1 PR3 — 2026-05-14] Unificado: versão SUPERSET reconciliada de
// HistoricoVendedor.jsx L148-169 + RegioesAnalytics.jsx L117-134.
//
// 3 DIFFs resolvidos:
// - DIFF #1 (props divergem): `subtitle` ATIVO incluído (3 callers RegioesAnalytics).
//   `suffix` DEAD prop OMITIDO (0 callers em HistoricoVendedor) — cleanup natural.
// - DIFF #2 (fontSize): prop opcional `compactCurrency` → 20px se passado, 22px default.
//   HistoricoVendedor callers (isCurrency, sem compactCurrency) → 22px (zero regressão).
//   RegioesAnalytics caller L615 atualizado pra passar compactCurrency → 20px (preserva
//   layout R$ longos).
// - DIFF #3 (3-state sub-fragment): hasPrev → subtitle → "Primeiro mês com dados".
//
// pctColor function: validada IDÊNTICA byte-a-byte em ambos arquivos (FASE 1B). Hardcoded
// local no widget com hexes inline (green/blue/orange/red).
//
// Deps runtime globals: fmt (declarado em index.html, acessível via global scope).
// Callers: HistoricoVendedor.jsx (4x) + RegioesAnalytics.jsx (4x) via window.ZNX.widgets.KpiCard.
(function() {
  'use strict';

  // Helpers locais
  function fmtPct(v){return (v>=0?'+':'')+v.toFixed(1)+'%';}
  function pctColor(v){return v>=10?'#15803D':v>=0?'#2563EB':v>=-10?'#EA580C':'#DC2626';}

  function KpiCard({label,value,prev,isCurrency,subtitle,compactCurrency}){
    const v=Number(value)||0,p=Number(prev)||0;
    const hasPrev = p>0;
    const variation = hasPrev ? ((v-p)/p)*100 : 0;
    return(
      <div className="stat-card" style={{padding:'14px 18px'}}>
        <div className="stat-label" style={{fontSize:10,color:'#6B7280',fontWeight:600,marginBottom:4,letterSpacing:0.3,textTransform:'uppercase'}}>{label}</div>
        <div className="stat-value" style={{fontSize:compactCurrency?20:22,fontWeight:800,color:'#1B2A4A',lineHeight:1.1}}>
          {isCurrency?fmt(v):v}
        </div>
        {hasPrev?(
          <div style={{fontSize:11,marginTop:4,color:pctColor(variation),fontWeight:600}}>
            {fmtPct(variation)} vs mês anterior
          </div>
        ):subtitle?(
          <div style={{fontSize:11,marginTop:4,color:'#6B7280'}}>{subtitle}</div>
        ):v>0?(
          <div style={{fontSize:11,marginTop:4,color:'#6B7280',fontStyle:'italic'}}>
            Primeiro mês com dados
          </div>
        ):null}
      </div>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.KpiCard = KpiCard;
})();