{% extends "base.html" %}

{% block title %}{{ collection.display_name or collection.name }} - Monglo Admin{% endblock %}

{% block header_actions %}
<button class="monglo-btn monglo-btn-primary" onclick="createDocument()">
    <i class="fas fa-plus"></i>
    New
</button>
<button class="monglo-btn monglo-btn-secondary" id="bulk-delete-btn" style="display: none;" onclick="bulkDelete()">
    <i class="fas fa-trash"></i>
    Delete Selected
</button>
{% endblock %}

{% block content %}
<!-- Toolbar -->
<div class="monglo-toolbar monglo-fade-in">
    <div class="monglo-search">
        <input type="text" class="monglo-input" placeholder="Search {{ collection.name }}..." id="search-input"
            onkeyup="handleSearch(event)">
    </div>
</div>

<!-- Table -->
<div class="monglo-table-container monglo-fade-in">
    <table class="monglo-table" id="data-table">
        <thead>
            <tr>
                <th style="width: 50px;">
                    <input type="checkbox" onchange="toggleSelectAll(this)" id="select-all">
                </th>
                {% for column in config.columns %}
                <th onclick="sortBy('{{ column.field }}')">
                    {{ column.label }}
                    <i class="fas fa-sort sort-indicator" id="sort-{{ column.field }}"></i>
                </th>
                {% endfor %}
                <th style="text-align: right; width: 120px;">Actions</th>
            </tr>
        </thead>
        <tbody id="table-body">
            {% for item in data['items'] %}
            <tr data-id="{{ item._id }}">
                <td>
                    <input type="checkbox" class="row-checkbox" value="{{ item._id }}" onchange="updateBulkActions()">
                </td>
                {% for column in config.columns %}
                <td>
                    {% if column.formatter == 'datetime' %}
                    <span class="monglo-badge monglo-badge-info">
                        {{ item[column.field]|format_datetime }}
                    </span>
                    {% elif column.formatter == 'objectid' %}
                    <code style="font-size: 0.75rem; color: var(--text-secondary);">
                            {{ item[column.field]|str|truncate(8) }}
                        </code>
                    {% elif column.formatter == 'boolean' %}
                    <span
                        class="monglo-badge {% if item[column.field] %}monglo-badge-success{% else %}monglo-badge-danger{% endif %}">
                        <i class="fas fa-{% if item[column.field] %}check{% else %}times{% endif %}"></i>
                        {{ item[column.field] }}
                    </span>
                    {% else %}
                    {{ item[column.field] }}
                    {% endif %}
                </td>
                {% endfor %}
                <td style="text-align: right;">
                    <div class="monglo-table-actions">
                        <button class="monglo-btn monglo-btn-secondary monglo-btn-sm"
                            onclick="viewDocument('{{ item._id }}')" title="View">
                            <i class="fas fa-eye"></i>
                        </button>
                        <button class="monglo-btn monglo-btn-primary monglo-btn-sm"
                            onclick="editDocument('{{ item._id }}'); event.stopPropagation();" title="Edit">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="monglo-btn monglo-btn-sm monglo-btn-danger"
                            onclick="deleteDocument('{{ collection.name }}', '{{ item._id }}')" title="Delete">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Pagination -->
<div class="monglo-pagination monglo-fade-in">
    <div class="monglo-pagination-info">
        <span>{{ data.total }} total results</span>
        <select class="monglo-input monglo-input-sm" onchange="handlePerPage(event)" style="margin-left: 1rem;">
            <option value="20" {% if data.per_page==20 %}selected{% endif %}>20 / page</option>
            <option value="50" {% if data.per_page==50 %}selected{% endif %}>50 / page</option>
            <option value="100" {% if data.per_page==100 %}selected{% endif %}>100 / page</option>
        </select>
    </div>

    <div class="monglo-pagination-buttons">
        <button class="monglo-btn monglo-btn-secondary monglo-btn-sm" onclick="goToPage(1)" {% if not data.has_prev
            %}disabled{% endif %}>
            <i class="fas fa-angle-double-left"></i>
        </button>
        <button class="monglo-btn monglo-btn-secondary monglo-btn-sm" onclick="goToPage({{ data.page - 1 }})" {% if not
            data.has_prev %}disabled{% endif %}>
            <i class="fas fa-angle-left"></i>
        </button>

        <span style="padding: 0 1rem; color: var(--text-secondary); font-weight: 600;">
            Page {{ data.page }} of {{ data.pages }}
        </span>

        <button class="monglo-btn monglo-btn-secondary monglo-btn-sm" onclick="goToPage({{ data.page + 1 }})" {% if not
            data.has_next %}disabled{% endif %}>
            <i class="fas fa-angle-right"></i>
        </button>
        <button class="monglo-btn monglo-btn-secondary monglo-btn-sm" onclick="goToPage({{ data.pages }})" {% if not
            data.has_next %}disabled{% endif %}>
            <i class="fas fa-angle-double-right"></i>
        </button>
    </div>
</div>

<script>
    const collection = '{{ collection.name }}';
    const prefix = '{{ prefix }}';
    let currentPage = {{ data.page }};
    let currentSearch = '';
    let currentSort = '';
    let perPage = {{ data.per_page }};

    function handleSearch(event) {
        if (event.key === 'Enter') {
            currentSearch = event.target.value;
            currentPage = 1;
            reloadTable();
        }
    }

    function handlePerPage(event) {
        perPage = parseInt(event.target.value);
        currentPage = 1;
        reloadTable();
    }

    function goToPage(page) {
        currentPage = page;
        reloadTable();
    }

    function sortBy(field) {
        if (currentSort === `${field}:asc`) {
            currentSort = `${field}:desc`;
        } else {
            currentSort = `${field}:asc`;
        }
        reloadTable();
    }

    function reloadTable() {
        const params = new URLSearchParams({
            page: currentPage,
            per_page: perPage,
            search: currentSearch,
            sort: currentSort
        });
        window.location.href = `?${params.toString()}`;
    }

    function viewDocument(id) {
        window.location.href = `${prefix}/${collection}/document/${id}`;
    }

    function createDocument() {
        // Call the create modal from modals.js
        if (typeof window.openCreateModal === 'function') {
            window.openCreateModal(collection);
        } else {
            alert('Create modal not available');
        }
    }


    function toggleSelectAll(checkbox) {
        document.querySelectorAll('.row-checkbox').forEach(cb => {
            cb.checked = checkbox.checked;
        });
        updateBulkActions();
    }

    function updateBulkActions() {
        const selected = document.querySelectorAll('.row-checkbox:checked').length;
        const bulkBtn = document.getElementById('bulk-delete-btn');
        if (selected > 0) {
            bulkBtn.style.display = 'inline-flex';
            bulkBtn.textContent = `Delete ${selected} Selected`;
            bulkBtn.innerHTML = `<i class="fas fa-trash"></i> Delete ${selected}`;
        } else {
            bulkBtn.style.display = 'none';
        }
    }

    async function deleteDocument(collection, id) {
        if (!confirm('Are you sure you want to delete this document?')) return;

        try {
            const response = await fetch(`${prefix}/${collection}/${id}`, {
                method: 'DELETE'
            });

            if (response.ok) {
                window.location.reload();
            } else {
                const error = await response.text();
                alert('Error deleting document: ' + error);
            }
        } catch (error) {
            console.error('Delete error:', error);
            alert('Error: ' + error.message);
        }
    }

    function editDocument(id) {
        // Call the modals.js edit function if it exists
        if (typeof window.openEditModal === 'function') {
            window.openEditModal(collection, id);
        } else {
            alert('Edit modal not available');
        }
    }

    function bulkDelete() {
        const selected = Array.from(document.querySelectorAll('.row-checkbox:checked')).map(cb => cb.value);
        if (confirm(`Delete ${selected.length} documents?`)) {
            Promise.all(selected.map(id =>
                fetch(`${prefix}/${collection}/${id}`, { method: 'DELETE' })
            ))
                .then(() => reloadTable())
                .catch(err => alert('Error deleting documents'));
        }
    }
</script>
{% endblock %}