(() => {
  const cfg = window.MODEWELT_TV_GALLERY;
  if (!cfg) return;

  const raw = Array.isArray(cfg.slides) ? cfg.slides : [];
  if (raw.length === 0) return;

  const slides = raw.map(s => {
    if (typeof s === "string") return { url: s, sec: 7 };
    if (s && typeof s === "object") return { url: s.url, sec: s.sec };
    return null;
  }).filter(Boolean);

  if (slides.length === 0) return;

  const root = document.querySelector('.modewelt-tv-gallery');
  if (!root) return;

  const slideA = root.querySelector('.mw-tv-slide-a');
  const slideB = root.querySelector('.mw-tv-slide-b');
  if (!slideA || !slideB) return;

  const fade = Math.max(0.1, parseFloat(cfg.fade || 1.2));
  [slideA, slideB].forEach(s => s.style.transitionDuration = `${fade}s`);

  const clampSec = (v, def = 7) => Math.max(1, parseFloat(v || def));

  let idx = 0;
  let showingA = true;
  let timer = null;
  let isPaused = false;
  let slideStartTs = Date.now();
  let remainingMs = clampSec(slides[0].sec) * 1000;

  function preload(url){
    if (!url) return;
    const img = new Image();
    img.decoding = "async";
    img.src = url;
  }

  function setBg(el, url){
    el.style.backgroundImage = `url("${url}")`;
  }

  function updateStatus(){
    const el = root.querySelector('.mw-tv-status');
    if (!el) return;
    el.textContent = `${idx + 1} / ${slides.length}${isPaused ? '  (Pause)' : ''}`;
  }

  function scheduleNext(ms){
    clearTimeout(timer);
    timer = setTimeout(() => {
      if (!isPaused) next();
    }, ms);
    slideStartTs = Date.now();
    remainingMs = ms;
  }

  function showIndex(newIdx){
    idx = (newIdx + slides.length) % slides.length;

    const current = slides[idx];
    const nextSlide = slides[(idx + 1) % slides.length];
    preload(nextSlide && nextSlide.url);

    const hideEl = showingA ? slideA : slideB;
    const showEl = showingA ? slideB : slideA;

    setBg(showEl, current.url);
    showEl.classList.add('is-visible');
    hideEl.classList.remove('is-visible');

    showingA = !showingA;

    updateStatus();

    if (!isPaused) {
      scheduleNext(clampSec(current.sec) * 1000);
    }
  }

  function next(){ showIndex(idx + 1); }
  function prev(){ showIndex(idx - 1); }

  function pause(){
    if (isPaused) return;
    isPaused = true;
    const elapsed = Date.now() - slideStartTs;
    remainingMs = Math.max(250, remainingMs - elapsed);
    clearTimeout(timer);
    root.setAttribute('data-paused', '1');
    updateStatus();
  }

  function play(){
    if (!isPaused) return;
    isPaused = false;
    root.removeAttribute('data-paused');
    scheduleNext(remainingMs);
    updateStatus();
  }

  function togglePlay(){ isPaused ? play() : pause(); }

  function ensureControls(){
    if (root.querySelector('.mw-tv-controls')) return;

    const controls = document.createElement('div');
    controls.className = 'mw-tv-controls';
    controls.innerHTML = `
      <button class="mw-tv-btn mw-tv-prev" type="button" aria-label="Zurück">‹</button>
      <button class="mw-tv-btn mw-tv-play" type="button" aria-label="Pause/Weiter">⏯</button>
      <button class="mw-tv-btn mw-tv-next" type="button" aria-label="Weiter">›</button>
      <div class="mw-tv-status" aria-hidden="true"></div>
      <div class="mw-tv-hotzone mw-tv-hotzone-left" aria-hidden="true"></div>
      <div class="mw-tv-hotzone mw-tv-hotzone-right" aria-hidden="true"></div>
    `;
    root.appendChild(controls);

    controls.querySelector('.mw-tv-prev').addEventListener('click', prev);
    controls.querySelector('.mw-tv-next').addEventListener('click', next);
    controls.querySelector('.mw-tv-play').addEventListener('click', togglePlay);
    controls.querySelector('.mw-tv-hotzone-left').addEventListener('click', prev);
    controls.querySelector('.mw-tv-hotzone-right').addEventListener('click', next);
  }

  function onKey(e){
    const k = e.key;
    const kc = e.keyCode || e.which;
    const isLeft  = (k === 'ArrowLeft'  || kc === 37 || kc === 21);
    const isRight = (k === 'ArrowRight' || kc === 39 || kc === 22);
    const isOk    = (k === 'Enter'      || kc === 13 || kc === 23);
    const isSpace = (k === ' '          || kc === 32);
    const isPlayPause = (k === 'MediaPlayPause' || kc === 179 || kc === 85);

    if (isLeft){ e.preventDefault(); prev(); return; }
    if (isRight){ e.preventDefault(); next(); return; }
    if (isOk || isSpace || isPlayPause){ e.preventDefault(); togglePlay(); return; }
  }
  window.addEventListener('keydown', onKey, { passive: false });

  // INIT
  ensureControls();

  setBg(slideA, slides[0].url);
  slideA.classList.add('is-visible');
  preload((slides[1] || slides[0]).url);

  updateStatus();
  scheduleNext(remainingMs);
})();