// js/components/widgets/orcamento-timeline/TimelineHeader.jsx
// [Wave 27 v224.8 NUCLEAR] Header (back + title + status + saleConvertida badge + client info) + KPIs cards
// Extraído de OrcamentoTimeline.jsx L241-306 (literal · zero mudança lógica)
//
// Deps runtime globals: fmt, fmtMoney (fallback fmt), fmtDateTime
(function(){
  'use strict';

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

    const {quote, client, kpis, saleConvertida, statusColor, userRole, onBack} = props;
    const status = quote.status || 'Aberto';

    return (
      <>
        {/* Header (L243-263) */}
        <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',display:'flex',alignItems:'center',gap:10}}>
              <span style={{color:'#2563EB'}}>{quote.number || '—'}</span>
              <span style={{padding:'3px 10px',borderRadius:6,fontSize:12,fontWeight:600,background:statusColor+'22',color:statusColor}}>
                {status}
              </span>
              {saleConvertida && (
                <span style={{padding:'3px 10px',borderRadius:6,fontSize:12,fontWeight:600,background:'#16A34A22',color:'#16A34A'}}>
                  → {saleConvertida.number}
                </span>
              )}
            </div>
            <div style={{fontSize:13,color:'#6B7280',marginTop:2}}>
              {(client && client.name) || quote.clientName || '—'} · Vendedor: {quote.sellerName || '—'} · {fmtDateBr(quote.createdAt || quote.date)}
              {quote.validity && <span> · Válido até {fmtDateBr(quote.validity)}</span>}
            </div>
          </div>
        </div>

        {/* KPIs cards (L277-306) */}
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit, minmax(160px, 1fr))',gap:12,marginBottom:18}}>
          <div className="stat-card">
            <div className="stat-label">Total Líquido</div>
            <div className="stat-value gold">{fmtMoney(kpis.liquido)}</div>
            <div style={{fontSize:11,color:'#6B7280'}}>{kpis.itemsCount} item{kpis.itemsCount===1?'':'s'}</div>
          </div>
          <div className="stat-card">
            <div className="stat-label">Desconto</div>
            <div className="stat-value" style={{color:kpis.desconto>0?'#EA580C':'#9CA3AF'}}>
              {fmtMoney(kpis.desconto)}
            </div>
            <div style={{fontSize:11,color:'#6B7280'}}>
              {kpis.bruto>0 ? ((kpis.desconto/kpis.bruto*100).toFixed(1)+'%') : '0%'} do bruto
            </div>
          </div>
          {userRole !== 'vendedor' && (
            <div className="stat-card">
              <div className="stat-label">Lucro Potencial</div>
              <div className="stat-value" style={{color:kpis.lucroPotencial>0?'#16A34A':'#DC2626'}}>{fmtMoney(kpis.lucroPotencial)}</div>
              <div style={{fontSize:11,color:'#6B7280'}}>Margem: {kpis.margem.toFixed(1)}%</div>
            </div>
          )}
          <div className="stat-card">
            <div className="stat-label">Dias aberto</div>
            <div className="stat-value" style={{color:kpis.diasAberto<=2?'#16A34A':kpis.diasAberto<=7?'#EA580C':'#DC2626'}}>
              {kpis.diasAberto}d
            </div>
            <div style={{fontSize:11,color:'#6B7280'}}>{quote.paymentMethod || '—'}</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.TimelineHeader = TimelineHeader;
  window.OrcamentoTimelineHeader_v224_8_wave27 = true;
})();