// js/components/widgets/novavenda/ItemsListPanel.jsx
// [Wave 24 v224.5 NUCLEAR] Search produto + tabela itens + desconto global + pricing summary
// Extraído de NovaVendaPage.jsx L420-615 (literal):
//   - SEÇÃO "Buscar Produtos" (L420-473) com dropdown filtered
//   - SEÇÃO "Itens do pedido" (L475-615) com tabela + desconto global + pricing summary
//   - renderReservedChip helper L21-31 (extraído pra inline aqui)
//
// Deps runtime globals: nid, fmt, itemNet, getAvailableStockForSeller, getUserContext, znxGuard, Sentry
(function(){
  'use strict';

  // [v224.73 + v224.55] vars MOVED to ItemsListPanel body (SecHead local fica IIFE-level)
  // SecHead helper local (consistente com main file)
  function SecHead({icon, title}){
    return (
      <div style={{padding:'13px 20px',borderBottom:'1px solid #F0F2F5',display:'flex',alignItems:'center',gap:8}}>
        <span style={{fontSize:14}}>{icon}</span>
        <span style={{fontSize:10,fontWeight:800,color:'#6B7280',letterSpacing:1.5,textTransform:'uppercase'}}>{title}</span>
      </div>
    );
  }

  // renderReservedChip helper (literal L21-31)
  function renderReservedChip(reservations){
    const reservMap = {};
    (reservations||[]).forEach(function(r){reservMap[r.sellerName] = (reservMap[r.sellerName]||0) + r.qty;});
    const reservStr = Object.entries(reservMap).map(function(pair){return pair[1]+' ('+pair[0]+')';}).join(' · ');
    return (
      <div title={'Reservado em outros orçamentos · '+reservStr}
        style={{marginTop:4,fontSize:10,fontWeight:700,padding:'2px 7px',borderRadius:6,background:'#FEF3C7',color:'#92400E',border:'1px solid #FCD34D',textAlign:'right',display:'inline-block'}}>
        Reservado: {reservStr}
      </div>
    );
  }

  function ItemsListPanel(props){
    const fmt = window.fmt || function(v){return 'R$ '+Number(v||0).toFixed(2);};
    const itemNet = window.itemNet || function(it){return (it.price||0) * (1 - (Number(it.discountPct||0)/100));};
    // [v224.86 FIX 2026-05-30] NAVY + GOLD faltavam — pattern UF_NAMES
    //   ItemsListPanel usa NAVY/GOLD em 17 lugares (color/background/border) mas nunca declarava.
    //   PaymentFretePanel.jsx e NovaVendaPage.jsx (siblings) já tinham a declaração correta.
    //   ReferenceError "NAVY is not defined" quando admin clicava aba Produtos em Venda Direta → tela branca.
    // regra_validacao_helpers_runtime_quando_ordem_scripts_uncertain
    const calcs = window.ZNX && window.ZNX.novavenda && window.ZNX.novavenda.calcs;
    if (!calcs && window.Sentry && typeof window.Sentry.captureMessage === 'function') {
      window.Sentry.captureMessage('[ItemsListPanel v224.86] window.ZNX.novavenda.calcs faltando', 'error');
    }
    const NAVY = (calcs && calcs.NAVY) || '#1B2A4A';
    const GOLD = (calcs && calcs.GOLD) || '#B89840';

    const {form, setForm, search, setSearch, filtered, searchRef,
      productsLoading, products, quotes, user,
      addProduct, removeItem,
      subtotal, totalDiscount, globalDiscAmt, freteV, nfTax, total,
      isDecant, brandMeta} = props;

    return (
      <>
        {/* ── BUSCAR PRODUTOS ── */}
        <div style={{background:'#fff',borderRadius:10,border:'1px solid #E4E7EC',marginBottom:14,overflow:'hidden'}}>
          <SecHead icon="🔍" title={productsLoading?'Buscar Produtos — atualizando estoque…':'Buscar Produtos'}/>
          <div style={{padding:'14px 20px 0 20px'}}>
            {productsLoading && (
              <div style={{fontSize:12,color:'#9CA3AF',marginBottom:8,display:'flex',alignItems:'center',gap:6}}>
                <span style={{animation:'spin 1s linear infinite',display:'inline-block'}}>⏳</span>
                Sincronizando estoque com o servidor…
              </div>
            )}
            <input ref={searchRef} value={search} onChange={function(e){setSearch(e.target.value);}}
              placeholder="Digite nome ou marca..."
              style={{width:'100%',padding:'10px 14px',borderRadius:8,border:'1.5px solid #D1D5DB',fontSize:13,boxSizing:'border-box',outline:'none',color:'#1C1C28',fontFamily:"'Plus Jakarta Sans',sans-serif",background:'#FAFAFA'}}
              onFocus={function(e){e.target.style.borderColor=NAVY; e.target.style.background='#fff';}}
              onBlur={function(e){e.target.style.borderColor='#D1D5DB'; e.target.style.background='#FAFAFA';}}
              autoComplete="off"/>
          </div>
          <div style={{marginTop:12}}>
            {filtered.map(function(p,idx){
              // [STOCK-RESERVE 20260422] Disponível por role
              const _si = (typeof getAvailableStockForSeller === 'function')
                ? getAvailableStockForSeller(products, quotes, p.id, null, (typeof getUserContext==='function' ? getUserContext(user) : {}))
                : {available:p.stock||0, isNonSeller:true, reservedByOthers:0, physicalStock:p.stock||0, reservations:[]};
              const avail = _si.available;
              const inCart = form.items.some(function(i){return typeof nid==='function' ? nid(i.productId, p.id) : String(i.productId)===String(p.id);});
              const m = brandMeta(p.brand);
              const bloqueado = avail<=0 && !isDecant(p);
              return (
                <div key={p.id} style={{padding:'14px 20px',borderTop:'1px solid #F0F2F5',display:'flex',alignItems:'center',gap:16,opacity:bloqueado?0.45:1}}>
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{marginBottom:5}}>
                      <span style={{background:m.bg,color:m.color,fontSize:10,fontWeight:800,padding:'2px 8px',borderRadius:5,letterSpacing:0.3}}>{p.brand}</span>
                      {isDecant(p) && <span style={{background:'#EEF2FF',color:'#6366F1',fontSize:10,fontWeight:700,padding:'2px 6px',borderRadius:5,marginLeft:4}}>Decant</span>}
                    </div>
                    <div style={{fontSize:14,fontWeight:700,color:NAVY,lineHeight:1.2}}>{p.name}</div>
                    <div style={{fontSize:12,color:'#9CA3AF',marginTop:2}}>{p.volume}</div>
                    <div style={{fontSize:15,fontWeight:800,color:GOLD,marginTop:5}}>{fmt(p.salePrice||0)}</div>
                  </div>
                  <div style={{flexShrink:0,textAlign:'right'}}>
                    <button onClick={function(){addProduct(p);}} disabled={bloqueado}
                      style={{background:bloqueado?'#F3F4F6':GOLD,border:'none',color:bloqueado?'#9CA3AF':'#1B2A4A',borderRadius:8,padding:'9px 20px',cursor:bloqueado?'not-allowed':'pointer',fontWeight:800,fontSize:13,display:'block',marginBottom:5,whiteSpace:'nowrap',transition:'all .15s'}}>
                      {inCart?'✓ Adicionado':'+ Adicionar'}
                    </button>
                    <div style={{fontSize:11,color:avail<=0?'#DC2626':avail<=5?'#D97706':'#9CA3AF',textAlign:'right'}}>
                      {avail<=0?'Sem estoque':_si.isNonSeller?(avail+' em estoque'):(avail+' disponível'+(_si.reservedByOthers>0?' ('+_si.physicalStock+' total)':''))}
                    </div>
                    {!_si.isNonSeller && _si.reservedByOthers>0 && renderReservedChip(_si.reservations)}
                  </div>
                </div>
              );
            })}
            {!search && <div style={{padding:'20px',textAlign:'center',color:'#C4C9D4',fontSize:13}}>Digite para buscar produtos</div>}
            {search && filtered.length===0 && <div style={{padding:'28px',textAlign:'center',color:'#9CA3AF',fontSize:13}}>Nenhum produto encontrado</div>}
          </div>
        </div>

        {/* ── ITENS DO PEDIDO ── */}
        <div id="znx-itens" style={{background:'#fff',borderRadius:10,border:'1px solid '+(form.items.length>0?'#E4E7EC':'#F0F2F5'),marginBottom:14,overflow:'hidden',opacity:form.items.length===0?0.5:1}}>
          <SecHead icon="🛒" title={'Itens do pedido'+(form.items.length>0?' ('+form.items.length+')':'')}/>
          {form.items.length===0 ? (
            <div style={{padding:'24px 20px',textAlign:'center',color:'#B0B7C3',fontSize:13}}>Nenhum produto adicionado ainda</div>
          ) : (
            <>
              <div style={{overflowX:'auto'}}>
                <table style={{width:'100%',borderCollapse:'collapse',fontSize:13}}>
                  <thead>
                    <tr style={{background:'#F8F9FB'}}>
                      <th style={{padding:'9px 20px',textAlign:'left',fontWeight:700,color:'#6B7280',fontSize:11,letterSpacing:0.5}}>Produto</th>
                      <th style={{padding:'9px 12px',textAlign:'right',fontWeight:700,color:'#6B7280',fontSize:11,letterSpacing:0.5}}>Preço</th>
                      <th style={{padding:'9px 8px',textAlign:'center',fontWeight:700,color:'#EA580C',fontSize:11,letterSpacing:0.5}}>Desc %</th>
                      <th style={{padding:'9px 20px',textAlign:'center',fontWeight:700,color:'#6B7280',fontSize:11,letterSpacing:0.5}}>Qtd</th>
                      <th style={{padding:'9px 20px',textAlign:'right',fontWeight:700,color:'#6B7280',fontSize:11,letterSpacing:0.5}}>Subtotal</th>
                    </tr>
                  </thead>
                  <tbody>
                    {form.items.map(function(it,i){
                      return (
                        <tr key={i} style={{borderTop:'1px solid #F0F2F5'}}>
                          <td style={{padding:'13px 20px'}}>
                            <div style={{fontWeight:700,color:NAVY,fontSize:13}}>{it.brand||''} {it.name||it.productName||it.product_name||(products.find(function(pp){return pp.id===it.productId;}) || {}).name||'—'} {it.volume||''}</div>
                            <button onClick={function(){removeItem(i);}}
                              style={{background:'none',border:'none',cursor:'pointer',padding:0,fontSize:11,color:'#DC2626',marginTop:2,fontWeight:500,opacity:0.7}}
                              onMouseEnter={function(e){e.currentTarget.style.opacity=1;}}
                              onMouseLeave={function(e){e.currentTarget.style.opacity=0.7;}}>
                              remover
                            </button>
                          </td>
                          <td style={{padding:'13px 12px',textAlign:'right',verticalAlign:'middle'}}>
                            {(function(){
                              const prod = products.find(function(x){return typeof nid==='function' ? nid(x.id, it.productId) : String(x.id)===String(it.productId);});
                              const sysPrice = (prod && prod.salePrice) || 0;
                              const avgC = (prod && prod.avgCost) || 0;
                              const belowSys = it.price < sysPrice && sysPrice > 0;
                              const belowCost = it.price < avgC && avgC > 0;
                              const warn = belowSys || belowCost;
                              return (
                                <div style={{display:'flex',flexDirection:'column',alignItems:'flex-end',gap:4}}>
                                  <input type="number" min="0" step="0.01" value={it.price}
                                    onChange={function(e){
                                      setForm(function(f){
                                        const items = f.items.map(function(x,idx){return idx===i ? Object.assign({},x,{price:parseFloat(e.target.value)||0}) : x;});
                                        return Object.assign({},f,{items:items});
                                      });
                                    }}
                                    style={{width:90,padding:'5px 8px',borderRadius:7,border:'1.5px solid '+(warn?'#F59E0B':'#D1D5DB'),fontSize:13,fontWeight:700,color:warn?'#92400E':NAVY,textAlign:'right',fontFamily:"'Plus Jakarta Sans',sans-serif",outline:'none',background:warn?'#FFFBEB':'#fff'}}
                                    onFocus={function(e){e.target.style.borderColor=warn?'#D97706':NAVY;}}
                                    onBlur={function(e){e.target.style.borderColor=warn?'#F59E0B':'#D1D5DB';}}/>
                                  {warn && (
                                    <div style={{fontSize:10,color:'#B45309',background:'#FFFBEB',border:'1px solid #FDE68A',borderRadius:5,padding:'3px 6px',maxWidth:160,textAlign:'right',lineHeight:1.4}}>
                                      ⚠️ {belowSys ? 'Abaixo do sistema ('+fmt(sysPrice)+')' : 'Abaixo do custo'}{belowCost && user.role==='admin' ? '. Custo médio: '+fmt(avgC) : ''}
                                    </div>
                                  )}
                                </div>
                              );
                            })()}
                          </td>
                          <td style={{padding:'8px',textAlign:'center',verticalAlign:'middle'}}>
                            <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:2}}>
                              <input type="number" min="0" max="100" step="0.1" value={it.discountPct||''}
                                placeholder="0"
                                onChange={function(e){
                                  setForm(function(f){
                                    const items = f.items.map(function(x,idx){return idx===i ? Object.assign({},x,{discountPct:Math.min(100,parseFloat(e.target.value)||0)}) : x;});
                                    return Object.assign({},f,{items:items});
                                  });
                                }}
                                style={{width:58,padding:'5px 6px',borderRadius:7,border:'1.5px solid '+((it.discountPct||0)>0?'#EA580C':'#D1D5DB'),fontSize:13,fontWeight:700,color:(it.discountPct||0)>0?'#EA580C':NAVY,textAlign:'center',fontFamily:"'Plus Jakarta Sans',sans-serif",outline:'none',background:(it.discountPct||0)>0?'#FFF7ED':'#fff'}}
                                onFocus={function(e){e.target.style.borderColor='#EA580C';}}
                                onBlur={function(e){e.target.style.borderColor=(it.discountPct||0)>0?'#EA580C':'#D1D5DB';}}/>
                              {(it.discountPct||0)>0 && <span style={{fontSize:10,color:'#16A34A',fontWeight:700}}>−{fmt(it.qty*it.price*(it.discountPct/100))}</span>}
                            </div>
                          </td>
                          <td style={{padding:'13px 20px',textAlign:'center',verticalAlign:'middle'}}>
                            <input type="number" min="1" value={it.qty}
                              onChange={function(e){
                                setForm(function(f){
                                  const items = f.items.map(function(x,idx){return idx===i ? Object.assign({},x,{qty:Math.max(1,parseInt(e.target.value)||1)}) : x;});
                                  return Object.assign({},f,{items:items});
                                });
                              }}
                              style={{width:64,padding:'5px 8px',borderRadius:7,border:'1.5px solid #D1D5DB',fontSize:15,fontWeight:800,color:NAVY,textAlign:'center',fontFamily:"'Plus Jakarta Sans',sans-serif",outline:'none'}}
                              onFocus={function(e){e.target.style.borderColor=NAVY;}}
                              onBlur={function(e){e.target.style.borderColor='#D1D5DB';}}/>
                          </td>
                          <td style={{padding:'13px 20px',textAlign:'right',fontWeight:800,color:NAVY,fontSize:14,verticalAlign:'middle',whiteSpace:'nowrap'}}>
                            {(it.discountPct||0)>0 && <div style={{fontSize:11,color:'#9CA3AF',textDecoration:'line-through',marginBottom:2}}>{fmt(it.qty*it.price)}</div>}
                            {fmt(it.qty*itemNet(it))}
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
              {/* Desconto Global */}
              <div style={{padding:'14px 20px',borderTop:'1px solid #E4E7EC',background:'#FFF8F0'}}>
                <div style={{fontSize:12,fontWeight:700,color:'#92700A',marginBottom:8,textTransform:'uppercase',letterSpacing:0.5}}>🏷️ Desconto Global do Pedido</div>
                <div style={{display:'flex',gap:8,alignItems:'center'}}>
                  <button onClick={function(){setForm(function(f){return Object.assign({},f,{globalDiscountType:f.globalDiscountType==='pct'?'':'pct', globalDiscountValue:0});});}}
                    style={{padding:'6px 14px',borderRadius:7,border:'1.5px solid '+(form.globalDiscountType==='pct'?GOLD:'#D1D5DB'),background:form.globalDiscountType==='pct'?'#FFFBF0':'#fff',fontWeight:700,fontSize:13,color:form.globalDiscountType==='pct'?NAVY:'#6B7280',cursor:'pointer'}}>%</button>
                  <button onClick={function(){setForm(function(f){return Object.assign({},f,{globalDiscountType:f.globalDiscountType==='val'?'':'val', globalDiscountValue:0});});}}
                    style={{padding:'6px 14px',borderRadius:7,border:'1.5px solid '+(form.globalDiscountType==='val'?GOLD:'#D1D5DB'),background:form.globalDiscountType==='val'?'#FFFBF0':'#fff',fontWeight:700,fontSize:13,color:form.globalDiscountType==='val'?NAVY:'#6B7280',cursor:'pointer'}}>R$</button>
                  {form.globalDiscountType && (
                    <input type="number" min="0" step={form.globalDiscountType==='pct'?'0.1':'1'} max={form.globalDiscountType==='pct'?100:undefined}
                      value={form.globalDiscountValue||''}
                      placeholder={form.globalDiscountType==='pct'?'Ex: 10 (%)':'Ex: 50 (R$)'}
                      onChange={function(e){setForm(function(f){return Object.assign({},f,{globalDiscountValue:Number(e.target.value)||0});});}}
                      style={{flex:1,padding:'7px 10px',borderRadius:7,border:'1.5px solid '+GOLD,fontSize:13,outline:'none',color:NAVY,fontWeight:700}}/>
                  )}
                  {(form.globalDiscountValue||0)>0 && <span style={{fontSize:13,fontWeight:700,color:'#16A34A'}}>−{fmt(globalDiscAmt)}</span>}
                </div>
              </div>
              {/* Pricing summary */}
              <div style={{padding:'16px 20px',borderTop:'1px solid #E4E7EC',background:'#FAFBFC'}}>
                <div style={{display:'flex',flexDirection:'column',gap:7,maxWidth:300,marginLeft:'auto'}}>
                  <div style={{display:'flex',justifyContent:'space-between',fontSize:13,color:'#6B7280'}}>
                    <span>Subtotal</span>
                    <span style={{fontWeight:600,color:'#374151'}}>{fmt(subtotal)}</span>
                  </div>
                  {totalDiscount>0 && (
                    <div style={{display:'flex',justifyContent:'space-between',fontSize:13,color:'#16A34A'}}>
                      <span>Desc. por produto</span>
                      <span style={{fontWeight:700}}>−{fmt(totalDiscount)}</span>
                    </div>
                  )}
                  {globalDiscAmt>0 && (
                    <div style={{display:'flex',justifyContent:'space-between',fontSize:13,color:'#16A34A'}}>
                      <span>Desc. global {form.globalDiscountType==='pct'?'('+form.globalDiscountValue+'%)':'(R$)'}</span>
                      <span style={{fontWeight:700}}>−{fmt(globalDiscAmt)}</span>
                    </div>
                  )}
                  <div style={{display:'flex',justifyContent:'space-between',fontSize:13,color:'#6B7280'}}>
                    <span>Frete</span>
                    <span style={{fontWeight:600,color:'#374151'}}>{freteV>0?fmt(freteV):'—'}</span>
                  </div>
                  {form.nfEnabled && nfTax>0 && (
                    <div style={{display:'flex',justifyContent:'space-between',fontSize:13,color:'#92700A',background:'#FFFBEB',borderRadius:6,padding:'5px 8px',margin:'2px 0'}}>
                      <span style={{fontWeight:600}}>📄 Nota Fiscal (5%)</span>
                      <span style={{fontWeight:700}}>+{fmt(nfTax)}</span>
                    </div>
                  )}
                  <div style={{display:'flex',justifyContent:'space-between',borderTop:'2px solid #E4E7EC',paddingTop:10,marginTop:3}}>
                    <span style={{fontWeight:800,fontSize:15,color:NAVY}}>Total</span>
                    <span style={{fontWeight:900,fontSize:18,color:GOLD}}>{fmt(total)}</span>
                  </div>
                </div>
              </div>
            </>
          )}
        </div>
      </>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.novavenda = window.ZNX.widgets.novavenda || {};
  window.ZNX.widgets.novavenda.ItemsListPanel = ItemsListPanel;
})();