/**
 * Tab Video module — restart a tab's video every time its tab opens
 * v1.1.0
 *
 * Webflow Tabs + Background Video: the video in a pane keeps its playhead when
 * the pane is hidden, so switching back resumes mid-clip. This rewinds and plays
 * a pane's videos when the pane becomes active, and pauses + rewinds them when
 * it is left. Driven by the pane's `w--tab-active` class (MutationObserver), so
 * clicks, keyboard navigation and Webflow's own tab API all trigger it.
 *
 * v1.1.0: every tab video gets an "enlarge" button (bottom right) that plays it
 * fullscreen from 0 with native controls. Desktop + Android use the Fullscreen
 * API on the <video>; iOS Safari has none for elements, so it falls back to
 * webkitEnterFullscreen (the native player). Controls are removed on exit.
 *
 * Load with <script src> only. No config, no markup hooks: every
 * `.w-tab-pane video` on the page is handled. Only videos that autoplay are
 * restarted — a click-to-play video is rewound but left paused.
 *
 * Source: ~/Development/haufe/ds-tab-video · Vault: Dev/Bundle-Deploys
 */
(function () {
  'use strict';
  var VERSION = '1.1.0';
  if (window.HaufeTabVideo) return;

  var ACTIVE = 'w--tab-active';
  var BTN = 'tab-video_enlarge';
  /* Lucide "maximize-2" */
  var ICON = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" ' +
    'stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
    '<polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/>' +
    '<line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>';
  var CSS =
    '.' + BTN + '{position:absolute;right:.75rem;bottom:.75rem;z-index:3;display:flex;align-items:center;' +
    'justify-content:center;width:2.5rem;height:2.5rem;padding:0;border:0;border-radius:999px;cursor:pointer;' +
    'color:#fff;background:rgba(0,0,0,.55);transition:background-color 200ms,transform 200ms}' +
    '.' + BTN + ':hover{background:rgba(0,0,0,.8);transform:scale(1.06)}' +
    '.' + BTN + ':focus-visible{outline:2px solid var(--brand,#fff);outline-offset:2px}' +
    '.w-tab-pane video:fullscreen{object-fit:contain!important;background:#000}' +
    '.w-tab-pane video:-webkit-full-screen{object-fit:contain!important;background:#000}';

  function autoplays(video) {
    var wrap = video.closest('.w-background-video');
    return video.autoplay || (wrap && wrap.getAttribute('data-autoplay') === 'true');
  }

  function play(video) {
    var p = video.play();
    if (p && p.catch) p.catch(function () {});
  }

  function sync(pane) {
    var active = pane.classList.contains(ACTIVE);
    pane.querySelectorAll('video').forEach(function (v) {
      if (active) {
        v.currentTime = 0;
        if (autoplays(v)) play(v);
      } else {
        v.pause();
        v.currentTime = 0;
      }
    });
  }

  function fullscreenElement() {
    return document.fullscreenElement || document.webkitFullscreenElement || null;
  }

  function enlarge(video) {
    video.currentTime = 0;
    video.controls = true;
    if (video.requestFullscreen) {
      video.requestFullscreen().then(function () { play(video); }, function () { video.controls = false; });
    } else if (video.webkitRequestFullscreen) {
      video.webkitRequestFullscreen();
      play(video);
    } else if (video.webkitEnterFullscreen) {
      /* iOS Safari: native player; it needs a playing (or loaded) video */
      play(video);
      video.webkitEnterFullscreen();
    } else {
      video.controls = false;
    }
  }

  function onExit(video) {
    video.controls = false;
    if (autoplays(video)) play(video);
  }

  function addButton(video) {
    var wrap = video.closest('.w-background-video') || video.parentElement;
    if (!wrap || wrap.querySelector('.' + BTN)) return;
    var btn = document.createElement('button');
    btn.type = 'button';
    btn.className = BTN;
    btn.setAttribute('aria-label', 'Video im Vollbild ansehen');
    btn.innerHTML = ICON;
    btn.addEventListener('click', function (e) {
      e.preventDefault();
      e.stopPropagation();
      enlarge(video);
    });
    if (getComputedStyle(wrap).position === 'static') wrap.style.position = 'relative';
    wrap.appendChild(btn);
    video.addEventListener('webkitendfullscreen', function () { onExit(video); });
  }

  function init() {
    var panes = Array.prototype.filter.call(
      document.querySelectorAll('.w-tab-pane'),
      function (pane) { return pane.querySelector('video'); }
    );
    var observer = new MutationObserver(function (records) {
      records.forEach(function (r) {
        var was = (r.oldValue || '').split(/\s+/).indexOf(ACTIVE) !== -1;
        if (was !== r.target.classList.contains(ACTIVE)) sync(r.target);
      });
    });

    var style = document.createElement('style');
    style.textContent = CSS;
    document.head.appendChild(style);

    var videos = [];
    panes.forEach(function (pane) {
      observer.observe(pane, { attributes: true, attributeFilter: ['class'], attributeOldValue: true });
      if (!pane.classList.contains(ACTIVE)) sync(pane);
      pane.querySelectorAll('video').forEach(function (v) { addButton(v); videos.push(v); });
    });

    /* Desktop/Android exit (Esc, back gesture, native button) → drop controls */
    var last = null;
    function onChange() {
      var el = fullscreenElement();
      if (el && videos.indexOf(el) !== -1) last = el;
      else if (!el && last) { onExit(last); last = null; }
    }
    document.addEventListener('fullscreenchange', onChange);
    document.addEventListener('webkitfullscreenchange', onChange);

    window.HaufeTabVideo = { version: VERSION, panes: panes.length, buttons: videos.length };
  }

  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
  else init();
})();