// js/components/widgets/cliente-timeline/TimelineList.jsx
// [Wave 28 v224.9 NUCLEAR] 2-col grid: Top 5 Produtos + Timeline events + filter chips
// Extraído de ClienteTimeline.jsx L378-439 (literal · zero mudança lógica)
//
// Deps runtime globals: fmtDate
(function(){
  'use strict';

  function TimelineList(props){
    const fmtDate = window.fmtDate || function(d){return String(d);};
    const {topProducts, filteredTimeline, filterTypes, toggleFilter} = props;

    return (
      <div style={{display:'grid',gridTemplateColumns:'1fr 2fr',gap:16}}>
        {/* Coluna esquerda — Top produtos (L380-398) */}
        <div className="card">
          <div style={{fontSize:13,fontWeight:700,color:'#9CA3AF',marginBottom:12,textTransform:'uppercase',letterSpacing:1}}>🏆 Top 5 Produtos</div>
          {topProducts.length === 0 ? (
            <div style={{color:'#6B7280',fontSize:13,padding:14,textAlign:'center'}}>Cliente ainda não comprou.</div>
          ) : (
            topProducts.map(function(p, i){
              return (
                <div key={p.productId} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'8px 0',borderBottom:i<topProducts.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'}}>{p.name}</div>
                    <div style={{fontSize:11,color:'#9CA3AF'}}>{p.brand}</div>
                  </div>
                  <div style={{textAlign:'right'}}>
                    <div style={{fontSize:13,fontWeight:700,color:'#1B2A4A'}}>{p.qty}×</div>
                    <div style={{fontSize:11,color:'#16A34A'}}>R$ {p.total.toFixed(2)}</div>
                  </div>
                </div>
              );
            })
          )}
        </div>

        {/* Coluna direita — Timeline (L401-438) */}
        <div className="card">
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:12,flexWrap:'wrap',gap:8}}>
            <div style={{fontSize:13,fontWeight:700,color:'#9CA3AF',textTransform:'uppercase',letterSpacing:1}}>📅 Timeline ({filteredTimeline.length})</div>
            <div style={{display:'flex',gap:6,flexWrap:'wrap',fontSize:11}}>
              {[
                {t:'sale',  l:'Vendas',  c:'#16A34A'},
                {t:'quote', l:'Orçam.',  c:'#2563EB'},
                {t:'devolucao', l:'Devol.', c:'#EA580C'},
                {t:'credit', l:'Crédito', c:'#DC2626'},
                {t:'payment', l:'Pagto',  c:'#16A34A'},
                {t:'created', l:'Cad.',   c:'#6B7280'}
              ].map(function(f){
                const active = filterTypes.has(f.t);
                return (
                  <button key={f.t} onClick={function(){toggleFilter(f.t);}}
                    style={{padding:'3px 8px',borderRadius:6,fontSize:11,fontWeight:600,cursor:'pointer',border:'1px solid '+f.c+'44',background:active?f.c+'22':'transparent',color:active?f.c:'#9CA3AF',opacity:active?1:0.5}}>
                    {f.l}
                  </button>
                );
              })}
            </div>
          </div>
          {filteredTimeline.length === 0 ? (
            <div style={{color:'#6B7280',fontSize:13,padding:20,textAlign:'center'}}>Nenhum evento nessa categoria.</div>
          ) : (
            <div style={{maxHeight:540,overflowY:'auto',paddingRight:4}}>
              {filteredTimeline.map(function(e, i){
                return (
                  <div key={i} style={{display:'flex',gap:12,padding:'10px 0',borderBottom:i<filteredTimeline.length-1?'1px solid #F3F4F6':'none'}}>
                    <div style={{fontSize:18,minWidth:24}}>{e.icon}</div>
                    <div style={{flex:1,minWidth:0}}>
                      <div style={{fontSize:13,fontWeight:600,color:e.color}}>{e.title}</div>
                      {e.sub && <div style={{fontSize:11,color:'#6B7280',marginTop:2}}>{e.sub}</div>}
                    </div>
                    <div style={{fontSize:11,color:'#9CA3AF',whiteSpace:'nowrap'}}>{fmtDate(String(e.date||'').slice(0,10))}</div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.clienteTimeline = window.ZNX.widgets.clienteTimeline || {};
  window.ZNX.widgets.clienteTimeline.TimelineList = TimelineList;
  window.ClienteTimelineList_v224_9_wave28 = true;
})();