// js/components/widgets/compras/PurchaseFormModal.jsx
// [Wave 32 v224.13 NUCLEAR EXTRACT 2026-05-24] Modal Nova Compra (Compras.jsx L250-302 LITERAL)
//
// Props:
//   - open (bool) — modal aberto?
//   - form, setForm — controlado pelo main (preserved LITERAL)
//   - itemForm, setItemForm — controlado pelo main
//   - suppliers, products (arrays)
//   - statuses (array COMPRA_STATUSES) — vem do main
//   - totalBRL (number) — useMemo wrapper do main
//   - isSaving (bool) — inflight save
//   - onSave — callback handler save (RPC LITERAL preservado main)
//   - onClose — callback fecha modal
//
// NOTA: addItem extraído PRA DENTRO deste widget (usa só form/itemForm/setForm/setItemForm/products/nid)
//       isso enxuga main em 6L sem mudar lógica.
//
// Deps lazy: window.Modal, window.SmartSelect, window.fmt, window.nid
//            window.ZNX.lib.compras.calcs.calcSubtotal
(function(){
  'use strict';
  function PurchaseFormModal(props){
    const Modal = window.Modal;
    const SmartSelect = window.SmartSelect;
    const fmt = window.fmt;
    const nid = window.nid;
    const calcs = window.ZNX && window.ZNX.lib && window.ZNX.lib.compras && window.ZNX.lib.compras.calcs;
    const { open, form, setForm, itemForm, setItemForm, suppliers, products, statuses, totalBRL, isSaving, onSave, onClose } = props;
    if(!open || !Modal || !calcs) return null;

    // [Compras.jsx L38-43 LITERAL] addItem — só toca form/itemForm/products (deps locais)
    function addItem(){
      const p = products.find(function(x){return nid(x.id, itemForm.productId);});
      if(!p) return;
      setForm(function(f){return {...f, items:[...f.items, {productId:itemForm.productId, qty:Number(itemForm.qty), cost:Number(itemForm.cost), name:p.name}]};});
      setItemForm(function(f){return {...f, qty:1};});
    }

    return (
      <Modal title="Nova Compra" onClose={onClose} large>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:14,marginBottom:16}}>
          <div className="form-group"><label>Fornecedor</label>
            <SmartSelect value={form.supplierId} onChange={function(val){setForm(function(f){return {...f, supplierId:val};});}} options={suppliers.map(function(s){return {value:s.id, label:s.name};})}/>
          </div>
          <div className="form-group"><label>Data do Pedido</label><input type="date" value={form.date} onChange={function(e){setForm(function(f){return {...f, date:e.target.value};});}}/></div>
          <div className="form-group"><label>Previsão de Entrega</label><input type="date" value={form.deliveryDate||''} onChange={function(e){setForm(function(f){return {...f, deliveryDate:e.target.value};});}}/></div>
          <div className="form-group"><label>Moeda</label>
            <SmartSelect value={form.currency||'BRL'} onChange={function(val){setForm(function(f){return {...f, currency:val, exchangeRate:val==='BRL'?1:f.exchangeRate};});}} options={['BRL','USD','AED','SAR'].map(function(c){return {value:c, label:c};})}/>
          </div>
          {form.currency&&form.currency!=='BRL'&&(
            <div className="form-group"><label>Taxa de Câmbio (1 {form.currency} = R$)</label>
              <input type="number" step="0.01" min="0" value={form.exchangeRate||''} onChange={function(e){setForm(function(f){return {...f, exchangeRate:e.target.value};});}}/>
            </div>
          )}
          <div className="form-group"><label>Status</label>
            <SmartSelect value={form.status} onChange={function(val){setForm(function(f){return {...f, status:val};});}} options={statuses.map(function(s){return {value:s, label:s};})}/>
          </div>
          <div className="form-group" style={{gridColumn:'1/-1'}}><label>Observações</label>
            <input value={form.obs||''} onChange={function(e){setForm(function(f){return {...f, obs:e.target.value};});}} placeholder="Condições, referências, notas adicionais..."/>
          </div>
        </div>
        <div style={{background:'#F9FAFB',borderRadius:8,padding:14,marginBottom:14}}>
          <div style={{fontSize:11,color:'#9CA3AF',marginBottom:10,textTransform:'uppercase',letterSpacing:1}}>Adicionar Produto</div>
          <div style={{display:'grid',gridTemplateColumns:'2fr 1fr 1fr auto',gap:10,alignItems:'end'}}>
            <div className="form-group"><label>Produto</label>
              <SmartSelect value={itemForm.productId} onChange={function(val){const p=products.find(function(x){return nid(x.id,val);}); setItemForm(function(f){return {...f, productId:val, cost:(p&&p.avgCost)||0};});}} options={[{value:'',label:'— Selecione —'}].concat(products.map(function(p){return {value:p.id, label:p.name};}))}/>
            </div>
            <div className="form-group"><label>Qtd</label><input type="number" min="1" value={itemForm.qty} onChange={function(e){setItemForm(function(f){return {...f, qty:e.target.value};});}}/></div>
            <div className="form-group"><label>Custo Unit. ({form.currency||'BRL'})</label><input type="number" step="0.01" value={itemForm.cost} onChange={function(e){setItemForm(function(f){return {...f, cost:e.target.value};});}}/></div>
            <button className="btn-gold" onClick={addItem} style={{marginBottom:1}}>+</button>
          </div>
        </div>
        {form.items.length>0&&<table style={{marginBottom:14}}>
          <thead><tr><th>Produto</th><th>Qtd</th><th>Custo ({form.currency||'BRL'})</th><th>Subtotal ({form.currency||'BRL'})</th><th></th></tr></thead>
          <tbody>
            {form.items.map(function(it,i){
              return (
                <tr key={i}>
                  <td>{it.name||it.productName||it.product_name||'—'}</td><td>{it.qty}</td><td>{fmt(it.cost)}</td><td className="gold">{fmt(calcs.calcSubtotal(it))}</td>
                  <td><button className="btn-danger btn-sm" onClick={function(){setForm(function(f){return {...f, items:f.items.filter(function(_,idx){return idx!==i;})};});}}>×</button></td>
                </tr>
              );
            })}
            {form.currency&&form.currency!=='BRL'&&<tr><td colSpan={3} style={{textAlign:'right',color:'#9CA3AF',fontSize:12}}>Total em R$ (câmbio {form.exchangeRate||1}):</td><td className="gold" style={{fontWeight:700}}>{fmt(totalBRL)}</td><td/></tr>}
            <tr><td colSpan={3} style={{textAlign:'right',fontWeight:600}}>Total (R$):</td><td className="gold" style={{fontWeight:700}}>{fmt(totalBRL)}</td><td/></tr>
          </tbody>
        </table>}
        <div style={{display:'flex',gap:10,justifyContent:'flex-end'}}>
          <button className="btn-outline" onClick={onClose} disabled={isSaving}>Cancelar</button>
          <button className="btn-gold" onClick={onSave} disabled={isSaving} style={{opacity:isSaving?0.6:1,cursor:isSaving?'not-allowed':'pointer'}}>{isSaving?'⏳ Criando…':'Criar Pedido de Compra'}</button>
        </div>
      </Modal>
    );
  }
  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.compras = window.ZNX.widgets.compras || {};
  window.ZNX.widgets.compras.PurchaseFormModal = PurchaseFormModal;
  // [Wave 32 marker v224.13] confirma PurchaseFormModal executado
  window.PurchaseFormModal_v224_13_wave32 = true;
})();