// js/components/pages/QuoteFormBody.jsx
// Sub-componente do formulário de orçamento — puro display/form, sem hooks próprios.
// Extraído de index.html em Fase 6 (2026-04-29): L3688-L3988
// Deps runtime: fmt (var global via Babel), saleFinalTotal, itemNet, toast, SmartSelect
(function() {
  'use strict';
  // Sem destructuring de hooks — QuoteFormBody não usa nenhum hook React

  function QuoteFormBody({form,setForm,itemForm,setItemForm,prodSearch,setProdSearch,showProdDrop,setShowProdDrop,clientSearch,setClientSearch,showClientDrop,setShowClientDrop,clients,products,quotes,sales,editingId,vendedores,user}){
  // [FILTER vendedora 20260507-v2] Vendedora só vê clientes dela (que ela vendeu/orçou ou cadastrou).
  // [BUG-FIX 2026-05-12 v191] Era user.auth_user_id — quebrou após ONDA-A #7 (FK seller_id repointada
  // auth.users→app_users). Cliente recém-criado sumia ao escolher no form de orçamento → vendedora
  // achava sumiu e duplicava. Mesmo padrão do BUG-TARIK fechado em Clientes.jsx v190.
  // Fix: comparar com user.id (app_users.id que bate com seller_id agora).
  const visibleClients=React.useMemo(()=>{
    if(!user||user.role==='admin'||user.role==='estoquista'||user.role==='financeiro')return clients;
    const myAppUserId=(window.getSellerAppUserId?window.getSellerAppUserId(user):String(user.id||'')); // app_users.id — pós ONDA-A #7 (helper v201)
    const myClientIds=new Set([
      ...(sales||[]).filter(s=>s.sellerName===user.name).map(s=>String(s.clientId||s.client_id||'')).filter(Boolean),
      ...(quotes||[]).filter(q=>q.sellerName===user.name).map(q=>String(q.clientId||q.client_id||'')).filter(Boolean),
    ]);
    // [v224.26 BUG-OFFDUTY-VISIBILITY fix 20260525] Cobertura Modelo C — espelha RLS znx_can_see_seller
    const offDutyIds=new Set(((typeof window!=='undefined'&&window.__ZNX_APP_USERS__)||[])
      .filter(u=>u&&u.role==='vendedor'&&u.is_on_duty===false).map(u=>String(u.id)));
    return clients.filter(c=>{
      const sid=String(c.sellerId||c.seller_id||'');
      return myClientIds.has(String(c.id))
        ||(myAppUserId && sid===myAppUserId)
        ||(sid && offDutyIds.has(sid));
    });
  },[clients,sales,quotes,user]);
  // [v224.95 N+1 fix] productsById + clientsById O(1) lookup · template provado v224.91 Orcamentos 96.5% reducao
  const productsById = React.useMemo(function(){
    return Object.fromEntries((products||[]).map(p=>[p.id,p]));
  }, [products]);
  const clientsById = React.useMemo(function(){
    return Object.fromEntries((clients||[]).map(c=>[c.id,c]));
  }, [clients]);
  // [v224.123 NUCLEAR] Bloqueio cliente — popup local. QuoteFormBody é hook-free por design,
  // mas já usa React.useMemo; React.useState é consistente. Alert self-contained (sem prop do pai).
  const [blockedAlert,setBlockedAlert]=React.useState(null);
  const BlockedClientAlertW=window.ZNX&&window.ZNX.widgets&&window.ZNX.widgets.clientes&&window.ZNX.widgets.clientes.BlockedClientAlert;
  // [BUG-FIX 20260504-decantes] is_decant boolean = fonte canônica (banco). 36/153 sem "decant" no nome.
  const isDecant=p=>p.is_decant===true||p.category==='Decants'||p.categoria==='Decants'||['5ML','2ML','3ML','10ML'].includes((p.volume||'').toUpperCase())||(p.name||'').toLowerCase().includes('decant');
  function addItem(){
    // [BUG-FIX 20260512 v202] Toast obrigatório quando productId vazio.
    // Antes: vendedora digitava nome no campo busca mas NÃO clicava em sugestão do dropdown →
    // productId ficava '' → +Add chamava console.warn invisível → nada na UI mudava.
    // Vendedora achava que adicionou produto, fechava modal sem salvar → banco preservava item antigo.
    // BUG-LUANNA-ORC471 2026-05-12 — Victoria voltava sempre.
    if(!itemForm.productId){
      toast('⚠️ Selecione um perfume CLICANDO numa sugestão da lista acima antes de + Add.');
      if(typeof Sentry!=='undefined') Sentry.captureMessage('[ZNX v202] addItem sem productId (UX flag — busca digitada mas sugestão não clicada)',{level:'warning',extra:{prodSearch,itemForm}});
      return;
    }
    const p=productsById[itemForm.productId];
    if(!p){toast('⚠️ Perfume não encontrado no catálogo. Recarregue a página e tente de novo.');return;}
    // [STOCK-RESERVE 20260422] Disponível por role — editingId incluído em myOpenQty (não excluído)
    const availInfo=getAvailableStockForSeller(products,quotes,p.id,editingId||null,getUserContext(user));
    if(availInfo.available<=0&&!isDecant(p)){toast(`⚠ "${p.name}" está com estoque zerado.`);return;}
    let qty=Number(itemForm.qty);
    if(qty<=0)return;
    if(!isDecant(p)&&qty>availInfo.available){
      const detail=availInfo.reservations.map(r=>`  • ${r.qty} un. — ${r.quoteNumber} (${r.sellerName})`).join('\n');
      const msgReserva=availInfo.isNonSeller
        ?`Disponível: ${availInfo.available} un (estoque físico)`
        :`Disponível: ${availInfo.available} un (${availInfo.physicalStock} em estoque − ${availInfo.reservedByOthers} reservados por outras vendedoras)${detail?'\n'+detail:''}`;
      toast(`⚠️ Estoque insuficiente para ${p.name}\n\n${msgReserva}\n\nMáximo que você pode adicionar: ${availInfo.available}`);
      if(availInfo.available<=0)return;
      qty=availInfo.available;
    }
    // [UX 20260505 sistema 4] Consolidação automática de items duplicados.
    // Se produto já existe na lista, soma qty na linha existente em vez de criar
    // duplicata (que bateria no índice UNIQUE quote_items_unique_per_quote).
    // Mantém preço/desconto da PRIMEIRA linha (usuário pode editar inline depois).
    setForm(f=>{
      const existingIdx=f.items.findIndex(it=>it.productId===p.id);
      if(existingIdx>=0){
        // Existe: soma qty na linha existente
        const newQty=Number(f.items[existingIdx].qty||0)+qty;
        toast(`✅ ${p.name}: +${qty} un. (total agora ${newQty})`);
        return{...f,items:f.items.map((x,idx)=>idx===existingIdx?{...x,qty:newQty}:x)};
      }
      // Não existe: adiciona nova linha
      return{...f,items:[...f.items,{productId:p.id,qty,price:Number(itemForm.price),discountPct:Number(itemForm.discountPct)||0,name:p.name,brand:p.brand,volume:p.volume}]};
    });
    setItemForm({productId:'',qty:1,price:0,discountPct:0,discountVal:0});
    setProdSearch('');
  }
  const quotesForStock=editingId?quotes.filter(q=>q.id!==editingId):quotes;
  const SH=({icon,label})=>(
    <div style={{fontSize:11,color:'#9CA3AF',fontWeight:700,textTransform:'uppercase',letterSpacing:1,marginBottom:14,display:'flex',alignItems:'center',gap:7}}>
      <span style={{fontSize:14}}>{icon}</span>{label}
    </div>
  );
  return(
    <div style={{display:'flex',flexDirection:'column',gap:14}}>
      {blockedAlert && BlockedClientAlertW && <BlockedClientAlertW client={blockedAlert} onClose={()=>setBlockedAlert(null)}/>}
      {/* CLIENTE */}
      <div style={{background:'#F8FAFC',border:'1px solid #E4E7EC',borderRadius:10,padding:18}}>
        <SH icon="👤" label="CLIENTE"/>
        {/* [FEATURE crédito 20260504] Badge: cliente tem crédito disponível */}
        {(()=>{
          if(!form.clientId)return null;
          const cli=clientsById[form.clientId];
          const credit=Number(cli?.creditBalance||cli?.credit_balance||0);
          if(credit<=0)return null;
          const baseTotal=saleFinalTotal(form);
          const willApply=Math.min(credit,baseTotal);
          return(
            <div style={{background:'#ECFDF5',border:'1px solid #10B98166',borderRadius:8,padding:'10px 14px',marginBottom:12,display:'flex',justifyContent:'space-between',alignItems:'center',fontSize:13}}>
              <span style={{color:'#065F46'}}>💰 <strong>Cliente tem {fmt(credit)} de crédito.</strong> Será abatido na conversão em venda.</span>
              {baseTotal>0&&<span style={{color:'#059669',fontWeight:700}}>Aplicará: {fmt(willApply)}</span>}
            </div>
          );
        })()}
        <div className="form-group" style={{margin:'0 0 12px'}}>
          <label style={{display:'flex',alignItems:'center',gap:8}}>
            Nome do cliente{form.clientId&&<span style={{fontSize:11,color:'#16A34A',fontWeight:700}}>✓ selecionado</span>}
          </label>
          <div style={{position:'relative'}}>
            <input value={clientSearch}
              onChange={e=>{setClientSearch(e.target.value);setShowClientDrop(true);if(!e.target.value)setForm(f=>({...f,clientId:''}));}}
              onFocus={()=>setShowClientDrop(true)}
              onBlur={()=>setTimeout(()=>setShowClientDrop(false),150)}
              placeholder="Buscar cliente..." style={{paddingLeft:30}} autoComplete="off"/>
            <span style={{position:'absolute',left:10,top:'50%',transform:'translateY(-50%)',color:'#9CA3AF',fontSize:13,pointerEvents:'none'}}>👤</span>
            {showClientDrop&&(
              <div style={{position:'absolute',top:'calc(100% + 4px)',left:0,right:0,background:'#FFFFFF',border:'1px solid #1B2A4A33',borderRadius:8,maxHeight:200,overflowY:'auto',zIndex:200,boxShadow:'0 8px 24px rgba(0,0,0,0.12)'}}>
                {visibleClients.filter(c=>!clientSearch||c.name.toLowerCase().includes(clientSearch.toLowerCase())).map(c=>(
                  <div key={c.id} onMouseDown={()=>{if(window.znxIsClientBlocked&&window.znxIsClientBlocked(c)){setShowClientDrop(false);setBlockedAlert(c);return;}setClientSearch(c.name);setForm(f=>({...f,clientId:c.id}));setShowClientDrop(false);}}
                    style={{padding:'9px 14px',cursor:'pointer',borderBottom:'1px solid #F3F4F6',display:'flex',justifyContent:'space-between',alignItems:'center'}}
                    onMouseEnter={e=>e.currentTarget.style.background='#F3F4F6'}
                    onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                    <div>
                      <div style={{fontSize:13,fontWeight:500}}>{window.znxIsClientBlocked&&window.znxIsClientBlocked(c)&&<span title="Cliente bloqueado" style={{marginRight:5}}>🚫</span>}{c.name}</div>
                      {(c.phone||c.whatsapp||c.city)&&<div style={{fontSize:11,color:'#9CA3AF',marginTop:1}}>{[c.phone||c.whatsapp,c.city&&c.state?`${c.city}/${c.state}`:c.city||c.state].filter(Boolean).join(' · ')}</div>}
                    </div>
                    <span className={`badge ${c.type==='PJ'?'badge-blue':'badge-gray'}`} style={{fontSize:10}}>{c.type}</span>
                  </div>
                ))}
                {visibleClients.filter(c=>!clientSearch||c.name.toLowerCase().includes(clientSearch.toLowerCase())).length===0&&(
                  <div style={{padding:'12px 14px',textAlign:'center',color:'#9CA3AF',fontSize:13}}>
                    Nenhum cliente {user?.role==='vendedor'?'na sua carteira':'encontrado'}.
                    {user?.role==='vendedor'&&<div style={{fontSize:11,marginTop:6,color:'#7C3AED'}}>Cadastre um novo cliente em Clientes.</div>}
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
        <div style={{display:'grid',gridTemplateColumns:user&&user.role!=='vendedor'&&vendedores&&vendedores.length>0?'1fr 1fr':'1fr',gap:12}}>
          {user&&user.role!=='vendedor'&&vendedores&&vendedores.length>0&&(
            <div className="form-group" style={{margin:0}}>
              <label>Vendedor</label>
              <SmartSelect value={form.sellerName||''} onChange={val=>setForm(f=>({...f,sellerName:val}))} options={[{value:'',label:'— Sem vendedor —'},...vendedores.map(v=>({value:v.name,label:v.name}))]}/>
            </div>
          )}
          <div className="form-group" style={{margin:0}}><label>Status</label>
            <SmartSelect value={form.status} onChange={val=>setForm(f=>({...f,status:val}))} options={ORC_STATUSES.filter(s=>s!=='Convertido').map(s=>({value:s,label:s}))}/>
          </div>
        </div>
      </div>
      {/* BUSCAR PRODUTO */}
      <div style={{background:'#F8FAFC',border:'1px solid #E4E7EC',borderRadius:10,padding:18}}>
        <SH icon="🔍" label="BUSCAR PRODUTO"/>
        <div style={{display:'grid',gridTemplateColumns:'2fr 1fr 1fr 1fr 1fr auto',gap:10,alignItems:'end'}}>
          <div className="form-group" style={{margin:0}}>
            <label style={{display:'flex',alignItems:'center',gap:8}}>
              Perfume
              {itemForm.productId&&(()=>{
                const p=productsById[itemForm.productId];
                if(!p)return null;
                // [STOCK-RESERVE 20260422]
                const ai=getAvailableStockForSeller(products,quotes,p.id,editingId||null,getUserContext(user));
                if(p.stock<=0&&isDecant(p))return<span style={{fontSize:11,color:'#6366F1',fontWeight:700}}>Decant · Sob pedido</span>;
                if(ai.available===0)return<span style={{fontSize:11,color:'#DC2626',fontWeight:700}}>ESGOTADO (0/{ai.physicalStock})</span>;
                const reservaLabel=!ai.isNonSeller&&ai.reservedByOthers>0?` (${ai.reservedByOthers} res.)`:'';
                if(ai.available<5)return<span style={{fontSize:11,color:'#EA580C'}}>Disp: {ai.available}/{ai.physicalStock}{reservaLabel}</span>;
                return<span style={{fontSize:11,color:'#16A34A'}}>Disp: {ai.available}/{ai.physicalStock}{reservaLabel}</span>;
              })()}
            </label>
            <div style={{position:'relative'}}>
              <input value={prodSearch}
                onChange={e=>{setProdSearch(e.target.value);setShowProdDrop(true);if(!e.target.value)setItemForm(f=>({...f,productId:'',price:0}));}}
                onFocus={()=>setShowProdDrop(true)}
                onBlur={()=>setTimeout(()=>setShowProdDrop(false),150)}
                placeholder="Digite o nome do perfume..." style={{paddingLeft:30}} autoComplete="off"/>
              <span style={{position:'absolute',left:10,top:'50%',transform:'translateY(-50%)',color:'#9CA3AF',fontSize:13,pointerEvents:'none'}}>🔍</span>
              {showProdDrop&&(
                <div style={{position:'absolute',top:'calc(100% + 4px)',left:0,right:0,background:'#F9FAFB',border:'1px solid #1B2A4A33',borderRadius:8,maxHeight:240,overflowY:'auto',zIndex:200,boxShadow:'0 8px 24px rgba(0,0,0,0.12)'}}>
                  {(prodSearch.trim()?searchProducts(products,prodSearch):products.slice(0,30)).map(p=>{
                    // [STOCK-RESERVE 20260422]
                    const ai=getAvailableStockForSeller(products,quotes,p.id,editingId||null,getUserContext(user));
                    const isZero=ai.available<=0;
                    const decant=isDecant(p);
                    const bloqueado=isZero&&!decant;
                    return(
                      <div key={p.id}
                        onMouseDown={()=>{if(bloqueado)return;setProdSearch(p.name);setItemForm(f=>({...f,productId:String(p.id),price:p.salePrice||0}));setShowProdDrop(false);}}
                        style={{padding:'10px 14px',cursor:bloqueado?'not-allowed':'pointer',display:'flex',justifyContent:'space-between',alignItems:'center',borderBottom:'1px solid #F3F4F6',background:itemForm.productId===String(p.id)?'#EEF2FF':'transparent',opacity:bloqueado?0.5:1,transition:'background .1s'}}
                        onMouseEnter={e=>{if(!bloqueado)e.currentTarget.style.background='#EEF2FF';}}
                        onMouseLeave={e=>e.currentTarget.style.background=itemForm.productId===String(p.id)?'#EEF2FF':'transparent'}>
                        <div>
                          <div style={{fontSize:13,fontWeight:600,color:bloqueado?'#9CA3AF':'#1B2A4A'}}>{p.code?p.code+' — ':''}{p.name}{decant&&<span style={{background:'#EEF2FF',color:'#6366F1',fontSize:10,fontWeight:700,padding:'2px 5px',borderRadius:4,marginLeft:5}}>Decant</span>}</div>
                          <div style={{fontSize:11,color:'#6B7280',marginTop:1}}>{p.brand||''}{ai.physicalStock!=null?' | Est: '+ai.physicalStock:''}</div>
                        </div>
                        <div style={{fontSize:11,textAlign:'right'}}>
                          {isZero&&decant&&<span style={{color:'#6366F1',fontWeight:700}}>Sob pedido</span>}
                          {isZero&&!decant&&<span style={{color:'#DC2626',fontWeight:700}}>{ai.reservedByOthers>0&&!ai.isNonSeller?`Reservado (${ai.reservedByOthers} outras)`:'ZERADO'}</span>}
                          {!isZero&&<span style={{color:ai.available<10?'#EA580C':'#16A34A'}}>{ai.available} disp.{!ai.isNonSeller&&ai.reservedByOthers>0?` (${ai.reservedByOthers} res.)`:''}</span>}
                        </div>
                      </div>
                    );
                  })}
                  {prodSearch.trim()&&fuzzyFilter(products,prodSearch,p=>[p.name||'',p.brand||'']).length===0&&(
                    <div style={{padding:'14px',textAlign:'center',color:'#6B7280',fontSize:13}}>Nenhum produto encontrado</div>
                  )}
                </div>
              )}
            </div>
          </div>
          <div className="form-group" style={{margin:0}}><label>Qtd</label><input type="number" min="1" value={itemForm.qty} onChange={e=>setItemForm(f=>({...f,qty:e.target.value}))}/></div>
          <div className="form-group" style={{margin:0}}>
            <label style={{display:'flex',alignItems:'center',gap:6}}>
              Preço Unit.
              {(()=>{
                if(!itemForm.productId)return null;
                const p=productsById[itemForm.productId];
                if(!p)return null;
                const tabela=Number(p.salePrice||p.sale_price||0);
                const preco=Number(itemForm.price)||0;
                if(tabela>0&&preco>0&&preco<tabela){
                  return <span style={{fontSize:10,color:'#DC2626',fontWeight:700}} title={`Preço de tabela: ${fmt(tabela)}`}>⚠️ {fmt(tabela-preco)} abaixo da tabela</span>;
                }
                return null;
              })()}
            </label>
            <input type="number" value={itemForm.price}
              onChange={e=>setItemForm(f=>({...f,price:e.target.value,discountVal:((Number(e.target.value)*f.discountPct)/100).toFixed(2)}))}
              style={(()=>{
                if(!itemForm.productId)return undefined;
                const p=productsById[itemForm.productId];
                if(!p)return undefined;
                const tabela=Number(p.salePrice||p.sale_price||0);
                const preco=Number(itemForm.price)||0;
                if(tabela>0&&preco>0&&preco<tabela){
                  return {border:'2px solid #DC2626',background:'#FEF2F2'};
                }
                return undefined;
              })()}/>
          </div>
          <div className="form-group" style={{margin:0}}><label>Desc %</label><input type="number" min="0" max="100" step="0.1" value={itemForm.discountPct} onChange={e=>{const pct=Number(e.target.value)||0;setItemForm(f=>({...f,discountPct:pct,discountVal:(Number(f.price)*pct/100).toFixed(2)}))}}/></div>
          <div className="form-group" style={{margin:0}}><label>Desc R$</label><input type="number" min="0" step="0.01" value={itemForm.discountVal} onChange={e=>{const val=Number(e.target.value)||0;setItemForm(f=>({...f,discountVal:val,discountPct:f.price>0?Number((val/Number(f.price)*100).toFixed(1)):0}))}}/></div>
          {/* [BUG-FIX 20260512 v202] disabled quando productId vazio + tooltip explicativo */}
          <button className="btn-gold" onClick={addItem} disabled={!itemForm.productId}
            title={!itemForm.productId?'Selecione um perfume CLICANDO numa sugestão da lista primeiro':'Adicionar à lista'}
            style={{marginBottom:1,padding:'9px 16px',opacity:itemForm.productId?1:0.45,cursor:itemForm.productId?'pointer':'not-allowed'}}>+ Add</button>
        </div>
      </div>
      {/* ITENS */}
      <div style={{background:'#F8FAFC',border:'1px solid #E4E7EC',borderRadius:10,padding:18}}>
        <SH icon="📦" label="ITENS DO ORÇAMENTO"/>
        {form.items.length>0?(
          <div style={{borderRadius:8,overflow:'hidden',border:'1px solid #E4E7EC'}}>
            <table style={{margin:0}}>
              <thead>
                <tr style={{background:'#1B2A4A'}}>
                  <th style={{color:'#fff',padding:'10px 14px',textAlign:'left',fontWeight:600}}>Produto</th>
                  <th style={{color:'#fff',fontWeight:600}}>Qtd</th>
                  <th style={{color:'#fff',fontWeight:600}}>Preço</th>
                  <th style={{color:'#fff',fontWeight:600}}>Desc%</th>
                  <th style={{color:'#B89840',fontWeight:600}}>Subtotal</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {/* [FIX D-B/C v113 2026-05-08] Detectar e avisar quando item está abaixo da tabela.
                    B = aviso vermelho na linha do item.
                    C = botão "🔄 Atualizar tudo pra preço de tabela" no footer da tabela. */}
                {form.items.map((it,i)=>{
                  const cat = productsById[it.productId];
                  const tabela = Number(cat?.salePrice||cat?.sale_price||0);
                  const preco = Number(it.price)||0;
                  const priceBelow = tabela>0 && preco<tabela;
                  const diff = priceBelow ? (tabela-preco)*Number(it.qty||1) : 0;
                  return(
                  <tr key={i} style={{background:priceBelow?'#FEF2F2':'transparent'}}>
                    <td style={{fontWeight:500,padding:'10px 14px'}}>
                      {it.name||it.productName||it.product_name||cat?.name||'—'}
                      {priceBelow&&(
                        <div style={{display:'inline-flex',alignItems:'center',gap:4,marginLeft:8,padding:'2px 8px',background:'#DC2626',color:'#fff',borderRadius:4,fontSize:10,fontWeight:700}} title={`Tabela atual: ${fmt(tabela)} · Você está vendendo ${fmt(preco)} = ${fmt(diff)} abaixo. Vai exigir aprovação do admin.`}>
                          ⚠️ R$ {(tabela-preco).toFixed(2)} abaixo da tabela
                        </div>
                      )}
                    </td>
                    <td><input type="number" min="1" value={it.qty} onChange={e=>setForm(f=>({...f,items:f.items.map((x,idx)=>idx===i?{...x,qty:Number(e.target.value)}:x)}))} style={{width:60,padding:'3px 6px',fontSize:12}}/></td>
                    <td>
                      <input type="number" value={it.price} onChange={e=>setForm(f=>({...f,items:f.items.map((x,idx)=>idx===i?{...x,price:Number(e.target.value)}:x)}))} style={{width:80,padding:'3px 6px',fontSize:12,border:priceBelow?'2px solid #DC2626':'1px solid #D1D5DB',background:priceBelow?'#FEE2E2':'#fff'}}/>
                      {priceBelow&&<div style={{fontSize:9,color:'#9CA3AF',marginTop:2}}>Tabela: {fmt(tabela)}</div>}
                    </td>
                    <td style={{color:it.discountPct>0?'#EA580C':'#555'}}>{it.discountPct>0?it.discountPct+'%':'—'}</td>
                    <td className="gold" style={{fontWeight:700}}>{fmt(it.qty*itemNet(it))}</td>
                    {/* [BUG-FIX 20260512 v202] Botão 🔄 Trocar — remove o item E foca no campo busca pra evitar fluxo confuso de 3 passos.
                        Antes: vendedora precisava (1) clicar ×, (2) buscar novo, (3) clicar sugestão, (4) clicar +Add — confundia. */}
                    <td style={{whiteSpace:'nowrap'}}>
                      <button className="btn-sm" title="Trocar este perfume por outro"
                        onClick={()=>{
                          setForm(f=>({...f,items:f.items.filter((_,idx)=>idx!==i)}));
                          setItemForm({productId:'',qty:Number(it.qty)||1,price:0,discountPct:0,discountVal:0});
                          setProdSearch('');setShowProdDrop(true);
                          toast('🔄 '+(it.name||it.productName||'Item')+' removido. Agora busque o novo perfume na lista acima e CLIQUE numa sugestão.');
                          setTimeout(()=>{const inp=document.querySelector('input[placeholder*="Digite o nome do perfume"]');if(inp){inp.focus();}},120);
                        }}
                        style={{background:'#3B82F6',color:'#fff',border:'none',borderRadius:4,padding:'4px 8px',marginRight:4,cursor:'pointer',fontSize:12}}>🔄</button>
                      <button className="btn-danger btn-sm" title="Remover este item"
                        onClick={()=>setForm(f=>({...f,items:f.items.filter((_,idx)=>idx!==i)}))}>×</button>
                    </td>
                  </tr>
                  );
                })}
                {/* [FIX D-C v113] Resumo + botão atualizar preços de tabela */}
                {(()=>{
                  const itemsAbaixo = form.items.filter(it=>{
                    const cat = productsById[it.productId];
                    const tabela = Number(cat?.salePrice||cat?.sale_price||0);
                    return tabela>0 && Number(it.price)<tabela;
                  });
                  if(itemsAbaixo.length===0) return null;
                  const totalAbaixo = itemsAbaixo.reduce((s,it)=>{
                    const cat = productsById[it.productId];
                    return s + (Number(cat?.salePrice||cat?.sale_price||0)-Number(it.price))*Number(it.qty||1);
                  },0);
                  return(
                    <tr style={{background:'#FEF2F2',borderTop:'2px solid #DC2626'}}>
                      <td colSpan="6" style={{padding:'10px 14px'}}>
                        <div style={{display:'flex',alignItems:'center',gap:12,flexWrap:'wrap'}}>
                          <div style={{flex:1,minWidth:200}}>
                            <div style={{fontSize:12,fontWeight:700,color:'#DC2626'}}>⚠️ {itemsAbaixo.length} item{itemsAbaixo.length>1?'s':''} abaixo da tabela · diferença total {fmt(totalAbaixo)}</div>
                            <div style={{fontSize:10,color:'#7F1D1D',marginTop:2}}>Vai exigir aprovação do admin (mesmo sem desconto explícito)</div>
                          </div>
                          <button
                            onClick={()=>{
                              setForm(f=>({...f,items:f.items.map(it=>{
                                const cat = productsById[it.productId];
                                const tabela = Number(cat?.salePrice||cat?.sale_price||0);
                                if(tabela>0&&Number(it.price)<tabela){
                                  return {...it,price:tabela};
                                }
                                return it;
                              })}));
                            }}
                            style={{padding:'8px 14px',background:'#DC2626',color:'#fff',border:'none',borderRadius:6,fontWeight:700,fontSize:12,cursor:'pointer'}}
                            title="Atualiza todos os items abaixo da tabela pro preço atual cadastrado">
                            🔄 Atualizar tudo pra tabela
                          </button>
                        </div>
                      </td>
                    </tr>
                  );
                })()}
                {saleDiscount(form.items)>0&&<tr><td colSpan="3" style={{textAlign:'right',color:'#9CA3AF',fontSize:12,paddingRight:12}}>Subtotal bruto:</td><td/><td style={{color:'#9CA3AF'}}>{fmt(saleGross(form.items))}</td><td/></tr>}
                {saleDiscount(form.items)>0&&<tr><td colSpan="3" style={{textAlign:'right',color:'#EA580C',fontSize:12,paddingRight:12}}>Desc. por produto:</td><td/><td style={{color:'#EA580C'}}>−{fmt(saleDiscount(form.items))}</td><td/></tr>}
                {(()=>{const _sub=saleTotal(form.items);const _gd=form.globalDiscountType==='pct'?_sub*((form.globalDiscountValue||0)/100):form.globalDiscountType==='val'?(form.globalDiscountValue||0):0;const _fin=_sub-_gd;return(<><tr style={{background:'#FFF8F0'}}><td colSpan="5" style={{padding:'8px 14px'}}><div style={{display:'flex',gap:8,alignItems:'center'}}><span style={{fontSize:12,fontWeight:700,color:'#92700A',marginRight:4}}>🏷️ Desc. Global:</span><button onClick={()=>setForm(f=>({...f,globalDiscountType:f.globalDiscountType==='pct'?'':'pct',globalDiscountValue:0}))} style={{padding:'4px 10px',borderRadius:6,border:'1.5px solid '+(form.globalDiscountType==='pct'?'#B89840':'#D1D5DB'),background:form.globalDiscountType==='pct'?'#FFFBF0':'#fff',fontWeight:700,fontSize:12,cursor:'pointer',color:form.globalDiscountType==='pct'?'#1B2A4A':'#6B7280'}}>%</button><button onClick={()=>setForm(f=>({...f,globalDiscountType:f.globalDiscountType==='val'?'':'val',globalDiscountValue:0}))} style={{padding:'4px 10px',borderRadius:6,border:'1.5px solid '+(form.globalDiscountType==='val'?'#B89840':'#D1D5DB'),background:form.globalDiscountType==='val'?'#FFFBF0':'#fff',fontWeight:700,fontSize:12,cursor:'pointer',color:form.globalDiscountType==='val'?'#1B2A4A':'#6B7280'}}>R$</button>{form.globalDiscountType&&<input type="number" min="0" step={form.globalDiscountType==='pct'?'0.1':'1'} value={form.globalDiscountValue||''} placeholder={form.globalDiscountType==='pct'?'%':'R$'} onChange={e=>setForm(f=>({...f,globalDiscountValue:Number(e.target.value)||0}))} style={{width:80,padding:'4px 8px',borderRadius:6,border:'1.5px solid #B89840',fontSize:12,outline:'none'}}/>}{_gd>0&&<span style={{fontWeight:700,color:'#16A34A',fontSize:12}}>−{fmt(_gd)}</span>}</div></td><td/></tr><tr style={{background:'#FFFBEB',borderTop:'2px solid #1B2A4A22'}}><td colSpan="3" style={{textAlign:'right',fontWeight:700,paddingRight:12,fontSize:14}}>Total líquido:</td><td/><td className="gold" style={{fontWeight:800,fontSize:15}}>{fmt(_fin)}</td><td/></tr></>);})()}
              </tbody>
            </table>
          </div>
        ):(
          <div style={{textAlign:'center',color:'#9CA3AF',padding:'28px 0',fontSize:13,border:'1px dashed #D1D5DB',borderRadius:8}}>
            📭 Nenhum produto adicionado ainda
          </div>
        )}
      </div>
      {/* ENTREGA */}
      <div style={{background:'#F8FAFC',border:'1px solid #E4E7EC',borderRadius:10,padding:18}}>
        <SH icon="🚚" label="OPÇÕES DE ENTREGA"/>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:10,marginBottom:10}}>
          {['Retirada','PAC','Sedex','Motoboy','Transportadora'].map(opt=>{
            const sel=form.frete===opt;
            return(
              <button key={opt} onClick={()=>setForm(f=>({...f,frete:opt,embalagem:opt==='Retirada'?f.embalagem:''}))}
                style={{padding:'10px',border:'1.5px solid '+(sel?'#B89840':'#E4E7EC'),borderRadius:8,background:sel?'#FFFBF0':'#fff',cursor:'pointer',textAlign:'center',transition:'all .15s',fontWeight:700,fontSize:13,color:sel?'#1B2A4A':'#374151'}}>
                {opt}
              </button>
            );
          })}
        </div>
        {form.frete==='Retirada'&&(
          <div>
            <div style={{fontSize:11,fontWeight:700,color:'#6B7280',marginBottom:6,textTransform:'uppercase',letterSpacing:.5}}>Embalagem</div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
              {['Sacola','Caixa'].map(emb=>{
                const sel=form.embalagem===emb;
                return(
                  <button key={emb} onClick={()=>setForm(f=>({...f,embalagem:sel?'':emb}))}
                    style={{padding:'10px',border:'1.5px solid '+(sel?'#B89840':'#E4E7EC'),borderRadius:8,background:sel?'#FFFBF0':'#fff',cursor:'pointer',textAlign:'center',fontWeight:700,fontSize:13,color:sel?'#1B2A4A':'#9CA3AF'}}>
                    {emb==='Sacola'?'🛍️ Sacola':'📦 Caixa'}
                  </button>
                );
              })}
            </div>
          </div>
        )}
        {(form.frete==='PAC'||form.frete==='Sedex'||form.frete==='Motoboy')&&(()=>{
          const ee=form.enderecoEntrega||{};
          const inp=(field,placeholder)=>(
            <input key={field} value={ee[field]||''} placeholder={placeholder}
              onChange={e=>setForm(f=>({...f,enderecoEntrega:{...(f.enderecoEntrega||{}),[field]:e.target.value}}))}
              style={{padding:'8px 10px',borderRadius:7,border:'1.5px solid #D1D5DB',fontSize:13,width:'100%',boxSizing:'border-box'}}/>
          );
          return(
            <div style={{background:'#F0F4FF',border:'1px solid #C7D2FE',borderRadius:8,padding:12,marginTop:8}}>
              <div style={{fontSize:11,fontWeight:700,color:'#374151',marginBottom:8}}>📮 Endereço para {form.frete}</div>
              <div style={{display:'flex',flexDirection:'column',gap:7}}>
                {inp('nome','Nome do destinatário')}
                <div style={{display:'grid',gridTemplateColumns:'1fr 2fr',gap:7}}>{inp('cep','CEP')}{inp('endereco','Rua / Avenida')}</div>
                <div style={{display:'grid',gridTemplateColumns:'1fr 2fr 2fr',gap:7}}>{inp('numero','Nº')}{inp('complemento','Complemento')}{inp('bairro','Bairro')}</div>
                <div style={{display:'grid',gridTemplateColumns:'2fr 1fr',gap:7}}>{inp('cidade','Cidade')}{inp('estado','UF')}</div>
              </div>
            </div>
          );
        })()}
        {form.frete==='Transportadora'&&(<>
          {/* [v224.42 ENTREGA TRANSPORTADORA] Data + Hora OBRIGATÓRIOS · save bloqueia se vazio */}
          <div style={{background:'#FFF7ED',border:'1.5px solid #FED7AA',borderRadius:8,padding:12,marginTop:8}}>
            <div style={{fontSize:11,fontWeight:700,color:'#9A3412',marginBottom:8}}>🚚 Data e Horário da Entrega <span style={{color:'#DC2626'}}>*</span></div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
              <input type="date" value={(form.enderecoEntrega||{}).delivery_date||''}
                onChange={e=>setForm(f=>({...f,enderecoEntrega:{...(f.enderecoEntrega||{}),delivery_date:e.target.value}}))}
                style={{padding:'8px 10px',borderRadius:7,border:'1.5px solid #FED7AA',fontSize:13,boxSizing:'border-box',background:'#fff'}}/>
              <input type="time" value={(form.enderecoEntrega||{}).delivery_time||''}
                onChange={e=>setForm(f=>({...f,enderecoEntrega:{...(f.enderecoEntrega||{}),delivery_time:e.target.value}}))}
                style={{padding:'8px 10px',borderRadius:7,border:'1.5px solid #FED7AA',fontSize:13,boxSizing:'border-box',background:'#fff'}}/>
            </div>
            {(!((form.enderecoEntrega||{}).delivery_date) || !((form.enderecoEntrega||{}).delivery_time)) && (
              <div style={{marginTop:6,fontSize:11,color:'#DC2626',fontWeight:600}}>⚠️ Preencha data E horário · obrigatório pra Transportadora</div>
            )}
          </div>
          <div style={{background:'#F0F4FF',border:'1px solid #C7D2FE',borderRadius:8,padding:12,marginTop:8}}>
            <div style={{fontSize:11,fontWeight:700,color:'#374151',marginBottom:8}}>📦 O que escrever na caixa</div>
            <textarea value={form.obsTransportadora||''} onChange={e=>setForm(f=>({...f,obsTransportadora:e.target.value}))}
              placeholder="Ex: FRÁGIL — João Silva — Rua das Flores, 123 — SP" rows={2}
              style={{width:'100%',padding:'8px 10px',borderRadius:7,border:'1.5px solid #D1D5DB',fontSize:13,resize:'vertical',boxSizing:'border-box'}}/>
          </div>
        </>)}
      </div>
      {/* NOTA FISCAL */}
      <div style={{background:'#F8FAFC',border:'1px solid #E4E7EC',borderRadius:10,padding:18}}>
        <SH icon="📄" label="NOTA FISCAL"/>
        <button onClick={()=>setForm(f=>({...f,nfEnabled:!f.nfEnabled}))}
          style={{width:'100%',padding:'12px 14px',border:'1.5px solid '+(form.nfEnabled?'#B89840':'#E4E7EC'),borderRadius:10,background:form.nfEnabled?'#FFFBEB':'#fff',cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'space-between',transition:'all .15s'}}>
          <span style={{display:'flex',alignItems:'center',gap:10}}>
            <span style={{fontSize:20}}>📄</span>
            <span style={{textAlign:'left'}}>
              <div style={{fontWeight:700,fontSize:13,color:form.nfEnabled?'#1B2A4A':'#374151'}}>Cliente quer Nota Fiscal</div>
              <div style={{fontSize:11,color:form.nfEnabled?'#92700A':'#9CA3AF',marginTop:1,fontWeight:form.nfEnabled?700:400}}>{form.nfEnabled?'5% adicionado ao total':'Adiciona 5% sobre o total'}</div>
            </span>
          </span>
          <span style={{width:42,height:24,borderRadius:12,background:form.nfEnabled?'#B89840':'#D1D5DB',display:'flex',alignItems:'center',padding:'0 3px',transition:'all .2s',justifyContent:form.nfEnabled?'flex-end':'flex-start'}}>
            <span style={{width:18,height:18,borderRadius:'50%',background:'#fff',boxShadow:'0 1px 3px rgba(0,0,0,.2)'}}/>
          </span>
        </button>
        {form.nfEnabled&&(()=>{
          const nf=form.notaFiscal||{};
          const nfInp=(field,placeholder)=>(
            <input value={nf[field]||''} placeholder={placeholder}
              onChange={e=>setForm(f=>({...f,notaFiscal:{...(f.notaFiscal||{}),[field]:e.target.value}}))}
              style={{padding:'8px 10px',borderRadius:7,border:'1.5px solid #D1D5DB',fontSize:13,width:'100%',boxSizing:'border-box',marginTop:0}}/>
          );
          const baseTotal=saleFinalTotal(form);
          const nfVal=baseTotal*0.05;
          return(
            <div style={{marginTop:12,display:'flex',flexDirection:'column',gap:7}}>
              {nfVal>0&&<div style={{padding:'8px 12px',background:'#FFFBEB',border:'1px solid #B89840',borderRadius:8,fontSize:12,color:'#92700A',fontWeight:700,display:'flex',justifyContent:'space-between'}}>
                <span>📄 Nota Fiscal (5% sobre o total)</span>
                <span>+{fmt(nfVal)}</span>
              </div>}
              <div style={{display:'grid',gridTemplateColumns:'2fr 1fr',gap:7}}>{nfInp('numero','Número da NF')}{nfInp('serie','Série')}</div>
              {nfInp('chave','Chave de Acesso (44 dígitos)')}
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:7}}>{nfInp('emissao','Data de Emissão')}{nfInp('cnpj','CNPJ do Emitente')}</div>
              {nfInp('obs','Observações da NF (opcional)')}
            </div>
          );
        })()}
      </div>
      {/* FORMA DE PAGAMENTO — Pix / Dinheiro / Misto (FEAT 20260504) */}
      <div style={{background:'#F8FAFC',border:'1px solid #E4E7EC',borderRadius:10,padding:18}}>
        <SH icon="💳" label="FORMA DE PAGAMENTO"/>
        <div style={{display:'flex',gap:10,marginTop:4}}>
          {[{k:'Pix',l:'🔵 Pix'},{k:'Dinheiro Vivo',l:'💵 Dinheiro'},{k:'Misto',l:'🔀 Misto'}].map(({k,l})=>(
            <button key={k} onClick={()=>setForm(f=>{
              const sel=f.paymentMethod===k?'':k;
              // Reset dos splits ao trocar método
              return{...f,paymentMethod:sel,paymentPixValue:0,paymentCashValue:0};
            })}
              style={{flex:1,padding:'11px 14px',borderRadius:10,border:'2px solid '+(form.paymentMethod===k?'#1B2A4A':'#E4E7EC'),background:form.paymentMethod===k?'#1B2A4A':'#fff',color:form.paymentMethod===k?'#B89840':'#374151',fontWeight:700,fontSize:13,cursor:'pointer',transition:'all .15s',display:'flex',alignItems:'center',justifyContent:'center',gap:8}}>
              {l}
            </button>
          ))}
        </div>
        {form.paymentMethod==='Misto'&&(()=>{
          const total=Number(saleFinalTotal(form)||0);
          const pix=Number(form.paymentPixValue||0);
          const cash=Number(form.paymentCashValue||0);
          const sum=Number((pix+cash).toFixed(2));
          const diff=Number((total-sum).toFixed(2));
          const ok=Math.abs(diff)<0.01&&pix>0&&cash>0;
          return(
            <div style={{marginTop:14,display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
              <div>
                <label style={{display:'block',fontSize:11,fontWeight:700,color:'#374151',marginBottom:4}}>🔵 Valor Pix</label>
                <input type="number" min="0" step="0.01" value={pix||''}
                  onChange={e=>setForm(f=>({...f,paymentPixValue:Number(e.target.value)||0}))}
                  style={{width:'100%',padding:'10px 12px',borderRadius:8,border:'1px solid '+(ok?'#10B981':'#E4E7EC'),fontSize:14,fontWeight:600,boxSizing:'border-box'}} placeholder="0,00"/>
              </div>
              <div>
                <label style={{display:'block',fontSize:11,fontWeight:700,color:'#374151',marginBottom:4}}>💵 Valor Dinheiro</label>
                <input type="number" min="0" step="0.01" value={cash||''}
                  onChange={e=>setForm(f=>({...f,paymentCashValue:Number(e.target.value)||0}))}
                  style={{width:'100%',padding:'10px 12px',borderRadius:8,border:'1px solid '+(ok?'#10B981':'#E4E7EC'),fontSize:14,fontWeight:600,boxSizing:'border-box'}} placeholder="0,00"/>
              </div>
              <div style={{gridColumn:'1 / -1',padding:'10px 12px',borderRadius:8,background:ok?'#ECFDF5':'#FEF2F2',border:'1px solid '+(ok?'#10B98166':'#FCA5A5'),fontSize:12,fontWeight:600,color:ok?'#065F46':'#991B1B',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
                <span>{ok?'✅ Soma confere':(diff>0?`⚠️ Falta ${fmt(diff)} para bater com total`:`⚠️ Excedeu ${fmt(Math.abs(diff))} do total`)}</span>
                <span>Total: {fmt(total)} | Pix+Dinheiro: {fmt(sum)}</span>
              </div>
              <div style={{gridColumn:'1 / -1',display:'flex',gap:6}}>
                <button type="button" onClick={()=>setForm(f=>({...f,paymentPixValue:Number((total/2).toFixed(2)),paymentCashValue:Number((total-Number((total/2).toFixed(2))).toFixed(2))}))}
                  style={{flex:1,padding:'7px 10px',borderRadius:6,border:'1px solid #E4E7EC',background:'#fff',color:'#374151',fontSize:11,fontWeight:600,cursor:'pointer'}}>50/50</button>
                <button type="button" onClick={()=>setForm(f=>({...f,paymentPixValue:total,paymentCashValue:0}))}
                  style={{flex:1,padding:'7px 10px',borderRadius:6,border:'1px solid #E4E7EC',background:'#fff',color:'#374151',fontSize:11,fontWeight:600,cursor:'pointer'}}>Tudo Pix</button>
                <button type="button" onClick={()=>setForm(f=>({...f,paymentPixValue:0,paymentCashValue:total}))}
                  style={{flex:1,padding:'7px 10px',borderRadius:6,border:'1px solid #E4E7EC',background:'#fff',color:'#374151',fontSize:11,fontWeight:600,cursor:'pointer'}}>Tudo Dinheiro</button>
              </div>
            </div>
          );
        })()}
        {!form.paymentMethod&&<div style={{marginTop:8,fontSize:11,color:'#9CA3AF',textAlign:'center'}}>Selecione a forma de pagamento (opcional)</div>}
      </div>
      {/* OBSERVAÇÕES */}
      <div style={{background:'#F8FAFC',border:'1px solid #E4E7EC',borderRadius:10,padding:18}}>
        <SH icon="📝" label="OBSERVAÇÕES / FEEDBACK"/>
        <textarea value={form.notes||''} onChange={e=>setForm(f=>({...f,notes:e.target.value}))} rows={3} style={{resize:'vertical',width:'100%',boxSizing:'border-box',margin:0}} placeholder="Anote pedidos do cliente, condições especiais, solicitações de alteração..."/>
      </div>
    </div>
  );
}

  window.ZNX = window.ZNX || {};
  window.ZNX.components = window.ZNX.components || {};
  window.ZNX.components.QuoteFormBody = QuoteFormBody;
  window.QuoteFormBody = QuoteFormBody;

  window.ZNX.refactor_phase_6_loaded = window.ZNX.refactor_phase_6_loaded || {};
  window.ZNX.refactor_phase_6_loaded.QuoteFormBody = true;

})();
