// js/components/widgets/produto-timeline/ProductHeader.jsx
// [Wave 33 v224.14 NUCLEAR EXTRACT 2026-05-24] Header + Reorder card (ProdutoTimeline L67-105 LITERAL)
//
// Props:
//   - product (obj) — product.name, brand, code, genero, volume, categoria
//   - health (obj|null) — usado pra flag isDecant no header
//   - reorder (obj|null) — sugestão reposição (needed, urgencyLevel, reason, daysLeft, dailyRate, suggestedQty)
//   - onBack — callback botão voltar
//
// Deps: ZERO globals (puro JSX)
(function(){
  'use strict';
  function ProductHeader(props){
    const { product, health, reorder, onBack } = props;
    return (
      <React.Fragment>
        {/* Header com botão voltar [LITERAL L68-84] */}
        <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'}}>
              {product.name}
              {health && health.isDecant && <span style={{marginLeft:8,fontSize:14,padding:'3px 8px',background:'#EBF5FF',color:'#2563EB',borderRadius:8,fontWeight:600}}>🧪 Decant</span>}
            </div>
            <div style={{fontSize:13,color:'#6B7280',marginTop:2}}>
              <strong style={{color:'#92700A'}}>{product.brand||'Sem marca'}</strong>
              {product.code&&<span> · Código {product.code}</span>}
              {product.genero&&<span> · {product.genero}</span>}
              {product.volume&&<span> · {product.volume}</span>}
              {product.categoria&&<span> · {product.categoria}</span>}
            </div>
          </div>
        </div>

        {/* Reorder suggestion (se urgente) [LITERAL L87-105] */}
        {reorder && reorder.needed && reorder.urgencyLevel !== 'plan' && (
          <div style={{
            background:reorder.urgencyLevel==='critical'?'linear-gradient(135deg,#FEE2E2,#FFFFFF)':reorder.urgencyLevel==='urgent'?'linear-gradient(135deg,#FED7AA,#FFFFFF)':'linear-gradient(135deg,#FEF3C7,#FFFFFF)',
            border:'2px solid '+(reorder.urgencyLevel==='critical'?'#DC2626':reorder.urgencyLevel==='urgent'?'#EA580C':'#C8A951'),
            borderRadius:12,padding:'14px 18px',marginBottom:14,
            display:'flex',alignItems:'center',gap:14
          }}>
            <div style={{fontSize:32}}>{reorder.urgencyLevel==='critical'?'🔴':reorder.urgencyLevel==='urgent'?'🟠':'🟡'}</div>
            <div style={{flex:1}}>
              <div style={{fontSize:11,color:'#6B7280',textTransform:'uppercase',letterSpacing:1,fontWeight:700}}>🚚 Sugestão de reposição</div>
              <div style={{fontSize:16,fontWeight:700,color:reorder.urgencyLevel==='critical'?'#DC2626':reorder.urgencyLevel==='urgent'?'#EA580C':'#92700A'}}>
                {reorder.reason} — {reorder.daysLeft} dias de cobertura
              </div>
              <div style={{fontSize:13,color:'#6B7280',marginTop:2}}>
                Giro de <strong>{reorder.dailyRate.toFixed(2)} un/dia</strong> · Sugerido: <strong>repor {reorder.suggestedQty} un.</strong> pra cobrir 60 dias
              </div>
            </div>
          </div>
        )}
      </React.Fragment>
    );
  }
  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'].ProductHeader = ProductHeader;
  // [Wave 33 marker v224.14] confirma ProductHeader executado
  window.ProductHeader_v224_14_wave33 = true;
})();