document.addEventListener('DOMContentLoaded', () => {
    const addNewButton = document.getElementById('ka-theme-builder-add-new');
    const addNewModal = document.getElementById('ka-theme-builder-modal');
    const quickModal = document.getElementById('ka-theme-builder-quick-modal');
    const closeButtons = document.querySelectorAll('.ka-theme-builder-modal__close');

    const openModal = (modal) => {
        if (modal) {
            modal.style.display = 'flex';
        }
    };

    const closeModal = (modal) => {
        if (modal) {
            modal.style.display = 'none';
        }
    };

    if (addNewButton) {
        addNewButton.addEventListener('click', (event) => {
            event.preventDefault();
            openModal(addNewModal);
        });
    }

    closeButtons.forEach((button) => {
        button.addEventListener('click', () => {
            closeModal(addNewModal);
            closeModal(quickModal);
        });
    });

    const quickLinks = document.querySelectorAll('.ka-tb-quick-edit');
    const quickPriority = document.getElementById('ka-tb-quick-priority');
    const quickTemplateId = document.getElementById('ka-tb-quick-template-id');
    const quickEnabled = document.getElementById('ka-tb-quick-enabled');

    quickLinks.forEach((link) => {
        link.addEventListener('click', (event) => {
            event.preventDefault();
            const templateId = link.getAttribute('data-template-id');
            const priority = link.getAttribute('data-priority');
            const enabled = link.getAttribute('data-enabled') === '1';

            if (quickTemplateId) {
                quickTemplateId.value = templateId || '';
            }
            if (quickPriority) {
                quickPriority.value = priority || '10';
            }
            if (quickEnabled) {
                quickEnabled.checked = enabled;
            }

            openModal(quickModal);
        });
    });

    const backdrops = document.querySelectorAll('.ka-theme-builder-modal__backdrop');
    backdrops.forEach((backdrop) => {
        backdrop.addEventListener('click', () => {
            closeModal(addNewModal);
            closeModal(quickModal);
        });
    });
});