// js/components/widgets/orcamentos-cancel-insights/CancelRanking.jsx
// [Wave 37 v224.18 NUCLEAR EXTRACT 2026-05-24] Ranking vendedoras tabela · PRIVACY: vendedora vê SÓ nomes+posições
// Extract LITERAL OrcamentosCancelInsights L225-295 (sempre visible · privacy filter INTERNO)
//
// Props:
//   - data (obj) — ranking array
//   - isVendedor (bool) — privacy filter (vendedora vê só # e nome · sem R$/qty/%)
//   - TAXA_ALERTA (number) — pra alerta vermelho > 30%
//
// Deps lazy: window.fmt
(function(){
  'use strict';
  function CancelRanking(props){
    const fmt = window.fmt;
    if(typeof fmt !== 'function'){
      console.error('[CancelRanking] fmt global ausente');
      return null;
    }
    const { data, isVendedor, TAXA_ALERTA } = props;
    return (
      <div className="card">
        <div style={{ fontSize: 14, fontWeight: 700, color: '#1B2A4A', marginBottom: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span>👥 Ranking por vendedora</span>
          {!isVendedor && (
            <span style={{ fontSize: 11, color: '#9CA3AF', fontWeight: 500 }}>
              ⚠️ Alerta se taxa &gt; {TAXA_ALERTA}%
            </span>
          )}
        </div>
        {data.ranking.length === 0 ? (
          <div style={{ padding: 20, textAlign: 'center', color: '#9CA3AF', fontSize: 13 }}>
            Sem cancelamentos por vendedora.
          </div>
        ) : (
          <table>
            <thead>
              <tr>
                <th>#</th>
                <th>Vendedora</th>
                {!isVendedor && (
                  <React.Fragment>
                    <th style={{ textAlign: 'right' }}>Cancelados</th>
                    <th style={{ textAlign: 'right' }}>R$ Perdido</th>
                    <th style={{ textAlign: 'right' }}>Ticket Médio</th>
                    <th style={{ textAlign: 'right' }}>% Cancel</th>
                  </React.Fragment>
                )}
              </tr>
            </thead>
            <tbody>
              {data.ranking.map(function(r, i){
                const alerta = r.cancelPct > TAXA_ALERTA;
                return (
                  <tr key={r.seller}>
                    <td style={{ color: '#9CA3AF', fontSize: 11 }}>#{i + 1}</td>
                    <td style={{ fontWeight: 500 }}>
                      {/* [v223.32 PRIVACY] Esconder warning emoji pra vendedora — taxa% é número sensível */}
                      {!isVendedor && alerta && <span style={{ marginRight: 6 }} title={'Taxa de cancelamento alta ('+r.cancelPct.toFixed(1)+'%) — investigar'}>⚠️</span>}
                      {r.seller}
                    </td>
                    {!isVendedor && (
                      <React.Fragment>
                        <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>
                          <strong style={{ color: '#DC2626' }}>{r.cancel}</strong>
                          <span style={{ color: '#9CA3AF', fontSize: 11 }}> /{r.total}</span>
                        </td>
                        <td style={{ textAlign: 'right', fontWeight: 600, color: '#DC2626', fontVariantNumeric: 'tabular-nums' }}>
                          {fmt(r.cancelRs)}
                        </td>
                        <td style={{ textAlign: 'right', color: '#6B7280', fontVariantNumeric: 'tabular-nums' }}>
                          {fmt(r.ticketMedio)}
                        </td>
                        <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>
                          <span style={{
                            padding: '2px 8px', borderRadius: 12, fontSize: 11, fontWeight: 700,
                            background: alerta ? '#FEE2E2' : '#F3F4F6',
                            color: alerta ? '#DC2626' : '#6B7280',
                          }}>
                            {r.cancelPct.toFixed(1)}%
                          </span>
                        </td>
                      </React.Fragment>
                    )}
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </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'].CancelRanking = CancelRanking;
  // [Wave 37 marker v224.18] confirma CancelRanking executado
  window.CancelRanking_v224_18_wave37 = true;
})();