var Modal = {
    contenedor: null,
    overlay: null,

    init: function() {
        this.contenedor = document.getElementById('modalContainer');
    },

    abrir: function(opciones) {
        if (!this.contenedor) this.init();

        var config = {
            titulo: opciones.titulo || 'Modal',
            ancho: opciones.ancho || '600px',
            alto: opciones.alto || 'auto',
            contenido: opciones.contenido || '',
            onAbierto: opciones.onAbierto || null,
            onCerrar: opciones.onCerrar || null,
            btnCerrar: opciones.btnCerrar !== false,
            botones: opciones.botones || []
        };

        this.cerrar();

        var overlay = document.createElement('div');
        overlay.className = 'modal-overlay';

        var contenedor = document.createElement('div');
        contenedor.className = 'modal-container';
        contenedor.style.maxWidth = config.ancho;

        if (config.alto !== 'auto') {
            contenedor.style.height = config.alto;
        }

        var header = '<div class="modal-header">' +
            '<h3 class="modal-title">' + config.titulo + '</h3>';

        if (config.btnCerrar) {
            header += '<button class="modal-close" aria-label="Cerrar"><i class="fas fa-times"></i></button>';
        }

        header += '</div>';

        var botonesHtml = '';
        if (config.botones.length > 0) {
            botonesHtml = '<div class="modal-footer">';
            config.botones.forEach(function(btn) {
                var clase = btn.tipo === 'primario' ? 'btn-prov btn-prov-primario' : 'btn-prov btn-prov-secundario';
                botonesHtml += '<button class="' + clase + '" data-modal-btn="' + (btn.texto || '') + '">' + (btn.texto || '') + '</button>';
            });
            botonesHtml += '</div>';
        }

        contenedor.innerHTML = header + '<div class="modal-body">' + config.contenido + '</div>' + botonesHtml;
        overlay.appendChild(contenedor);

        var self = this;

        if (config.btnCerrar) {
            var btnClose = contenedor.querySelector('.modal-close');
            if (btnClose) {
                btnClose.addEventListener('click', function() {
                    self.cerrar();
                });
            }
        }

        // Vincular eventos a los botones del modal
        if (config.botones.length > 0) {
            var btns = contenedor.querySelectorAll('[data-modal-btn]');
            btns.forEach(function(btn, idx) {
                btn.addEventListener('click', function(e) {
                    if (config.botones[idx] && config.botones[idx].accion) {
                        config.botones[idx].accion(e);
                    }
                });
            });
        }

        /* Deshabilitado: cierre solo con X o botones
        overlay.addEventListener('click', function(e) {
            if (e.target === overlay) {
                self.cerrar();
            }
        });
        */

        this.contenedor.appendChild(overlay);

        this.overlay = overlay;

        requestAnimationFrame(function() {
            overlay.classList.add('visible');
        });

        if (config.onAbierto) {
            config.onAbierto();
        }
    },

    cerrar: function() {
        if (!this.overlay) return;

        var overlay = this.overlay;
        var onCerrar = null;

        overlay.classList.remove('visible');

        setTimeout(function() {
            if (overlay.parentNode) {
                overlay.parentNode.removeChild(overlay);
            }
        }, 260);

        this.overlay = null;
    }
};

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && Modal.overlay) {
        Modal.cerrar();
    }
});

Modal.init();