document.addEventListener('DOMContentLoaded', () => {
  if (typeof window.BiggerPicture !== 'function') {
    console.error('[gallery-init] BiggerPicture not found. Check script path.');
    return;
  }

  // --- Shared helpers for video detection + mime typing ---
  const VIDEO_EXTENSIONS = ['mp4', 'webm', 'mov', 'm4v', 'ogv'];

  function isVideo(href) {
    if (!href) return false;
    const clean = String(href).toLowerCase().split('#')[0].split('?')[0];
    return VIDEO_EXTENSIONS.some(ext => clean.endsWith('.' + ext));
  }

  function mimeFromExt(href) {
    const ext = String(href).toLowerCase().split('#')[0].split('?')[0].split('.').pop();
    switch (ext) {
      case 'mp4': case 'm4v': return 'video/mp4';
      case 'webm':            return 'video/webm';
      case 'ogv':             return 'video/ogg';
      case 'mov':             return 'video/quicktime';
      default:                return 'video/*';
    }
  }

  // -------------------------------------------------------

  function setupGalleries(root = document) {
    const imgs = root.querySelectorAll('.figure img, img.org-svg');

    imgs.forEach((img) => {
      if (img.closest('a')) return;
      const a = document.createElement('a');
      const href = img.currentSrc || img.src;
      a.href = href;
      a.dataset.img = href;
      a.dataset.alt = img.alt || '';

      const setDims = () => {
        a.dataset.width  = img.naturalWidth  || img.width  || 1920;
        a.dataset.height = img.naturalHeight || img.height || 1080;
      };
      if (img.complete) setDims();
      else img.addEventListener('load', setDims);

      img.style.cursor = 'zoom-in';
      img.parentElement.insertBefore(a, img);
      a.appendChild(img);
    });

    const containers = root.querySelectorAll('main, article, .content, body');
    containers.forEach((container) => {
      const links = Array.from(container.querySelectorAll(
        '.figure a, a:has(img.org-svg), a[href$=".mp4"], a[href$=".webm"], a[href$=".mov"], a[href$=".m4v"], a[href$=".ogv"]'
      ));
      if (!links.length) return;

      links.forEach((link) => {
        if (link.dataset.bpBound) return;
        link.dataset.bpBound = 'true';
        link.addEventListener('click', (e) => {
          e.preventDefault();
          bp.open({
            items: links,
            el: link,
            caption: (el) => el.querySelector('img')?.alt || el.title || '',
            maxZoom: 40,
            onOpen(containerEl) {
              const linkEl = bp.currItem;
              const href = linkEl?.href || '';
              if (isVideo(href)) {
                teardownRotation();
                const htmlLayer = containerEl.querySelector('.bp-html');
                const imgLayer  = containerEl.querySelector('.bp-img');
                if (imgLayer) imgLayer.style.display = 'none';
                htmlLayer.innerHTML = `
                  <video controls autoplay style="max-width:95vw; max-height:95vh">
                    <source src="${href}" type="${mimeFromExt(href)}">
                  </video>`;
                return;
              }
              setupRotation(containerEl);
              enhanceSVG(containerEl);
            }
          });
        });
      });
    });
  }

  // Replaces plain video links with inline <video> players
  function setupVideo(root = document) {
    // Links that point directly to video files
    root.querySelectorAll('a[href]').forEach(link => {
      if (link.dataset.videoProcessed) return;
      const href = link.getAttribute('href');
      if (!isVideo(href)) return;
      link.dataset.videoProcessed = 'true';

      const wrapper = document.createElement('div');
      wrapper.className = 'video-container';

      const video = document.createElement('video');
      video.controls = true;
      video.preload  = 'metadata';
      video.style.cssText = 'max-width:100%;width:100%;height:auto;display:block;border-radius:6px;';

      // For .mov files: browsers (Chrome/Firefox) don't support QuickTime.
      // Emit an MP4 source first (the converted sibling), then the original
      // MOV as a last-resort fallback (Safari can play it).
      const isMov = href.toLowerCase().split('?')[0].endsWith('.mov');
      if (isMov) {
        const mp4Href = href.replace(/\.mov$/i, '.mp4');
        const mp4Source = document.createElement('source');
        mp4Source.src  = mp4Href;
        mp4Source.type = 'video/mp4';
        video.appendChild(mp4Source);
      }

      const source = document.createElement('source');
      source.src   = href;
      source.type  = mimeFromExt(href);
      video.appendChild(source);
      wrapper.appendChild(video);

      link.parentNode.replaceChild(wrapper, link);
    });

    // Raw <video> elements not yet wrapped
    root.querySelectorAll('video').forEach(video => {
      video.controls = true;
      video.style.cssText = 'max-width:100%;width:100%;height:auto;display:block;border-radius:6px;';
      if (!video.closest('.video-container')) {
        const wrapper = document.createElement('div');
        wrapper.className = 'video-container';
        video.parentNode.insertBefore(wrapper, video);
        wrapper.appendChild(video);
      }
      if (!video.currentSrc) video.load();
    });
  }

  // Replaces plain mp3 links with inline <audio> players
  function setupAudio(root = document) {
    root.querySelectorAll('a[href$=".mp3"], a[href$=".ogg"], a[href$=".flac"], a[href$=".wav"]').forEach(link => {
      if (link.dataset.audioProcessed) return;
      link.dataset.audioProcessed = 'true';
      const src = link.href;

      const wrapper = document.createElement('div');
      wrapper.className = 'audio-player';

      const audio = document.createElement('audio');
      audio.controls = true;
      audio.preload  = 'metadata';
      audio.src      = src;

      const label = document.createElement('div');
      label.className = 'audio-label';
      label.textContent = link.textContent || src.split('/').pop();

      wrapper.appendChild(label);
      wrapper.appendChild(audio);
      link.replaceWith(wrapper);
    });
  }

  // ----- BiggerPicture instance -----
  const bp = BiggerPicture({ target: document.body });

  // ----- Rotation helpers -----
  let activeContainer = null;
  let currentRotation = 0;
  let rotateControls  = null;

  function ensureRotateControls() {
    if (rotateControls) return rotateControls;
    const wrapper = document.createElement('div');
    wrapper.className = 'bp-rotate-controls';
    Object.assign(wrapper.style, {
      position: 'fixed', bottom: '1.5rem', right: '1.5rem',
      display: 'flex', gap: '0.5rem', zIndex: '9999', pointerEvents: 'auto'
    });
    const mkBtn = (label, title) => {
      const btn = document.createElement('button');
      btn.type = 'button'; btn.textContent = label; btn.title = title;
      btn.setAttribute('aria-label', title);
      Object.assign(btn.style, {
        padding: '0.4rem 0.6rem', borderRadius: '999px', border: 'none',
        fontSize: '1.2rem', cursor: 'pointer',
        background: 'rgba(30,30,30,0.8)', color: '#fff'
      });
      return btn;
    };
    const left  = mkBtn('⟲', 'Rotate image 90° left');
    const right = mkBtn('⟳', 'Rotate image 90° right');
    left.addEventListener('click',  e => { e.stopPropagation(); if (activeContainer) { currentRotation = (currentRotation - 90 + 360) % 360; applyRotation(); } });
    right.addEventListener('click', e => { e.stopPropagation(); if (activeContainer) { currentRotation = (currentRotation + 90) % 360; applyRotation(); } });
    wrapper.append(left, right);
    document.body.appendChild(wrapper);
    rotateControls = wrapper;
    return rotateControls;
  }

  function ensureRotateWrapper() {
    if (!activeContainer) return null;
    const imgRoot = activeContainer.querySelector('.bp-img');
    if (!imgRoot) return null;
    const imgEl = imgRoot.querySelector('img');
    if (!imgEl) return null;
    const src = (imgEl.currentSrc || imgEl.src || '').toLowerCase();
    if (src.endsWith('.svg')) return null;
    let wrapper = imgRoot.querySelector('.bp-rotate-wrapper');
    if (!wrapper) {
      wrapper = document.createElement('div');
      wrapper.className = 'bp-rotate-wrapper';
      wrapper.style.display = 'inline-block';
      wrapper.style.transformOrigin = 'center center';
      imgRoot.appendChild(wrapper);
      wrapper.appendChild(imgEl);
    } else if (!wrapper.contains(imgEl)) {
      wrapper.innerHTML = '';
      wrapper.appendChild(imgEl);
    }
    return wrapper;
  }

  function applyRotation() {
    const wrapper = ensureRotateWrapper();
    if (wrapper) wrapper.style.transform = `rotate(${currentRotation}deg)`;
  }

  function setupRotation(containerEl) {
    activeContainer = containerEl;
    currentRotation = 0;
    ensureRotateControls().style.display = 'flex';
    applyRotation();
  }

  function teardownRotation() {
    activeContainer = null;
    currentRotation = 0;
    if (rotateControls) rotateControls.style.display = 'none';
  }

  // ----- SVG pan/zoom -----
  let activePanZoom = null;
  const destroyPanZoom = () => { try { activePanZoom?.destroy(); } catch(_){} activePanZoom = null; };

  async function enhanceSVG(containerEl) {
    try {
      destroyPanZoom();
      const imgEl = containerEl.querySelector('.bp-img img');
      if (!imgEl) return;
      const src   = imgEl.currentSrc || imgEl.src || '';
      const isSVG = src.toLowerCase().endsWith('.svg');
      const htmlLayer = containerEl.querySelector('.bp-html');
      if (!isSVG || !htmlLayer) {
        const old = htmlLayer?.querySelector('.bp-svg-holder');
        if (old) old.remove();
        imgEl.style.visibility = '';
        return;
      }
      let holder = htmlLayer.querySelector('.bp-svg-holder');
      if (!holder) {
        holder = document.createElement('div');
        holder.className = 'bp-svg-holder';
        holder.style.maxWidth  = '95vw';
        holder.style.maxHeight = '95vh';
        htmlLayer.appendChild(holder);
      }
      holder.innerHTML = '';
      imgEl.style.visibility = 'hidden';
      const res  = await fetch(src, { cache: 'force-cache' });
      const text = await res.text();
      holder.innerHTML = text;
      const svg = holder.querySelector('svg');
      if (!svg) { imgEl.style.visibility = ''; return; }
      svg.style.maxWidth  = '95vw';
      svg.style.maxHeight = '95vh';
      svg.style.display   = 'block';
      if (typeof window.svgPanZoom === 'function') {
        activePanZoom = svgPanZoom(svg, {
          zoomEnabled: true, controlIconsEnabled: true,
          fit: true, center: true,
          minZoom: 0.05, maxZoom: 400, zoomScaleSensitivity: 0.25,
          dblClickZoomEnabled: true
        });
        holder.addEventListener('wheel', e => e.stopPropagation(), { passive: true });
      } else {
        console.warn('[gallery-init] svg-pan-zoom not loaded');
      }
    } catch (err) {
      console.error('[gallery-init] SVG enhance failed:', err);
    }
  }

  // ----- Initial setup -----
  setupGalleries(document);
  setupAudio(document);
  setupVideo(document);

  // Observe dynamically added nodes
  const dynamicObserver = new MutationObserver((mutations) => {
    for (const m of mutations) {
      for (const node of m.addedNodes) {
        if (!(node instanceof HTMLElement)) continue;
        if (node.querySelectorAll) {
          setupGalleries(node);
          setupAudio(node);
          setupVideo(node);
        }
      }
    }
  });
  dynamicObserver.observe(document.body, { childList: true, subtree: true });

  // Watch URL changes and re-init
  let lastUrl = location.href;
  const urlObserver = new MutationObserver(() => {
    const currentUrl = location.href;
    if (currentUrl !== lastUrl) {
      lastUrl = currentUrl;
      console.log('[gallery-init] URL changed → reinitializing');
      setupGalleries(document);
      setupAudio(document);
      setupVideo(document);
    }
  });
  urlObserver.observe(document, { subtree: true, childList: true });

  // Expose helpers for tab-system.js
  window._gallerySetupVideo = setupVideo;
  window._gallerySetupAudio = setupAudio;
});