// js/components/widgets/orcamentos-cancel-insights/CancelKPIs.jsx
// [Wave 37 v224.18 NUCLEAR EXTRACT 2026-05-24] 5 KPI stat cards · PRIVACY: só admin (v223.32)
// Extract LITERAL OrcamentosCancelInsights L152-185
//
// Props:
//   - data (obj) — totalRsMes, cancelMes, totalRs30d, cancel30d, totalRsCancelado,
//                  totalCancelados, taxaCancelamento, totalQuotes, ticketMedioCancelado
//   - isVendedor (bool) — privacy filter
//
// Deps lazy: window.fmt, ZNX.lib['orcamentos-cancel-insights'].calcs.TAXA_ALERTA
(function(){
  'use strict';
  function CancelKPIs(props){
    const fmt = window.fmt;
    const calcs = window.ZNX && window.ZNX.lib && window.ZNX.lib['orcamentos-cancel-insights'] && window.ZNX.lib['orcamentos-cancel-insights'].calcs;
    if(typeof fmt !== 'function' || !calcs){
      console.error('[CancelKPIs] deps faltando: fmt='+!!fmt+', calcs='+!!calcs);
      return null;
    }
    const { data, isVendedor } = props;
    // [v223.32 PRIVACY] esconde pra vendedora — ZERO leak R$
    if(isVendedor) return null;
    const TAXA_ALERTA = calcs.TAXA_ALERTA;
    return (
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 12 }}>
        <div className="stat-card" style={{ borderLeft: '4px solid #DC2626' }}>
          <div className="stat-label">Cancelado este mês</div>
          <div className="stat-value" style={{ color: '#DC2626' }}>{fmt(data.totalRsMes)}</div>
          <div style={{ fontSize: 11, color: '#9CA3AF' }}>{data.cancelMes} orçamento{data.cancelMes === 1 ? '' : 's'}</div>
        </div>
        <div className="stat-card" style={{ borderLeft: '4px solid #EA580C' }}>
          <div className="stat-label">Últimos 30 dias</div>
          <div className="stat-value" style={{ color: '#EA580C' }}>{fmt(data.totalRs30d)}</div>
          <div style={{ fontSize: 11, color: '#9CA3AF' }}>{data.cancel30d} orçamento{data.cancel30d === 1 ? '' : 's'}</div>
        </div>
        <div className="stat-card" style={{ borderLeft: '4px solid #6B7280' }}>
          <div className="stat-label">Total acumulado</div>
          <div className="stat-value" style={{ color: '#6B7280' }}>{fmt(data.totalRsCancelado)}</div>
          <div style={{ fontSize: 11, color: '#9CA3AF' }}>{data.totalCancelados} orçamentos</div>
        </div>
        <div className="stat-card" style={{ borderLeft: '4px solid ' + (data.taxaCancelamento > TAXA_ALERTA ? '#DC2626' : '#16A34A') }}>
          <div className="stat-label">Taxa de cancelamento</div>
          <div className="stat-value" style={{ color: data.taxaCancelamento > TAXA_ALERTA ? '#DC2626' : '#16A34A' }}>
            {data.taxaCancelamento.toFixed(1)}%
          </div>
          <div style={{ fontSize: 11, color: '#9CA3AF' }}>
            {data.totalCancelados} de {data.totalQuotes} orçamentos
          </div>
        </div>
        <div className="stat-card" style={{ borderLeft: '4px solid #2563EB' }}>
          <div className="stat-label">Ticket médio cancelado</div>
          <div className="stat-value" style={{ color: '#2563EB' }}>{fmt(data.ticketMedioCancelado)}</div>
          <div style={{ fontSize: 11, color: '#9CA3AF' }}>média por orçamento</div>
        </div>
      </div>
    );
  }
  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets['orcamentos-cancel-insights'] = window.ZNX.widgets['orcamentos-cancel-insights'] || {};
  window.ZNX.widgets['orcamentos-cancel-insights'].CancelKPIs = CancelKPIs;
  // [Wave 37 marker v224.18] confirma CancelKPIs executado
  window.CancelKPIs_v224_18_wave37 = true;
})();