// Highly customizable confirmation modal component
// Supports custom titles, messages, buttons, icons, types, and more

const ConfirmationModal = {
  // Default configuration
  defaults: {
    title: 'Confirm Action',
    message: 'Are you sure you want to proceed?',
    type: 'default', // 'default', 'warning', 'danger', 'info', 'success'
    confirmText: 'Confirm',
    cancelText: 'Cancel',
    confirmButtonClass: '',
    cancelButtonClass: '',
    showCancel: true,
    allowHTML: false,
    icon: null, // Custom icon HTML or null for default icons
    onConfirm: null,
    onCancel: null,
    closeOnBackdrop: true,
    closeOnEscape: true,
    focusConfirm: true,
    width: 'max-w-md', // Tailwind width class
    zIndex: 'z-50'
  },

  // Type-specific configurations
  typeConfigs: {
    warning: {
      title: 'Warning',
      icon: `<svg class="w-6 h-6 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
      </svg>`,
      confirmButtonClass: 'admin-btn--warning'
    },
    danger: {
      title: 'Danger',
      icon: `<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
      </svg>`,
      confirmButtonClass: 'admin-btn--danger'
    },
    info: {
      title: 'Information',
      icon: `<svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>`,
      confirmButtonClass: 'admin-btn--primary'
    },
    success: {
      title: 'Success',
      icon: `<svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>`,
      confirmButtonClass: 'admin-btn--success'
    },
    default: {
      title: 'Confirm Action',
      icon: `<svg class="w-6 h-6 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>`
    }
  },

  // Create and show the modal
  show: function(options = {}) {
    return new Promise((resolve, reject) => {
      // Merge options with defaults and type config
      const config = { ...this.defaults, ...options };
      const typeConfig = this.typeConfigs[config.type] || this.typeConfigs.default;
      
      // Apply type-specific config
      if (config.type !== 'default' && !options.title) {
        config.title = typeConfig.title;
      }
      if (!config.icon && typeConfig.icon) {
        config.icon = typeConfig.icon;
      }
      if (config.type !== 'default' && !options.confirmButtonClass) {
        config.confirmButtonClass = typeConfig.confirmButtonClass;
      }

      // Get or create modal element
      let modal = document.getElementById('confirmationModal');
      if (!modal) {
        modal = this._createModalElement();
        document.body.appendChild(modal);
      }

      // Update modal content
      this._updateModalContent(modal, config);

      // Set up event handlers
      const confirmBtn = modal.querySelector('[data-confirm-btn]');
      const cancelBtn = modal.querySelector('[data-cancel-btn]');
      const backdrop = modal.querySelector('.modal-backdrop');

      // Clean up previous handlers
      const newConfirmHandler = () => {
        modal.close();
        if (config.onConfirm) {
          try {
            const result = config.onConfirm();
            if (result instanceof Promise) {
              result.then(resolve).catch(reject);
            } else {
              resolve(result);
            }
          } catch (error) {
            reject(error);
          }
        } else {
          resolve(true);
        }
        this._cleanup(modal);
      };

      const newCancelHandler = () => {
        modal.close();
        if (config.onCancel) {
          try {
            const result = config.onCancel();
            if (result instanceof Promise) {
              result.then(() => resolve(false)).catch(reject);
            } else {
              resolve(false);
            }
          } catch (error) {
            reject(error);
          }
        } else {
          resolve(false);
        }
        this._cleanup(modal);
      };

      const escapeHandler = (e) => {
        if (config.closeOnEscape && e.key === 'Escape') {
          e.preventDefault();
          newCancelHandler();
        } else if (e.key === 'Enter' && config.focusConfirm) {
          e.preventDefault();
          newConfirmHandler();
        }
      };

      // Attach handlers
      confirmBtn.addEventListener('click', newConfirmHandler);
      if (cancelBtn) {
        cancelBtn.addEventListener('click', newCancelHandler);
      }
      document.addEventListener('keydown', escapeHandler);

      // Store handlers for cleanup
      modal._handlers = {
        confirm: newConfirmHandler,
        cancel: newCancelHandler,
        escape: escapeHandler
      };

      // Backdrop click handler
      if (config.closeOnBackdrop) {
        const backdropHandler = (e) => {
          if (e.target === modal) {
            newCancelHandler();
          }
        };
        modal.addEventListener('click', backdropHandler);
        modal._handlers.backdrop = backdropHandler;
      }

      // Show modal
      modal.showModal();

      // Focus confirm button if specified
      if (config.focusConfirm) {
        setTimeout(() => confirmBtn.focus(), 100);
      } else if (cancelBtn) {
        setTimeout(() => cancelBtn.focus(), 100);
      }
    });
  },

  // Create the modal DOM element
  _createModalElement: function() {
    const modal = document.createElement('dialog');
    modal.id = 'confirmationModal';
    modal.className = 'confirmation-modal p-0 bg-transparent border-0 outline-none rounded-lg shadow-2xl w-full max-w-md';
    modal.setAttribute('style', 'border: none; outline: none; padding: 0; margin: 0; background: transparent;');
    modal.innerHTML = `
      <div class="modal-content confirmation-modal-panel ${this.defaults.width} mx-auto">
        <div class="modal-header p-6 pb-4">
          <div class="flex items-center gap-3">
            <div class="modal-icon flex-shrink-0"></div>
            <h3 class="modal-title text-lg font-semibold flex-1"></h3>
          </div>
        </div>
        <div class="modal-body p-6 pt-0">
          <div class="modal-message text-sm theme-text-secondary"></div>
        </div>
        <div class="modal-footer p-6 pt-4 flex justify-end gap-3">
          <button data-cancel-btn type="button" class="admin-btn admin-btn--secondary"></button>
          <button data-confirm-btn type="button" class="admin-btn admin-btn--primary"></button>
        </div>
      </div>
    `;
    return modal;
  },

  // Update modal content based on config
  _updateModalContent: function(modal, config) {
    const titleEl = modal.querySelector('.modal-title');
    const messageEl = modal.querySelector('.modal-message');
    const iconEl = modal.querySelector('.modal-icon');
    const confirmBtn = modal.querySelector('[data-confirm-btn]');
    const cancelBtn = modal.querySelector('[data-cancel-btn]');
    const footer = modal.querySelector('.modal-footer');
    const content = modal.querySelector('.modal-content');

    // Update title
    if (titleEl) {
      titleEl.textContent = config.title;
    }

    // Update message
    if (messageEl) {
      if (config.allowHTML) {
        messageEl.innerHTML = config.message;
      } else {
        messageEl.textContent = config.message;
      }
    }

    // Update icon
    if (iconEl) {
      if (config.icon) {
        iconEl.innerHTML = config.icon;
        iconEl.classList.remove('hidden');
      } else {
        iconEl.classList.add('hidden');
      }
    }

    // Update buttons
    if (confirmBtn) {
      confirmBtn.textContent = config.confirmText;
      const confirmVariant = config.confirmButtonClass || 'admin-btn--primary';
      confirmBtn.className = `admin-btn ${confirmVariant}`;
      confirmBtn.style.cssText = '';
    }

    if (cancelBtn) {
      if (config.showCancel) {
        cancelBtn.textContent = config.cancelText;
        cancelBtn.className = 'admin-btn admin-btn--secondary';
        cancelBtn.style.cssText = '';
        cancelBtn.classList.remove('hidden');
      } else {
        cancelBtn.classList.add('hidden');
      }
    }

    // Update width
    if (content && config.width) {
      content.className = content.className.replace(/max-w-\w+/, '');
      content.classList.add(config.width);
    }
  },

  // Clean up event handlers
  _cleanup: function(modal) {
    if (!modal._handlers) return;

    const confirmBtn = modal.querySelector('[data-confirm-btn]');
    const cancelBtn = modal.querySelector('[data-cancel-btn]');

    if (confirmBtn && modal._handlers.confirm) {
      confirmBtn.removeEventListener('click', modal._handlers.confirm);
    }
    if (cancelBtn && modal._handlers.cancel) {
      cancelBtn.removeEventListener('click', modal._handlers.cancel);
    }
    if (modal._handlers.escape) {
      document.removeEventListener('keydown', modal._handlers.escape);
    }
    if (modal._handlers.backdrop) {
      modal.removeEventListener('click', modal._handlers.backdrop);
    }

    delete modal._handlers;
  },

  // Convenience methods for common types
  warning: function(message, options = {}) {
    return this.show({ ...options, message, type: 'warning' });
  },

  danger: function(message, options = {}) {
    return this.show({ ...options, message, type: 'danger' });
  },

  info: function(message, options = {}) {
    return this.show({ ...options, message, type: 'info' });
  },

  success: function(message, options = {}) {
    return this.show({ ...options, message, type: 'success' });
  },

  // Simple confirm replacement (backward compatible)
  confirm: function(message, options = {}) {
    return this.show({ ...options, message });
  },

  // Alert-style modal (single button, no cancel)
  alert: function(message, options = {}) {
    return this.show({
      ...options,
      message,
      showCancel: false,
      confirmText: options.confirmText || 'OK',
      type: options.type || 'info',
      focusConfirm: true
    });
  }
};

// Make it globally available
window.ConfirmationModal = ConfirmationModal;

// Also provide a simple showConfirm function for backward compatibility
window.showConfirm = function(message, callback, options = {}) {
  return ConfirmationModal.show({
    ...options,
    message,
    onConfirm: callback
  });
};