// js/components/widgets/gastos/PagarModal.jsx
// [Wave Gastos FULL 2026-05-18 v223.22] Extraído de Gastos.jsx L954-993 (modal Pagar parcial/total).
// Props (8): payModal, setPayModal, payForm, setPayForm, payInflight, confirmPayment, METODOS, fmt.
// Padrão: IIFE + window.ZNX.widgets.gastos.PagarModal.
(function() {
  'use strict';

  function PagarModal({payModal, setPayModal, payForm, setPayForm, payInflight, confirmPayment, METODOS, fmt}) {
    return (
      <Modal title={`Pagar Gasto · ${payModal.gasto.description}`} onClose={()=>!payInflight && setPayModal(null)}>
        <div style={{background:'#F9FAFB',padding:14,borderRadius:8,marginBottom:14}}>
          <div style={{display:'flex',justifyContent:'space-between',fontSize:13,marginBottom:6}}>
            <span style={{color:'#6B7280'}}>Valor total:</span>
            <strong>{fmt(Number(payModal.gasto.value||0))}</strong>
          </div>
          <div style={{display:'flex',justifyContent:'space-between',fontSize:13,marginBottom:6}}>
            <span style={{color:'#6B7280'}}>Já pago:</span>
            <span style={{color:'#16A34A'}}>{fmt(Number(payModal.gasto.paid_value||0))}</span>
          </div>
          <div style={{display:'flex',justifyContent:'space-between',fontSize:14,paddingTop:6,borderTop:'1px solid #E5E7EB'}}>
            <strong style={{color:'#1F2937'}}>Saldo a pagar:</strong>
            <strong style={{color:'#DC2626'}}>{fmt(payModal.remaining)}</strong>
          </div>
        </div>
        <div className="form-grid">
          <div className="form-group full">
            <label>Quanto pagar agora? (R$)</label>
            <input type="number" step="0.01" min="0.01" max={payModal.remaining} value={payForm.value} onChange={e=>setPayForm(f=>({...f,value:e.target.value}))} autoFocus style={{fontSize:18,fontWeight:700,color:'#16A34A'}}/>
            <div style={{display:'flex',gap:8,marginTop:8,flexWrap:'wrap'}}>
              <button onClick={()=>setPayForm(f=>({...f,value:String((payModal.remaining/2).toFixed(2))}))} style={{padding:'4px 10px',background:'#F3F4F6',border:'1px solid #D1D5DB',borderRadius:5,fontSize:11,cursor:'pointer'}}>Metade ({fmt(payModal.remaining/2)})</button>
              <button onClick={()=>setPayForm(f=>({...f,value:String(payModal.remaining.toFixed(2))}))} style={{padding:'4px 10px',background:'#DCFCE7',border:'1px solid #BBF7D0',borderRadius:5,fontSize:11,fontWeight:700,color:'#15803D',cursor:'pointer'}}>Tudo ({fmt(payModal.remaining)})</button>
            </div>
          </div>
          <div className="form-group">
            <label>Método de pagamento</label>
            <SmartSelect value={payForm.method} onChange={val=>setPayForm(f=>({...f,method:val}))} options={METODOS.map(x=>({value:x,label:x}))}/>
          </div>
          <div className="form-group full">
            <label>Observações (opcional)</label>
            <input value={payForm.notes} onChange={e=>setPayForm(f=>({...f,notes:e.target.value}))} placeholder="Ex: pago em 2x · 1ª parcela"/>
          </div>
        </div>
        <div style={{display:'flex',gap:10,marginTop:20,justifyContent:'flex-end'}}>
          <button className="btn-outline" disabled={payInflight} onClick={()=>setPayModal(null)}>Cancelar</button>
          <button className="btn-gold" disabled={payInflight} onClick={confirmPayment} style={{background:'#16A34A'}}>{payInflight?'⏳ Registrando...':`💰 Confirmar Pagamento ${fmt(Number(payForm.value||0))}`}</button>
        </div>
      </Modal>
    );
  }

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