{% extends "generate/base.html" %}
{% set active_generate_page = "seeds" %}
{% block title %}Generate — Seeds | SPIKEE{% endblock %}

{% block content %}
<div class="container-fluid px-4 py-3">

    <div class="d-flex align-items-center justify-content-between mb-3">
        <h5 class="fw-semibold mb-0">Seed Folders</h5>
        <span class="badge bg-secondary rounded-pill">{{ seeds | length }}</span>
    </div>

    {% if seeds %}
    <div class="row g-3">
        {% for seed in seeds %}
        <div class="col-12 col-md-6 col-xl-4">
            <div class="card spikee-card h-100">
                <div class="card-body d-flex align-items-start gap-3 py-3 px-3" data-name="{{ seed.name }}">
                    <div class="flex-shrink-0 mt-1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                             fill="var(--spikee-accent)" class="bi bi-folder2" viewBox="0 0 16 16">
                            <path d="M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.76.56 2.311 1.184C7.985 3.648 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 12.5z"/>
                        </svg>
                    </div>
                    <div class="flex-grow-1 min-width-0">
                        <div class="fw-semibold small text-break">{{ seed.name }}</div>
                        {% if seed.description %}
                        <div class="text-muted" style="font-size:0.75rem">{{ seed.description }}</div>
                        {% endif %}
                        <div class="mt-2 d-flex align-items-center gap-2">
                            <a href="/generate/seeds/{{ seed.name }}"
                               class="btn btn-xs btn-outline-secondary">View contents</a>
                            <a href="/generate/run?seed_folder={{ seed.name }}"
                               class="btn btn-xs btn-spikee">Generate &rarr;</a>
                            <input type="checkbox" class="form-check-input seed-checkbox" data-name="{{ seed.name }}" style="margin-left:auto">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center text-muted py-5">
        <p class="fw-semibold mb-1">No seed folders found.</p>
        <p class="small">Place seed folders inside <code>datasets/</code> in your workspace.</p>
    </div>
    {% endif %}

    <!-- Bulk action footer -->
    <div id="bulk-toolbar" class="d-flex align-items-center gap-2 py-3" style="border-top:1px solid var(--bs-border-color); margin-top:1rem">
        <span id="selection-count" class="fw-semibold small text-muted">0 selected</span>
        <div class="vr"></div>
        <button id="bulk-clone-btn" class="btn btn-sm btn-outline-primary">Clone</button>
        <button id="bulk-rename-btn" class="btn btn-sm btn-outline-warning">Rename</button>
        <button id="bulk-delete-btn" class="btn btn-sm btn-outline-danger">Delete</button>
    </div>

</div>
{% endblock %}

{% block scripts %}
<script>
(function () {
    try {
        var checkboxes = Array.from(document.querySelectorAll('.seed-checkbox'));
        var selectionCount = document.getElementById('selection-count');
        var bulkDeleteBtn = document.getElementById('bulk-delete-btn');
        var bulkCloneBtn = document.getElementById('bulk-clone-btn');
        var bulkRenameBtn = document.getElementById('bulk-rename-btn');

        function updateToolbar() {
            var selected = checkboxes.filter(function (cb) { return cb.checked; });
            selectionCount.textContent = selected.length + ' selected';
        }

        checkboxes.forEach(function (cb) {
            cb.addEventListener('change', updateToolbar);
        });

        // Bulk clone
        bulkCloneBtn.addEventListener('click', function () {
            var selected = checkboxes.filter(function (cb) { return cb.checked; });
            if (!selected.length) { alert('No seeds selected.'); return; }
            var names = selected.map(function (cb) { return cb.getAttribute('data-name'); });
            var lastUrl = null;
            spikee.eachSequential(names, function (name) {
                return spikee.promptModal('Clone "' + name + '" as:', name + '-copy').then(function (newName) {
                    if (newName === null || !String(newName).trim()) return;
                    return spikee.fetchJson('/generate/seeds/' + encodeURIComponent(name) + '/clone', {
                        method: 'POST',
                        body: JSON.stringify({ new_name: newName.trim() })
                    }).then(function (data) {
                        if (data && data.url) lastUrl = data.url;
                    }).catch(function (err) {
                        alert('Clone failed for "' + name + '": ' + err.message);
                    });
                });
            }).then(function () {
                if (lastUrl) window.location.href = lastUrl;
            });
        });

        // Bulk rename
        bulkRenameBtn.addEventListener('click', function () {
            var selected = checkboxes.filter(function (cb) { return cb.checked; });
            if (!selected.length) { alert('No seeds selected.'); return; }
            var names = selected.map(function (cb) { return cb.getAttribute('data-name'); });
            spikee.eachSequential(names, function (name) {
                return spikee.promptModal('Rename "' + name + '" to:', name).then(function (newName) {
                    if (newName === null || !String(newName).trim()) return;
                    newName = newName.trim();
                    return spikee.fetchJson('/generate/seeds/' + encodeURIComponent(name) + '/rename', {
                        method: 'POST',
                        body: JSON.stringify({ new_name: newName })
                    }).then(function () {
                        spikee.updateCardName(name, newName);
                    }).catch(function (err) {
                        alert('Rename failed for "' + name + '": ' + err.message);
                    });
                });
            });
        });

        // Bulk delete
        bulkDeleteBtn.addEventListener('click', function () {
            var selected = checkboxes.filter(function (cb) { return cb.checked; });
            if (!selected.length) { alert('No seeds selected.'); return; }
            if (!confirm('Delete ' + selected.length + ' seed folder(s) and all their contents?')) return;
            var names = selected.map(function (cb) { return cb.getAttribute('data-name'); });
            spikee.eachSequential(names, function (name) {
                return spikee.fetchJson('/generate/seeds/' + encodeURIComponent(name), { method: 'DELETE' })
                    .then(function () { spikee.removeCard(name); })
                    .catch(function (err) { alert('Delete failed for "' + name + '": ' + err.message); });
            }).then(updateToolbar);
        });

        console.log('[seeds] handlers attached');
    } catch (e) {
        console.error('[seeds] init error', e);
        alert('seeds init error: ' + e.message);
    }
})();
</script>
{% endblock %}