// js/components/widgets/orcamentos-cancel-insights/CancelTopMotivos.jsx
// [Wave 37 v224.18 NUCLEAR EXTRACT 2026-05-24] Top motivos bar chart · PRIVACY: só admin (v223.32)
// Extract LITERAL OrcamentosCancelInsights L187-223
//
// Props:
//   - data (obj) — topMotivos array + maxMotivoQty
//   - isVendedor (bool) — privacy filter
//
// Deps lazy: window.fmt
(function(){
  'use strict';
  function CancelTopMotivos(props){
    const fmt = window.fmt;
    if(typeof fmt !== 'function'){
      console.error('[CancelTopMotivos] fmt global ausente');
      return null;
    }
    const { data, isVendedor } = props;
    // [v223.32 PRIVACY] esconde pra vendedora
    if(isVendedor) return null;
    return (
      <div className="card">
        <div style={{ fontSize: 14, fontWeight: 700, color: '#1B2A4A', marginBottom: 14 }}>
          📋 Top motivos de cancelamento
        </div>
        {data.topMotivos.length === 0 ? (
          <div style={{ padding: 20, textAlign: 'center', color: '#9CA3AF', fontSize: 13 }}>
            Nenhum cancelamento registrado.
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {data.topMotivos.map(function(m, i){
              return (
                <div key={m.motivo}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, marginBottom: 4 }}>
                    <div style={{ color: '#1B2A4A', fontWeight: 500 }}>
                      <strong style={{ color: '#9CA3AF', fontSize: 11, marginRight: 6 }}>#{i + 1}</strong>
                      {m.motivo}
                    </div>
                    <div style={{ color: '#6B7280', fontSize: 12, fontVariantNumeric: 'tabular-nums' }}>
                      <strong style={{ color: '#DC2626' }}>{m.qty}</strong> · {fmt(m.total)} · {m.pct.toFixed(1)}%
                    </div>
                  </div>
                  <div style={{ height: 6, background: '#F3F4F6', borderRadius: 4, overflow: 'hidden' }}>
                    <div style={{
                      width: ((m.qty / data.maxMotivoQty) * 100) + '%',
                      height: '100%',
                      background: i === 0 ? '#DC2626' : i === 1 ? '#EA580C' : i === 2 ? '#F59E0B' : '#9CA3AF',
                      transition: 'width .3s',
                    }} />
                  </div>
                </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'].CancelTopMotivos = CancelTopMotivos;
  // [Wave 37 marker v224.18] confirma CancelTopMotivos executado
  window.CancelTopMotivos_v224_18_wave37 = true;
})();