// js/components/widgets/comissao-admin/CommissionAdminTable.jsx
// [Wave 36 v224.17 NUCLEAR EXTRACT 2026-05-24] Tabela 9 colunas + 3 states (loading/error/empty)
// Extract LITERAL ComissaoAdmin L205-275
//
// Props:
//   - merged (array) — merged provisorio+persisted (sorted desc por comissao)
//   - loading (bool)
//   - error (string|null)
//   - onMarkPaid(commissionId, sellerName, valor) — handler markPaid (preservado LITERAL no main)
//   - paying (bool) — _payingRef.current pra disabled botão
//
// Deps lazy: window.fmtMoney + ZNX.lib['comissao-admin'].calcs.metaBadgeColors
(function(){
  'use strict';
  function CommissionAdminTable(props){
    const fmtMoney = window.fmtMoney;
    const calcs = window.ZNX && window.ZNX.lib && window.ZNX.lib['comissao-admin'] && window.ZNX.lib['comissao-admin'].calcs;
    if(typeof fmtMoney !== 'function' || !calcs){
      console.error('[CommissionAdminTable] deps faltando: fmtMoney='+!!fmtMoney+', calcs='+!!calcs);
      return null;
    }
    const { merged, loading, error, onMarkPaid, paying } = props;
    return (
      <div className="card">
        {loading ? (
          <div style={{padding:30,textAlign:'center',color:'#9CA3AF'}}>Carregando...</div>
        ) : error ? (
          <div style={{padding:14,background:'#FEE2E2',color:'#DC2626',borderRadius:8,fontSize:13}}>⚠️ {error}</div>
        ) : merged.length === 0 ? (
          <div style={{padding:30,textAlign:'center',color:'#9CA3AF'}}>Nenhuma vendedora ativa.</div>
        ) : (
          <table>
            <thead>
              <tr>
                <th>#</th>
                <th>Vendedora</th>
                <th style={{textAlign:'right'}}>Meta</th>
                <th style={{textAlign:'right'}}>Vendas</th>
                <th style={{textAlign:'right'}}>Devoluções</th>
                <th style={{textAlign:'right'}}>Líquido</th>
                <th style={{textAlign:'center'}}>% Meta</th>
                <th style={{textAlign:'right'}}>Comissão</th>
                <th style={{textAlign:'center'}}>Status</th>
              </tr>
            </thead>
            <tbody>
              {merged.map(function(m, i){
                const persistedComissao = m.persisted && m.persisted.comissao_brl;
                const showComissao = persistedComissao != null ? Number(persistedComissao) : Number(m.comissao_brl || 0);
                const badgeColors = calcs.metaBadgeColors(m.pct_meta, m.atingiu_meta);
                return (
                  <tr key={m.seller_name}>
                    <td style={{color:'#9CA3AF',fontSize:11}}>#{i+1}</td>
                    <td style={{fontWeight:500}}>
                      {m.atingiu_meta ? '🏆' : ''} {m.seller_name}
                    </td>
                    <td style={{textAlign:'right',fontVariantNumeric:'tabular-nums',color:'#6B7280'}}>{fmtMoney(m.meta)}</td>
                    <td style={{textAlign:'right',fontVariantNumeric:'tabular-nums'}}>
                      <div>{fmtMoney(m.vendas_brutas)}</div>
                      <div style={{fontSize:10,color:'#9CA3AF'}}>{m.vendas_count}x</div>
                    </td>
                    <td style={{textAlign:'right',fontVariantNumeric:'tabular-nums',color:Number(m.devolucoes_total)>0?'#EA580C':'#9CA3AF'}}>
                      {Number(m.devolucoes_total)>0 ? '−' + fmtMoney(m.devolucoes_total) : '—'}
                    </td>
                    <td style={{textAlign:'right',fontWeight:600,color:'#2563EB',fontVariantNumeric:'tabular-nums'}}>{fmtMoney(m.vendas_liquidas)}</td>
                    <td style={{textAlign:'center'}}>
                      <span style={{padding:'2px 8px',borderRadius:10,fontSize:11,fontWeight:700,background:badgeColors.bg,color:badgeColors.color}}>
                        {Number(m.pct_meta).toFixed(1)}%
                      </span>
                    </td>
                    <td style={{textAlign:'right',fontWeight:700,color:m.atingiu_meta?'#16A34A':'#C8A951',fontVariantNumeric:'tabular-nums'}}>
                      {fmtMoney(showComissao)}
                      <div style={{fontSize:9,color:'#9CA3AF',fontWeight:400}}>{(Number(m.comissao_pct)*100).toFixed(1)}%</div>
                    </td>
                    <td style={{textAlign:'center'}}>
                      {m.status === 'pago' ? (
                        <div>
                          <span style={{padding:'3px 8px',borderRadius:6,fontSize:11,fontWeight:600,background:'#DCFCE7',color:'#16A34A'}}>✅ Pago</span>
                          {m.paid_at && <div style={{fontSize:9,color:'#9CA3AF',marginTop:2}}>{new Date(m.paid_at).toLocaleDateString('pt-BR')}</div>}
                        </div>
                      ) : m.status === 'calculado' ? (
                        <button className="btn-gold btn-sm" disabled={paying} onClick={function(){onMarkPaid(m.db_id, m.seller_name, persistedComissao);}} style={{fontSize:11,padding:'3px 8px',opacity:paying?0.6:1,cursor:paying?'not-allowed':'pointer'}}>
                          {paying ? '⏳' : '💵 Pagar'}
                        </button>
                      ) : (
                        <span style={{padding:'3px 8px',borderRadius:6,fontSize:11,fontWeight:600,background:'#FFEDD5',color:'#EA580C'}}>⏳ Provisório</span>
                      )}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </div>
    );
  }
  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets['comissao-admin'] = window.ZNX.widgets['comissao-admin'] || {};
  window.ZNX.widgets['comissao-admin'].CommissionAdminTable = CommissionAdminTable;
  // [Wave 36 marker v224.17] confirma CommissionAdminTable executado
  window.CommissionAdminTable_v224_17_wave36 = true;
})();