// js/components/widgets/produto-timeline/ProductTimelineTable.jsx
// [Wave 33 v224.14 NUCLEAR EXTRACT 2026-05-24] Timeline de saídas tabela
// Extract LITERAL ProdutoTimeline L231-263
//
// Props:
//   - events (array) — {date, saleNumber, clientName, seller, qty, price, discount, revenue}
//
// Deps lazy: window.fmt, window.fmtDate
(function(){
  'use strict';
  function ProductTimelineTable(props){
    const fmt = window.fmt;
    const fmtDate = window.fmtDate;
    const { events } = props;
    return (
      <div className="card" style={{padding:0}}>
        <div style={{padding:'14px 16px 0'}}>
          <div style={{fontSize:13,fontWeight:700,color:'#9CA3AF',textTransform:'uppercase',letterSpacing:1}}>📋 Timeline de saídas — {events.length} eventos</div>
        </div>
        <div style={{maxHeight:480,overflowY:'auto'}}>
          <table style={{fontSize:12}}>
            <thead><tr>
              <th>Data</th><th>Venda</th><th>Cliente</th><th>Vendedor</th>
              <th style={{textAlign:'right'}}>Qtd</th>
              <th style={{textAlign:'right'}}>Preço</th>
              <th style={{textAlign:'right'}}>Desc</th>
              <th style={{textAlign:'right'}}>Receita</th>
            </tr></thead>
            <tbody>
              {events.slice(0,200).map(function(e,i){
                return (
                  <tr key={i}>
                    <td className="dim">{fmtDate(String(e.date).slice(0,10))}</td>
                    <td style={{color:'#2563EB',fontWeight:600}}>{e.saleNumber}</td>
                    <td style={{fontWeight:500}}>{e.clientName}</td>
                    <td className="dim" style={{fontSize:11}}>{e.seller}</td>
                    <td style={{textAlign:'right',fontWeight:700}}>{e.qty}</td>
                    <td style={{textAlign:'right'}}>{fmt(e.price)}</td>
                    <td style={{textAlign:'right',color:e.discount>0?'#EA580C':'#9CA3AF'}}>{e.discount>0?e.discount.toFixed(0)+'%':'—'}</td>
                    <td style={{textAlign:'right',color:'#16A34A',fontWeight:700}}>{fmt(e.revenue)}</td>
                  </tr>
                );
              })}
              {events.length===0 && <tr><td colSpan={8} style={{textAlign:'center',color:'#6B7280',padding:20}}>Nenhuma venda desse produto ainda.</td></tr>}
              {events.length>200 && <tr><td colSpan={8} style={{textAlign:'center',color:'#9CA3AF',padding:10,fontSize:11}}>+{events.length-200} eventos abaixo (mostrando 200 mais recentes)</td></tr>}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
  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'].ProductTimelineTable = ProductTimelineTable;
  // [Wave 33 marker v224.14] confirma ProductTimelineTable executado
  window.ProductTimelineTable_v224_14_wave33 = true;
})();