document.addEventListener('DOMContentLoaded', function() {
    window.ModalSystem = {
        overlay: null,
        content: null,
        container: null,
        closeBtn: null,
        isOpen: false,
        currentModal: null,

        init: function() {
            this.overlay = document.getElementById('modal-overlay');
            if (!this.overlay) return;

            this.content = document.getElementById('modal-content');
            this.container = this.overlay.querySelector('.bg-white');
            this.closeBtn = document.getElementById('modal-close');

            this.bindEvents();
        },
        bindEvents: function() {
            if (this.closeBtn) {
                this.closeBtn.addEventListener('click', () => this.close());
            }
            this.overlay.addEventListener('click', (e) => {
                if (e.target === this.overlay) {
                    this.close();
                }
            });

            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape' && this.isOpen) {
                    this.close();
                }
            });

            document.addEventListener('click', (e) => {
                const modalTrigger = e.target.closest('[data-modal]');
                if (modalTrigger) {
                    e.preventDefault();
                    const modalName = modalTrigger.getAttribute('data-modal');
                    this.open(modalName);
                }
            });

            document.addEventListener('click', (e) => {
                if (e.target.closest('[data-modal-close]')) {
                    e.preventDefault();
                    this.close();
                }
            });
        },


        open: function(modalName) {
            if (this.isOpen) {
                this.close();
            }

            const template = document.getElementById(`modal-template-${modalName}`);
            if (!template) {
                console.error(`модальное окно ${modalName} не найдено`);
                return;
            }

            this.currentModal = modalName;
            this.content.innerHTML = template.innerHTML;
            this.show();
        },

        show: function() {

            this.overlay.classList.remove('opacity-0', 'invisible');
            this.overlay.classList.add('opacity-100', 'visible');


            setTimeout(() => {
                this.container.classList.remove('scale-90');
                this.container.classList.add('scale-100');
            }, 10);

            this.isOpen = true;

            setTimeout(() => {
                this.closeBtn.focus();
            }, 350);
        },

        close: function() {
            if (!this.isOpen) return;

            this.container.classList.remove('scale-100');
            this.container.classList.add('scale-90');

            this.overlay.classList.remove('opacity-100', 'visible');
            this.overlay.classList.add('opacity-0', 'invisible');

            this.isOpen = false;
            this.currentModal = null;

        },


        getState: function() {
            return {
                isOpen: this.isOpen,
                currentModal: this.currentModal
            };
        }
    };

    ModalSystem.init();

    window.openModal = function(modalName) {
        ModalSystem.open(modalName);
    };

    window.closeModal = function() {
        ModalSystem.close();
    };
});