import React, { useEffect } from 'react';

/**
 * Modal React puro (sem dependência do Bootstrap JS)
 * Uso: <Modal show={true} onHide={() => {}} title="Título">Conteúdo</Modal>
 * ou:  <Modal show={true} onClose={() => {}} title="Título">Conteúdo</Modal>
 */
const Modal = ({ 
  show, 
  onHide,
  onClose, // Alias para onHide
  title, 
  children, 
  footer,
  size = 'md', // 'sm', 'md', 'lg', 'xl'
  centered = true,
  closeButton = true,
  backdrop = true,
  keyboard = true,
}) => {
  // Usar onClose se onHide não foi fornecido
  const handleClose = onHide || onClose;

  // Fechar com ESC
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (keyboard && e.key === 'Escape' && show && handleClose) {
        handleClose();
      }
    };

    if (show) {
      document.addEventListener('keydown', handleKeyDown);
      document.body.style.overflow = 'hidden'; // Previne scroll do body
    }

    return () => {
      document.removeEventListener('keydown', handleKeyDown);
      document.body.style.overflow = ''; // Restaura scroll
    };
  }, [show, keyboard, handleClose]);

  // Não renderiza se não estiver visível
  if (!show) return null;

  const sizeClass = size !== 'md' ? `modal-${size}` : '';

  // Handler para clique no backdrop
  const handleBackdropClick = (e) => {
    // Se backdrop é "static", não fecha ao clicar fora
    if (backdrop === true && e.target === e.currentTarget && handleClose) {
      handleClose();
    }
  };

  return (
    <>
      {/* Backdrop */}
      <div 
        className="modal-backdrop show"
        style={{ backgroundColor: 'rgba(0, 0, 0, 0.7)' }}
      ></div>
      
      {/* Modal */}
      <div 
        className="modal show d-block"
        tabIndex="-1"
        onClick={handleBackdropClick}
        style={{ zIndex: 1055 }}
      >
        <div className={`modal-dialog ${sizeClass} ${centered ? 'modal-dialog-centered' : ''}`}>
          <div className="modal-content" style={{ background: '#1e293b', color: '#f1f5f9' }}>
            {title && (
              <div className="modal-header" style={{ borderColor: '#334155' }}>
                <h5 className="modal-title">{title}</h5>
                {closeButton && (
                  <button 
                    type="button" 
                    className="btn-close btn-close-white" 
                    onClick={handleClose}
                    aria-label="Fechar"
                  ></button>
                )}
              </div>
            )}
            <div className="modal-body">
              {children}
            </div>
            {footer && (
              <div className="modal-footer" style={{ borderColor: '#334155' }}>
                {footer}
              </div>
            )}
          </div>
        </div>
      </div>
    </>
  );
};

/**
 * Modal de Confirmação
 */
export const ConfirmModal = ({
  show,
  onHide,
  onConfirm,
  title = 'Confirmar',
  message = 'Tem certeza que deseja continuar?',
  confirmText = 'Confirmar',
  cancelText = 'Cancelar',
  confirmVariant = 'danger',
  loading = false,
}) => {
  return (
    <Modal
      show={show}
      onHide={onHide}
      title={title}
      backdrop="static"
      footer={
        <>
          <button 
            type="button" 
            className="btn btn-outline-light" 
            onClick={onHide}
            disabled={loading}
          >
            {cancelText}
          </button>
          <button 
            type="button" 
            className={`btn btn-${confirmVariant}`}
            onClick={onConfirm}
            disabled={loading}
          >
            {loading ? (
              <>
                <span className="spinner-border spinner-border-sm me-2" role="status"></span>
                Aguarde...
              </>
            ) : confirmText}
          </button>
        </>
      }
    >
      <p className="mb-0">{message}</p>
    </Modal>
  );
};

export default Modal;
