/* barras.jsx — barras horizontales con vida y USABILIDAD: cada barra es un botón que filtra.
   props: { data:[{key,label,value,color}], activo, onPick(key|null), vacio }
   - clic en una barra => onPick(key); clic en la activa => onPick(null) (quita el filtro)
   - la barra crece desde 0 al montar (respeta prefers-reduced-motion)
   - muestra valor y % del total. window.CR.Barras */
(function () {
  window.CR = window.CR || {};
  var React = window.React;
  var h = React.createElement;

  function Barras(props) {
    var data = props.data || [];
    var interactivo = typeof props.onPick === 'function';
    var activo = props.activo == null ? null : props.activo;

    // animación de entrada: monta en 0 y en el próximo tick pasa al ancho real
    var mountedState = React.useState(false);
    var mounted = mountedState[0], setMounted = mountedState[1];
    React.useEffect(function () {
      var t = setTimeout(function () { setMounted(true); }, 30);
      return function () { clearTimeout(t); };
    }, []);

    if (!data.length) return h('div', { className: 'muted', style: { fontSize: 13 } }, props.vacio || 'Sin datos');

    var total = data.reduce(function (s, d) { return s + (d.value || 0); }, 0) || 1;
    var max = Math.max.apply(null, data.map(function (d) { return d.value || 0; }).concat([1]));

    return h('div', { className: 'barras' },
      data.map(function (d) {
        var on = interactivo && activo === d.key;
        var pct = Math.round((d.value || 0) / total * 100);
        var w = mounted ? Math.max(2, Math.round((d.value || 0) / max * 100)) : 0;
        return h('button', {
          key: d.key,
          type: 'button',
          className: 'barra' + (on ? ' barra--on' : '') + (interactivo ? '' : ' barra--static'),
          'aria-pressed': interactivo ? (on ? 'true' : 'false') : undefined,
          title: interactivo ? (on ? 'Quitar el filtro' : 'Ver solo ' + d.label) : d.label,
          onClick: function () { if (interactivo) props.onPick(on ? null : d.key); }
        },
          h('span', { className: 'barra__lbl' }, d.label),
          h('span', { className: 'barra__track' },
            h('span', { className: 'barra__fill', style: { width: w + '%', backgroundColor: d.color || 'var(--primary)' } })),
          h('span', { className: 'barra__val tnum' }, d.value),
          h('span', { className: 'barra__pct tnum' }, pct + '%'));
      }),
      interactivo ? h('div', { className: 'barras__hint muted' }, 'Tocá una barra para ver solo esas rutas.') : null);
  }

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