// js/components/widgets/depositos/NewTransferModal.jsx
// [Wave 3 KIMI 2026-05-15] Extraído de Depositos.jsx — refactor mecânico zero-lógica.
// Padrão: IIFE wrapper + window.ZNX.widgets.depositos.X namespace + refs+fail-loud no consumer.
// Self-contained: zero closures escopo pai (todas deps via props ou globals).
// Globals runtime: window.sb (Supabase), toast, Modal, window.crypto.
//
// Props (preservadas byte-by-byte):
//   user: object — user atual (role, id)
//   warehouses: array — lista depósitos
//   products: array — lista produtos
//   onClose: function — fechar modal
//   onCreated: function — callback após criar transferência
(function() {
  'use strict';
  const {useState, useMemo} = React;

  function NewTransferModal({user, warehouses, products, onClose, onCreated}){
    const sb = window.sb;
    const [form, setForm] = useState({productId:'', qty:1, fromWh:'', toWh:'', notes:''});
    const [search, setSearch] = useState('');
    const [submitting, setSubmitting] = useState(false);

    const myWarehouses = useMemo(()=>{
      // [v224.27.2] Estoquistas ZAYNEX (Ibra/Abbes/Munir) são GLOBAIS · ve TODOS warehouses como origem
      // Decisão Jamal Opção A (vs B atribuir manager via SQL · vs C remover filtro completo)
      if(user.role==='admin' || user.role==='estoquista') return warehouses;
      return warehouses.filter(w=>w.manager_app_user_id === user.id);
    },[warehouses, user]);

    // [v224.49] Filtra produtos COM estoque > 0 no depósito de origem · mostra qty do depósito
    const filteredProds = useMemo(()=>{
      if(!form.fromWh) return []; // precisa escolher origem primeiro
      const q = (search||'').toLowerCase();
      return (products||[]).filter(p=>{
        const bd = p.stock_breakdown || p.stockBreakdown || {};
        const qtyOrigem = Number(bd[form.fromWh]) || 0;
        if(qtyOrigem <= 0) return false; // só o que tem no depósito origem
        if(q.length >= 2){
          const nm=(p.name||'').toLowerCase(), br=(p.brand||'').toLowerCase();
          if(!nm.includes(q) && !br.includes(q)) return false;
        }
        return true;
      }).map(p=>{
        const bd = p.stock_breakdown || p.stockBreakdown || {};
        return Object.assign({}, p, {_qtyOrigem: Number(bd[form.fromWh])||0});
      }).sort((a,b)=>b._qtyOrigem - a._qtyOrigem).slice(0,30);
    },[products, search, form.fromWh]);

    const selectedProd = (products||[]).find(p=>p.id===form.productId);
    const fromWhStock = selectedProd && form.fromWh ? (selectedProd.stock_breakdown?.[form.fromWh] || selectedProd.stockBreakdown?.[form.fromWh] || 0) : 0;

    const submit = async ()=>{
      if(!form.productId){ toast('Selecione um produto','error'); return; }
      if(!form.fromWh || !form.toWh){ toast('Selecione origem e destino','error'); return; }
      if(form.fromWh === form.toWh){ toast('Origem e destino devem ser diferentes','error'); return; }
      if(!form.qty || form.qty<=0){ toast('Quantidade > 0','error'); return; }
      if(Number(form.qty) > Number(fromWhStock)){ toast(`Estoque insuficiente em ${warehouses.find(w=>w.id===form.fromWh)?.name}: tem ${fromWhStock}`,'error'); return; }
      setSubmitting(true);
      try{
        const idem = (window.crypto?.randomUUID?.() || Date.now()+'-'+Math.random());
        const {data, error} = await sb.rpc('transfer_request', {
          p_product_id: form.productId,
          p_qty: Number(form.qty),
          p_from_warehouse_id: form.fromWh,
          p_to_warehouse_id: form.toWh,
          p_notes: form.notes || null,
          p_idem_key: idem
        });
        if(error) throw error;
        toast('✅ Transferência '+(data?.transfer_number||'criada')+' aguardando aprovação','success');
        onCreated();
      }catch(err){
        console.error('[NewTransfer] failed:', err);
        toast('Erro: '+(err?.message||'falha'),'error');
      }
      setSubmitting(false);
    };

    return (
      <Modal onClose={onClose}>
        <div style={{padding:18,minWidth:400,maxWidth:500}}>
          <h3 style={{margin:'0 0 14px',fontSize:16,fontWeight:700}}>Nova Transferência</h3>
          {/* [v224.49] ORIGEM/DESTINO antes do PRODUTO · origem define o que aparece na busca */}
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,marginBottom:12}}>
            <div>
              <label style={{fontSize:11,color:'#6B7280',fontWeight:600,display:'block',marginBottom:4}}>DE (ORIGEM)</label>
              <select value={form.fromWh} onChange={e=>{setForm({...form,fromWh:e.target.value,productId:''}); setSearch('');}}
                style={{width:'100%',padding:'8px 10px',border:'1px solid #D1D5DB',borderRadius:5,fontSize:13}}>
                <option value="">Selecione...</option>
                {myWarehouses.map(w=><option key={w.id} value={w.id}>{w.name}</option>)}
              </select>
            </div>
            <div>
              <label style={{fontSize:11,color:'#6B7280',fontWeight:600,display:'block',marginBottom:4}}>PARA (DESTINO)</label>
              <select value={form.toWh} onChange={e=>setForm({...form,toWh:e.target.value})}
                style={{width:'100%',padding:'8px 10px',border:'1px solid #D1D5DB',borderRadius:5,fontSize:13}}>
                <option value="">Selecione...</option>
                {warehouses.filter(w=>w.id !== form.fromWh).map(w=><option key={w.id} value={w.id}>{w.name}</option>)}
              </select>
            </div>
          </div>
          <div style={{marginBottom:12}}>
            <label style={{fontSize:11,color:'#6B7280',fontWeight:600,display:'block',marginBottom:4}}>PRODUTO</label>
            {!form.fromWh ? (
              <div style={{padding:'8px 10px',border:'1px dashed #D1D5DB',borderRadius:5,fontSize:12,color:'#9CA3AF',background:'#F9FAFB'}}>
                Escolha o depósito de origem primeiro
              </div>
            ) : (
              <>
                <input type="text" value={search} onChange={e=>{setSearch(e.target.value); setForm({...form, productId:''});}}
                  placeholder={"Buscar produto com estoque em "+(warehouses.find(w=>w.id===form.fromWh)?.name||'origem')+"..."}
                  style={{width:'100%',padding:'8px 10px',border:'1px solid #D1D5DB',borderRadius:5,fontSize:13}}/>
                {filteredProds.length>0 && !form.productId && (
                  <div style={{maxHeight:200,overflow:'auto',border:'1px solid #E5E7EB',borderRadius:5,marginTop:4,background:'#fff'}}>
                    {filteredProds.map(p=>(
                      <div key={p.id} onClick={()=>{setForm({...form,productId:p.id}); setSearch(`${p.brand||''} ${p.name||''}`.trim());}}
                        style={{padding:8,cursor:'pointer',fontSize:12,borderBottom:'1px solid #F3F4F6',display:'flex',justifyContent:'space-between',gap:8}}>
                        <span><strong>{p.brand}</strong> {p.name}</span>
                        <span style={{color:'#16A34A',fontWeight:700,whiteSpace:'nowrap'}}>{p._qtyOrigem} un</span>
                      </div>
                    ))}
                  </div>
                )}
                {form.fromWh && search.length>=2 && filteredProds.length===0 && !form.productId && (
                  <div style={{padding:8,fontSize:11,color:'#9CA3AF',marginTop:4}}>Nenhum produto com estoque nesse depósito pra essa busca.</div>
                )}
              </>
            )}
          </div>
          {form.productId && form.fromWh && (
            <div style={{padding:8,background:'#F0F9FF',border:'1px solid #BAE6FD',borderRadius:5,fontSize:11,color:'#0C4A6E',marginBottom:12}}>
              Estoque disponível em {warehouses.find(w=>w.id===form.fromWh)?.name}: <strong>{fromWhStock}</strong>
            </div>
          )}
          <div style={{marginBottom:12}}>
            <label style={{fontSize:11,color:'#6B7280',fontWeight:600,display:'block',marginBottom:4}}>QUANTIDADE</label>
            <input type="number" min="1" value={form.qty} onChange={e=>setForm({...form,qty:e.target.value})}
              style={{width:'100%',padding:'8px 10px',border:'1px solid #D1D5DB',borderRadius:5,fontSize:13}}/>
          </div>
          <div style={{marginBottom:14}}>
            <label style={{fontSize:11,color:'#6B7280',fontWeight:600,display:'block',marginBottom:4}}>OBSERVAÇÕES (opcional)</label>
            <textarea value={form.notes} onChange={e=>setForm({...form,notes:e.target.value})}
              style={{width:'100%',padding:'8px 10px',border:'1px solid #D1D5DB',borderRadius:5,fontSize:13,resize:'vertical',minHeight:60}}/>
          </div>
          <div style={{display:'flex',gap:8,justifyContent:'flex-end'}}>
            <button onClick={onClose} style={{padding:'8px 16px',border:'1px solid #D1D5DB',background:'#fff',borderRadius:5,cursor:'pointer',fontSize:13}}>Cancelar</button>
            <button onClick={submit} disabled={submitting}
              style={{padding:'8px 18px',background:submitting?'#9CA3AF':'#B89840',color:'#fff',border:'none',borderRadius:5,cursor:submitting?'not-allowed':'pointer',fontSize:13,fontWeight:700}}>
              {submitting?'Solicitando...':'Solicitar Transferência'}
            </button>
          </div>
        </div>
      </Modal>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.depositos = window.ZNX.widgets.depositos || {};
  window.ZNX.widgets.depositos.NewTransferModal = NewTransferModal;
})();