/* global window, document */

/**
 * Unified Dialog Infrastructure
 *
 * Provides a shared modal overlay and dialog container that all other
 * client-side modules (event popups, cache purge, etc.) can use.
 *
 * Usage:
 *   Luxtools.Dialog.show(htmlString)   – render content and open
 *   Luxtools.Dialog.close()            – close the dialog
 *   Luxtools.Dialog.getContainer()     – return the dialog DOM element
 */
(function () {
  'use strict';

  var Luxtools = window.Luxtools || (window.Luxtools = {});

  var Dialog = (function () {
    var overlay = null;
    var container = null;

    /**
     * Lazily create the overlay + dialog container and attach them to
     * the document body.  Wires up click-outside-to-close and Escape.
     */
    function ensureElements() {
      if (overlay) return;

      overlay = document.createElement('div');
      overlay.className = 'luxtools-dialog-overlay';
      overlay.style.display = 'none';

      container = document.createElement('div');
      container.className = 'luxtools-dialog';
      container.setAttribute('role', 'dialog');
      container.setAttribute('aria-modal', 'true');

      overlay.appendChild(container);
      document.body.appendChild(overlay);

      // Close when clicking the backdrop (but not the dialog itself)
      overlay.addEventListener('click', function (e) {
        if (e.target === overlay) close();
      });

      // Close on Escape
      document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && overlay && overlay.style.display !== 'none') {
          close();
        }
      });
    }

    /**
     * Show the dialog with the given HTML content.
     *
     * The HTML should include a close button with class
     * `luxtools-dialog-close` – it will be wired up automatically.
     *
     * @param {string} html - innerHTML for the dialog container
     */
    function show(html) {
      ensureElements();
      container.innerHTML = html;
      overlay.style.display = 'flex';

      // Auto-wire the close button inside the rendered content
      var closeBtn = container.querySelector('.luxtools-dialog-close');
      if (closeBtn) closeBtn.addEventListener('click', close);
    }

    /**
     * Close (hide) the dialog.
     */
    function close() {
      if (overlay) overlay.style.display = 'none';
    }

    /**
     * Return the dialog container element (creates it if necessary).
     * Useful for querying form inputs after `show()`.
     *
     * @returns {HTMLElement}
     */
    function getContainer() {
      ensureElements();
      return container;
    }

    return { show: show, close: close, getContainer: getContainer };
  })();

  Luxtools.Dialog = Dialog;
})();