{% include "wizards/partials/step_nav.html" %}

<div class="wizard-step">
    <h2 class="subtitle-h2">Sections</h2>
    <p class="step-description">Add tabbed content sections (e.g. Features, Installation, Specs). Sections are optional.</p>

    <div id="sections-list">
        {% for section in sections %}
        <div class="section-row" data-id="{{ section.id }}">
            <span class="section-row-title">{{ section.title }}</span>
            <span class="section-row-length">{{ section.body.chars().count() }} chars</span>
            <button type="button" class="btn-secondary section-delete-btn" data-id="{{ section.id }}">Delete</button>
        </div>
        {% endfor %}
    </div>

    <details class="section-add-details">
        <summary>Add Section</summary>
        <div class="section-add-body">
            <div class="form-group">
                <label for="new-section-title">Title</label>
                <input type="text" id="new-section-title" placeholder="e.g. Features, Installation..." autocomplete="off">
            </div>
            <div class="form-group">
                <label for="new-section-body">Body (Markdown)</label>
                <textarea id="new-section-body" rows="6" placeholder="Section content..."></textarea>
            </div>
            <button type="button" class="btn-secondary" id="add-section-btn">Add Section</button>
            <span id="section-add-status" class="field-status ml-2"></span>
        </div>
    </details>

    <form hx-post="/dashboard/project/{{ project_slug }}/new-item/{{ item_id }}/step/sections"
          hx-target="#wizard-step" hx-swap="innerHTML"
          hx-push-url="/dashboard/project/{{ project_slug }}/new-item/{{ item_id }}/step/pricing">
        <div class="wizard-actions">
            <button type="button" class="btn-secondary"
                    hx-get="/dashboard/project/{{ project_slug }}/new-item/{{ item_id }}/step/content"
                    hx-target="#wizard-step" hx-swap="innerHTML"
                    hx-push-url="/dashboard/project/{{ project_slug }}/new-item/{{ item_id }}/step/content">Back</button>
            <button type="submit" class="btn-primary">Continue</button>
        </div>
    </form>
</div>

<script>
(function() {
    var itemId = '{{ item_id }}';

    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);
})();
</script>