// js/components/widgets/cliente-timeline/TimelineHeader.jsx
// [Wave 28 v224.9 NUCLEAR] Header (back + nome + meta info) + 4 KPIs cards
// Extraído de ClienteTimeline.jsx L240-249 + L340-368 (literal · zero mudança lógica)
//
// Deps runtime globals: fmtDate
(function(){
  'use strict';

  function TimelineHeader(props){
    const fmtDate = window.fmtDate || function(d){return String(d);};
    const {client, kpis, isPj, sellerName, onBack} = props;

    return (
      <>
        {/* Header (L241-249) */}
        <div style={{display:'flex',alignItems:'center',gap:14,marginBottom:14}}>
          <button className="btn-outline" onClick={onBack}>← Voltar pra Lista</button>
          <div style={{flex:1}}>
            <div style={{fontSize:22,fontWeight:700,color:'#1B2A4A'}}>{client.name}</div>
            <div style={{fontSize:13,color:'#6B7280',marginTop:2}}>
              {isPj?'PJ':'PF'} • {client.document||'sem documento'} • {client.city||'—'}/{client.state||'—'} • Vendedor: {sellerName}
            </div>
          </div>
        </div>

        {/* KPIs (L340-368) */}
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:14,marginBottom:18}}>
          <div className="stat-card">
            <div className="stat-label">LTV (Total Faturado)</div>
            <div className="stat-value gold">R$ {kpis.totalRevenue.toFixed(2)}</div>
            <div style={{fontSize:11,color:'#6B7280'}}>{kpis.totalSales} venda(s) válida(s)</div>
          </div>
          <div className="stat-card">
            <div className="stat-label">Ticket Médio</div>
            <div className="stat-value">R$ {kpis.ticketMedio.toFixed(2)}</div>
            <div style={{fontSize:11,color:'#6B7280'}}>por venda</div>
          </div>
          <div className="stat-card">
            <div className="stat-label">Última Compra</div>
            <div className="stat-value" style={{color:kpis.daysSinceLast==null?'#9CA3AF':kpis.daysSinceLast<=30?'#16A34A':kpis.daysSinceLast<=90?'#EA580C':'#DC2626'}}>
              {kpis.daysSinceLast==null?'Nunca':(kpis.daysSinceLast+'d')}
            </div>
            <div style={{fontSize:11,color:'#6B7280'}}>
              {kpis.lastPurchaseAt ? fmtDate(String(kpis.lastPurchaseAt).slice(0,10)) : '—'}
            </div>
          </div>
          <div className="stat-card">
            <div className="stat-label">Crédito Atual</div>
            <div className="stat-value" style={{color:kpis.creditBalance>0?'#16A34A':'#9CA3AF'}}>R$ {kpis.creditBalance.toFixed(2)}</div>
            <div style={{fontSize:11,color:'#6B7280'}}>
              {kpis.totalQuotes} orçamento(s) total
            </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.TimelineHeader = TimelineHeader;
  window.ClienteTimelineHeader_v224_9_wave28 = true;
})();