// js/components/widgets/Marcas.jsx
// Gestão de marcas — cadastradas + auto-detectadas + Ficha 360° por marca.
// [v118 -> v119 2026-05-08] Reformulação completa: stats, ABC, drill-down ficha 360°
//   - Tela 1: 5 stats (Total, Receita, Lucro, Margem, Marca#1) + 4 colunas (Fat, Lucro, Margem, Status)
//   - Click na linha (admin) → Ficha 360° modal full-screen com 7 tabs + filtro periodo
//   - Privacy: Ficha 360° SO admin (financeiro/vendedora não veem botão drill)
// Movido de index.html em Fase 5 do refactor (2026-04-29): L5533-L5718
// Deps runtime: useStore (window.useStore), Modal, Icon, SmartSelect, showConfirm,
//               toast, fmt, fmtDate, dualWrite, genIdUUID, saleFinalTotal, saleProfit,
//               isFaturada, nid, extractBrand (globals)
(function() {
  'use strict';
  const {useState, useEffect, useRef, useCallback, useMemo} = React;

  // [REFACTOR Wave 2 P3 + Wave 3.5 PFB + Wave 4 + v224.55 2026-05-28] vars+check MOVED to component body (preventivo)
  // regra_validacao_helpers_runtime_quando_ordem_scripts_uncertain

// ══════════════════════════════════════════════════════════════
// MARCAS — tela principal (lista + CRUD + drill-down ficha)
// ══════════════════════════════════════════════════════════════
function Marcas({products,user,sales,clients,purchases,suppliers,allUsers}){
  // [v224.55 FIX-PREV-13 2026-05-28] vars+check em render time
  const FichaMarca = window.ZNX?.widgets?.FichaMarca;
  const PeriodFilterBar = window.ZNX?.widgets?.PeriodFilterBar;
  const MH = window.ZNX?.marcasHelpers;
  const {fmtDateSafe, applyPeriod, brandOf, calcBrandMetrics, clientGeo, calcABC, diasSince} = MH || {};
  // regra_falha_silenciosa_proibida — fail loud
  if (!FichaMarca || !PeriodFilterBar || !MH) {
    const _msg = `[Marcas] deps faltando: FichaMarca=${!!FichaMarca}, PeriodFilterBar=${!!PeriodFilterBar}, marcasHelpers=${!!MH}`;
    console.error(_msg);
    window.Sentry?.captureMessage?.(_msg, 'error');
  }
  const isAdmin=user?.role==='admin';
  const EMPTY={name:'',country:'',type:'',notes:''};
  const[marcas,setMarcas]=useStore('marcas',[]);
  const[hiddenBrands,setHiddenBrands]=useStore('hiddenBrands',[]);
  const[modal,setModal]=useState(null);
  const[form,setForm]=useState(EMPTY);
  const[search,setSearch]=useState('');
  const[selected,setSelected]=useState(new Set());
  const[sortCol,setSortCol]=useState('receita');
  const[sortDir,setSortDir]=useState('desc');
  // [ONDA2-P1 20260511] regra_state_id_vs_objeto — guardar só ID, lookup fresco no render
  // evita cache stale quando a marca é editada/excluída entre clique e abertura da ficha.
  const[fichaBrandId,setFichaBrandId]=useState(null);
  // [ONDA2-P1 20260511] regra_loading_state_obrigatorio — inflight pra save/del/delSelected
  const savingRef=useRef(false);
  const[isSaving,setIsSaving]=useState(false); // re-render trigger
  // [L2-Marcas 2026-05-09] Filtro rápido "só dormentes" — admin clica e ve so problemas
  const[onlyDormant,setOnlyDormant]=useState(false);
  const[period,setPeriod]=useState('all');
  const[customStart,setCustomStart]=useState('');
  const[customEnd,setCustomEnd]=useState('');
  function toggleSort(col){setSortDir(d=>sortCol===col?(d==='asc'?'desc':'asc'):(['receita','lucro','margem','prodCount'].includes(col)?'desc':'asc'));setSortCol(col);}
  const SortIcon=({col})=>sortCol!==col?<span style={{color:'#D1D5DB',marginLeft:4}}>↕</span>:sortDir==='asc'?<span style={{marginLeft:4}}>↑</span>:<span style={{marginLeft:4}}>↓</span>;

  // Vendas filtradas pelo período da TELA 1 (afeta stats topo + colunas tabela)
  const filteredSales=useMemo(()=>applyPeriod(sales||[],period,customStart,customEnd),[sales,period,customStart,customEnd]);

  // Marcas únicas dos produtos (auto-detect)
  const brandsFromProducts=useMemo(()=>{
    const map={};
    products.forEach(p=>{
      const b=(p.brand||'').trim().toUpperCase();
      if(b)map[b]=(map[b]||0)+1;
    });
    return map;
  },[products]);

  // Merge: marcas cadastradas + auto-detect (sem as ocultas)
  const baseBrands=useMemo(()=>{
    const hidden=new Set(hiddenBrands.map(h=>h.toUpperCase()));
    const registered=new Set(marcas.map(m=>m.name.toUpperCase()));
    const autoOnly=Object.entries(brandsFromProducts)
      .filter(([b])=>!registered.has(b)&&!hidden.has(b))
      .map(([b,count])=>({id:'auto_'+b,name:b,country:'',type:'',notes:'',auto:true,prodCount:count}));
    const withCount=marcas.map(m=>({...m,prodCount:brandsFromProducts[m.name.toUpperCase()]||0,auto:false}));
    return[...withCount,...autoOnly];
  },[marcas,brandsFromProducts,hiddenBrands]);

  // Enrich com métricas (receita/lucro/margem/lastSale) — só admin pra performance
  const enrichedBrands=useMemo(()=>{
    if(!isAdmin)return baseBrands.map(b=>({...b,receita:0,lucro:0,margemPct:0,lastSale:null}));
    return baseBrands.map(b=>{
      const m=calcBrandMetrics(b.name,filteredSales,products);
      return{...b,receita:m.receita,lucro:m.lucro,margemPct:m.margemPct,lastSale:m.lastSaleDate,qtdVendas:m.qtdVendas};
    });
  },[baseBrands,filteredSales,products,isAdmin]);

  // ABC sobre as marcas com receita
  const abcMap=useMemo(()=>{
    const arr=enrichedBrands.filter(b=>b.receita>0).map(b=>({name:b.name.toUpperCase(),receita:b.receita}));
    const abc=calcABC(arr);
    const map={};
    abc.forEach(x=>{map[x.name]={cls:x.abcClass,pct:x.abcPct};});
    return map;
  },[enrichedBrands]);

  const enrichedWithAbc=useMemo(()=>enrichedBrands.map(b=>{
    const abc=abcMap[b.name.toUpperCase()];
    const dias=diasSince(b.lastSale);
    const alertaDormente=dias>90;
    return{...b,abcClass:abc?.cls||'-',abcPct:abc?.pct||0,alertaDormente,diasUlt:dias};
  }),[enrichedBrands,abcMap]);

  const filtered=useMemo(()=>{
    const q=search.trim().toLowerCase();
    let base=q?enrichedWithAbc.filter(m=>m.name.toLowerCase().includes(q)||m.country?.toLowerCase().includes(q)||m.type?.toLowerCase().includes(q)):enrichedWithAbc;
    // [L2-Marcas] Filtro "só dormentes" (>90 dias sem venda)
    if(onlyDormant&&isAdmin)base=base.filter(m=>m.alertaDormente);
    return[...base].sort((a,b)=>{
      let av,bv;
      if(sortCol==='name'){av=a.name;bv=b.name;return sortDir==='asc'?av.localeCompare(bv):bv.localeCompare(av);}
      if(sortCol==='country'){av=a.country||'';bv=b.country||'';return sortDir==='asc'?av.localeCompare(bv):bv.localeCompare(av);}
      if(sortCol==='type'){av=a.type||'';bv=b.type||'';return sortDir==='asc'?av.localeCompare(bv):bv.localeCompare(av);}
      if(sortCol==='prodCount')return sortDir==='asc'?a.prodCount-b.prodCount:b.prodCount-a.prodCount;
      if(sortCol==='receita')return sortDir==='asc'?a.receita-b.receita:b.receita-a.receita;
      if(sortCol==='lucro')return sortDir==='asc'?a.lucro-b.lucro:b.lucro-a.lucro;
      if(sortCol==='margem')return sortDir==='asc'?a.margemPct-b.margemPct:b.margemPct-a.margemPct;
      return 0;
    });
  },[enrichedWithAbc,search,sortCol,sortDir,onlyDormant,isAdmin]);

  // [L2-Marcas] Contador dormentes pra mostrar no botão filtro
  const dormantCount=useMemo(()=>isAdmin?enrichedWithAbc.filter(m=>m.alertaDormente).length:0,[enrichedWithAbc,isAdmin]);

  // Stats topo (5 cards) — sobre filteredSales
  const totals=useMemo(()=>{
    const totReceita=enrichedBrands.reduce((s,b)=>s+b.receita,0);
    const totLucro=enrichedBrands.reduce((s,b)=>s+b.lucro,0);
    const margemMedia=totReceita>0?(totLucro/totReceita*100):0;
    const top1=[...enrichedBrands].sort((a,b)=>b.receita-a.receita)[0];
    return{totReceita,totLucro,margemMedia,top1};
  },[enrichedBrands]);

  // [ONDA2-P1 20260511] regra_loading_state_obrigatorio — guard duplo-click em save/del/delSelected
  // evita duplicação silenciosa quando user clica 2× rápido (P1 auditoria mestra).
  async function save(){
    if(savingRef.current)return;
    if(!form.name.trim()){toast('Nome da marca é obrigatório.');return;}
    savingRef.current=true;setIsSaving(true);
    try{
      const isNew=modal==='new';
      const id=isNew?genIdUUID():form.id;
      const nameFinal=form.name.trim().toUpperCase();
      const ok=await dualWrite('marcas',id,
        {name:nameFinal,country:form.country||null,type:form.type||null,notes:form.notes||null},
        isNew,()=>{
          if(isNew)setMarcas(prev=>[...prev,{...form,id,name:nameFinal}]);
          else setMarcas(prev=>prev.map(m=>m.id===id?{...form,name:nameFinal}:m));
        });
      if(!ok)return;
      setModal(null);
    }finally{
      savingRef.current=false;setIsSaving(false);
    }
  }
  async function del(id){
    if(user?.role!=='admin')return;
    if(savingRef.current)return;
    if(!await showConfirm({title:'Excluir Marca',message:'Excluir marca?',confirmText:'Excluir',confirmColor:'#DC2626'}))return;
    savingRef.current=true;setIsSaving(true);
    try{
      const{error}=await sb.from('marcas').delete().eq('id',id);
      if(error){toast('❌ Erro ao excluir marca: '+error.message);if(typeof Sentry!=='undefined')Sentry.captureException(new Error(error.message),{extra:{context:'deleteMarca',id}});return;}
      setMarcas(prev=>prev.filter(m=>m.id!==id));
      toast('✅ Marca excluída.');
    }catch(e){
      console.error('[ZNX] deleteMarca error:',e);
      if(typeof Sentry!=='undefined')Sentry.captureException(e,{extra:{context:'deleteMarca',id}});
      toast('❌ Erro inesperado ao excluir marca.');
    }finally{
      savingRef.current=false;setIsSaving(false);
    }
  }
  async function delAuto(name){if(await showConfirm({title:'Ocultar Marca',message:`Ocultar marca "${name}"?\n(ela foi detectada automaticamente dos produtos)`,confirmText:'Ocultar'}))setHiddenBrands(prev=>[...prev,name.toUpperCase()]);}
  function toggleSelect(id){setSelected(prev=>{const n=new Set(prev);n.has(id)?n.delete(id):n.add(id);return n;});}
  function toggleAll(){setSelected(prev=>prev.size===filtered.length?new Set():new Set(filtered.map(m=>m.id)));}
  async function delSelected(){
    if(!selected.size)return;
    if(user?.role!=='admin')return;
    if(savingRef.current)return;
    if(!await showConfirm({title:'Excluir/Ocultar Marcas',message:`Excluir/ocultar ${selected.size} marca(s) selecionada(s)?`,confirmText:'Confirmar'}))return;
    savingRef.current=true;setIsSaving(true);
    try{
      const ids=new Set(selected);
      const cadastradas=filtered.filter(m=>!m.auto&&ids.has(m.id));
      const autoToHide=filtered.filter(m=>m.auto&&ids.has(m.id)).map(m=>m.name.toUpperCase());
      if(cadastradas.length){
        const cadastradasIds=cadastradas.map(m=>m.id);
        const{error}=await sb.from('marcas').delete().in('id',cadastradasIds);
        if(error){toast('❌ Erro ao excluir marcas: '+error.message);if(typeof Sentry!=='undefined')Sentry.captureException(new Error(error.message),{extra:{context:'deleteSelectedMarcas',count:cadastradasIds.length}});return;}
      }
      setMarcas(prev=>prev.filter(m=>!ids.has(m.id)));
      if(autoToHide.length)setHiddenBrands(prev=>[...prev,...autoToHide]);
      setSelected(new Set());
      toast(`✅ ${selected.size} marca(s) processada(s).`);
    }finally{
      savingRef.current=false;setIsSaving(false);
    }
  }
  function registerAuto(brand){
    setForm({...EMPTY,name:brand});
    setModal('new');
  }

  return(
    <div>
      <div className="page-header">
        <div className="page-title">Marcas</div>
        {isAdmin&&<button className="btn-gold" onClick={()=>{setForm(EMPTY);setModal('new')}} style={{display:'flex',alignItems:'center',gap:6}}>
          <Icon n="plus" size={14}/>Nova Marca
        </button>}
      </div>

      {/* Filtro de período (só admin — só admin vê stats financeiros) */}
      {isAdmin&&<PeriodFilterBar period={period} setPeriod={setPeriod} customStart={customStart} setCustomStart={setCustomStart} customEnd={customEnd} setCustomEnd={setCustomEnd}/>}

      {/* Estatísticas — 5 cards admin / 3 cards não-admin */}
      {isAdmin?(
        <div style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:12,marginBottom:20}}>
          <div className="stat-card"><div className="stat-label">Total de Marcas</div><div className="stat-value">{enrichedBrands.length}</div></div>
          <div className="stat-card"><div className="stat-label">💰 Receita</div><div className="stat-value gold">{fmt(totals.totReceita)}</div></div>
          <div className="stat-card"><div className="stat-label">✅ Lucro</div><div className="stat-value" style={{color:totals.totLucro>=0?'#15803D':'#B91C1C'}}>{fmt(totals.totLucro)}</div></div>
          <div className="stat-card"><div className="stat-label">📊 Margem média</div><div className="stat-value" style={{color:totals.margemMedia>=25?'#15803D':totals.margemMedia>=15?'#B89840':'#B91C1C'}}>{totals.margemMedia.toFixed(1)}%</div></div>
          <div className="stat-card" style={{background:'linear-gradient(135deg,#FEF9E7,#FFFFFF)',border:'1.5px solid #B89840'}}>
            <div className="stat-label" style={{color:'#B89840'}}>🏆 Marca #1</div>
            <div className="stat-value" style={{fontSize:18,color:'#1B2A4A'}}>{totals.top1?.name||'—'}</div>
            <div style={{fontSize:11,color:'#9CA3AF',marginTop:2}}>{totals.top1?fmt(totals.top1.receita):'—'}</div>
          </div>
        </div>
      ):(
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:14,marginBottom:20}}>
          <div className="stat-card"><div className="stat-label">Total de Marcas</div><div className="stat-value">{baseBrands.length}</div></div>
          <div className="stat-card"><div className="stat-label">Cadastradas</div><div className="stat-value">{marcas.length}</div></div>
          <div className="stat-card"><div className="stat-label">Detectadas nos Produtos</div><div className="stat-value">{Object.keys(brandsFromProducts).length}</div></div>
        </div>
      )}

      {/* [L2-Marcas 2026-05-09] Busca + filtro rápido "só dormentes" + contador */}
      <div style={{marginBottom:14,display:'flex',gap:10,alignItems:'center',flexWrap:'wrap'}}>
        <input value={search} onChange={e=>setSearch(e.target.value)} placeholder="🔍 Buscar marca, país ou tipo..."
          style={{padding:'10px 14px',borderRadius:8,border:'1.5px solid #D1D5DB',fontSize:13,flex:'1 1 240px',minWidth:200,boxSizing:'border-box',outline:'none'}}/>
        {isAdmin&&dormantCount>0&&(
          <button onClick={()=>setOnlyDormant(v=>!v)}
            style={{padding:'9px 14px',background:onlyDormant?'#DC2626':'#FEE2E2',color:onlyDormant?'#fff':'#B91C1C',border:'1.5px solid '+(onlyDormant?'#DC2626':'#FCA5A5'),borderRadius:8,fontSize:12,fontWeight:700,cursor:'pointer',whiteSpace:'nowrap'}}
            title={onlyDormant?'Mostrar todas as marcas':`Filtrar só ${dormantCount} marca${dormantCount>1?'s':''} sem venda há 90+ dias`}>
            {onlyDormant?'✓ ':'🔴 '}Só dormentes ({dormantCount})
          </button>
        )}
        <span style={{fontSize:12,color:'#6B7280',whiteSpace:'nowrap'}}>
          <strong style={{color:'#1B2A4A'}}>{filtered.length}</strong> de {enrichedWithAbc.length} marca{enrichedWithAbc.length===1?'':'s'}
        </span>
      </div>

      {/* Barra de seleção em massa */}
      {isAdmin&&selected.size>0&&(
        <div style={{display:'flex',alignItems:'center',gap:12,background:'#1B2A4A',borderRadius:10,padding:'10px 18px',marginBottom:10}}>
          <span style={{color:'#fff',fontWeight:700,fontSize:13}}>{selected.size} marca{selected.size>1?'s':''} selecionada{selected.size>1?'s':''}</span>
          <button className="btn-danger btn-sm" onClick={delSelected} disabled={isSaving} style={{marginLeft:'auto',opacity:isSaving?0.6:1,cursor:isSaving?'not-allowed':'pointer'}}>{isSaving?'⏳ Excluindo…':'🗑 Excluir selecionadas'}</button>
          <button className="btn-outline btn-sm" onClick={()=>setSelected(new Set())} style={{color:'#fff',borderColor:'#ffffff44'}}>Cancelar</button>
        </div>
      )}

      <div className="card" style={{padding:0}}>
        <table>
          <thead><tr>
            {isAdmin&&<th style={{width:36}}><input type="checkbox" checked={filtered.length>0&&selected.size===filtered.length} onChange={toggleAll} style={{cursor:'pointer'}}/></th>}
            <th onClick={()=>toggleSort('name')} style={{cursor:'pointer',userSelect:'none'}}>Marca<SortIcon col="name"/></th>
            <th onClick={()=>toggleSort('country')} style={{cursor:'pointer',userSelect:'none'}}>País<SortIcon col="country"/></th>
            <th onClick={()=>toggleSort('type')} style={{cursor:'pointer',userSelect:'none'}}>Tipo<SortIcon col="type"/></th>
            <th onClick={()=>toggleSort('prodCount')} style={{cursor:'pointer',userSelect:'none'}}>SKUs<SortIcon col="prodCount"/></th>
            {isAdmin&&<th onClick={()=>toggleSort('receita')} style={{cursor:'pointer',userSelect:'none',textAlign:'right'}}>Faturamento<SortIcon col="receita"/></th>}
            {isAdmin&&<th onClick={()=>toggleSort('lucro')} style={{cursor:'pointer',userSelect:'none',textAlign:'right'}}>Lucro<SortIcon col="lucro"/></th>}
            {isAdmin&&<th onClick={()=>toggleSort('margem')} style={{cursor:'pointer',userSelect:'none',textAlign:'right'}}>Margem<SortIcon col="margem"/></th>}
            {isAdmin&&<th>Status</th>}
            <th>Ações</th>
          </tr></thead>
          <tbody>
            {filtered.map(m=>{
              const abcColor=m.abcClass==='A'?'#B89840':m.abcClass==='B'?'#6B7280':m.abcClass==='C'?'#9CA3AF':'#E4E7EC';
              const rowClickable=isAdmin&&!m.auto;
              return(
                <tr key={m.id}
                  onClick={(e)=>{
                    if(!rowClickable)return;
                    if(e.target.tagName==='INPUT'||e.target.tagName==='BUTTON'||e.target.closest('button'))return;
                    setFichaBrandId(m.id);
                  }}
                  style={{background:selected.has(m.id)?'#EFF6FF':undefined,cursor:rowClickable?'pointer':'default'}}
                  title={rowClickable?'Clique pra abrir ficha 360°':undefined}>
                  {isAdmin&&<td onClick={e=>e.stopPropagation()}><input type="checkbox" checked={selected.has(m.id)} onChange={()=>toggleSelect(m.id)} style={{cursor:'pointer'}}/></td>}
                  <td style={{fontWeight:700,color:'#1B2A4A'}}>
                    {m.name}
                    {isAdmin&&m.alertaDormente&&<span title={`Sem venda há ${m.diasUlt} dias`} style={{marginLeft:8,padding:'1px 6px',background:'#FEE2E2',color:'#B91C1C',borderRadius:4,fontSize:10,fontWeight:700}}>DORMENTE</span>}
                  </td>
                  <td className="dim">{m.country||'—'}</td>
                  <td>{m.type?<span className="badge" style={{background:m.type==='Árabe'?'#FEF3C7':m.type==='Europeia'?'#EFF6FF':m.type==='Nacional'?'#F0FDF4':'#F3F4F6',color:m.type==='Árabe'?'#92400E':m.type==='Europeia'?'#1D4ED8':m.type==='Nacional'?'#15803D':'#374151'}}>{m.type}</span>:'—'}</td>
                  <td><span style={{display:'inline-flex',alignItems:'center',gap:4,background:m.prodCount>0?'#EFF6FF':'#F3F4F6',color:m.prodCount>0?'#1D4ED8':'#9CA3AF',borderRadius:6,padding:'2px 10px',fontWeight:700,fontSize:12}}>{m.prodCount}</span></td>
                  {isAdmin&&<td style={{textAlign:'right',fontWeight:700,color:'#B89840'}}>{m.receita>0?fmt(m.receita):'—'}</td>}
                  {isAdmin&&<td style={{textAlign:'right',fontWeight:700,color:m.lucro>=0?'#15803D':'#B91C1C'}}>{m.lucro!==0?fmt(m.lucro):'—'}</td>}
                  {isAdmin&&<td style={{textAlign:'right',fontWeight:700,color:m.margemPct>=25?'#15803D':m.margemPct>=15?'#B89840':m.margemPct>0?'#B91C1C':'#9CA3AF'}}>{m.margemPct>0?m.margemPct.toFixed(1)+'%':'—'}</td>}
                  {isAdmin&&<td>
                    <div style={{display:'flex',gap:4,alignItems:'center'}}>
                      {m.abcClass!=='-'&&<span style={{padding:'2px 8px',background:abcColor,color:'#fff',borderRadius:4,fontSize:11,fontWeight:800}}>{m.abcClass}</span>}
                      {m.auto?<span style={{fontSize:10,color:'#9CA3AF',fontStyle:'italic'}}>auto</span>:<span style={{fontSize:10,color:'#16A34A',fontWeight:600}}>✓</span>}
                    </div>
                  </td>}
                  <td onClick={e=>e.stopPropagation()}>
                    <div style={{display:'flex',gap:4}}>
                      {m.auto
                        ?<>
                          <button className="btn-gold btn-sm" onClick={()=>registerAuto(m.name)}>Cadastrar</button>
                          {isAdmin&&<button className="btn-danger btn-sm" onClick={()=>delAuto(m.name)} title="Ocultar marca"><Icon n="trash" size={12}/></button>}
                        </>
                        :<>
                          {isAdmin&&<button className="btn-outline btn-sm" onClick={()=>setFichaBrandId(m.id)} title="Abrir ficha 360°" style={{background:'#FEF9E7',borderColor:'#B89840',color:'#B89840'}}>📊</button>}
                          {isAdmin&&<button className="btn-outline btn-sm" onClick={()=>{setForm(m);setModal('edit')}}><Icon n="edit" size={12}/></button>}
                          {isAdmin&&<button className="btn-danger btn-sm" onClick={()=>del(m.id)} disabled={isSaving} style={{opacity:isSaving?0.6:1,cursor:isSaving?'not-allowed':'pointer'}}><Icon n="trash" size={12}/></button>}
                        </>
                      }
                    </div>
                  </td>
                </tr>
              );
            })}
            {/* [L2-Marcas 2026-05-09] Empty states inteligentes — diferencia search/filter/vazio */}
            {filtered.length===0&&(
              <tr><td colSpan={isAdmin?10:5} style={{textAlign:'center',color:'#6B7280',padding:40}}>
                {search||onlyDormant?(
                  <>
                    <div style={{fontSize:32,marginBottom:8}}>🔍</div>
                    <div style={{fontSize:14,fontWeight:600,color:'#374151',marginBottom:4}}>Nenhuma marca bate com o filtro</div>
                    <div style={{fontSize:12,marginBottom:12}}>
                      {search&&<>Busca: <strong>"{search}"</strong></>}
                      {search&&onlyDormant&&' · '}
                      {onlyDormant&&<>Filtro: <strong>só dormentes</strong></>}
                    </div>
                    <button onClick={()=>{setSearch('');setOnlyDormant(false);}}
                      style={{padding:'8px 18px',background:'#1B2A4A',color:'#fff',border:'none',borderRadius:6,fontSize:12,fontWeight:600,cursor:'pointer'}}>
                      ↻ Limpar filtros
                    </button>
                  </>
                ):enrichedWithAbc.length===0?(
                  <>
                    <div style={{fontSize:32,marginBottom:8}}>🏷️</div>
                    <div style={{fontSize:14,fontWeight:600,color:'#374151',marginBottom:4}}>Nenhuma marca cadastrada ainda</div>
                    <div style={{fontSize:12,marginBottom:12}}>Cadastre produtos com campo "marca" preenchido — eles aparecem aqui automaticamente.</div>
                    {isAdmin&&<button onClick={()=>{setForm(EMPTY);setModal('new')}}
                      style={{padding:'8px 18px',background:'#B89840',color:'#fff',border:'none',borderRadius:6,fontSize:12,fontWeight:600,cursor:'pointer'}}>
                      ➕ Cadastrar primeira marca
                    </button>}
                  </>
                ):'Nenhuma marca encontrada'}
              </td></tr>
            )}
          </tbody>
        </table>
      </div>

      {modal&&(
        <Modal title={modal==='new'?'Nova Marca':'Editar Marca'} onClose={()=>setModal(null)}>
          <div className="form-grid">
            <div className="form-group full"><label>Nome da Marca <span style={{color:'#DC2626',fontSize:11}}>(obrigatório)</span></label>
              <input value={form.name} onChange={e=>setForm(f=>({...f,name:e.target.value}))} placeholder="Ex: LATTAFA"/>
            </div>
            <div className="form-group"><label>País de Origem</label>
              <input value={form.country||''} onChange={e=>setForm(f=>({...f,country:e.target.value}))} placeholder="Ex: Emirados Árabes"/>
            </div>
            <div className="form-group"><label>Tipo</label>
              <SmartSelect value={form.type||''} onChange={val=>setForm(f=>({...f,type:val}))} options={[{value:'',label:'Selecione...'},{value:'Árabe',label:'Árabe'},{value:'Europeia',label:'Europeia'},{value:'Nacional',label:'Nacional'},{value:'Outra',label:'Outra'}]}/>
            </div>
            <div className="form-group full"><label>Notas / Observações</label>
              <textarea value={form.notes||''} onChange={e=>setForm(f=>({...f,notes:e.target.value}))} rows={2} placeholder="Ex: Marca premium de Dubai, especializada em oud..." style={{width:'100%',padding:'8px 12px',borderRadius:8,border:'1.5px solid #D1D5DB',fontSize:13,resize:'vertical',boxSizing:'border-box',fontFamily:"'Plus Jakarta Sans',sans-serif"}}/>
            </div>
          </div>
          <div style={{display:'flex',gap:10,marginTop:16,justifyContent:'flex-end'}}>
            <button className="btn-outline" onClick={()=>setModal(null)}>Cancelar</button>
            <button className="btn-gold" onClick={save} disabled={isSaving} style={{opacity:isSaving?0.6:1,cursor:isSaving?'not-allowed':'pointer'}}>{isSaving?'⏳ Salvando…':'Salvar'}</button>
          </div>
        </Modal>
      )}

      {/* FICHA 360° — só admin. [ONDA2-P1 20260511] lookup fresco por ID,
          se marca excluída entre clique e abertura, modal não abre. */}
      {(()=>{
        if(!fichaBrandId||!isAdmin)return null;
        const fichaBrand=enrichedWithAbc.find(x=>x.id===fichaBrandId);
        if(!fichaBrand)return null;
        return <FichaMarca brand={fichaBrand} products={products} sales={sales} clients={clients} purchases={purchases} suppliers={suppliers} allUsers={allUsers} onClose={()=>setFichaBrandId(null)}/>;
      })()}
    </div>
  );
}

// ══════════════════════════════════════════════════════════════
// CLIENTES
// ══════════════════════════════════════════════════════════════
const BR_STATES=['AC','AL','AM','AP','BA','CE','DF','ES','GO','MA','MG','MS','MT','PA','PB','PE','PI','PR','RJ','RN','RO','RR','RS','SC','SE','SP','TO'];
const CLIENT_SEGMENTS=['Consumidor Final','Revendedor','Salão de Beleza','Loja Perfumaria','Atacadista','Distribuidor','Outro'];
const CLIENT_CHANNELS=['Instagram','Indicação','WhatsApp','Site','Feira/Evento','Loja Física','Facebook','TikTok','Outro'];


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

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

})();