var Mensaje = {
    contenedor: null,

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

    _crearOverlay: function() {
        this.init();
        var overlay = document.createElement('div');
        overlay.className = 'modal-overlay';
        return overlay;
    },

    _crearContenedor: function(ancho) {
        var contenedor = document.createElement('div');
        contenedor.className = 'modal-container';
        contenedor.style.maxWidth = ancho || '420px';
        return contenedor;
    },

    _mostrar: function(overlay) {
        this.contenedor.appendChild(overlay);
        requestAnimationFrame(function() {
            overlay.classList.add('visible');
        });
    },

    _ocultar: function(overlay) {
        overlay.classList.remove('visible');
        overlay.style.pointerEvents = 'all';
        setTimeout(function() {
            if (overlay.parentNode) {
                overlay.parentNode.removeChild(overlay);
            }
        }, 260);
    },

    _icono: function(tipo) {
        var iconos = {
            error: 'fas fa-circle-xmark',
            exito: 'fas fa-circle-check',
            confirmacion: 'fas fa-circle-question',
            informacion: 'fas fa-circle-info'
        };
        return iconos[tipo] || iconos.informacion;
    },

    _colorIcono: function(tipo) {
        var colores = {
            error: 'var(--danger)',
            exito: 'var(--success)',
            confirmacion: 'var(--warning)',
            informacion: 'var(--azul-400)'
        };
        return colores[tipo] || colores.informacion;
    },

    error: function(opciones) {
        var opts = opciones || {};
        var overlay = this._crearOverlay();
        var contenedor = this._crearContenedor(opts.ancho);

        contenedor.innerHTML =
            '<div class="modal-body" style="text-align:center; padding:32px 24px;">' +
                '<i class="' + this._icono('error') + '" style="font-size:2.5rem; color:' + this._colorIcono('error') + '; margin-bottom:16px;"></i>' +
                '<h3 class="modal-title" style="margin-bottom:8px;">' + (opts.titulo || 'Error') + '</h3>' +
                '<p style="color:var(--gris-500); font-size:0.9rem; margin-bottom:24px; line-height:1.5;">' + (opts.texto || '') + '</p>' +
                '<button class="btn-modal btn-modal-aceptar">' + (opts.btnTexto || 'Aceptar') + '</button>' +
            '</div>';

        overlay.appendChild(contenedor);

        var self = this;
        var btn = contenedor.querySelector('.btn-modal-aceptar');
        if (btn && opts.onAceptar) {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                opts.onAceptar();
                self._ocultar(overlay);
            });
        }
        if (btn && !opts.onAceptar) {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                self._ocultar(overlay);
            });
        }

        overlay.addEventListener('click', function(e) {
            if (e.target === overlay) {
                self._ocultar(overlay);
            }
        });

        this._mostrar(overlay);
    },

    exito: function(opciones) {
        var opts = opciones || {};
        var overlay = this._crearOverlay();
        var contenedor = this._crearContenedor(opts.ancho);

        contenedor.innerHTML =
            '<div class="modal-body" style="text-align:center; padding:32px 24px;">' +
                '<i class="' + this._icono('exito') + '" style="font-size:2.5rem; color:' + this._colorIcono('exito') + '; margin-bottom:16px;"></i>' +
                '<h3 class="modal-title" style="margin-bottom:8px;">' + (opts.titulo || 'Operacion exitosa') + '</h3>' +
                '<p style="color:var(--gris-500); font-size:0.9rem; margin-bottom:24px; line-height:1.5;">' + (opts.texto || '') + '</p>' +
                '<button class="btn-modal btn-modal-aceptar">' + (opts.btnTexto || 'Aceptar') + '</button>' +
            '</div>';

        overlay.appendChild(contenedor);

        var self = this;
        var btn = contenedor.querySelector('.btn-modal-aceptar');
        var timer = null;

        function cerrar() {
            if (timer) clearTimeout(timer);
            if (opts.onAceptar) opts.onAceptar();
            self._ocultar(overlay);
        }

        if (btn) btn.addEventListener('click', function(e) { e.stopPropagation(); cerrar(); });
        overlay.addEventListener('click', function(e) {
            if (e.target === overlay) cerrar();
        });

        if (opts.autocerrar) {
            timer = setTimeout(cerrar, opts.autocerrarSegundos || 3000);
        }

        this._mostrar(overlay);
    },

    confirmacion: function(opciones) {
        var opts = opciones || {};
        var overlay = this._crearOverlay();
        var contenedor = this._crearContenedor(opts.ancho);

        contenedor.innerHTML =
            '<div class="modal-body" style="text-align:center; padding:32px 24px;">' +
                '<i class="' + this._icono('confirmacion') + '" style="font-size:2.5rem; color:' + this._colorIcono('confirmacion') + '; margin-bottom:16px;"></i>' +
                '<h3 class="modal-title" style="margin-bottom:8px;">' + (opts.titulo || 'Confirmar') + '</h3>' +
                '<p style="color:var(--gris-500); font-size:0.9rem; margin-bottom:24px; line-height:1.5;">' + (opts.texto || 'Esta accion no se puede deshacer.') + '</p>' +
                '<div class="modal-botones">' +
                    '<button class="btn-modal btn-modal-cancelar">' + (opts.btnCancelarTexto || 'Cancelar') + '</button>' +
                    '<button class="btn-modal btn-modal-aceptar">' + (opts.btnAceptarTexto || 'Aceptar') + '</button>' +
                '</div>' +
            '</div>';

        overlay.appendChild(contenedor);

        var self = this;
        var btnAceptar = contenedor.querySelector('.btn-modal-aceptar');
        var btnCancelar = contenedor.querySelector('.btn-modal-cancelar');

        function aceptar() {
            if (opts.onAceptar) opts.onAceptar();
            self._ocultar(overlay);
        }

        function cancelar() {
            if (opts.onCancelar) opts.onCancelar();
            self._ocultar(overlay);
        }

        if (btnAceptar) { btnAceptar.addEventListener('click', function(e) { e.stopPropagation(); aceptar(); }); }
        if (btnCancelar) { btnCancelar.addEventListener('click', function(e) { e.stopPropagation(); cancelar(); }); }
        overlay.addEventListener('click', function(e) {
            if (e.target === overlay) cancelar();
        });

        this._mostrar(overlay);
    },

    informacion: function(opciones) {
        var opts = opciones || {};
        var overlay = this._crearOverlay();
        var contenedor = this._crearContenedor(opts.ancho);

        contenedor.innerHTML =
            '<div class="modal-body" style="text-align:center; padding:32px 24px;">' +
                '<i class="' + this._icono('informacion') + '" style="font-size:2.5rem; color:' + this._colorIcono('informacion') + '; margin-bottom:16px;"></i>' +
                '<h3 class="modal-title" style="margin-bottom:8px;">' + (opts.titulo || 'Informacion') + '</h3>' +
                '<p style="color:var(--gris-500); font-size:0.9rem; margin-bottom:24px; line-height:1.5;">' + (opts.texto || '') + '</p>' +
                '<button class="btn-modal btn-modal-aceptar">' + (opts.btnTexto || 'Aceptar') + '</button>' +
            '</div>';

        overlay.appendChild(contenedor);

        var self = this;
        var btn = contenedor.querySelector('.btn-modal-aceptar');
        if (btn) btn.addEventListener('click', function(e) {
            e.stopPropagation();
            if (opts.onAceptar) opts.onAceptar();
            self._ocultar(overlay);
        });
        overlay.addEventListener('click', function(e) {
            if (e.target === overlay) {
                self._ocultar(overlay);
            }
        });

        this._mostrar(overlay);
    }
};