/**
 * @author Isabelly & Luiz Felype
 * @license MIT
 * @version 1.0.0
 */

class DeleteModal {
  constructor(options = {}) {
    this.options = {
      title: options.title || 'Confirmar Exclusão',
      message: options.message || 'Tem certeza que deseja excluir este item?',
      confirmText: options.confirmText || 'Excluir',
      cancelText: options.cancelText || 'Cancelar',
      onConfirm: options.onConfirm || (() => {}),
      onCancel: options.onCancel || (() => {}),
    };
    
    this.modalElement = null;
    this._injectStyles();
  }

  _injectStyles() {
    if (document.getElementById('delete-modal-styles')) return;

    const style = document.createElement('style');
    style.id = 'delete-modal-styles';
    style.innerHTML = `
      .dm-overlay {
        position: fixed; inset: 0; background: rgba(0,0,0,0.5);
        display: flex; align-items: center; justify-content: center;
        z-index: 9999; opacity: 0; transition: opacity 0.3s ease;
        padding: 20px; font-family: sans-serif;
      }
      .dm-content {
        background: white; padding: 24px; border-radius: 8px;
        max-width: 400px; width: 100%; transform: translateY(-20px);
        transition: transform 0.3s ease; box-shadow: 0 10px 25px rgba(0,0,0,0.2);
      }
      .dm-overlay.active { opacity: 1; }
      .dm-overlay.active .dm-content { transform: translateY(0); }
      .dm-title { margin: 0 0 10px; font-size: 1.25rem; color: #1f2937; }
      .dm-message { margin: 0 0 24px; color: #6b7280; line-height: 1.5; }
      .dm-actions { display: flex; gap: 12px; justify-content: flex-end; }
      .dm-btn { 
        padding: 8px 16px; border-radius: 6px; cursor: pointer; 
        font-weight: 500; border: none; transition: background 0.2s;
      }
      .dm-btn-cancel { background: #f3f4f6; color: #374151; }
      .dm-btn-cancel:hover { background: #e5e7eb; }
      .dm-btn-confirm { background: #ef4444; color: white; }
      .dm-btn-confirm:hover { background: #dc2626; }
    `;
    document.head.appendChild(style);
  }

  _createModal() {
    const overlay = document.createElement('div');
    overlay.className = 'dm-overlay';
    
    overlay.innerHTML = `
      <div class="dm-content">
        <h3 class="dm-title">${this.options.title}</h3>
        <p class="dm-message">${this.options.message}</p>
        <div class="dm-actions">
          <button class="dm-btn dm-btn-cancel" id="dm-cancel">${this.options.cancelText}</button>
          <button class="dm-btn dm-btn-confirm" id="dm-confirm">${this.options.confirmText}</button>
        </div>
      </div>
    `;

    overlay.querySelector('#dm-cancel').addEventListener('click', () => this.close(false));
    overlay.querySelector('#dm-confirm').addEventListener('click', () => this.close(true));
    
    overlay.addEventListener('click', (e) => {
      if (e.target === overlay) this.close(false);
    });

    return overlay;
  }

  open() {
    this.modalElement = this._createModal();
    document.body.appendChild(this.modalElement);
    
    setTimeout(() => this.modalElement.classList.add('active'), 10);
  }

  close(confirmed) {
    if (!this.modalElement) return;

    this.modalElement.classList.remove('active');
    
    setTimeout(() => {
      if (confirmed) {
        this.options.onConfirm();
      } else {
        this.options.onCancel();
      }
      this.modalElement.remove();
      this.modalElement = null;
    }, 300);
  }
}