// js/components/widgets/produto-timeline/ProductHealthCard.jsx
// [Wave 33 v224.14 NUCLEAR EXTRACT 2026-05-24] Health Score card + 4 KPIs grid
// Extract LITERAL ProdutoTimeline L107-160 (health card 108-136 + KPIs grid 138-160)
//
// Props:
//   - health (obj|null) — score, emoji, color, label, giroPts, marginPts, stockPts, daysOfStock, sold90, sold30, margin, isDecant
//   - product (obj) — product.stock, estoqueMin, avgCost, salePrice
//   - marginColor (string) — cor calculada no main
//   - totalReceita (number), totalVendas (number), totalUnidades (number) — KPIs do main
//
// Deps lazy: window.fmt
(function(){
  'use strict';
  function ProductHealthCard(props){
    const fmt = window.fmt;
    const { health, product, marginColor, totalReceita, totalVendas, totalUnidades } = props;
    return (
      <React.Fragment>
        {/* Health Score [LITERAL L108-136] — null safe via && operator */}
        {health && (
          <div style={{background:'#FFFFFF',border:'1.5px solid '+health.color+'33',borderRadius:12,padding:'14px 18px',marginBottom:14,boxShadow:'0 1px 2px rgba(0,0,0,0.04)'}}>
            <div style={{display:'flex',alignItems:'center',gap:14,marginBottom:8}}>
              <div style={{fontSize:30}}>{health.emoji}</div>
              <div style={{flex:1}}>
                <div style={{fontSize:13,color:'#9CA3AF',textTransform:'uppercase',letterSpacing:1,fontWeight:600,marginBottom:2}}>Health Score do Produto</div>
                <div style={{display:'flex',alignItems:'baseline',gap:10}}>
                  <span style={{fontSize:28,fontWeight:800,color:health.color}}>{health.score}</span>
                  <span style={{fontSize:14,color:'#9CA3AF'}}>/100</span>
                  <span style={{fontSize:16,fontWeight:700,color:health.color,marginLeft:4}}>{health.label}</span>
                  {health.isDecant && <span style={{fontSize:10,color:'#2563EB',marginLeft:6}}>(threshold ajustado pra decant)</span>}
                </div>
              </div>
              <div style={{textAlign:'right',fontSize:11,color:'#6B7280',lineHeight:1.5}}>
                <div>Giro: <strong style={{color:health.color}}>{health.giroPts}</strong>/40</div>
                <div>Margem: <strong style={{color:health.color}}>{health.marginPts}</strong>/30</div>
                <div>Estoque: <strong style={{color:health.color}}>{health.stockPts}</strong>/30</div>
              </div>
            </div>
            <div style={{height:8,background:'#F3F4F6',borderRadius:4,overflow:'hidden',display:'flex'}}>
              <div style={{width:(health.giroPts/40*40)+'%',background:'#16A34A'}} title={'Giro '+health.giroPts+'/40'}/>
              <div style={{width:(health.marginPts/30*30)+'%',background:'#2563EB'}} title={'Margem '+health.marginPts+'/30'}/>
              <div style={{width:(health.stockPts/30*30)+'%',background:'#C8A951'}} title={'Estoque '+health.stockPts+'/30'}/>
            </div>
            <div style={{display:'flex',justifyContent:'space-between',marginTop:4,fontSize:10,color:'#9CA3AF'}}>
              <span>0</span><span>30</span><span>60</span><span>80</span><span>100</span>
            </div>
          </div>
        )}

        {/* KPIs [LITERAL L138-160] */}
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:14,marginBottom:18}}>
          <div className="stat-card">
            <div className="stat-label">Estoque Atual</div>
            <div className="stat-value" style={{color:product.stock<=0?'#DC2626':product.stock<=(product.estoqueMin||20)?'#EA580C':'#16A34A'}}>{product.stock||0} un.</div>
            <div style={{fontSize:11,color:'#6B7280'}}>{health && health.daysOfStock>9000?'sem giro':health?Math.round(health.daysOfStock)+'d cobertura':'—'}</div>
          </div>
          <div className="stat-card">
            <div className="stat-label">Vendido (90d)</div>
            <div className="stat-value" style={{color:'#2563EB'}}>{(health && health.sold90)||0} un.</div>
            <div style={{fontSize:11,color:'#6B7280'}}>{(health && health.sold30)||0} un nos últimos 30d</div>
          </div>
          <div className="stat-card">
            <div className="stat-label">Margem Bruta</div>
            <div className="stat-value" style={{color:marginColor}}>{(health && health.margin && health.margin.toFixed(1))||'—'}%</div>
            <div style={{fontSize:11,color:'#6B7280'}}>Custo {fmt(product.avgCost||0)} → Venda {fmt(product.salePrice||0)}</div>
          </div>
          <div className="stat-card">
            <div className="stat-label">Receita Histórica</div>
            <div className="stat-value gold">{fmt(totalReceita)}</div>
            <div style={{fontSize:11,color:'#6B7280'}}>{totalVendas} vendas · {totalUnidades} un. total</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'].ProductHealthCard = ProductHealthCard;
  // [Wave 33 marker v224.14] confirma ProductHealthCard executado
  window.ProductHealthCard_v224_14_wave33 = true;
})();