/* Uses the deck's shared popup state, so preview and audience stay synchronized. */
(() => {
  const dialog = document.createElement('dialog');
  dialog.className = 'screenshot-dialog';
  dialog.setAttribute('aria-labelledby', 'screenshot-title');
  dialog.innerHTML = `<header><h2 id="screenshot-title"></h2><button type="button" aria-label="Close screenshot">Close · Esc</button></header>
    <div class="screenshot-stage">
      <img alt="">
    </div>
    <p class="screenshot-error" hidden>Screenshot unavailable. Close and reopen to retry.</p>`;
  document.body.append(dialog);
  const title = dialog.querySelector('h2');
  const image = dialog.querySelector('img');
  const error = dialog.querySelector('.screenshot-error');
  let active = null;
  let trigger = null;
  const close = () => {
    active = null;
    if (dialog.open) dialog.close();
    if (trigger?.closest('section.present')) trigger.focus({ preventScroll: true });
    trigger = null;
  };
  const requestClose = () => window.PresentationControls.closePopup();
  dialog.querySelector('button').addEventListener('click', requestClose);
  dialog.addEventListener('cancel', event => { event.preventDefault(); requestClose(); });
  dialog.addEventListener('click', event => { if (event.target === dialog) requestClose(); });
  image.addEventListener('error', () => { image.hidden = true; error.hidden = false; });
  window.ScreenshotTour = {
    get active() { return active; },
    open(button) {
      trigger = button;
      active = { kind: 'screenshot', key: button.dataset.screenshot };
      const total = button.closest('.screenshot-tour').querySelectorAll('[data-screenshot]').length;
      title.textContent = `${button.dataset.screenshotNumber} / ${total} · ${button.dataset.screenshotTitle}`;
      image.hidden = false;
      error.hidden = true;
      image.alt = button.dataset.screenshotTitle;
      image.src = button.querySelector('img').src;
      if (!dialog.open) dialog.showModal();
      window.dispatchEvent(new Event('presentationchange'));
    },
    close,
  };
})();