// js/components/widgets/produtos/ProductFormModal.jsx
// [Wave 25-alt v224.6 NUCLEAR] Modal form produto (criar/editar)
// Extraído de Produtos.jsx L827-1023 (literal · save handler permanece no orquestrador)
//
// Deps runtime globals: fmt, SmartSelect, Modal
(function(){
  'use strict';
  function ProductFormModal(props){
    const fmt = window.fmt || function(v){return 'R$ '+Number(v||0).toFixed(2);};
    const SmartSelect = window.SmartSelect;
    const Modal = window.Modal;

    const {modal, form, setForm, allBrands, suppliers, custoPreview, isSaving, onSave, onClose} = props;

    if(!modal || !Modal) return null;

    return (
      <Modal title={modal==='new'?'Novo Produto':'Editar Produto — '+((form.brand||'')+' '+(form.productName||'')).trim()} onClose={onClose}>
        {/* Identificação */}
        <div style={{fontSize:10,color:'#9CA3AF',textTransform:'uppercase',letterSpacing:1,marginBottom:10}}>Identificação</div>
        <div className="form-grid">
          <div className="form-group">
            <label>Marca</label>
            <input list="brands-list" value={form.brand} onChange={function(e){
              // [BUG-FIX 20260515 ORC-0609] Auto-detecta DECANTE pelo brand
              const newBrand = e.target.value;
              const isDecante = String(newBrand||'').toUpperCase().startsWith('DECANTE');
              setForm(function(f){
                var n = Object.assign({}, f, {brand: newBrand});
                if(isDecante){ n.is_decant = true; n.categoria = f.categoria || 'Decants'; }
                return n;
              });
            }} placeholder="Ex: LATTAFA, ARMAF, AL HARAMAIN..."/>
            <datalist id="brands-list">
              {allBrands.map(function(b){return <option key={b} value={b}/>;})}
            </datalist>
          </div>
          <div className="form-group">
            <label>Nome do Produto</label>
            <input value={form.productName} onChange={function(e){setForm(function(f){return Object.assign({},f,{productName:e.target.value});});}} placeholder="Ex: Al Noble Safeer EDP 100ML"/>
          </div>
          <div className="form-group">
            <label>Código / Referência</label>
            <input value={form.code} onChange={function(e){setForm(function(f){return Object.assign({},f,{code:e.target.value});});}} placeholder="Código interno ou de barras"/>
          </div>
          <div className="form-group">
            <label>Fornecedor</label>
            {SmartSelect && <SmartSelect value={form.supplierId} onChange={function(val){setForm(function(f){return Object.assign({},f,{supplierId:val});});}} options={suppliers.map(function(s){return {value:s.id,label:s.name};})}/>}
          </div>
          <div className="form-group">
            <label>Preço de Venda (R$)</label>
            <input type="number" step="0.01" value={form.salePrice} onChange={function(e){setForm(function(f){return Object.assign({},f,{salePrice:e.target.value});});}}/>
          </div>
          <div className="form-group">
            <label>Custo Unitário (R$)</label>
            <input type="number" step="0.01" value={form.avgCost} onChange={function(e){setForm(function(f){return Object.assign({},f,{avgCost:e.target.value});});}}/>
          </div>
          <div className="form-group">
            <label>{modal==='new'?'Estoque Inicial':'Estoque Atual (somente leitura)'}</label>
            {/* [FURO #513 FIX 2026-05-15 v220.1] Stock só editável em CRIAÇÃO */}
            <input type="number"
              value={form.stock}
              onChange={function(e){setForm(function(f){return Object.assign({},f,{stock:e.target.value});});}}
              disabled={modal!=='new'}
              title={modal!=='new'?'Pra ajustar estoque, use Depósitos > Ajuste de Inventário':''}
              style={modal!=='new'?{background:'#F3F4F6',color:'#6B7280',cursor:'not-allowed'}:{}}/>
            {modal!=='new' && <small style={{color:'#9CA3AF',fontSize:10,marginTop:4,display:'block'}}>💡 Use <strong>Depósitos &gt; Ajuste de Inventário</strong> pra mudar estoque (mantém pws sincronizado).</small>}
          </div>
        </div>

        {/* Classificação */}
        <div style={{fontSize:10,color:'#9CA3AF',textTransform:'uppercase',letterSpacing:1,margin:'16px 0 10px'}}>Classificação</div>
        <div className="form-grid">
          <div className="form-group">
            <label>Gênero</label>
            <input list="genero-list" value={form.genero||''} onChange={function(e){setForm(function(f){return Object.assign({},f,{genero:e.target.value});});}} placeholder="Ex: Masculino, Feminino, Unissex..."/>
            <datalist id="genero-list">{['Masculino','Feminino','Unissex'].map(function(g){return <option key={g} value={g}/>;})}</datalist>
          </div>
          <div className="form-group">
            <label>Concentração</label>
            <input list="conc-list" value={form.concentracao||''} onChange={function(e){setForm(function(f){return Object.assign({},f,{concentracao:e.target.value});});}} placeholder="Ex: EDP, EDT, Parfum..."/>
            <datalist id="conc-list">{['EDP','EDT','EDP Intense','Parfum','Attar','Body Mist','Outro'].map(function(c){return <option key={c} value={c}/>;})}</datalist>
          </div>
          <div className="form-group">
            <label>Categoria</label>
            <input list="cat-list" value={form.categoria||''} onChange={function(e){setForm(function(f){return Object.assign({},f,{categoria:e.target.value});});}} placeholder="Ex: Perfume, Decants, Body Mist..."/>
            <datalist id="cat-list">{['Perfume','Creme','Decants','Body Mist','Óleo Perfumado','Home Spray','Outro'].map(function(c){return <option key={c} value={c}/>;})}</datalist>
          </div>
          <div className="form-group">
            <label>Volume (ml)</label>
            <input type="number" min="0" value={form.volume||''} onChange={function(e){setForm(function(f){return Object.assign({},f,{volume:e.target.value});});}} placeholder="Ex: 100"/>
          </div>
          <div className="form-group">
            <label>Estoque Mínimo</label>
            <input type="number" min="0" value={form.estoqueMin==null?20:form.estoqueMin} onChange={function(e){setForm(function(f){return Object.assign({},f,{estoqueMin:Number(e.target.value)});});}} placeholder="20"/>
          </div>
        </div>

        {/* Fiscal + EAN + Tags */}
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 2fr',gap:12,marginTop:12,padding:12,background:'#F8FAFC',borderRadius:8,border:'1px solid #E4E7EC'}}>
          <div className="form-group" style={{margin:0}}>
            <label title="Código fiscal NCM (8 dígitos). Perfumes: 33030010">NCM <span style={{fontSize:10,color:'#9CA3AF'}}>(NF-e)</span></label>
            <input type="text" maxLength={8} value={form.ncm||''}
              onChange={function(e){setForm(function(f){return Object.assign({},f,{ncm:e.target.value.replace(/\D/g,'').slice(0,8)});});}}
              placeholder="33030010"
              style={{fontFamily:'monospace',letterSpacing:1}}/>
          </div>
          <div className="form-group" style={{margin:0}}>
            <label title="Código de barras (8-14 dígitos). Bipa o leitor aqui.">EAN / Código de Barras</label>
            <input type="text" maxLength={14} value={form.ean||''}
              onChange={function(e){setForm(function(f){return Object.assign({},f,{ean:e.target.value.replace(/\D/g,'').slice(0,14)});});}}
              placeholder="7891234567890"
              style={{fontFamily:'monospace',letterSpacing:1}}/>
          </div>
          <div className="form-group" style={{margin:0}}>
            <label>Tags <span style={{fontSize:10,color:'#9CA3AF'}}>(separadas por vírgula)</span></label>
            <input type="text" value={(form.tags||[]).join(', ')}
              onChange={function(e){setForm(function(f){return Object.assign({},f,{tags:e.target.value.split(',').map(function(t){return t.trim();}).filter(Boolean)});});}}
              placeholder="ex: promo-maio, top-vendas, importado"/>
            {(form.tags||[]).length>0 && (
              <div style={{display:'flex',gap:4,flexWrap:'wrap',marginTop:6}}>
                {form.tags.map(function(t){return <span key={t} style={{background:'#7C3AED22',color:'#7C3AED',padding:'2px 8px',borderRadius:4,fontSize:11,fontWeight:600}}>{t}</span>;})}
              </div>
            )}
          </div>
        </div>

        {/* Custo médio (só edit) */}
        {modal==='edit' && (
          <div style={{marginTop:20,background:'#F8FAFB',border:'1px solid #2563EB33',borderRadius:10,padding:16}}>
            <div style={{fontSize:10,color:'#2563EB',textTransform:'uppercase',letterSpacing:1,marginBottom:14}}>📦 Chegada de Novo Lote — Custo Médio</div>

            {/* Situação atual */}
            <div style={{display:'flex',gap:24,marginBottom:14,paddingBottom:12,borderBottom:'1px solid #F3F4F6'}}>
              <div>
                <div style={{fontSize:10,color:'#6B7280',marginBottom:3}}>Custo médio atual</div>
                <div style={{fontSize:20,fontWeight:700,color:'#2563EB'}}>{fmt(form.avgCost)}</div>
              </div>
              <div>
                <div style={{fontSize:10,color:'#6B7280',marginBottom:3}}>Estoque atual</div>
                <div style={{fontSize:20,fontWeight:700,color:'#374151'}}>{form.stock} <span style={{fontSize:12,color:'#6B7280'}}>un.</span></div>
              </div>
              <div>
                <div style={{fontSize:10,color:'#6B7280',marginBottom:3}}>Preço de venda</div>
                <div style={{fontSize:20,fontWeight:700,color:'#16A34A'}}>{fmt(form.salePrice)}</div>
              </div>
            </div>

            {/* Entrada do novo lote */}
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
              <div className="form-group" style={{margin:0}}>
                <label>Quantidade chegando</label>
                <input type="number" value={form.newQty} onChange={function(e){setForm(function(f){return Object.assign({},f,{newQty:e.target.value});});}} placeholder="0" style={{fontSize:16}}/>
              </div>
              <div className="form-group" style={{margin:0}}>
                <label>Custo unitário da nova entrada (R$)</label>
                <input type="number" step="0.01" value={form.newCost} onChange={function(e){setForm(function(f){return Object.assign({},f,{newCost:e.target.value});});}} placeholder="0,00" style={{fontSize:16}}/>
              </div>
            </div>

            {/* Preview custo médio */}
            {custoPreview && (
              <div style={{marginTop:14,padding:'14px 16px',background:'#060606',borderRadius:8,border:'1px solid '+(custoPreview.diferenca<0?'#16A34A55':'#EA580C55')}}>
                <div style={{fontSize:10,color:'#9CA3AF',textTransform:'uppercase',letterSpacing:1,marginBottom:10}}>Resultado após entrada</div>
                <div style={{display:'flex',gap:20,alignItems:'center',flexWrap:'wrap'}}>
                  <div style={{textAlign:'center'}}>
                    <div style={{fontSize:10,color:'#6B7280',marginBottom:4}}>Custo médio atual</div>
                    <div style={{fontSize:16,fontWeight:600,color:'#9CA3AF'}}>{fmt(custoPreview.old)}</div>
                  </div>
                  <div style={{fontSize:22,color:'#333'}}>→</div>
                  <div style={{textAlign:'center'}}>
                    <div style={{fontSize:10,color:custoPreview.diferenca<0?'#16A34A':'#EA580C',marginBottom:4}}>Novo custo médio</div>
                    <div style={{fontSize:22,fontWeight:800,color:custoPreview.diferenca<0?'#16A34A':'#EA580C'}}>{fmt(custoPreview.newAvg)}</div>
                  </div>
                  <div style={{textAlign:'center'}}>
                    <div style={{fontSize:10,color:'#6B7280',marginBottom:4}}>Variação</div>
                    <div style={{fontSize:14,fontWeight:600,color:custoPreview.diferenca<0?'#16A34A':'#EA580C'}}>
                      {custoPreview.diferenca<0?'▼':'▲'} {fmt(Math.abs(custoPreview.diferenca))}
                    </div>
                  </div>
                  <div style={{textAlign:'center'}}>
                    <div style={{fontSize:10,color:'#6B7280',marginBottom:4}}>Novo estoque</div>
                    <div style={{fontSize:16,fontWeight:700,color:'#374151'}}>{custoPreview.newStock} un.</div>
                  </div>
                  <div style={{textAlign:'center'}}>
                    <div style={{fontSize:10,color:'#6B7280',marginBottom:4}}>Margem nova</div>
                    <div style={{fontSize:14,fontWeight:600,color:'#16A34A'}}>
                      {form.salePrice>0?((((Number(form.salePrice)-custoPreview.newAvg)/Number(form.salePrice))*100).toFixed(1)+'%'):'—'}
                    </div>
                  </div>
                </div>
              </div>
            )}
            {!custoPreview && <div style={{marginTop:10,fontSize:12,color:'#6B7280'}}>Preencha a quantidade e o custo para ver o cálculo do custo médio automaticamente.</div>}
          </div>
        )}

        {/* Footer */}
        <div style={{display:'flex',gap:10,marginTop:20,justifyContent:'flex-end'}}>
          <button className="btn-outline" onClick={onClose}>Cancelar</button>
          <button className="btn-gold" onClick={onSave} disabled={isSaving}
            style={{opacity:isSaving?0.6:1,cursor:isSaving?'not-allowed':'pointer'}}>
            {isSaving ? '⏳ Salvando…' : (modal==='edit'&&custoPreview?'Salvar + Atualizar Custo Médio':'Salvar')}
          </button>
        </div>
      </Modal>
    );
  }
  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.produtos = window.ZNX.widgets.produtos || {};
  window.ZNX.widgets.produtos.ProductFormModal = ProductFormModal;
  window.ProductFormModal_v224_6_wave25alt = true;
})();