// js/components/widgets/insights/HBar.jsx
// [REFACTOR Wave 2 P2 — 2026-05-15] Unificado de Insights.jsx L288 +
// ProdutosInsightsTab.jsx L25. Signatures literalmente IDÊNTICAS — diff exclusivo
// no BODY (width: 130 vs 170, minWidth: 80 vs 90 hardcoded no JSX).
//
// SUPERSET via 2 props opcionais:
// - `width = 130` (default Insights — preserva 3 callers Insights intactos)
// - `minWidth = 80` (default Insights — idem)
// - ProdutosInsightsTab 5 callers atualizados pra passar width={170} minWidth={90}
//   (preserva visual atual 170/90).
//
// Callers: Insights.jsx (3x sem width/minWidth) + ProdutosInsightsTab.jsx (5x com
// width=170 minWidth=90) via window.ZNX.widgets.HBar.
(function() {
  'use strict';

  function HBar({label,value,max,fmtFn,color='#2563EB',sub,width=130,minWidth=80}){
    const pct=max>0?Math.min(100,value/max*100):0;
    return(
      <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:7}}>
        <div style={{width,fontSize:11,color:'#9CA3AF',textAlign:'right',flexShrink:0,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}} title={label}>{label}</div>
        <div style={{flex:1,height:16,background:'#F9FAFB',borderRadius:4,overflow:'hidden',minWidth:60}}>
          <div style={{height:'100%',width:`${pct}%`,background:color,borderRadius:4,transition:'width .4s',minWidth:pct>0?3:0}}/>
        </div>
        <div style={{fontSize:11,color:'#374151',minWidth,textAlign:'right',whiteSpace:'nowrap'}}>{fmtFn?fmtFn(value):value}{sub&&<span style={{color:'#6B7280',marginLeft:4,fontSize:10}}>{sub}</span>}</div>
      </div>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.HBar = HBar;
})();