// js/components/widgets/gastos/GastoFormModal.jsx
// [Wave Gastos FULL 2026-05-18 v223.22] Extraído de Gastos.jsx L907-951 (modal Novo/Editar Gasto).
// Props (5 objetos agregados): form, config, actions, savingRef, fmt.
// Padrão: IIFE + window.ZNX.widgets.gastos.GastoFormModal.
(function() {
  'use strict';

  function GastoFormModal({form, config, actions, savingRef, fmt}) {
    const {state: f, setState: setForm, editId} = form;
    const {categories, methods, recurrences, allUsers} = config;
    const {onSave, onCancel, onBeneficiaryChange} = actions;

    return (
      <Modal title={editId?'Editar Gasto':'Novo Gasto'} onClose={onCancel}>
        <div className="form-grid">
          <div className="form-group full"><label>Descrição</label>
            <input value={f.description} onChange={e=>setForm(p=>({...p,description:e.target.value}))} placeholder="Ex: Salário Mona · Maio/26"/>
          </div>
          <div className="form-group"><label>Categoria</label>
            <SmartSelect value={f.category} onChange={val=>setForm(p=>({...p,category:val}))} options={categories.map(c=>({value:c,label:c}))}/>
          </div>
          <div className="form-group"><label>Valor (R$)</label>
            <input type="number" step="0.01" value={f.value} onChange={e=>setForm(p=>({...p,value:e.target.value}))}/>
          </div>
          {f.category==='Folha de Pagamento' && (
            <div className="form-group"><label>Funcionário (beneficiário)</label>
              <SmartSelect
                value={f.beneficiary_user_id}
                onChange={onBeneficiaryChange}
                options={[{value:'',label:'— selecione —'},...(allUsers||[]).filter(u=>u.active!==false).map(u=>({value:u.id,label:`${u.name} (${u.role})${u.monthly_salary?' · '+fmt(u.monthly_salary):''}`}))]}/>
            </div>
          )}
          <div className="form-group"><label>Beneficiário (nome livre)</label>
            <input value={f.beneficiary_name} onChange={e=>setForm(p=>({...p,beneficiary_name:e.target.value}))} placeholder="Ex: Imobiliária X · Mona"/>
          </div>
          <div className="form-group"><label>Data</label>
            <input type="date" value={f.date} onChange={e=>setForm(p=>({...p,date:e.target.value}))}/>
          </div>
          <div className="form-group"><label>Método de Pagamento</label>
            <SmartSelect value={f.payment_method} onChange={val=>setForm(p=>({...p,payment_method:val}))} options={methods.map(x=>({value:x,label:x}))}/>
          </div>
          <div className="form-group"><label>Recorrência</label>
            <SmartSelect value={f.recurrence} onChange={val=>setForm(p=>({...p,recurrence:val}))} options={recurrences.map(x=>({value:x,label:x}))}/>
          </div>
          <div className="form-group"><label>Status</label>
            <SmartSelect value={f.status} onChange={val=>setForm(p=>({...p,status:val}))} options={['Pendente','Pago','Cancelado'].map(x=>({value:x,label:x}))}/>
          </div>
          <div className="form-group full"><label>Observações</label>
            <input value={f.notes} onChange={e=>setForm(p=>({...p,notes:e.target.value}))} placeholder="Opcional"/>
          </div>
        </div>
        <div style={{display:'flex',gap:10,marginTop:20,justifyContent:'flex-end'}}>
          <button className="btn-outline" onClick={onCancel}>Cancelar</button>
          <button className="btn-gold" disabled={savingRef.current} onClick={onSave}>{savingRef.current?'Salvando…':'Salvar'}</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.GastoFormModal = GastoFormModal;
})();