// js/components/widgets/pagamentos/PagamentosTable.jsx
// [Wave 34 v224.15 NUCLEAR EXTRACT 2026-05-24] Tabela pagamentos + actions togglePago/edit/remove
// Extract LITERAL Pagamentos.jsx L198-238
//
// Props:
//   - pagamentos (array) — filtered (já filtrado pelo useMemo no main)
//   - onToggle(p) — handler togglePago RPC (preservado LITERAL no main)
//   - onEdit(p) — handler openEdit
//   - onRemove(id) — handler remove RPC (preservado LITERAL no main)
//   - togglePagoInflightSet (Set) — togglePagoInflightRef.current pra disabled per-row
//
// Deps lazy: window.fmt, window.fmtDate, window.today, window.PAGAMENTO_COLORS
(function(){
  'use strict';
  function PagamentosTable(props){
    const fmt = window.fmt;
    const fmtDate = window.fmtDate;
    const today = window.today;
    const PAGAMENTO_COLORS = window.PAGAMENTO_COLORS || {};
    const { pagamentos, onToggle, onEdit, onRemove, togglePagoInflightSet } = props;
    return (
      <div className="card" style={{padding:0}}>
        <table>
          <thead><tr>
            <th>Data</th><th>Destinatário</th><th>Tipo</th><th>Referência</th>
            <th style={{textAlign:'right'}}>Valor</th><th>Status</th><th>Ações</th>
          </tr></thead>
          <tbody>
            {pagamentos.length===0 && <tr><td colSpan={7} style={{textAlign:'center',color:'#6B7280',padding:20}}>Nenhum pagamento encontrado</td></tr>}
            {[...pagamentos].sort(function(a,b){return b.date>a.date?1:-1;}).map(function(p){
              const color = PAGAMENTO_COLORS[p.type] || '#607d8b';
              const vencido = p.status==='Pendente' && p.date < today();
              const inflightHas = togglePagoInflightSet && togglePagoInflightSet.has && togglePagoInflightSet.has(p.id);
              return (
                <tr key={p.id} style={{opacity:p.status==='Cancelado'?0.45:1}}>
                  <td style={{fontSize:12}}>{fmtDate(p.date)}</td>
                  <td>
                    <div style={{fontSize:13,fontWeight:p.recipient?500:400,color:p.recipient?'#F5F0E8':'#555'}}>
                      {p.recipient||'— sem destinatário —'}
                    </div>
                    {p.notes&&<div style={{fontSize:11,color:'#9CA3AF'}}>{p.notes}</div>}
                  </td>
                  <td><span style={{fontSize:11,fontWeight:600,color:color,background:color+'22',padding:'2px 8px',borderRadius:12}}>{p.type}</span></td>
                  <td className="dim" style={{fontSize:12}}>{p.reference||'—'}</td>
                  <td style={{textAlign:'right',fontWeight:600,color:vencido?'#DC2626':'#F5F0E8'}}>{fmt(p.value)}</td>
                  <td>
                    {p.status==='Pago'&&<span className="badge badge-green">Pago</span>}
                    {p.status==='Pendente'&&<span className={vencido?'badge badge-red':'badge badge-yellow'}>{vencido?'Vencido':'Pendente'}</span>}
                    {p.status==='Cancelado'&&<span className="badge badge-gray">Cancelado</span>}
                  </td>
                  <td>
                    <div style={{display:'flex',gap:4}}>
                      {p.status!=='Cancelado'&&<button className="btn-gold btn-sm" disabled={inflightHas} onClick={function(){onToggle(p);}}>{inflightHas?'…':(p.status==='Pago'?'↩':'✓')}</button>}
                      <button className="btn-outline btn-sm" onClick={function(){onEdit(p);}}>✏</button>
                      <button className="btn-danger btn-sm" onClick={function(){onRemove(p.id);}}>✕</button>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    );
  }
  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.pagamentos = window.ZNX.widgets.pagamentos || {};
  window.ZNX.widgets.pagamentos.PagamentosTable = PagamentosTable;
  // [Wave 34 marker v224.15] confirma PagamentosTable executado
  window.PagamentosTable_v224_15_wave34 = true;
})();