// js/components/widgets/gastos/LancamentosTab.jsx
// [Wave Gastos FULL 2026-05-18 v223.22] Extraído de Gastos.jsx L620-719 (tab Lançamentos + cards + tabela).
// Props (4 objetos agregados): stats, data, actions, helpers.
// Padrão: IIFE + window.ZNX.widgets.gastos.LancamentosTab.
(function() {
  'use strict';

  function LancamentosTab({stats, data, actions, helpers}) {
    const {totalMes, totalPago, totalPendente, totalFolha} = stats;
    const {filtered, paymentsByGasto, isAdmin, CAT_COLORS} = data;
    const {onPay, onRevert, onReceipt, onEdit, onRemove} = actions;
    const {fmt, fmtDate, today} = helpers;

    return (
      <div>
        {/* Cards resumo */}
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:16,marginBottom:24}}>
          {[
            {label:'Total do Período',val:totalMes,color:'#DC2626',icon:'💸'},
            {label:'Pagos',val:totalPago,color:'#16A34A',icon:'✓'},
            {label:'A Pagar',val:totalPendente,color:'#EA580C',icon:'⏳'},
            {label:'Folha',val:totalFolha,color:'#7C3AED',icon:'👥'}
          ].map(c=>(
            <div key={c.label} className="stat-card">
              <div style={{fontSize:22,marginBottom:4}}>{c.icon}</div>
              <div className="stat-value" style={{color:c.color,fontSize:22}}>{fmt(c.val)}</div>
              <div className="stat-label">{c.label}</div>
            </div>
          ))}
        </div>

        {/* Tabela */}
        <div className="card" style={{padding:0,overflowX:'auto'}}>
          <table>
            <thead><tr>
              <th>Data</th>
              <th>Descrição</th>
              <th>Beneficiário</th>
              <th>Categoria</th>
              <th>Método</th>
              <th style={{textAlign:'right'}}>Valor</th>
              <th>Status</th>
              <th>Ações</th>
            </tr></thead>
            <tbody>
              {filtered.length===0 && <tr><td colSpan={8} style={{textAlign:'center',color:'#6B7280',padding:30}}>Nenhum gasto no período/filtros</td></tr>}
              {[...filtered].sort((a,b)=>(b.date||'').localeCompare(a.date||'')).map(g=>{
                const color = CAT_COLORS[g.category]||'#607d8b';
                const vencido = (g.status==='Pendente'||g.status==='Parcial') && g.date < today();
                const totalVal = Number(g.value||0);
                const paidVal = Number(g.paid_value||0);
                const pctPaid = totalVal>0 ? Math.min(100, Math.round((paidVal/totalVal)*100)) : 0;
                const pays = (paymentsByGasto[g.id]||[]).filter(p=>!p.deleted_at);
                const lastReceipt = pays[0]?.receipt_number;
                return(
                  <tr key={g.id} style={{opacity:g.status==='Cancelado'?0.45:1}}>
                    <td style={{fontSize:12,whiteSpace:'nowrap'}}>{fmtDate(g.date)}</td>
                    <td>
                      <div style={{fontSize:13,fontWeight:500}}>{g.description}</div>
                      {g.notes && <div style={{fontSize:11,color:'#9CA3AF'}}>{g.notes}</div>}
                      {pays.length>0 && <div style={{fontSize:10,color:'#16A34A',fontWeight:700}}>📄 {pays.length} recibo{pays.length>1?'s':''} · último {lastReceipt}</div>}
                    </td>
                    <td style={{fontSize:12}}>{g.beneficiary_name || <span style={{color:'#9CA3AF'}}>—</span>}</td>
                    <td><span style={{fontSize:11,fontWeight:600,color,background:color+'22',padding:'2px 8px',borderRadius:12}}>{g.category}</span></td>
                    <td style={{fontSize:11}}>{g.payment_method || g.paymentMethod || <span style={{color:'#9CA3AF'}}>—</span>}</td>
                    <td style={{textAlign:'right',fontWeight:600,minWidth:140}}>
                      {(g.status==='Parcial' || (paidVal>0 && paidVal<totalVal)) ? (
                        <>
                          <div style={{color:vencido?'#DC2626':'#1F2937',fontSize:12}}>{fmt(paidVal)} <span style={{color:'#9CA3AF',fontWeight:400}}>/ {fmt(totalVal)}</span></div>
                          <div style={{background:'#E5E7EB',borderRadius:3,height:5,marginTop:3,overflow:'hidden'}}>
                            <div style={{height:'100%',background:'linear-gradient(90deg,#2563EB,#3B82F6)',width:pctPaid+'%',borderRadius:3,transition:'width .3s'}}/>
                          </div>
                          <div style={{fontSize:10,color:'#6B7280',marginTop:2,textAlign:'right'}}>{pctPaid}% pago</div>
                        </>
                      ):(
                        <div style={{color:vencido?'#DC2626':'inherit'}}>{fmt(totalVal)}</div>
                      )}
                    </td>
                    <td>
                      {g.status==='Pago' && <span className="badge badge-green">✓ Pago</span>}
                      {g.status==='Parcial' && <span style={{padding:'2px 8px',borderRadius:10,fontSize:11,fontWeight:700,background:'#DBEAFE',color:'#1E40AF'}}>Parcial {pctPaid}%</span>}
                      {g.status==='Pendente' && <span className={vencido?'badge badge-red':'badge badge-yellow'}>{vencido?'Vencido':'Pendente'}</span>}
                      {g.status==='Cancelado' && <span className="badge badge-gray">Cancelado</span>}
                    </td>
                    <td>
                      <div style={{display:'flex',gap:4,flexWrap:'wrap'}}>
                        {/* Pagar (parcial/total) — abre modal */}
                        {isAdmin && g.status!=='Cancelado' && g.status!=='Pago' && (
                          <button className="btn-gold btn-sm" onClick={()=>onPay(g)} title="Pagar (total ou parcial)">💰</button>
                        )}
                        {/* Reverter pagamento — só admin, gastos com payments */}
                        {isAdmin && (g.status==='Pago'||g.status==='Parcial') && pays.length>0 && (
                          <button className="btn-outline btn-sm" onClick={()=>onRevert(g)} title="Reverter pagamento" style={{background:'#FFF7ED',color:'#EA580C',border:'1px solid #FED7AA'}}>↩</button>
                        )}
                        {/* Recibo — gera/lista */}
                        {pays.length>0 ? (
                          <button className="btn-outline btn-sm" onClick={()=>onReceipt(g)} title={pays.length>1?`Ver ${pays.length} recibos`:'Imprimir/baixar recibo'} style={{background:'#EFF6FF',color:'#2563EB',border:'1px solid #BFDBFE'}}>🧾{pays.length>1?<sup style={{fontSize:8,marginLeft:2}}>{pays.length}</sup>:''}</button>
                        ) : (
                          <button className="btn-outline btn-sm" onClick={()=>toast('💡 Registre um pagamento primeiro (💰) — o recibo é gerado automaticamente.','info')} title="Pague primeiro pra gerar recibo" style={{background:'#F3F4F6',color:'#9CA3AF',border:'1px solid #E5E7EB',cursor:'help'}}>🧾</button>
                        )}
                        {isAdmin && <button className="btn-outline btn-sm" onClick={()=>onEdit(g)} title="Editar">✏</button>}
                        {isAdmin && g.status!=='Cancelado' && <button className="btn-danger btn-sm" onClick={()=>onRemove(g.id)} title="Cancelar">✕</button>}
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.gastos = window.ZNX.widgets.gastos || {};
  window.ZNX.widgets.gastos.LancamentosTab = LancamentosTab;
})();