/* tendencia.jsx — gráfico de línea SVG liviano (sin dependencias) para el módulo REPORTES.
   Serie histórica sólida + proyección punteada (viene calculada del backend). Tooltips por punto,
   accesible (role img + aria-label con el resumen). window.CR.Tendencia */
(function () {
  var React = window.React;
  var h = React.createElement;

  // props: { puntos: [{x:'2026-07-01', y:75}], proyeccion: [78,80,81], color, formato: fn(y) }
  function Tendencia(props) {
    var puntos = props.puntos || [];
    var proy = props.proyeccion || [];
    var color = props.color || 'var(--primary)';
    var fmt = props.formato || function (y) { return String(y); };
    if (puntos.length < 2) {
      return h('div', { className: 'tend tend--vacia muted' }, 'Se necesitan al menos 2 días para dibujar la tendencia.');
    }

    var W = 640, H = 180, PAD = { t: 14, r: 14, b: 26, l: 46 };
    var ys = puntos.map(function (p) { return p.y; }).concat(proy);
    var yMax = Math.max.apply(null, ys) * 1.08 || 1;
    var yMin = Math.min(0, Math.min.apply(null, ys));
    var n = puntos.length + proy.length;
    var x = function (i) { return PAD.l + (W - PAD.l - PAD.r) * (n === 1 ? 0 : i / (n - 1)); };
    var y = function (v) { return H - PAD.b - (H - PAD.t - PAD.b) * ((v - yMin) / (yMax - yMin || 1)); };

    var dSolida = puntos.map(function (p, i) { return (i ? 'L' : 'M') + x(i).toFixed(1) + ',' + y(p.y).toFixed(1); }).join(' ');
    var proyPts = proy.map(function (v, k) { return { i: puntos.length + k, y: v }; });
    var dProy = proyPts.length
      ? 'M' + x(puntos.length - 1).toFixed(1) + ',' + y(puntos[puntos.length - 1].y).toFixed(1) + ' ' +
        proyPts.map(function (p) { return 'L' + x(p.i).toFixed(1) + ',' + y(p.y).toFixed(1); }).join(' ')
      : null;

    // etiquetas del eje x: primera, última real y última proyectada (sin amontonar)
    var etiquetas = [{ i: 0, t: puntos[0].x }, { i: puntos.length - 1, t: puntos[puntos.length - 1].x }];
    if (proyPts.length) etiquetas.push({ i: n - 1, t: '+' + proyPts.length + ' días (proy.)' });

    var resumen = 'Serie de ' + puntos.length + ' días, de ' + fmt(puntos[0].y) + ' a ' + fmt(puntos[puntos.length - 1].y) +
      (proy.length ? '; proyección: ' + proy.map(fmt).join(', ') : '');

    return h('div', { className: 'tend' },
      h('svg', { viewBox: '0 0 ' + W + ' ' + H, role: 'img', 'aria-label': resumen, preserveAspectRatio: 'none' },
        // grilla horizontal (4 líneas) + valores del eje y
        [0, 1, 2, 3].map(function (k) {
          var v = yMin + (yMax - yMin) * k / 3;
          return h('g', { key: k },
            h('line', { x1: PAD.l, x2: W - PAD.r, y1: y(v), y2: y(v), className: 'tend__grid' }),
            h('text', { x: PAD.l - 6, y: y(v) + 4, className: 'tend__eje', textAnchor: 'end' }, fmt(Math.round(v))));
        }),
        dProy ? h('path', { d: dProy, className: 'tend__proy', style: { stroke: color } }) : null,
        h('path', { d: dSolida, className: 'tend__linea', style: { stroke: color } }),
        puntos.map(function (p, i) {
          return h('circle', { key: i, cx: x(i), cy: y(p.y), r: 4, className: 'tend__pto', style: { fill: color } },
            h('title', null, p.x + ': ' + fmt(p.y)));
        }),
        proyPts.map(function (p, k) {
          return h('circle', { key: 'p' + k, cx: x(p.i), cy: y(p.y), r: 3.5, className: 'tend__pto tend__pto--proy', style: { stroke: color } },
            h('title', null, 'Proyección: ' + fmt(p.y)));
        }),
        etiquetas.map(function (e, k) {
          return h('text', { key: 'x' + k, x: x(e.i), y: H - 8, className: 'tend__eje', textAnchor: k === 0 ? 'start' : 'end' }, e.t);
        })));
  }

  window.CR.Tendencia = Tendencia;
})();