// js/components/common/DiscountApprovalModal.jsx
// Modal de aprovação de descontos (admin) — review + aprovar/negar.
// Movido de index.html em Fase 5 do refactor (2026-04-29): L10045-L10121
// Deps runtime: fmt (window.fmt), itemNet (window.itemNet), nid (window.nid — lib/nid.js)
(function() {
  'use strict';

  // CÓPIA EXATA do index.html L10045-L10121
  function DiscountApprovalModal({requests,products,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}}>Aprovação de Descontos</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=>(
                <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,marginBottom:2}}>{req.clientName}</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',year:'numeric',hour:'2-digit',minute:'2-digit'})}
                      </div>
                    </div>
                    <div style={{textAlign:'right'}}>
                      <div style={{fontSize:11,color:'#9CA3AF'}}>Desconto solicitado</div>
                      <div style={{fontSize:20,fontWeight:700,color:'#DC2626'}}>−{fmt(req.totalDesconto)}</div>
                      <div style={{fontSize:11,color:'#9CA3AF'}}>Total líquido: <span className="gold">{fmt(req.totalLiquido)}</span></div>
                    </div>
                  </div>
                  {/* [V6 20260506] Motivo da vendedora — destaque pra admin decidir */}
                  {(req.requestReason||req.request_reason) && (
                    <div style={{background:'#FEF3C7',border:'1.5px solid #FCD34D',borderRadius:8,padding:'10px 14px',marginBottom:12,display:'flex',gap:10,alignItems:'flex-start'}}>
                      <div style={{fontSize:18,lineHeight:1}}>💬</div>
                      <div style={{flex:1,minWidth:0}}>
                        <div style={{fontSize:10,color:'#92400E',textTransform:'uppercase',letterSpacing:1,fontWeight:700,marginBottom:3}}>Motivo do pedido</div>
                        <div style={{fontSize:13,color:'#78350F',fontStyle:'italic',fontWeight:500,lineHeight:1.5}}>"{req.requestReason||req.request_reason}"</div>
                      </div>
                    </div>
                  )}
                  {/* [FIX D-A v113 2026-05-08] Distinguir desc% explícito de preço-abaixo-tabela.
                      Antes admin via "DESC 0%" em todos os items mas sistema pedia aprovação de R$X
                      sem explicação. Agora cada linha mostra preço de tabela + diff vermelho se abaixo. */}
                  {(()=>{
                    const totalPriceBelow = req.items.reduce((s,it)=>{
                      const p=products.find(x=>nid(x.id,it.productId));
                      const tab=Number(p?.salePrice||p?.sale_price||0);
                      const pr=Number(it.price)||0;
                      return s + (tab>pr?(tab-pr)*Number(it.qty||0):0);
                    },0);
                    const totalDescPct = req.items.reduce((s,it)=>{
                      const pct=Number(it.discountPct||it.discount_pct||0);
                      return s + (pct>0?Number(it.price)*Number(it.qty)*(pct/100):0);
                    },0);
                    if(totalPriceBelow<=0&&totalDescPct<=0)return null;
                    return(
                      <div style={{display:'flex',gap:8,marginBottom:10,fontSize:11,flexWrap:'wrap'}}>
                        {totalPriceBelow>0&&(
                          <div style={{padding:'6px 12px',background:'#FEE2E2',border:'1px solid #FCA5A5',borderRadius:6,color:'#991B1B'}}>
                            <strong>Preço abaixo da tabela:</strong> −{fmt(totalPriceBelow)} <span style={{fontSize:10,opacity:0.8}}>(produto vendido por menos que preço cadastrado)</span>
                          </div>
                        )}
                        {totalDescPct>0&&(
                          <div style={{padding:'6px 12px',background:'#FEF3C7',border:'1px solid #FCD34D',borderRadius:6,color:'#92400E'}}>
                            <strong>Desconto % explícito:</strong> −{fmt(totalDescPct)} <span style={{fontSize:10,opacity:0.8}}>(vendedora aplicou % no item)</span>
                          </div>
                        )}
                      </div>
                    );
                  })()}
                  <table style={{marginBottom:12}}>
                    <thead><tr>
                      <th style={{padding:'6px 8px'}}>Produto</th>
                      <th style={{padding:'6px 8px',textAlign:'right'}}>Qtd</th>
                      <th style={{padding:'6px 8px',textAlign:'right'}}>Preço</th>
                      <th style={{padding:'6px 8px',textAlign:'right'}}>Tabela</th>
                      <th style={{padding:'6px 8px',textAlign:'right'}}>Custo Méd.</th>
                      <th style={{padding:'6px 8px',textAlign:'right'}}>Desc %</th>
                      <th style={{padding:'6px 8px',textAlign:'right'}}>Líquido</th>
                    </tr></thead>
                    <tbody>
                      {req.items.map((it,idx)=>{
                        const p=products.find(x=>nid(x.id,it.productId));
                        const tabela=Number(p?.salePrice||p?.sale_price||0);
                        const preco=Number(it.price)||0;
                        const priceBelow = tabela>0 && preco<tabela;
                        return(
                          <tr key={idx} style={{background:priceBelow?'#FEF2F2':'transparent'}}>
                            <td style={{padding:'6px 8px',fontSize:13}}>
                              {p?.name||it.productId}
                              {priceBelow&&<span style={{marginLeft:6,fontSize:9,padding:'2px 6px',background:'#DC2626',color:'#fff',borderRadius:3,fontWeight:700}}>↓ ABAIXO TABELA</span>}
                            </td>
                            <td style={{padding:'6px 8px',textAlign:'right'}}>{it.qty}</td>
                            <td style={{padding:'6px 8px',textAlign:'right',color:priceBelow?'#DC2626':'#1B2A4A',fontWeight:priceBelow?700:400}}>{fmt(preco)}</td>
                            <td style={{padding:'6px 8px',textAlign:'right',color:priceBelow?'#6B7280':'#9CA3AF',fontSize:11}}>{tabela>0?fmt(tabela):'—'}</td>
                            <td style={{padding:'6px 8px',textAlign:'right',color:'#6B7280'}}>{fmt(p?.avgCost||0)}</td>
                            <td style={{padding:'6px 8px',textAlign:'right',color:Number(it.discountPct||it.discount_pct||0)>0?'#EA580C':'#9CA3AF'}}>{Number(it.discountPct||it.discount_pct||0)>0?(it.discountPct||it.discount_pct)+'%':'—'}</td>
                            <td style={{padding:'6px 8px',textAlign:'right',color:'#2563EB'}}>{fmt(itemNet(it)*it.qty)}</td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                  {req.formData?.obs&&<div style={{fontSize:12,color:'#9CA3AF',marginBottom:12}}>Obs: <span style={{color:'#374151'}}>{req.formData.obs}</span></div>}
                  <div style={{display:'flex',gap:8,justifyContent:'flex-end'}}>
                    <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={()=>onDeny(req.id)}>{_isBusy(req.id)?'⏳ Processando…':'✕ Negar'}</button>
                    <button className="btn-gold 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)?'⏳ Salvando…':'✓ Aprovar e Criar Venda'}</button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    );
  }

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

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

})();