// js/components/widgets/comissao-vendedora/CommissionHistory.jsx
// [Wave 35 v224.16 NUCLEAR EXTRACT 2026-05-24] Histórico tabela + footer info card
// Extract LITERAL ComissaoVendedora L207-247 (history conditional · footer ALWAYS visible)
//
// Props:
//   - history (array) — commission_payments rows {id, period_month, period_year,
//                       vendas_liquidas, comissao_brl, comissao_pct, atingiu_meta, status, paid_at}
//
// Deps lazy: window.fmtMoney + ZNX.lib['comissao-vendedora'].calcs.monthName
(function(){
  'use strict';
  function CommissionHistory(props){
    const fmtMoney = window.fmtMoney;
    const calcs = window.ZNX && window.ZNX.lib && window.ZNX.lib['comissao-vendedora'] && window.ZNX.lib['comissao-vendedora'].calcs;
    if(typeof fmtMoney !== 'function' || !calcs){
      console.error('[CommissionHistory] deps faltando: fmtMoney='+!!fmtMoney+', calcs='+!!calcs);
      return null;
    }
    const { history } = props;
    return (
      <React.Fragment>
        {/* Histórico [LITERAL L207-241 · conditional history.length>0] */}
        {history.length > 0 && (
          <div className="card" style={{padding:14}}>
            <div style={{fontSize:12,fontWeight:700,color:'#9CA3AF',textTransform:'uppercase',letterSpacing:1,marginBottom:10}}>
              📅 Histórico recente
            </div>
            <table style={{fontSize:13}}>
              <thead>
                <tr>
                  <th>Período</th>
                  <th style={{textAlign:'right'}}>Vendas líquidas</th>
                  <th style={{textAlign:'right'}}>Comissão</th>
                  <th style={{textAlign:'center'}}>Status</th>
                </tr>
              </thead>
              <tbody>
                {history.map(function(h){
                  return (
                    <tr key={h.id}>
                      <td style={{fontWeight:500}}>{calcs.monthName(h.period_month)}/{h.period_year}</td>
                      <td style={{textAlign:'right',fontVariantNumeric:'tabular-nums'}}>{fmtMoney(h.vendas_liquidas)}</td>
                      <td style={{textAlign:'right',fontVariantNumeric:'tabular-nums',fontWeight:700,color:h.atingiu_meta?'#16A34A':'#C8A951'}}>
                        {fmtMoney(h.comissao_brl)}
                        <div style={{fontSize:9,color:'#9CA3AF',fontWeight:400}}>{(h.comissao_pct*100).toFixed(1)}%</div>
                      </td>
                      <td style={{textAlign:'center'}}>
                        <span style={{padding:'3px 8px',borderRadius:6,fontSize:11,fontWeight:600,background:h.status==='pago'?'#DCFCE7':'#FFEDD5',color:h.status==='pago'?'#16A34A':'#EA580C'}}>
                          {h.status==='pago'?'✅ Pago':'⏳ Calculado'}
                        </span>
                        {h.paid_at && <div style={{fontSize:9,color:'#9CA3AF',marginTop:2}}>{new Date(h.paid_at).toLocaleDateString('pt-BR')}</div>}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}

        {/* Footer info [LITERAL L244-247 · ALWAYS visible] */}
        <div style={{padding:'10px 14px',background:'#F8FAFB',borderRadius:8,fontSize:11,color:'#6B7280',textAlign:'center',marginTop:10,lineHeight:1.6}}>
          💡 Comissão paga no <strong>5º dia útil do mês seguinte</strong>. Devoluções descontam.<br/>
          🎯 <strong>Bate meta ≥ 95%</strong> → 1% · Abaixo de 95% → 0.5% · Sem meta definida → 0.5% sempre
        </div>
      </React.Fragment>
    );
  }
  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets['comissao-vendedora'] = window.ZNX.widgets['comissao-vendedora'] || {};
  window.ZNX.widgets['comissao-vendedora'].CommissionHistory = CommissionHistory;
  // [Wave 35 marker v224.16] confirma CommissionHistory executado
  window.CommissionHistory_v224_16_wave35 = true;
})();