(function (ns) {
  'use strict';

  const dialog = document.getElementById('info-dialog');
  const title = document.getElementById('info-dialog-title');
  const menu = document.getElementById('info-menu');
  const backButton = document.getElementById('info-back');
  const closeButton = document.getElementById('info-close');
  const infoButton = document.getElementById('info-button');
  const pageTitles = Object.freeze({
    privacy: 'Datenschutzerklärung',
    imprint: 'Impressum',
    technology: 'Cookies und Technik'
  });

  function isActivation(event) {
    if (event.type === 'keydown') return event.key === 'Enter' || event.key === ' ';
    if (event.type !== 'pointerup') return false;
    if (event.isPrimary === false) return false;
    return event.pointerType !== 'mouse' || event.button === 0;
  }

  function activate(element, handler) {
    element.addEventListener('pointerup', event => {
      if (!isActivation(event)) return;
      event.preventDefault();
      event.stopPropagation();
      handler(event);
    });
    element.addEventListener('keydown', event => {
      if (!isActivation(event)) return;
      event.preventDefault();
      event.stopPropagation();
      handler(event);
    });
  }

  function syncStorageToggles() {
    const enabled = ns.PrivacyStorage.isProgressStorageEnabled();
    document.querySelectorAll('.progress-storage-toggle').forEach(toggle => {
      toggle.checked = enabled;
    });
    document.querySelectorAll('.cookie-toggle').forEach(toggle => {
      toggle.checked = false;
    });
  }

  function showMenu() {
    title.textContent = 'Informationen';
    menu.hidden = false;
    backButton.hidden = true;
    document.querySelectorAll('[data-info-page]').forEach(page => {
      page.hidden = true;
    });
  }

  function showPage(name) {
    const page = document.querySelector(`[data-info-page="${name}"]`);
    if (!page) return;

    title.textContent = pageTitles[name] ?? 'Informationen';
    menu.hidden = true;
    backButton.hidden = false;
    document.querySelectorAll('[data-info-page]').forEach(item => {
      item.hidden = item !== page;
    });
    const content = document.querySelector('.info-dialog-content');
    if (content) content.scrollTop = 0;
  }

  function openDialog() {
    if (dialog.open) return;
    showMenu();
    syncStorageToggles();
    if (typeof dialog.showModal === 'function') dialog.showModal();
    else dialog.setAttribute('open', '');
    closeButton.focus();
  }

  function closeDialog() {
    if (typeof dialog.close === 'function') dialog.close();
    else dialog.removeAttribute('open');
    infoButton.focus();
  }

  function bindStorageToggles() {
    document.querySelectorAll('.progress-storage-toggle').forEach(toggle => {
      toggle.addEventListener('change', event => {
        const enabled = ns.PrivacyStorage.setProgressStorageEnabled(event.currentTarget.checked);
        syncStorageToggles();
        document.dispatchEvent(new CustomEvent('wegwichtel:progress-storage-changed', {
          detail: { enabled }
        }));
      });
    });
  }

  activate(infoButton, openDialog);
  activate(closeButton, closeDialog);
  activate(backButton, showMenu);
  document.querySelectorAll('[data-info-target]').forEach(button => {
    activate(button, () => showPage(button.dataset.infoTarget));
  });

  dialog.addEventListener('pointerup', event => {
    if (event.target !== dialog || !isActivation(event)) return;
    event.preventDefault();
    event.stopPropagation();
    closeDialog();
  });
  dialog.addEventListener('cancel', event => {
    event.preventDefault();
    closeDialog();
  });

  bindStorageToggles();
  syncStorageToggles();

  ns.LegalUi = Object.freeze({ open: openDialog, close: closeDialog, syncStorageToggles });
}(globalThis.Wegwichtel ??= {}));