// js/components/widgets/orcamento-pipeline/PipelineKPIs.jsx
// [Wave 38 v224.19 NUCLEAR EXTRACT 2026-05-24] 4 KPI stat cards
// Extract LITERAL OrcamentoPipeline L131-152
//
// Props:
//   - data (obj) — totalAtivos, totalConvertidos, valorTotalFunil, valorConvertido, tempoMedioH
//
// Deps lazy: window.fmtMoney + ZNX.lib['orcamento-pipeline'].calcs.formatTempoH
(function(){
  'use strict';
  function PipelineKPIs(props){
    const fmtMoney = window.fmtMoney;
    const calcs = window.ZNX && window.ZNX.lib && window.ZNX.lib['orcamento-pipeline'] && window.ZNX.lib['orcamento-pipeline'].calcs;
    if(typeof fmtMoney !== 'function' || !calcs){
      console.error('[PipelineKPIs] deps faltando: fmtMoney='+!!fmtMoney+', calcs='+!!calcs);
      return null;
    }
    const { data } = props;
    const formatTempoH = calcs.formatTempoH;
    return (
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 12, marginBottom: 18 }}>
        <div className="stat-card" style={{ borderLeft: '4px solid #2563EB' }}>
          <div className="stat-label">Em andamento</div>
          <div className="stat-value" style={{ color: '#2563EB' }}>{data.totalAtivos - data.totalConvertidos}</div>
          <div style={{ fontSize: 11, color: '#9CA3AF' }}>orçamentos no funil</div>
        </div>
        <div className="stat-card" style={{ borderLeft: '4px solid #16A34A' }}>
          <div className="stat-label">Convertidos (30d)</div>
          <div className="stat-value" style={{ color: '#16A34A' }}>{data.totalConvertidos}</div>
          <div style={{ fontSize: 11, color: '#9CA3AF' }}>{fmtMoney(data.valorConvertido)} fechado</div>
        </div>
        <div className="stat-card" style={{ borderLeft: '4px solid #EA580C' }}>
          <div className="stat-label">Valor no funil</div>
          <div className="stat-value" style={{ color: '#EA580C' }}>{fmtMoney(data.valorTotalFunil - data.valorConvertido)}</div>
          <div style={{ fontSize: 11, color: '#9CA3AF' }}>potencial pendente</div>
        </div>
        <div className="stat-card" style={{ borderLeft: '4px solid #6B7280' }}>
          <div className="stat-label">Tempo médio</div>
          <div className="stat-value" style={{ color: '#1B2A4A' }}>{data.tempoMedioH > 0 ? formatTempoH(data.tempoMedioH) : '—'}</div>
          <div style={{ fontSize: 11, color: '#9CA3AF' }}>orçamento → venda</div>
        </div>
      </div>
    );
  }
  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets['orcamento-pipeline'] = window.ZNX.widgets['orcamento-pipeline'] || {};
  window.ZNX.widgets['orcamento-pipeline'].PipelineKPIs = PipelineKPIs;
  // [Wave 38 marker v224.19] confirma PipelineKPIs executado
  window.PipelineKPIs_v224_19_wave38 = true;
})();