{#
    Modal: Confirm Bulk Delete
    Confirmation modal before deleting multiple documents

    Required variables:
    - company: Company entity
#}
<div id="modal-delete-confirm" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-full max-w-lg shadow-lg rounded-md bg-white">
        {# Header #}
        <div class="flex items-center justify-between mb-4 pb-3 border-b border-gray-200">
            <div>
                <h3 class="text-lg font-semibold text-gray-900">
                    <i class="fas fa-exclamation-triangle mr-2 text-red-600"></i>
                    Confirmer la suppression
                </h3>
                <p class="text-xs text-gray-500 mt-1">
                    Cette action est irréversible
                </p>
            </div>
            <button type="button" class="text-gray-400 hover:text-gray-600" onclick="closeDeleteConfirmModal()">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>

        {# Body #}
        <div class="mb-5">
            <p class="text-sm text-gray-700 mb-3">
                Vous êtes sur le point de supprimer <span id="delete-count" class="font-bold text-red-600">0</span> document(s).
            </p>

            {# Document List #}
            <div id="delete-document-list" class="max-h-60 overflow-y-auto bg-gray-50 rounded-lg p-3 mb-3">
                {# Will be populated by JavaScript #}
            </div>

            <div class="bg-yellow-50 border-l-4 border-yellow-400 p-3 rounded">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-exclamation-triangle text-yellow-400"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-yellow-700">
                            <strong>Attention :</strong> Les documents supprimés seront déplacés dans la corbeille et pourront être restaurés par un administrateur.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        {# Footer #}
        <div class="flex gap-2 justify-end">
            <button type="button" onclick="closeDeleteConfirmModal()"
                class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                <i class="fas fa-times mr-2"></i>
                Annuler
            </button>
            <button type="button" id="btn-confirm-delete" onclick="confirmBulkDelete()"
                class="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-red-600 hover:bg-red-700">
                <i class="fas fa-trash mr-2"></i>
                Supprimer
            </button>
        </div>
    </div>
</div>

<script>
window.showDeleteConfirmModal = function() {
    const modal = document.getElementById('modal-delete-confirm');
    const count = window.documentSelection?.selectedDocuments?.size || 0;

    if (count === 0) {
        alert('Aucun document sélectionné');
        return;
    }

    // Update count
    document.getElementById('delete-count').textContent = count;

    // Build document list
    const listContainer = document.getElementById('delete-document-list');
    listContainer.innerHTML = '';

    window.documentSelection.selectedDocuments.forEach(docId => {
        // Find document element
        const docElement = document.querySelector(`[data-document-id="${docId}"]`);
        if (docElement) {
            // Try to find filename (varies by view mode)
            let filename = 'Document #' + docId;

            // Table view: find in <td> elements
            const filenameCell = docElement.querySelector('.truncate');
            if (filenameCell) {
                filename = filenameCell.textContent.trim();
            } else {
                // Grid view: find in <h3> elements
                const filenameTitle = docElement.querySelector('h3');
                if (filenameTitle) {
                    filename = filenameTitle.textContent.trim();
                }
            }

            // Create list item
            const item = document.createElement('div');
            item.className = 'flex items-center gap-2 py-2 border-b border-gray-200 last:border-0';
            item.innerHTML = `
                <i class="fas fa-file text-gray-400 text-sm"></i>
                <span class="text-sm text-gray-700 flex-1 truncate">${filename}</span>
            `;
            listContainer.appendChild(item);
        }
    });

    // Show modal
    modal.classList.remove('hidden');
};

window.closeDeleteConfirmModal = function() {
    const modal = document.getElementById('modal-delete-confirm');
    modal.classList.add('hidden');
};

window.confirmBulkDelete = function() {
    // Close modal
    closeDeleteConfirmModal();

    // Call the actual delete function (will be implemented in index.html.twig)
    if (typeof executeBulkDelete === 'function') {
        executeBulkDelete();
    } else {
        console.error('executeBulkDelete function not found');
    }
};

// Close modal when clicking outside
document.getElementById('modal-delete-confirm')?.addEventListener('click', function(e) {
    if (e.target === this) {
        closeDeleteConfirmModal();
    }
});
</script>