// js/components/widgets/produto-timeline/ProductInsightsGrid.jsx
// [Wave 33 v224.14 NUCLEAR EXTRACT 2026-05-24] 3 insights consolidated:
// Top Clientes + Sazonalidade (2 cols grid) + Cross-sell (full width)
// Extract LITERAL ProdutoTimeline L162-229
//
// Props:
//   - topClients (array) — {clientId, name, city, state, lastDate, qty, revenue}
//   - seasonality (array) — {key, label, qty, revenue}
//   - crossSell (array) — {productId, name, brand, stock, sales, qty}
//   - maxSeas (number) — pra normalizar barras sazonalidade
//   - totalUnidades, totalReceita (numbers) — pra footer sazonalidade
//
// Deps lazy: window.fmt, window.fmtDate
(function(){
  'use strict';
  function ProductInsightsGrid(props){
    const fmt = window.fmt;
    const fmtDate = window.fmtDate;
    const { topClients, seasonality, crossSell, maxSeas, totalUnidades, totalReceita } = props;
    return (
      <React.Fragment>
        {/* 2 colunas: Top Clientes | Sazonalidade [LITERAL L163-211] */}
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16,marginBottom:16}}>
          {/* Top Clientes */}
          <div className="card">
            <div style={{fontSize:13,fontWeight:700,color:'#9CA3AF',marginBottom:12,textTransform:'uppercase',letterSpacing:1}}>👑 Top 10 Clientes</div>
            {topClients.length===0
              ?<div style={{color:'#6B7280',fontSize:13,padding:14,textAlign:'center'}}>Nenhum cliente comprou esse produto ainda.</div>
              :topClients.map(function(c,i){
                return (
                  <div key={c.clientId} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'8px 0',borderBottom:i<topClients.length-1?'1px solid #F3F4F6':'none'}}>
                    <div style={{flex:1,minWidth:0}}>
                      <div style={{fontSize:13,fontWeight:600,color:'#1B2A4A',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{i+1}. {c.name}</div>
                      <div style={{fontSize:11,color:'#9CA3AF'}}>{c.city||'—'}/{c.state||'—'} · última compra {c.lastDate?fmtDate(String(c.lastDate).slice(0,10)):'—'}</div>
                    </div>
                    <div style={{textAlign:'right'}}>
                      <div style={{fontSize:14,fontWeight:700,color:'#2563EB'}}>{c.qty} un.</div>
                      <div style={{fontSize:11,color:'#16A34A'}}>{fmt(c.revenue)}</div>
                    </div>
                  </div>
                );
              })
            }
          </div>

          {/* Sazonalidade */}
          <div className="card">
            <div style={{fontSize:13,fontWeight:700,color:'#9CA3AF',marginBottom:12,textTransform:'uppercase',letterSpacing:1}}>📅 Sazonalidade — Últimos 12 meses</div>
            {totalUnidades===0
              ?<div style={{color:'#6B7280',fontSize:13,padding:14,textAlign:'center'}}>Sem histórico de vendas.</div>
              :<React.Fragment>
                <div style={{display:'flex',alignItems:'flex-end',gap:5,height:120,marginBottom:8}}>
                  {seasonality.map(function(m,i){
                    const pct = maxSeas>0?(m.qty/maxSeas*100):0;
                    const isLast = i===seasonality.length-1;
                    return (
                      <div key={m.key} style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',gap:3}} title={m.label+': '+m.qty+' un. · '+fmt(m.revenue)}>
                        <span style={{fontSize:10,color:'#374151',fontWeight:700}}>{m.qty>0?m.qty:''}</span>
                        <div style={{width:'100%',background:'#F9FAFB',borderRadius:'3px 3px 0 0',height:80,display:'flex',alignItems:'flex-end'}}>
                          <div style={{width:'100%',height:(pct||2)+'%',background:isLast?'#2563EB':m.qty>0?'#7a5c1e':'#E5E7EB',borderRadius:'3px 3px 0 0',transition:'height .3s',minHeight:m.qty>0?3:1}}/>
                        </div>
                        <span style={{fontSize:9,color:isLast?'#2563EB':'#9CA3AF',fontWeight:isLast?700:400}}>{m.label}</span>
                      </div>
                    );
                  })}
                </div>
                <div style={{fontSize:11,color:'#6B7280',textAlign:'center'}}>
                  Pico em <strong style={{color:'#2563EB'}}>{seasonality.reduce(function(max,m){return m.qty>max.qty?m:max;}, seasonality[0]).label}</strong> · Total {totalUnidades}un · {fmt(totalReceita)}
                </div>
              </React.Fragment>
            }
          </div>
        </div>

        {/* Cross-sell [LITERAL L214-229] */}
        <div className="card" style={{marginBottom:16}}>
          <div style={{fontSize:13,fontWeight:700,color:'#9CA3AF',marginBottom:12,textTransform:'uppercase',letterSpacing:1}}>🤝 Comprado Junto Com (Cross-sell)</div>
          {crossSell.length===0
            ?<div style={{color:'#6B7280',fontSize:13,padding:14,textAlign:'center'}}>Sem dados de cross-sell ainda.</div>
            :<div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(220px,1fr))',gap:10}}>
              {crossSell.map(function(cs,i){
                return (
                  <div key={cs.productId} style={{padding:'10px 12px',background:'#F8FAFB',border:'1px solid #E5E7EB',borderRadius:8}}>
                    <div style={{fontSize:11,color:'#9CA3AF',fontWeight:700,marginBottom:3}}>#{i+1}</div>
                    <div style={{fontSize:13,fontWeight:600,color:'#1B2A4A',marginBottom:3,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{cs.name}</div>
                    <div style={{fontSize:11,color:'#9CA3AF',marginBottom:5}}>{cs.brand} · {cs.stock} un. estoque</div>
                    <div style={{fontSize:12,color:'#16A34A',fontWeight:700}}>📦 vendido em {cs.sales} pedido(s) juntos · {cs.qty} un total</div>
                  </div>
                );
              })}
            </div>
          }
        </div>
      </React.Fragment>
    );
  }
  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets['produto-timeline'] = window.ZNX.widgets['produto-timeline'] || {};
  window.ZNX.widgets['produto-timeline'].ProductInsightsGrid = ProductInsightsGrid;
  // [Wave 33 marker v224.14] confirma ProductInsightsGrid executado
  window.ProductInsightsGrid_v224_14_wave33 = true;
})();