// js/components/widgets/marcas/ficha-tabs/ResumoCatalogoSection.jsx
// [Wave 30 v224.11 NUCLEAR EXTRACT 2026-05-24] Tabs resumo + catalogo (FichaMarca L236-341)
// Props: tab, m, mLifetime, brand, brandProducts, topSkus, skusParados, tendencia12m, maxTend, mom, yoy, diasUlt
// Deps lazy: window.fmt, window.ZNX.marcasHelpers.fmtDateSafe
(function(){
  'use strict';
  function ResumoCatalogoSection(props){
    var fmt = window.fmt;
    var MH = window.ZNX && window.ZNX.marcasHelpers;
    var fmtDateSafe = MH && MH.fmtDateSafe;
    var tab = props.tab;
    var m = props.m;
    var mLifetime = props.mLifetime;
    var brand = props.brand;
    var brandProducts = props.brandProducts;
    var topSkus = props.topSkus;
    var skusParados = props.skusParados;
    var tendencia12m = props.tendencia12m;
    var maxTend = props.maxTend;
    var mom = props.mom;
    var yoy = props.yoy;
    var diasUlt = props.diasUlt;

    if(tab==='resumo'){
      return (
        <div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',gap:12,marginBottom:18}}>
            <div className="stat-card"><div className="stat-label">💰 Receita</div><div className="stat-value" style={{color:'#B89840'}}>{fmt(m.receita)}</div></div>
            <div className="stat-card"><div className="stat-label">✅ Lucro</div><div className="stat-value" style={{color:m.lucro>=0?'#15803D':'#B91C1C'}}>{fmt(m.lucro)}</div></div>
            <div className="stat-card"><div className="stat-label">📊 Margem</div><div className="stat-value" style={{color:m.margemPct>=25?'#15803D':m.margemPct>=15?'#B89840':'#B91C1C'}}>{m.margemPct.toFixed(1)}%</div></div>
            <div className="stat-card"><div className="stat-label">🧾 Ticket Médio</div><div className="stat-value">{fmt(m.ticketMedio)}</div></div>
            <div className="stat-card"><div className="stat-label">👥 Clientes</div><div className="stat-value">{m.clientesUnicos}</div></div>
          </div>

          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14,marginBottom:18}}>
            <div className="card">
              <div style={{fontWeight:700,color:'#2563EB',marginBottom:14}}>📈 Tendência 12 meses (lifetime)</div>
              <div style={{display:'flex',alignItems:'flex-end',gap:6,height:120,padding:'0 4px'}}>
                {tendencia12m.map(function(t,i){
                  return (
                    <div key={i} style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',gap:4}}>
                      <div title={fmt(t.receita)} style={{width:'100%',height:Math.max(2,(t.receita/maxTend)*100)+'%',background:'linear-gradient(180deg,#B89840,#8B6F2C)',borderRadius:'4px 4px 0 0',minHeight:2}}/>
                      <div style={{fontSize:9,color:'#9CA3AF',fontWeight:600}}>{t.label}</div>
                    </div>
                  );
                })}
              </div>
            </div>
            <div className="card">
              <div style={{fontWeight:700,color:'#2563EB',marginBottom:14}}>🆚 Comparações</div>
              <div style={{display:'flex',flexDirection:'column',gap:10}}>
                <div style={{display:'flex',justifyContent:'space-between',padding:'8px 0',borderBottom:'1px solid #F3F4F6'}}>
                  <span style={{color:'#6B7280',fontSize:12}}>Mês atual vs. anterior</span>
                  <strong style={{color:mom===null?'#9CA3AF':mom>=0?'#15803D':'#B91C1C',fontSize:14}}>{mom===null?'—':((mom>=0?'+':'')+mom.toFixed(1)+'%')}</strong>
                </div>
                <div style={{display:'flex',justifyContent:'space-between',padding:'8px 0',borderBottom:'1px solid #F3F4F6'}}>
                  <span style={{color:'#6B7280',fontSize:12}}>Mês atual vs. mesmo mês ano anterior</span>
                  <strong style={{color:yoy===null?'#9CA3AF':yoy>=0?'#15803D':'#B91C1C',fontSize:14}}>{yoy===null?'—':((yoy>=0?'+':'')+yoy.toFixed(1)+'%')}</strong>
                </div>
                <div style={{display:'flex',justifyContent:'space-between',padding:'8px 0',borderBottom:'1px solid #F3F4F6'}}>
                  <span style={{color:'#6B7280',fontSize:12}}>Receita lifetime</span>
                  <strong style={{color:'#1B2A4A',fontSize:14}}>{fmt(mLifetime.receita)}</strong>
                </div>
                <div style={{display:'flex',justifyContent:'space-between',padding:'8px 0'}}>
                  <span style={{color:'#6B7280',fontSize:12}}>Última venda</span>
                  <strong style={{color:'#1B2A4A',fontSize:14}}>{mLifetime.lastSaleDate?fmtDateSafe(mLifetime.lastSaleDate)+' ('+diasUlt+'d)':'—'}</strong>
                </div>
              </div>
            </div>
          </div>

          {brand.notes&&(
            <div className="card">
              <div style={{fontWeight:700,color:'#2563EB',marginBottom:8}}>📝 Notas da marca</div>
              <div style={{fontSize:13,color:'#374151',lineHeight:1.6}}>{brand.notes}</div>
            </div>
          )}
        </div>
      );
    }

    if(tab==='catalogo'){
      return (
        <div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:12,marginBottom:18}}>
            <div className="stat-card"><div className="stat-label">Total SKUs</div><div className="stat-value">{brandProducts.length}</div></div>
            <div className="stat-card"><div className="stat-label">Vendidos no período</div><div className="stat-value" style={{color:'#15803D'}}>{Object.keys(m.skusStats).length}</div></div>
            <div className="stat-card"><div className="stat-label">Sem venda período</div><div className="stat-value" style={{color:'#B89840'}}>{skusParados.length}</div></div>
            <div className="stat-card"><div className="stat-label">Unidades vendidas</div><div className="stat-value">{m.qtdItens}</div></div>
          </div>

          <div className="card" style={{padding:0,marginBottom:14}}>
            <div style={{padding:'14px 16px',borderBottom:'1px solid #E4E7EC',fontWeight:700,color:'#2563EB'}}>🏆 Top SKUs por receita</div>
            {topSkus.length===0?<div style={{padding:20,color:'#9CA3AF',textAlign:'center'}}>Nenhuma venda no período</div>:(
              <table>
                <thead><tr><th>SKU</th><th style={{textAlign:'right'}}>Qtd</th><th style={{textAlign:'right'}}>Receita</th><th style={{textAlign:'right'}}>Lucro</th><th style={{textAlign:'right'}}>Margem</th><th style={{textAlign:'right'}}>Última venda</th></tr></thead>
                <tbody>
                  {topSkus.slice(0,15).map(function(s){
                    return (
                      <tr key={s.id}>
                        <td style={{fontWeight:600,color:'#1B2A4A'}}>{s.name}</td>
                        <td style={{textAlign:'right'}}>{s.qty}</td>
                        <td style={{textAlign:'right'}} className="gold">{fmt(s.receita)}</td>
                        <td style={{textAlign:'right',color:s.lucro>=0?'#15803D':'#B91C1C'}}>{fmt(s.lucro)}</td>
                        <td style={{textAlign:'right'}}>{s.receita>0?(s.lucro/s.receita*100).toFixed(1)+'%':'—'}</td>
                        <td style={{textAlign:'right'}} className="dim">{s.lastDate?fmtDateSafe(s.lastDate):'—'}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            )}
          </div>

          {skusParados.length>0&&(
            <div className="card" style={{padding:0}}>
              <div style={{padding:'14px 16px',borderBottom:'1px solid #E4E7EC',fontWeight:700,color:'#B89840'}}>⚠️ SKUs sem venda no período ({skusParados.length})</div>
              <table>
                <thead><tr><th>SKU</th><th style={{textAlign:'right'}}>Estoque</th><th style={{textAlign:'right'}}>Custo unit.</th><th style={{textAlign:'right'}}>R$ congelado</th></tr></thead>
                <tbody>
                  {skusParados.slice(0,20).map(function(p){
                    return (
                      <tr key={p.id}>
                        <td style={{fontWeight:600,color:'#1B2A4A'}}>{p.name}</td>
                        <td style={{textAlign:'right'}}>{p.stock||0}</td>
                        <td style={{textAlign:'right'}} className="dim">{fmt(p.avgCost||0)}</td>
                        <td style={{textAlign:'right',color:'#B91C1C'}}>{fmt((p.stock||0)*(p.avgCost||0))}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          )}
        </div>
      );
    }

    return null;
  }
  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.fichaMarca = window.ZNX.widgets.fichaMarca || {};
  window.ZNX.widgets.fichaMarca.ResumoCatalogoSection = ResumoCatalogoSection;
})();