// js/components/common/CatalogoVendedor.jsx
// Catálogo de produtos para vendedor (estoque > 0, filtros de busca + marca).
// Movido de index.html em Fase 5 do refactor (2026-04-29): L10196-L10254
(function() {
  'use strict';
  const {useState, useMemo} = React;

  // CÓPIA EXATA do index.html L10196-L10254
  function CatalogoVendedor({products}){
    const[search,setSearch]=useState('');
    const[brandFilter,setBrandFilter]=useState('');
    const brands=useMemo(()=>[...new Set(products.map(p=>p.brand).filter(Boolean))].sort(),[products]);
    const filtered=useMemo(()=>{
      // [BUG-FIX 20260504-decantes] Vendedora via 631 (stock>0); admin via 841.
      // 153 decantes têm stock=0 sempre (sob demanda) mas DEVEM aparecer pra venda.
      // is_decant é coluna canônica do banco — fallback legacy via name/volume/category
      // garante compat com produtos antigos sem flag setada.
      let list=products.filter(p=>p.stock>0||p.is_decant===true||p.category==='Decants'||p.categoria==='Decants'||(p.name||'').toLowerCase().includes('decant'));
      if(brandFilter)list=list.filter(p=>p.brand===brandFilter);
      if(search){const q=search.toLowerCase();list=list.filter(p=>(p.name||'').toLowerCase().includes(q)||(p.brand||'').toLowerCase().includes(q));}
      return list.sort((a,b)=>b.stock-a.stock);
    },[products,search,brandFilter]);
    return(
      <div>
        <div style={{marginBottom:20}}>
          <div style={{fontSize:22,fontWeight:800,color:'#1B2A4A'}}>Produtos Disponíveis</div>
          <div style={{fontSize:13,color:'#9CA3AF',marginTop:2}}>{filtered.length} produtos em estoque</div>
        </div>
        <div className="card" style={{marginBottom:16,padding:'12px 16px',display:'flex',gap:10,flexWrap:'wrap',alignItems:'center'}}>
          <input value={search} onChange={e=>setSearch(e.target.value)} placeholder="🔍 Buscar produto ou marca..."
            style={{flex:1,minWidth:180,padding:'8px 12px',borderRadius:8,border:'1.5px solid #E4E7EC',fontSize:13,outline:'none',fontFamily:"'Plus Jakarta Sans',sans-serif"}}
            onFocus={e=>e.target.style.borderColor='#1B2A4A'} onBlur={e=>e.target.style.borderColor='#E4E7EC'}/>
          <select value={brandFilter} onChange={e=>setBrandFilter(e.target.value)}
            style={{padding:'8px 12px',borderRadius:8,border:'1.5px solid #E4E7EC',fontSize:13,outline:'none',background:'#fff',fontFamily:"'Plus Jakarta Sans',sans-serif",minWidth:140}}>
            <option value="">— Todas as marcas —</option>
            {brands.map(b=><option key={b} value={b}>{b}</option>)}
          </select>
          {(search||brandFilter)&&<button onClick={()=>{setSearch('');setBrandFilter('');}} style={{padding:'8px 12px',borderRadius:8,border:'1px solid #E4E7EC',background:'#F9FAFB',fontSize:12,color:'#6B7280',cursor:'pointer',fontWeight:600}}>Limpar</button>}
        </div>
        <div className="card" style={{padding:0,overflow:'hidden'}}>
          <table style={{width:'100%',borderCollapse:'collapse',fontSize:13}}>
            <thead>
              <tr style={{background:'#1B2A4A'}}>
                <th style={{padding:'11px 18px',textAlign:'left',fontWeight:700,color:'#B89840',fontSize:11,letterSpacing:.8}}>PRODUTO</th>
                <th style={{padding:'11px 18px',textAlign:'left',fontWeight:700,color:'#B89840',fontSize:11,letterSpacing:.8}}>MARCA</th>
                <th style={{padding:'11px 18px',textAlign:'left',fontWeight:700,color:'#B89840',fontSize:11,letterSpacing:.8}}>VOLUME</th>
                <th style={{padding:'11px 18px',textAlign:'right',fontWeight:700,color:'#B89840',fontSize:11,letterSpacing:.8}}>ESTOQUE</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map((p,i)=>(
                <tr key={p.id} style={{borderBottom:'1px solid #F3F4F6',background:i%2===0?'#FAFBFC':'#fff'}}>
                  <td style={{padding:'11px 18px',fontWeight:600,color:'#1C1C28'}}>{p.name}</td>
                  <td style={{padding:'11px 18px',color:'#6B7280'}}>{p.brand||'—'}</td>
                  <td style={{padding:'11px 18px',color:'#9CA3AF'}}>{p.volume||'—'}</td>
                  <td style={{padding:'11px 18px',textAlign:'right'}}>
                    <span style={{fontWeight:800,fontSize:14,color:p.stock<=5?'#D97706':p.stock<=20?'#2563EB':'#16A34A'}}>{p.stock}</span>
                    <span style={{fontSize:11,color:'#9CA3AF',marginLeft:4}}>un</span>
                  </td>
                </tr>
              ))}
              {filtered.length===0&&(
                <tr><td colSpan={4} style={{padding:'40px',textAlign:'center',color:'#9CA3AF',fontSize:13}}>Nenhum produto encontrado</td></tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    );
  }

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

  window.ZNX.refactor_phase_5_loaded = window.ZNX.refactor_phase_5_loaded || {};
  window.ZNX.refactor_phase_5_loaded.CatalogoVendedor = true;

})();