// js/components/widgets/insights/BarChart12.jsx
// [Wave 6 KIMI 2026-05-16] Extraído de Insights.jsx L294-311 — refactor zero-lógica.
// Padrão: IIFE + window.ZNX.widgets.insights.BarChart12 namespace + props injection.
//
// Bar chart compacto 12 meses (revenue ou profit) — usado em GeralPanel.
// Animação .4s width transition + highlight do último mês com box-shadow.
//
// Props (validados FASE 1.5 = 4 props):
//   data: array — 12 meses [{key, label, revenue, profit, ...}]
//   valueKey: string — 'revenue' | 'profit' | etc (chave do object pra valor)
//   colorFn: fn(m, i, isLast) → string — opcional, customiza cor por barra
//   labelColor: string — opcional, cor do label do último mês
(function() {
  'use strict';

  function BarChart12({data, valueKey, colorFn, labelColor}){
    const maxV=Math.max(1,...data.map(m=>m[valueKey]));
    return(
      <div style={{display:'flex',alignItems:'flex-end',gap:3,height:110,marginBottom:6}}>
        {data.map((m,i)=>{
          const h=Math.round((Math.max(0,m[valueKey])/maxV)*100);
          const isLast=i===data.length-1;
          const col=colorFn?colorFn(m,i,isLast):(isLast?'#2563EB':'#2563EB55');
          return(
            <div key={m.key} style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',gap:2}} title={`${m.label}: ${m[valueKey]}`}>
              <div style={{width:'100%',height:`${Math.max(h,2)}%`,background:col,borderRadius:'3px 3px 0 0',transition:'height .4s',boxShadow:isLast?`0 0 6px ${col}88`:''}}/>
              <div style={{fontSize:8,color:isLast?(labelColor||col):'#555',whiteSpace:'nowrap',fontWeight:isLast?700:400}}>{m.label}</div>
            </div>
          );
        })}
      </div>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.insights = window.ZNX.widgets.insights || {};
  window.ZNX.widgets.insights.BarChart12 = BarChart12;
})();