{% extends "dashboard/base.html" %}

{% block dashboard_header %}
<div class="flex items-center justify-between">
    <div>
        <h1 class="text-2xl font-bold text-gray-900">Collections</h1>
        <p class="mt-1 text-gray-600">Manage tool collections</p>
    </div>
    <div class="flex items-center space-x-4">
        <a href="{{ url_for('web.admin_collection_new') }}" class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700">
            New Collection
        </a>
        <a href="{{ url_for('web.admin_dashboard') }}" class="text-sm text-indigo-600 hover:text-indigo-700">&larr; Back to Admin</a>
    </div>
</div>
{% endblock %}

{% block dashboard_content %}
<div class="bg-white rounded-lg border border-gray-200">
    {% if collections %}
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Collection</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Maintainer</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tools</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tags</th>
                    <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for coll in collections %}
                <tr id="coll-row-{{ coll.name }}" class="hover:bg-gray-50">
                    <td class="px-6 py-4">
                        <div>
                            <div class="text-sm font-medium text-gray-900">{{ coll.display_name }}</div>
                            <div class="text-sm text-gray-500">{{ coll.name }}</div>
                            {% if coll.description %}
                            <div class="text-xs text-gray-400 mt-1">{{ coll.description[:80] }}{% if coll.description|length > 80 %}...{% endif %}</div>
                            {% endif %}
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {{ coll.maintainer }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {{ coll.tools|length }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        {% for tag in coll.tags[:3] %}
                        <span class="px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600 mr-1">{{ tag }}</span>
                        {% endfor %}
                        {% if coll.tags|length > 3 %}
                        <span class="text-xs text-gray-400">+{{ coll.tags|length - 3 }}</span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <a href="{{ url_for('web.admin_collection_edit', name=coll.name) }}" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a>
                        <button onclick="deleteCollection('{{ coll.name }}', '{{ coll.display_name }}')" class="text-red-600 hover:text-red-900">Delete</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="text-center py-12">
        <h3 class="text-sm font-medium text-gray-900">No collections</h3>
        <p class="mt-1 text-sm text-gray-500">Get started by creating a new collection.</p>
        <div class="mt-6">
            <a href="{{ url_for('web.admin_collection_new') }}" class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700">
                New Collection
            </a>
        </div>
    </div>
    {% endif %}
</div>

<!-- Delete Modal -->
<div id="delete-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <h3 class="text-lg font-medium text-red-600 mb-2">Delete Collection</h3>
            <p class="text-sm text-gray-600 mb-4">
                Are you sure you want to delete <strong id="delete-collection-name"></strong>?
                This action cannot be undone.
            </p>
            <div class="mt-4 flex justify-end space-x-3">
                <button onclick="closeDeleteModal()" class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-500">Cancel</button>
                <button onclick="confirmDelete()" class="px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-md hover:bg-red-700">Delete</button>
            </div>
        </div>
    </div>
</div>

<script>
let deleteCollectionName = null;

function deleteCollection(name, displayName) {
    deleteCollectionName = name;
    document.getElementById('delete-collection-name').textContent = displayName;
    document.getElementById('delete-modal').classList.remove('hidden');
}

function closeDeleteModal() {
    document.getElementById('delete-modal').classList.add('hidden');
    deleteCollectionName = null;
}

async function confirmDelete() {
    if (!deleteCollectionName) return;
    try {
        const response = await fetch(`/api/v1/admin/collections/${deleteCollectionName}`, {
            method: 'DELETE',
            headers: {
                'Authorization': 'Bearer {{ session.get("auth_token") }}'
            }
        });
        if (response.ok) {
            location.reload();
        } else {
            const data = await response.json();
            alert(data.error?.message || 'Failed to delete collection');
        }
    } catch (error) {
        alert('Network error');
    }
}
</script>
{% endblock %}