/**
 * createDemoRunner(steps, options) — plaque, «Далее», автопоказ по иконке, задатчик скорости.
 * DOM: #demoPlaque, #demoPlaqueTitle, #demoPlaqueBody, #demoNextBtn, #demoProgress
 * Опционально: #demoAutoToggle, #demoSpeedRange, #demoSpeedHint — иначе блок создаётся в bindDom().
 *
 * steps[]: { title, html, readTimeMs (пауза для кадра в авто-режиме), manualOnly, durationMs (legacy),
 *            onEnter(ctx), onLeave(ctx) }
 * ctx(): scrollIntoView(el, opts?) — прокрутить страницу к элементу (для длинных макетов со стрелками).
 *
 * options:
 *   baseReadMs — базовая пауза для чтения/осмысления кадра (по умолчанию 26000)
 *   minStepMs / maxStepMs — границы после расчёта по скорости (8000 / 90000)
 *   autoTimeFactor — множитель длительности кадра в авто-режиме (по умолчанию 0.5 = в 2 раза быстрее базы)
 *   onComplete
 *
 * Режимы:
 *   Автовыкл — как раньше: только «Далее» (и legacy timer если durationMs>0 и !manualOnly)
 *   Автовкл — после каждого кадра автоматический переход через effectiveDuration; «Далее» пропускает кадр.
 *
 * Скорость: ползунок 0–100 → множитель темпа ~0.42…2.1 к базе (медленнее слева = дольше кадр).
 * Старт: idx=-1, подсказка на плашке; первый кадр — по ▶ или «Далее».
 */
(function (global) {
  'use strict';

  function createDemoRunner(steps, options) {
    options = options || {};
    var defaultDur = options.defaultDurationMs != null ? options.defaultDurationMs : 14000;
    var baseReadMs = options.baseReadMs != null ? options.baseReadMs : 26000;
    var minStepMs = options.minStepMs != null ? options.minStepMs : 4000;
    var maxStepMs = options.maxStepMs != null ? options.maxStepMs : 90000;
    /** Общее ускорение автопоказа: 0.5 ≈ в 2 раза быстрее прежней базы */
    var autoTimeFactor = options.autoTimeFactor != null ? options.autoTimeFactor : 0.5;

    var idx = -1;
    var timerId = null;
    var isAuto = false;

    var plaque = null;
    var titleEl = null;
    var bodyEl = null;
    var nextBtn = null;
    var progressEl = null;
    var autoBtn = null;
    var speedRange = null;
    var speedHint = null;

    function $(id) {
      return document.getElementById(id);
    }

    function getPaceFromSlider() {
      if (!speedRange) return 1;
      var v = parseInt(speedRange.value, 10);
      if (isNaN(v)) v = 32;
      // 0 = очень медленно (длинная пауза), 100 = быстро (короткая)
      return 0.42 + 1.68 * (v / 100);
    }

    function getEffectiveDuration(step) {
      var base = step.readTimeMs != null ? step.readTimeMs : baseReadMs;
      var pace = getPaceFromSlider();
      var ms = Math.round((base / pace) * autoTimeFactor);
      if (ms < minStepMs) ms = minStepMs;
      if (ms > maxStepMs) ms = maxStepMs;
      return ms;
    }

    function updateSpeedLabel() {
      if (!speedHint || !speedRange) return;
      var v = parseInt(speedRange.value, 10);
      if (isNaN(v)) v = 32;
      if (v < 20) speedHint.textContent = 'очень медленно';
      else if (v < 40) speedHint.textContent = 'медленно';
      else if (v < 60) speedHint.textContent = 'норма';
      else if (v < 80) speedHint.textContent = 'быстрее';
      else speedHint.textContent = 'быстро';
    }

    function setAutoUi() {
      if (!autoBtn) return;
      autoBtn.setAttribute('aria-pressed', isAuto ? 'true' : 'false');
      autoBtn.title = isAuto ? 'Пауза автопоказа' : 'Включить автопоказ';
      var play = autoBtn.querySelector('.demo-auto-icon-play');
      var pause = autoBtn.querySelector('.demo-auto-icon-pause');
      if (play && pause) {
        play.style.display = isAuto ? 'none' : 'inline';
        pause.style.display = isAuto ? 'inline' : 'none';
      }
    }

    function ensureAutoControls(actionsRow) {
      if (!actionsRow || $('demoAutoWrap')) return;
      var wrap = document.createElement('div');
      wrap.id = 'demoAutoWrap';
      wrap.className = 'demo-auto-wrap';
      wrap.innerHTML =
        '<button type="button" class="demo-auto-toggle" id="demoAutoToggle" aria-pressed="false" title="Автопоказ">' +
        '<svg class="demo-auto-icon-play" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">' +
        '<path fill="currentColor" d="M8 5v14l11-7z"/></svg>' +
        '<svg class="demo-auto-icon-pause" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" style="display:none">' +
        '<path fill="currentColor" d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>' +
        '</button>' +
        '<div class="demo-speed-block">' +
        '<div class="demo-speed-caption"><label class="demo-speed-label" for="demoSpeedRange">Темп</label> ' +
        '<span id="demoSpeedHint" class="demo-speed-hint"></span></div>' +
        '<input type="range" id="demoSpeedRange" min="0" max="100" value="32" ' +
        'title="Влево — дольше кадр; вправо — короче">' +
        '</div>';

      var prog = $('demoProgress');
      actionsRow.insertBefore(wrap, prog ? prog.nextSibling : actionsRow.firstChild);

      autoBtn = $('demoAutoToggle');
      speedRange = $('demoSpeedRange');
      speedHint = $('demoSpeedHint');

      if (autoBtn) {
        autoBtn.onclick = function () {
          if (!isAuto) {
            isAuto = true;
            setAutoUi();
            updateSpeedLabel();
            clearTimer();
            if (idx < 0) {
              goNext(true);
              return;
            }
            scheduleIfAutoDeferred();
            return;
          }
          isAuto = false;
          setAutoUi();
          updateSpeedLabel();
          clearTimer();
        };
      }
      if (speedRange) {
        speedRange.oninput = function () {
          updateSpeedLabel();
          if (isAuto && idx >= 0 && idx < steps.length) {
            clearTimer();
            scheduleIfAutoDeferred();
          }
        };
      }
      setAutoUi();
      updateSpeedLabel();
    }

    function bindDom() {
      plaque = $('demoPlaque');
      titleEl = $('demoPlaqueTitle');
      bodyEl = $('demoPlaqueBody');
      nextBtn = $('demoNextBtn');
      progressEl = $('demoProgress');
      var actionsRow = document.querySelector('.demo-plaque-actions');
      ensureAutoControls(actionsRow);
      autoBtn = $('demoAutoToggle');
      speedRange = $('demoSpeedRange');
      speedHint = $('demoSpeedHint');

      if (nextBtn) {
        nextBtn.onclick = function () {
          goNext(true);
        };
      }
    }

    function clearTimer() {
      if (timerId) {
        clearTimeout(timerId);
        timerId = null;
      }
    }

    function scheduleIfAuto() {
      if (!isAuto || idx < 0 || idx >= steps.length) return;
      var step = steps[idx];
      var ms = getEffectiveDuration(step);
      timerId = global.setTimeout(function () {
        timerId = null;
        goNext(false);
      }, ms);
    }

    /** После onEnter и отрисовки стрелок — таймер следующего кадра */
    function scheduleIfAutoDeferred() {
      if (!isAuto || idx < 0 || idx >= steps.length) return;
      global.setTimeout(function () {
        scheduleIfAuto();
      }, 0);
    }

    function setProgress() {
      if (!progressEl || !steps.length) return;
      progressEl.textContent = idx + 1 + ' / ' + steps.length;
    }

    function ctx() {
      return {
        stepIndex: idx,
        step: steps[idx],
        goNext: function () {
          goNext(true);
        },
        clearArrows: function () {
          if (global.DemoArrows) global.DemoArrows.clear();
        },
        showArrows: function (fn) {
          if (typeof fn === 'function') fn();
        },
        isAuto: function () {
          return isAuto;
        },
        scrollIntoView: function (el, opts) {
          if (!el || typeof el.scrollIntoView !== 'function') return;
          global.requestAnimationFrame(function () {
            try {
              el.scrollIntoView(opts || { block: 'center', behavior: 'smooth' });
            } catch (e) {
              try {
                el.scrollIntoView(true);
              } catch (e2) {}
            }
          });
        }
      };
    }

    /**
     * @param {boolean} userAction — true: нажали «Далее»; false: сработал таймер авто
     */
    function goNext(userAction) {
      clearTimer();
      if (idx >= 0 && idx < steps.length && steps[idx] && typeof steps[idx].onLeave === 'function') {
        try {
          steps[idx].onLeave(ctx());
        } catch (e) {
          if (global.console && global.console.error) global.console.error(e);
        }
      }
      idx++;
      if (idx >= steps.length) {
        isAuto = false;
        setAutoUi();
        if (titleEl) titleEl.textContent = 'Готово';
        if (bodyEl) {
          bodyEl.innerHTML =
            '<p>Демонстрация завершена. Можно вернуться к <a href="../demo.html">списку демо</a>.</p>';
        }
        if (nextBtn) nextBtn.style.display = 'none';
        var aw = $('demoAutoWrap');
        if (aw) aw.style.display = 'none';
        setProgress();
        if (typeof options.onComplete === 'function') options.onComplete();
        return;
      }

      var step = steps[idx];
      if (titleEl) titleEl.textContent = step.title || '';
      if (bodyEl) bodyEl.innerHTML = step.html || '';
      if (nextBtn) {
        nextBtn.style.display = 'inline-block';
        nextBtn.textContent = 'Далее';
      }
      setProgress();

      if (typeof step.onEnter === 'function') {
        try {
          step.onEnter(ctx());
        } catch (e2) {
          if (global.console && global.console.error) global.console.error(e2);
        }
      }

      if (isAuto) {
        scheduleIfAutoDeferred();
        return;
      }

      var dur = step.durationMs != null ? step.durationMs : defaultDur;
      var manualOnly = step.manualOnly === true || step.durationMs === 0;
      if (dur > 0 && !manualOnly) {
        timerId = global.setTimeout(function () {
          goNext(false);
        }, dur);
      }
    }

    function start() {
      bindDom();
      idx = -1;
      isAuto = false;
      if (autoBtn) {
        autoBtn.style.display = '';
        setAutoUi();
      }
      var aw = $('demoAutoWrap');
      if (aw) aw.style.display = '';
      if (nextBtn) nextBtn.style.display = 'inline-block';
      if (global.DemoArrows) global.DemoArrows.init();
      if (titleEl) titleEl.textContent = 'Демонстрация';
      if (bodyEl) {
        bodyEl.innerHTML =
          '<p class="demo-start-hint">Нажмите <strong>▶</strong> для автопоказа сразу с первого кадра или «Далее» для ручного шага.</p>';
      }
      setProgressStart();
    }

    function setProgressStart() {
      if (!progressEl || !steps.length) return;
      progressEl.textContent = '0 / ' + steps.length;
    }

    return { start: start, goNext: function () { goNext(true); }, setAuto: function (v) { isAuto = !!v; setAutoUi(); } };
  }

  global.createDemoRunner = createDemoRunner;
})(window);
