// js/components/widgets/orcamento-timeline/TimelineList.jsx
// [Wave 27 v224.8 NUCLEAR] 2-col grid: Items table + Timeline events
// Extraído de OrcamentoTimeline.jsx L318-384 (literal · zero mudança lógica)
//
// Deps runtime globals: fmt, fmtMoney (fallback fmt), itemNet, fmtDateTime
(function(){
  'use strict';

  function TimelineList(props){
    const fmtMoney = window.fmtMoney || window.fmt || function(v){return 'R$ '+Number(v||0).toFixed(2);};
    const itemNetFn = window.itemNet || function(i){return Number((i && i.price)||0);};
    const fmtDateBr = function(iso){return iso ? (window.fmtDateTime ? window.fmtDateTime(iso) : String(iso)) : '—';};

    const {quote, products, timeline} = props;

    return (
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16}}>
        {/* Items (L320-358) */}
        <div className="card">
          <div style={{fontSize:13,fontWeight:700,color:'#9CA3AF',marginBottom:12,textTransform:'uppercase',letterSpacing:1}}>
            📦 Items ({(quote.items||[]).length})
          </div>
          {(quote.items || []).length === 0 ? (
            <div style={{color:'#6B7280',fontSize:13,padding:14,textAlign:'center'}}>Nenhum item.</div>
          ) : (
            <table>
              <thead>
                <tr>
                  <th style={{width:50}}>Qtd</th>
                  <th>Produto</th>
                  <th style={{textAlign:'right'}}>Unit.</th>
                  <th style={{textAlign:'right'}}>Total</th>
                </tr>
              </thead>
              <tbody>
                {(quote.items || []).map(function(it, i){
                  const nm = it.name || it.productName || it.product_name || ((products||[]).find(function(p){return p.id === it.productId;}) || {}).name || '—';
                  return (
                    <tr key={i}>
                      <td style={{fontWeight:600,color:'#1B2A4A'}}>{it.qty}×</td>
                      <td>
                        <div style={{fontSize:13,fontWeight:500}}>{nm}</div>
                        {(it.discountPct || it.discount_pct) > 0 && (
                          <div style={{fontSize:10,color:'#EA580C'}}>−{(it.discountPct || it.discount_pct)}%</div>
                        )}
                      </td>
                      <td style={{textAlign:'right',fontVariantNumeric:'tabular-nums'}}>{fmtMoney(it.price)}</td>
                      <td style={{textAlign:'right',fontVariantNumeric:'tabular-nums',fontWeight:600,color:'#16A34A'}}>
                        {fmtMoney(it.qty * itemNetFn(it))}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          )}
        </div>

        {/* Timeline (L361-383) */}
        <div className="card">
          <div style={{fontSize:13,fontWeight:700,color:'#9CA3AF',marginBottom:12,textTransform:'uppercase',letterSpacing:1}}>
            📅 Timeline ({timeline.length})
          </div>
          {timeline.length === 0 ? (
            <div style={{color:'#6B7280',fontSize:13,padding:20,textAlign:'center'}}>
              Sem eventos registrados ainda.
            </div>
          ) : (
            <div style={{maxHeight:540,overflowY:'auto',paddingRight:4}}>
              {timeline.map(function(e, i){
                return (
                  <div key={i} style={{display:'flex',gap:12,padding:'10px 0',borderBottom:i<timeline.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:10,color:'#9CA3AF',whiteSpace:'nowrap'}}>{fmtDateBr(e.date)}</div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.orcamentoTimeline = window.ZNX.widgets.orcamentoTimeline || {};
  window.ZNX.widgets.orcamentoTimeline.TimelineList = TimelineList;
  window.OrcamentoTimelineList_v224_8_wave27 = true;
})();