(function() {
    var itemId = document.getElementById('wizard-item-sections-cfg').dataset.itemId;

    document.getElementById('add-section-btn').addEventListener('click', function() {
        var title = document.getElementById('new-section-title').value.trim();
        var body = document.getElementById('new-section-body').value;
        var status = document.getElementById('section-add-status');
        if (!title) { status.textContent = 'Title is required'; return; }
        this.disabled = true;
        status.textContent = '';

        fetch('/api/items/' + itemId + '/sections', {
            method: 'POST',
            headers: Object.assign({'Content-Type': 'application/json'}, csrfHeaders()),
            body: JSON.stringify({ title: title, body: body })
        })
        .then(function(res) {
            if (!res.ok) return res.json().then(function(d) { throw new Error(d.error || 'Failed'); });
            return res.json();
        })
        .then(function(sec) {
            var row = document.createElement('div');
            row.className = 'section-row';
            row.dataset.id = sec.id;
            row.innerHTML =
                '<span class="section-row-title"></span>' +
                '<span class="section-row-length"></span>' +
                '<button type="button" class="btn-secondary section-delete-btn"></button>';
            row.querySelector('.section-row-title').textContent = sec.title;
            row.querySelector('.section-row-length').textContent = (sec.body || '').length + ' chars';
            var delBtn = row.querySelector('.section-delete-btn');
            delBtn.dataset.id = sec.id;
            delBtn.textContent = 'Delete';
            document.getElementById('sections-list').appendChild(row);
            attachDeleteHandler(delBtn);
            document.getElementById('new-section-title').value = '';
            document.getElementById('new-section-body').value = '';
        })
        .catch(function(err) { status.textContent = err.message; })
        .finally(function() { document.getElementById('add-section-btn').disabled = false; });
    });

    function attachDeleteHandler(btn) {
        btn.addEventListener('click', function() {
            var id = this.dataset.id;
            var row = this.closest('.section-row');
            fetch('/api/sections/' + id, { method: 'DELETE', headers: csrfHeaders() })
            .then(function(res) { if (res.ok) row.remove(); else showToast('Failed to delete'); })
            .catch(function() { showToast('Failed to delete'); });
        });
    }

    document.querySelectorAll('.section-delete-btn').forEach(attachDeleteHandler);
})();