{%- import "partials/_ui.html" as ui -%}
<div class="tab-docs"><a href="/docs/items">Docs: Items &rarr;</a></div>

<div class="content-header">
    <h2 class="subsection-title">Items</h2>
    <a href="/dashboard/project/{{ project_slug }}/new-item" class="btn-primary">New Item</a>
</div>

{% if items.is_empty() %}
<div class="empty-state empty-state--lg">
    <p class="mb-4">No items in this project yet. Add your first item to start publishing.</p>
    <a href="/dashboard/project/{{ project_slug }}/new-item" class="btn-primary">Add First Item</a>
    <p class="form-hint mt-5">After creating an item, set its pricing and publish it to make it available to fans.</p>
</div>
{% else %}
<div class="content-filters">
    <input type="text" id="content-search" placeholder="Search items..." oninput="filterContentTable()"
           class="content-filter-search">
    <select id="content-filter-status" onchange="filterContentTable()" class="content-filter-select">
        <option value="">All statuses</option>
        <option value="Active">Active</option>
        <option value="Draft">Draft</option>
    </select>
    <select id="content-filter-type" onchange="filterContentTable()" class="content-filter-select">
        <option value="">All types</option>
        {% for item in items %}<option value="{{ item.item_type }}" class="content-type-opt">{{ item.item_type }}</option>{% endfor %}
    </select>
</div>
<div id="bulk-action-bar" class="bulk-action-bar" data-active="false">
    <span id="bulk-count" class="bulk-count">0 selected</span>
    <button class="btn-secondary small" onclick="bulkAction('publish')" disabled>Publish</button>
    <button class="btn-secondary small" onclick="bulkAction('unpublish')" disabled>Unpublish</button>
    <button class="btn-secondary small" onclick="showBulkPrice()" disabled id="bulk-price-btn">Set Price</button>
    <button class="btn-secondary small" onclick="showBulkTag()" disabled id="bulk-tag-btn">Add Tag</button>
    <button class="btn-secondary small danger-text" onclick="bulkAction('delete')" disabled>Delete</button>
    <button class="btn-secondary small bulk-deselect" onclick="toggleSelectAll(false)" disabled>Deselect</button>
</div>
<div id="bulk-price-form" class="bulk-form hidden">
    <div class="bulk-form-row">
        <div>
            <label class="bulk-form-label">New price ($)</label>
            <input type="number" id="bulk-price-input" min="0" step="0.01" placeholder="0.00" class="bulk-form-input input--xs w-120">
        </div>
        <button class="btn-primary small" onclick="submitBulkPrice()">Apply</button>
        <button class="btn-secondary small" onclick="document.getElementById('bulk-price-form').classList.add('hidden')">Cancel</button>
    </div>
    <p class="form-hint mt-2">Enter 0 to make items free.</p>
</div>
<div id="bulk-tag-form" class="bulk-form hidden">
    <div class="bulk-form-row">
        <div>
            <label class="bulk-form-label">Tag slug</label>
            <input type="text" id="bulk-tag-input" placeholder="e.g. audio.genre.ambient" class="bulk-form-input input--xs w-260">
        </div>
        <button class="btn-primary small" onclick="submitBulkTag()">Apply</button>
        <button class="btn-secondary small" onclick="document.getElementById('bulk-tag-form').classList.add('hidden')">Cancel</button>
    </div>
    <p class="form-hint mt-2">Use dot-notation: type.category.value</p>
</div>
<table class="data-table">
    <thead>
        <tr>
            <th class="col-3"><input type="checkbox" id="select-all" onchange="toggleSelectAll(this.checked)"></th>
            <th class="col-5">#</th>
            <th class="col-32 sortable-th" onclick="sortContentTable(2, 'text')" title="Sort by title">Item <span class="sort-arrow" data-col="2"></span></th>
            <th class="col-12 sortable-th" onclick="sortContentTable(3, 'text')" title="Sort by type">Type <span class="sort-arrow" data-col="3"></span></th>
            <th class="col-10 sortable-th" onclick="sortContentTable(4, 'money')" title="Sort by price">Price <span class="sort-arrow" data-col="4"></span></th>
            <th class="col-10 sortable-th" onclick="sortContentTable(5, 'num')" title="Sort by sales">Sales <span class="sort-arrow" data-col="5"></span></th>
            <th class="col-10 sortable-th" onclick="sortContentTable(6, 'money')" title="Sort by revenue">Revenue <span class="sort-arrow" data-col="6"></span></th>
            <th class="col-8 sortable-th" onclick="sortContentTable(7, 'text')" title="Sort by status">Status <span class="sort-arrow" data-col="7"></span></th>
            <th class="col-10">Actions</th>
        </tr>
    </thead>
    <tbody>
        {% for item in items %}
        <tr>
            <td><input type="checkbox" class="bulk-check" value="{{ item.id }}" onchange="updateBulkUI()"></td>
            <td class="nowrap">
                {{ item.position }}
                {% if !loop.first %}
                <button class="btn-secondary order-arrow-btn"
                        hx-put="/api/items/{{ item.id }}/move" hx-vals='{"direction":"up"}'
                        hx-swap="none"
                        hx-on::after-request="if(event.detail.successful) htmx.ajax('GET', '/dashboard/project/{{ project_slug }}/tabs/content', '#tab-content')">&#9650;</button>
                {% endif %}
                {% if !loop.last %}
                <button class="btn-secondary order-arrow-btn"
                        hx-put="/api/items/{{ item.id }}/move" hx-vals='{"direction":"down"}'
                        hx-swap="none"
                        hx-on::after-request="if(event.detail.successful) htmx.ajax('GET', '/dashboard/project/{{ project_slug }}/tabs/content', '#tab-content')">&#9660;</button>
                {% endif %}
            </td>
            <td>
                <span id="item-title-{{ item.id }}">
                    {% if !item.children.is_empty() %}
                    <button class="bundle-toggle" onclick="toggleBundleChildren('{{ item.id }}')" title="Toggle bundle contents">&#9654;</button>
                    {% endif %}
                    <a href="/dashboard/item/{{ item.id }}" class="fw-bold">{{ item.title }}</a>
                    {% if item.is_unlisted %}<span class="badge badge--inline-tiny">Unlisted</span>{% endif %}
                </span>
            </td>
            <td>{{ item.item_type }}{% if !item.children.is_empty() %} <span class="dimmed text-xs">({{ item.children.len() }})</span>{% endif %}</td>
            <td>{{ item.price }}</td>
            <td>{{ item.sales }}</td>
            <td>{{ item.revenue }}</td>
            <td><span class="badge {{ item.status|lowercase }}">{{ item.status }}</span></td>
            <td>
                <div class="item-actions">
                    {% if item.status == "Draft" %}
                    <a href="/dashboard/project/{{ project_slug }}/new-item/{{ item.id }}/step/details" class="btn-primary small">Continue</a>
                    <button class="btn-secondary small" onclick="quickPublish('{{ item.id }}')">Publish</button>
                    {% else %}
                    <a href="/i/{{ item.id }}" class="btn-secondary small">View</a>
                    {% endif %}
                    <a href="/dashboard/item/{{ item.id }}" class="btn-secondary small">Edit</a>
                    <button class="btn-secondary small"
                            onclick="inlineRename('{{ item.id }}')">Rename</button>
                </div>
            </td>
        </tr>
        {% for child in item.children %}
        <tr class="bundle-child bundle-child-{{ item.id }} hidden">
            <td><input type="checkbox" class="bulk-check" value="{{ child.id }}" onchange="updateBulkUI()"></td>
            <td></td>
            <td class="bundle-child-cell">
                <span id="item-title-{{ child.id }}" class="bundle-child-title">
                    <span class="bundle-child-arrow">&#8627;</span>
                    <a href="/dashboard/item/{{ child.id }}">{{ child.title }}</a>
                    {% if child.is_unlisted %}<span class="badge badge--inline-tiny">Unlisted</span>{% endif %}
                </span>
            </td>
            <td class="muted">{{ child.item_type }}</td>
            <td class="muted">{{ child.price }}</td>
            <td class="muted">{{ child.sales }}</td>
            <td class="muted">{{ child.revenue }}</td>
            <td><span class="badge {{ child.status|lowercase }}">{{ child.status }}</span></td>
            <td>
                <div class="item-actions">
                    <a href="/dashboard/item/{{ child.id }}" class="btn-secondary small">Edit</a>
                </div>
            </td>
        </tr>
        {% endfor %}
        {% endfor %}
    </tbody>
</table>
{% endif %}

{% if !deleted_items.is_empty() %}
<details class="deleted-items-details">
    <summary class="deleted-items-summary">Recently Deleted ({{ deleted_items.len() }})</summary>
    <p class="form-hint mt-2">Deleted items are permanently removed after 7 days.</p>
    <table class="data-table mt-3">
        <thead>
            <tr>
                <th>Title</th>
                <th>Deleted</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for item in deleted_items %}
            <tr id="deleted-{{ item.id }}">
                <td class="dimmed">{{ item.title }}</td>
                <td class="dimmed">{{ item.deleted_at }}</td>
                <td>
                    <button class="btn-secondary small"
                            hx-post="/api/items/{{ item.id }}/restore"
                            hx-swap="none"
                            hx-on::after-request="if(event.detail.successful) htmx.ajax('GET', '/dashboard/project/{{ project_slug }}/tabs/content', '#tab-content')">Restore</button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</details>
{% endif %}

<script>
function toggleSelectAll(checked) {
    var boxes = document.querySelectorAll('.bulk-check');
    for (var i = 0; i < boxes.length; i++) boxes[i].checked = checked;
    var selectAll = document.getElementById('select-all');
    if (selectAll) selectAll.checked = checked;
    updateBulkUI();
}

function updateBulkUI() {
    var checked = document.querySelectorAll('.bulk-check:checked');
    var bar = document.getElementById('bulk-action-bar');
    var countEl = document.getElementById('bulk-count');
    var selectAll = document.getElementById('select-all');
    var allBoxes = document.querySelectorAll('.bulk-check');
    if (!bar) return;
    var hasSelection = checked.length > 0;
    bar.classList.toggle('bulk-action-bar--active', hasSelection);
    bar.dataset.active = hasSelection ? 'true' : 'false';
    countEl.textContent = checked.length + ' selected';
    var buttons = bar.querySelectorAll('button');
    for (var i = 0; i < buttons.length; i++) buttons[i].disabled = !hasSelection;
    if (selectAll) selectAll.checked = allBoxes.length > 0 && checked.length === allBoxes.length;
    if (!hasSelection) {
        document.getElementById('bulk-price-form').classList.add('hidden');
        document.getElementById('bulk-tag-form').classList.add('hidden');
    }
}

function bulkAction(action) {
    var checked = document.querySelectorAll('.bulk-check:checked');
    if (checked.length === 0) return;

    var titles = [];
    for (var i = 0; i < checked.length; i++) {
        var row = checked[i].closest('tr');
        var link = row ? row.querySelector('td:nth-child(3) a') : null;
        if (link) titles.push(link.textContent.trim());
    }

    if (action === 'delete') {
        var msg = 'Delete ' + checked.length + ' item(s)? This cannot be undone.\n\n' + titles.join('\n');
        if (!confirm(msg)) return;
    }

    var count = checked.length;
    var params = new URLSearchParams();
    for (var i = 0; i < checked.length; i++) {
        params.append('item_ids', checked[i].value);
    }

    fetch('/api/items/bulk/' + action, {
        method: 'POST',
        headers: Object.assign({'Content-Type': 'application/x-www-form-urlencoded'}, csrfHeaders()),
        body: params.toString()
    })
        .then(function(r) {
            if (!r.ok) return r.text().then(function(t) {
                var msg = 'Bulk ' + action + ' failed (' + r.status + ')';
                try { var parsed = JSON.parse(t); if (parsed.error) msg = parsed.error; } catch (_) {}
                throw new Error(msg);
            });
            var label = action === 'delete' ? 'deleted' : action === 'publish' ? 'published' : 'unpublished';
            showToast(count + ' item(s) ' + label + '.', 'success');
            htmx.ajax('GET', '/dashboard/project/{{ project_slug }}/tabs/content', '#tab-content');
        })
        .catch(function(err) {
            showToast(err.message || 'Bulk operation failed');
        });
}

function quickPublish(itemId) {
    var params = new URLSearchParams();
    params.append('item_ids', itemId);
    fetch('/api/items/bulk/publish', {
        method: 'POST',
        headers: Object.assign({'Content-Type': 'application/x-www-form-urlencoded'}, csrfHeaders()),
        body: params.toString()
    }).then(function(r) {
        if (!r.ok) return r.text().then(function(t) {
            var msg = 'Publish failed';
            try { var parsed = JSON.parse(t); if (parsed.error) msg = parsed.error; } catch (_) {}
            throw new Error(msg);
        });
        showToast('Item published.', 'success');
        htmx.ajax('GET', '/dashboard/project/{{ project_slug }}/tabs/content', '#tab-content');
    }).catch(function(err) {
        showToast(err.message || 'Publish failed');
    });
}

function showBulkPrice() {
    document.getElementById('bulk-price-form').classList.remove('hidden');
    document.getElementById('bulk-tag-form').classList.add('hidden');
    document.getElementById('bulk-price-input').focus();
}

function showBulkTag() {
    document.getElementById('bulk-tag-form').classList.remove('hidden');
    document.getElementById('bulk-price-form').classList.add('hidden');
    document.getElementById('bulk-tag-input').focus();
}

function submitBulkPrice() {
    var checked = document.querySelectorAll('.bulk-check:checked');
    if (checked.length === 0) return;
    var price = document.getElementById('bulk-price-input').value;
    if (price === '') { showToast('Enter a price'); return; }

    var params = new URLSearchParams();
    for (var i = 0; i < checked.length; i++) params.append('item_ids', checked[i].value);
    params.append('price_dollars', price);

    fetch('/api/items/bulk/price', {
        method: 'POST',
        headers: Object.assign({'Content-Type': 'application/x-www-form-urlencoded'}, csrfHeaders()),
        body: params.toString()
    })
    .then(function(r) {
        if (!r.ok) return r.text().then(function(t) {
            var msg = 'Could not update prices. Try again, or refresh the page.';
            try { var p = JSON.parse(t); if (p.error) msg = p.error; } catch (_) {}
            throw new Error(msg);
        });
        document.getElementById('bulk-price-form').classList.add('hidden');
        htmx.ajax('GET', '/dashboard/project/{{ project_slug }}/tabs/content', '#tab-content');
    })
    .catch(function(err) { showToast(err.message || 'Could not update prices. Try again, or refresh the page.'); });
}

function submitBulkTag() {
    var checked = document.querySelectorAll('.bulk-check:checked');
    if (checked.length === 0) return;
    var tag = document.getElementById('bulk-tag-input').value.trim();
    if (!tag) { showToast('Enter a tag.'); return; }

    var params = new URLSearchParams();
    for (var i = 0; i < checked.length; i++) params.append('item_ids', checked[i].value);
    params.append('tag_slug', tag);

    fetch('/api/items/bulk/tag', {
        method: 'POST',
        headers: Object.assign({'Content-Type': 'application/x-www-form-urlencoded'}, csrfHeaders()),
        body: params.toString()
    })
    .then(function(r) {
        if (!r.ok) return r.text().then(function(t) {
            var msg = 'Could not add the tag. Try again, or refresh the page.';
            try { var p = JSON.parse(t); if (p.error) msg = p.error; } catch (_) {}
            throw new Error(msg);
        });
        document.getElementById('bulk-tag-form').classList.add('hidden');
        document.getElementById('bulk-tag-input').value = '';
        htmx.ajax('GET', '/dashboard/project/{{ project_slug }}/tabs/content', '#tab-content');
    })
    .catch(function(err) { showToast(err.message || 'Could not add the tag. Try again, or refresh the page.'); });
}

function toggleBundleChildren(bundleId) {
    var rows = document.querySelectorAll('.bundle-child-' + bundleId);
    var btn = document.querySelector('tr:has(.bulk-check[value="' + bundleId + '"]) .bundle-toggle');
    var visible = rows.length > 0 && !rows[0].classList.contains('hidden');
    for (var i = 0; i < rows.length; i++) {
        rows[i].classList.toggle('hidden', visible);
    }
    if (btn) btn.innerHTML = visible ? '&#9654;' : '&#9660;';
}

function filterContentTable() {
    var query = (document.getElementById('content-search').value || '').toLowerCase();
    var status = document.getElementById('content-filter-status').value;
    var type = document.getElementById('content-filter-type').value;
    var rows = document.querySelectorAll('.data-table tbody > tr:not(.bundle-child)');
    for (var i = 0; i < rows.length; i++) {
        var row = rows[i];
        var title = (row.querySelector('td:nth-child(3)') || {}).textContent || '';
        var rowType = (row.querySelector('td:nth-child(4)') || {}).textContent || '';
        var rowStatus = row.querySelector('.badge') ? row.querySelector('.badge').textContent.trim() : '';
        var matchQuery = !query || title.toLowerCase().indexOf(query) !== -1;
        var matchStatus = !status || rowStatus === status;
        var matchType = !type || rowType.trim().indexOf(type) !== -1;
        var visible = matchQuery && matchStatus && matchType;
        row.classList.toggle('hidden', !visible);
        var itemCheckbox = row.querySelector('.bulk-check');
        if (itemCheckbox && !visible) {
            var children = document.querySelectorAll('.bundle-child-' + itemCheckbox.value);
            for (var j = 0; j < children.length; j++) {
                children[j].classList.add('hidden');
            }
        }
    }
}

(function() {
    var seen = {};
    var opts = document.querySelectorAll('.content-type-opt');
    for (var i = 0; i < opts.length; i++) {
        if (seen[opts[i].value]) { opts[i].remove(); } else { seen[opts[i].value] = true; }
    }
})();

var contentSortState = { col: -1, asc: true };

function sortContentTable(colIndex, sortType) {
    var table = document.querySelector('.data-table');
    if (!table) return;
    var tbody = table.querySelector('tbody');
    var rows = Array.prototype.slice.call(tbody.querySelectorAll('tr:not(.bundle-child)'));

    if (contentSortState.col === colIndex) {
        contentSortState.asc = !contentSortState.asc;
    } else {
        contentSortState.col = colIndex;
        contentSortState.asc = true;
    }

    function getValue(row) {
        var cell = row.cells[colIndex];
        if (!cell) return '';
        var text = cell.textContent.trim();
        if (sortType === 'num') {
            return parseInt(text.replace(/[^0-9-]/g, ''), 10) || 0;
        }
        if (sortType === 'money') {
            if (text.toLowerCase() === 'free') return 0;
            return parseFloat(text.replace(/[^0-9.-]/g, '')) || 0;
        }
        return text.toLowerCase();
    }

    rows.sort(function(a, b) {
        var va = getValue(a);
        var vb = getValue(b);
        var cmp = 0;
        if (typeof va === 'number') {
            cmp = va - vb;
        } else {
            cmp = va < vb ? -1 : va > vb ? 1 : 0;
        }
        return contentSortState.asc ? cmp : -cmp;
    });

    for (var i = 0; i < rows.length; i++) {
        tbody.appendChild(rows[i]);
        var checkbox = rows[i].querySelector('.bulk-check');
        if (checkbox) {
            var children = Array.prototype.slice.call(tbody.querySelectorAll('.bundle-child-' + checkbox.value));
            for (var j = 0; j < children.length; j++) {
                tbody.appendChild(children[j]);
            }
        }
    }

    var arrows = document.querySelectorAll('.sort-arrow');
    for (var i = 0; i < arrows.length; i++) {
        var col = parseInt(arrows[i].dataset.col, 10);
        if (col === colIndex) {
            arrows[i].textContent = contentSortState.asc ? '▲' : '▼';
            arrows[i].classList.add('sort-arrow--active');
        } else {
            arrows[i].textContent = '';
            arrows[i].classList.remove('sort-arrow--active');
        }
    }
}

function inlineRename(itemId) {
    var container = document.getElementById('item-title-' + itemId);
    var link = container.querySelector('a');
    var currentTitle = link.textContent;
    var href = link.getAttribute('href');

    var input = document.createElement('input');
    input.type = 'text';
    input.value = currentTitle;
    input.className = 'inline-rename-input';

    function restore(newTitle) {
        container.innerHTML = '';
        var a = document.createElement('a');
        a.href = href;
        a.className = 'fw-bold';
        a.textContent = newTitle;
        container.appendChild(a);
    }

    function save() {
        var newTitle = input.value.trim();
        if (!newTitle || newTitle === currentTitle) { restore(currentTitle); return; }
        var form = new FormData();
        form.append('title', newTitle);
        fetch('/api/items/' + itemId, { method: 'PUT', headers: csrfHeaders(), body: form })
            .then(function(r) {
                if (!r.ok) throw new Error('Failed');
                return r.json();
            })
            .then(function(data) { restore(data.title); })
            .catch(function() { restore(currentTitle); });
    }

    input.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') { e.preventDefault(); save(); }
        if (e.key === 'Escape') { restore(currentTitle); }
    });
    input.addEventListener('blur', save);

    container.innerHTML = '';
    container.appendChild(input);
    input.focus();
    input.select();
}
</script>

<hr class="section-divider">

<div class="content-header">
    <h2 class="subsection-title">Blog Posts</h2>
    <a href="/dashboard/project/{{ project_slug }}/blog/new">
        <button class="btn-primary">New Post</button>
    </a>
</div>

{% if posts.is_empty() %}
{% call ui::empty_state_compact("No blog posts yet. Share updates, release notes, or stories with your audience.") %}
{% else %}
<table class="data-table">
    <thead>
        <tr>
            <th class="col-45">Title</th>
            <th class="col-15">Status</th>
            <th class="col-20">Published</th>
            <th class="col-20">Actions</th>
        </tr>
    </thead>
    <tbody>
        {% for post in posts %}
        <tr id="post-row-{{ post.id }}">
            <td>
                <a href="/p/{{ project_slug }}/blog/{{ post.slug }}" class="fw-bold">{{ post.title }}</a>
            </td>
            <td><span class="badge {{ post.status|lowercase }}">{{ post.status }}</span></td>
            <td>{{ post.published_at }}</td>
            <td>
                <div class="item-actions">
                    <a href="/p/{{ project_slug }}/blog/{{ post.slug }}" class="btn-secondary small">View</a>
                    <a href="/dashboard/project/{{ project_slug }}/blog/new?post={{ post.id }}" class="btn-secondary small">Edit</a>
                    <button class="btn-secondary small danger-text"
                            hx-delete="/api/blog/{{ post.id }}"
                            hx-target="#post-row-{{ post.id }}"
                            hx-swap="outerHTML"
                            hx-confirm="Delete this blog post?">Delete</button>
                </div>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endif %}