// js/components/widgets/historico/EvolucaoChartFull.jsx
// [Wave 22 v224.3 NUCLEAR] EvolucaoChart SVG complexo + MiniSparkline
// Extraído de HistoricoVendedor.jsx L89-160 (literal)
(function(){
  'use strict';
  const COLORS = {
    blue:'#2563EB',
    gold:'#B89840',
    gray:'#6B7280',
    text:'#1C1C28'
  };

  // MiniSparkline (copia LITERAL L89-105)
  function MiniSparkline({values, color}){
    if(!values || values.length<2) return null;
    const W=80, H=22, pad=2;
    const min=Math.min.apply(null, values), max=Math.max.apply(null, values);
    const range = max-min || 1;
    const pts = values.map(function(v,i){
      const x = pad + (i/(values.length-1))*(W-pad*2);
      const y = H - pad - ((v-min)/range)*(H-pad*2);
      return x.toFixed(1)+','+y.toFixed(1);
    }).join(' ');
    return (
      <svg width={W} height={H} style={{display:'block'}}>
        <polyline points={pts} fill="none" stroke={color||COLORS.blue} strokeWidth="1.5"/>
        <circle cx={pts.split(' ').slice(-1)[0].split(',')[0]} cy={pts.split(' ').slice(-1)[0].split(',')[1]} r="2" fill={color||COLORS.blue}/>
      </svg>
    );
  }

  // EvolucaoChart (copia LITERAL L108-160)
  function EvolucaoChart({data, color}){
    if(!data || data.length<2) return <div style={{textAlign:'center',color:COLORS.gray,padding:30,fontSize:13}}>Sem dados suficientes pra gráfico</div>;
    // [UX FIX v223.17] padT 10→24
    const W=600, H=140, padL=50, padR=10, padT=24, padB=22;
    const max = Math.max.apply(null, data.map(function(d){return d.valor;}).concat([1]));
    const min = 0;
    const innerW = W-padL-padR, innerH = H-padT-padB;
    const xStep = innerW/(data.length-1||1);
    const pts = data.map(function(d,i){
      const x = padL + i*xStep;
      const y = padT + innerH - ((d.valor-min)/(max-min||1))*innerH;
      return {x:x, y:y, valor:d.valor, label:d.label};
    });
    const polylinePts = pts.map(function(p){return p.x+','+p.y;}).join(' ');
    const yTicks = [0,0.33,0.66,1].map(function(t){
      const val = min + (max-min)*t;
      const y = padT + innerH - t*innerH;
      return {y:y, label: val>=1000 ? (val/1000).toFixed(0)+'k' : val.toFixed(0)};
    });
    return (
      <svg width="100%" viewBox={'0 0 '+W+' '+H} style={{display:'block',maxWidth:'100%'}}>
        {/* Grid horizontal */}
        {yTicks.map(function(t,i){
          return (
            <g key={i}>
              <line x1={padL} y1={t.y} x2={W-padR} y2={t.y} stroke="#F3F4F6" strokeWidth="1"/>
              <text x={padL-6} y={t.y+3} fontSize="9" fill={COLORS.gray} textAnchor="end">R$ {t.label}</text>
            </g>
          );
        })}
        {/* Area gradient */}
        <defs>
          <linearGradient id="evolutionGradWave22" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={color||COLORS.blue} stopOpacity="0.25"/>
            <stop offset="100%" stopColor={color||COLORS.blue} stopOpacity="0"/>
          </linearGradient>
        </defs>
        <polygon
          points={pts[0].x+','+(padT+innerH)+' '+polylinePts+' '+pts[pts.length-1].x+','+(padT+innerH)}
          fill="url(#evolutionGradWave22)"/>
        {/* Line */}
        <polyline points={polylinePts} fill="none" stroke={color||COLORS.blue} strokeWidth="2.5" strokeLinejoin="round"/>
        {/* Points + Labels */}
        {pts.map(function(p,i){
          return (
            <g key={i}>
              <circle cx={p.x} cy={p.y} r={i===pts.length-1?5:3.5} fill={i===pts.length-1?COLORS.gold:color||COLORS.blue} stroke="#fff" strokeWidth="1.5"/>
              <text x={p.x} y={p.y - 9 < padT ? p.y + 14 : p.y - 9} fontSize="9" fontWeight="700" fill={i===pts.length-1?COLORS.gold:COLORS.text} textAnchor="middle">{(p.valor/1000).toFixed(0)}k</text>
              <text x={p.x} y={H-padB+12} fontSize="9" fill={COLORS.gray} textAnchor="middle">{p.label}</text>
            </g>
          );
        })}
      </svg>
    );
  }

  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets.historico = window.ZNX.widgets.historico || {};
  window.ZNX.widgets.historico.EvolucaoChartFull = EvolucaoChart;
  window.ZNX.widgets.historico.MiniSparkline = MiniSparkline;
})();