const overlay = document.getElementById('modal-overlay');

export function showModal(title, contentHtml, actions = []) {
    overlay.innerHTML = `
        <div class="modal">
            <div class="modal-title">${title}</div>
            <div class="modal-body">${contentHtml}</div>
            <div class="modal-actions" id="modal-actions"></div>
        </div>`;
    const actionsEl = document.getElementById('modal-actions');
    actions.forEach(({ label, cls, onClick }) => {
        const btn = document.createElement('button');
        btn.className = `btn ${cls || ''}`;
        btn.textContent = label;
        btn.addEventListener('click', async () => {
            await onClick(overlay.querySelector('.modal'));
            closeModal();
        });
        actionsEl.appendChild(btn);
    });
    overlay.classList.remove('hidden');
    overlay.addEventListener('click', onOverlayClick);
}

export function closeModal() {
    overlay.classList.add('hidden');
    overlay.innerHTML = '';
    overlay.removeEventListener('click', onOverlayClick);
}

function onOverlayClick(e) {
    if (e.target === overlay) closeModal();
}