/* loading.jsx — overlay "Procesando información" con pasos animados.
   Registra window.CR.ui.LoadingOverlay y window.CR.ui.Spinner. Babel/JSX. */
(function () {
  window.CR = window.CR || {};
  window.CR.ui = window.CR.ui || {};
  var React = window.React;
  var h = React.createElement;
  var useState = React.useState, useEffect = React.useEffect;

  function Spinner(p) {
    var s = p.size || 22;
    return h('span', { className: 'cr-spin', style: { width: s, height: s } });
  }

  /* LoadingOverlay({open, title, steps:[str], durationMs, onDone}) */
  function LoadingOverlay(p) {
    var stepState = useState(0); var step = stepState[0], setStep = stepState[1];
    var steps = p.steps || ['Procesando información…'];
    var dur = p.durationMs || 2200;

    useEffect(function () {
      if (!p.open) { setStep(0); return; }
      var per = Math.max(350, Math.floor(dur / steps.length));
      var timers = [];
      steps.forEach(function (_, i) {
        timers.push(setTimeout(function () { setStep(i + 1); }, per * (i + 1)));
      });
      var done = setTimeout(function () { p.onDone && p.onDone(); }, dur + 250);
      timers.push(done);
      return function () { timers.forEach(clearTimeout); };
    }, [p.open]);

    if (!p.open) return null;
    return h('div', { className: 'loading-bg' },
      h('div', { className: 'loading-card' },
        h('div', { className: 'loading-orbit' }, h('span'), h('span'), h('span')),
        h('h3', null, p.title || 'Procesando información'),
        h('div', { className: 'loading-steps' },
          steps.map(function (s, i) {
            var state = i < step ? 'done' : (i === step ? 'now' : 'wait');
            return h('div', { key: i, className: 'lstep lstep--' + state },
              h('span', { className: 'lstep-ic' }, state === 'done' ? '✓' : (state === 'now' ? h(Spinner, { size: 14 }) : '○')),
              h('span', null, s));
          }))));
  }

  /* SuccessOverlay({open, title, subtitle, ctaLabel, onCta, onClose, autoCloseMs})
     Card de éxito con check animado. Reemplaza los alert() feos. */
  function SuccessOverlay(p) {
    useEffect(function () {
      if (!p.open || !p.autoCloseMs) return;
      var t = setTimeout(function () { p.onClose && p.onClose(); }, p.autoCloseMs);
      return function () { clearTimeout(t); };
    }, [p.open]);
    if (!p.open) return null;
    return h('div', { className: 'loading-bg', onClick: p.onClose },
      h('div', { className: 'loading-card fx-success', onClick: function (e) { e.stopPropagation(); } },
        h('div', { className: 'fx-check' },
          h('svg', { width: 34, height: 34, viewBox: '0 0 24 24', fill: 'none', stroke: '#fff', strokeWidth: 3, strokeLinecap: 'round', strokeLinejoin: 'round' },
            h('path', { d: 'M5 13l4 4L19 7', className: 'fx-check-path' }))),
        h('h3', null, p.title || 'Listo'),
        p.subtitle ? h('p', { className: 'muted', style: { fontSize: 13, margin: '2px 0 14px' } }, p.subtitle) : null,
        p.extra ? h('div', { style: { margin: '0 0 14px' } }, p.extra) : null,
        p.ctaLabel ? h('button', { className: 'btn btn--primary', onClick: function () { (p.onCta || p.onClose) && (p.onCta || p.onClose)(); } }, p.ctaLabel) : null));
  }

  window.CR.ui.Spinner = Spinner;
  window.CR.ui.LoadingOverlay = LoadingOverlay;
  window.CR.ui.SuccessOverlay = SuccessOverlay;
})();