// js/components/common/CancelApprovalModal.jsx
// Modal de aprovação de solicitações de cancelamento (admin).
// Movido de index.html em Fase 5 do refactor (2026-04-29): L9968-L10044
// Deps runtime: fmt (window.fmt), itemNet (window.itemNet), nid (window.nid — lib/nid.js)
(function() {
  'use strict';

  // CÓPIA EXATA do index.html L9968-L10044
  function CancelApprovalModal({requests,products,clients,onApprove,onDeny,onClose,inFlightIds}){
    const pending=requests.filter(r=>r.status==='pending');
    // [ONDA-A #9 2026-05-11] regra_loading_state_obrigatorio — disabled enquanto RPC in-flight
    const _inFlight=Array.isArray(inFlightIds)?inFlightIds:[];
    const _isBusy=(id)=>_inFlight.indexOf(id)>=0;
    return(
      <div className="modal-overlay" onClick={e=>{if(e.target===e.currentTarget)onClose()}}>
        <div className="modal modal-lg">
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:20}}>
            <div>
              <div style={{fontSize:18,fontWeight:700}}>Solicitações de Cancelamento</div>
              <div style={{fontSize:12,color:'#9CA3AF',marginTop:2}}>{pending.length} solicitaç{pending.length===1?'ão':'ões'} pendente{pending.length!==1?'s':''}</div>
            </div>
            <button onClick={onClose} style={{background:'none',color:'#9CA3AF',fontSize:20,padding:'0 4px'}}>×</button>
          </div>
          {pending.length===0?(
            <div style={{textAlign:'center',padding:'40px 0',color:'#6B7280'}}>
              <div style={{fontSize:32,marginBottom:8}}>✓</div>
              <div>Nenhuma solicitação pendente</div>
            </div>
          ):(
            <div style={{display:'flex',flexDirection:'column',gap:16}}>
              {pending.map(req=>{
                const sale=req.sale||{};
                const elapsed=Math.floor((Date.now()-new Date(req.requestedAt).getTime())/60000);
                return(
                  <div key={req.id} style={{background:'#F8FAFB',border:'1px solid #E4E7EC',borderRadius:8,padding:16}}>
                    <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:12}}>
                      <div>
                        <div style={{fontWeight:600,fontSize:15,marginBottom:3}}>
                          <span className="gold">{sale.number||'—'}</span>
                          <span style={{color:'#9CA3AF',fontWeight:400,fontSize:13,marginLeft:10}}>{req.clientName}</span>
                        </div>
                        <div style={{fontSize:12,color:'#9CA3AF'}}>
                          Vendedor: <span style={{color:'#374151'}}>{req.requestedBy}</span>
                          &nbsp;·&nbsp;{new Date(req.requestedAt).toLocaleString('pt-BR',{day:'2-digit',month:'2-digit',hour:'2-digit',minute:'2-digit'})}
                          {elapsed>=5&&<span style={{marginLeft:8,color:'#EA580C',fontWeight:600}}>⚠ {elapsed} min atrás</span>}
                        </div>
                        {req.reason&&<div style={{fontSize:12,color:'#9CA3AF',marginTop:4}}>Motivo: <span style={{color:'#374151'}}>{req.reason}</span></div>}
                      </div>
                      <div style={{textAlign:'right'}}>
                        <div style={{fontSize:11,color:'#9CA3AF'}}>Total da venda</div>
                        <div style={{fontSize:18,fontWeight:700,color:'#2563EB'}}>{fmt(req.saleTotal||0)}</div>
                      </div>
                    </div>
                    <table style={{marginBottom:12}}>
                      <thead><tr>
                        <th style={{padding:'5px 8px'}}>Produto</th>
                        <th style={{padding:'5px 8px',textAlign:'right'}}>Qtd</th>
                        <th style={{padding:'5px 8px',textAlign:'right'}}>Unitário</th>
                        <th style={{padding:'5px 8px',textAlign:'right'}}>Total</th>
                      </tr></thead>
                      <tbody>
                        {(req.items||[]).map((it,idx)=>{
                          const p=products.find(x=>nid(x.id,it.productId));
                          return(
                            <tr key={idx}>
                              <td style={{padding:'5px 8px',fontSize:13}}>{p?.name||it.productId}</td>
                              <td style={{padding:'5px 8px',textAlign:'right'}}>{it.qty}</td>
                              <td style={{padding:'5px 8px',textAlign:'right'}}>{fmt(itemNet(it))}</td>
                              <td style={{padding:'5px 8px',textAlign:'right',color:'#2563EB'}}>{fmt(itemNet(it)*it.qty)}</td>
                            </tr>
                          );
                        })}
                      </tbody>
                    </table>
                    <div style={{display:'flex',gap:8,justifyContent:'flex-end'}}>
                      <button className="btn-outline btn-sm" disabled={_isBusy(req.id)} style={{opacity:_isBusy(req.id)?0.6:1,cursor:_isBusy(req.id)?'not-allowed':'pointer'}} onClick={()=>onDeny(req.id)}>{_isBusy(req.id)?'⏳ Processando…':'✕ Negar'}</button>
                      <button className="btn-danger btn-sm" disabled={_isBusy(req.id)} style={{opacity:_isBusy(req.id)?0.6:1,cursor:_isBusy(req.id)?'not-allowed':'pointer'}} onClick={()=>onApprove(req)}>{_isBusy(req.id)?'⏳ Cancelando…':'✓ Aprovar Cancelamento'}</button>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.components = window.ZNX.components || {};
  window.ZNX.components.CancelApprovalModal = CancelApprovalModal;
  window.CancelApprovalModal = CancelApprovalModal;

  window.ZNX.refactor_phase_5_loaded = window.ZNX.refactor_phase_5_loaded || {};
  window.ZNX.refactor_phase_5_loaded.CancelApprovalModal = true;

})();