{# Modal: Move Category #}
<div id="modal-move-category" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50" style="display: none;">
    <div class="relative top-20 mx-auto p-5 border w-full max-w-lg shadow-lg rounded-md bg-white">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900">
                <i class="fas fa-folder-open mr-2 text-indigo-600"></i>
                Déplacer vers...
            </h3>
            <button type="button" class="text-gray-400 hover:text-gray-600" onclick="closeMoveCategoryModal()">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>

        <div class="mb-4">
            <p class="text-sm text-gray-600 mb-2">
                <span id="move-category-count-text"></span> sélectionné(s)
            </p>
            <div class="bg-gray-50 p-3 rounded border border-gray-200 max-h-24 overflow-y-auto">
                <ul id="move-category-selected-items" class="text-sm space-y-1"></ul>
            </div>
        </div>

        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-2">
                Destination
            </label>
            <div class="border border-gray-300 rounded-md p-3 max-h-64 overflow-y-auto bg-white">
                <div id="move-category-tree-container">
                    {# Tree will be rendered here #}
                </div>
            </div>
        </div>

        <div class="flex gap-2 justify-end">
            <button type="button" onclick="closeMoveCategoryModal()"
                class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                Annuler
            </button>
            <button type="button" onclick="confirmCategoryMove()"
                class="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
                <i class="fas fa-arrow-right mr-2"></i>
                Déplacer
            </button>
        </div>
    </div>
</div>

<script>
let selectedCategoryDestination = null;

window.showMoveCategoryModal = function() {
    const selected = Array.from(window.folderExplorer.selectedFolders);
    if (selected.length === 0) return;

    const modal = document.getElementById('modal-move-category');

    // Update count
    document.getElementById('move-category-count-text').textContent = `${selected.length} dossier(s)`;

    // List selected items
    const itemsList = document.getElementById('move-category-selected-items');
    itemsList.innerHTML = selected.map(id => {
        const folder = findFolderById(id.toString(), window.folderExplorer.treeData);
        return `<li><i class="fas fa-folder text-blue-500 mr-2"></i>${folder ? folder.name : 'ID: ' + id}</li>`;
    }).join('');

    // Render tree
    renderCategoryDestinationTree();

    modal.style.display = 'block';
};

window.closeMoveCategoryModal = function() {
    document.getElementById('modal-move-category').style.display = 'none';
    selectedCategoryDestination = null;
};

function renderCategoryDestinationTree() {
    const container = document.getElementById('move-category-tree-container');
    container.innerHTML = '';

    // Root option
    const rootOption = createTreeNode({
        id: 'root',
        name: '📁 Racine',
        children: window.folderExplorer.treeData
    }, 0);
    container.appendChild(rootOption);
}

function createTreeNode(node, depth) {
    const selected = Array.from(window.folderExplorer.selectedFolders);
    const isDisabled = selected.includes(node.id);

    const div = document.createElement('div');
    div.className = 'tree-node';
    div.style.paddingLeft = `${depth * 1.5}rem`;

    const button = document.createElement('button');
    button.type = 'button';
    button.className = `w-full text-left px-3 py-2 rounded hover:bg-gray-100 ${isDisabled ? 'opacity-50 cursor-not-allowed' : ''} ${selectedDestination === node.id ? 'bg-indigo-100 text-indigo-700' : ''}`;
    button.disabled = isDisabled;
    button.innerHTML = `
        ${node.children && node.children.length > 0 ? '<i class="fas fa-chevron-right text-xs mr-1"></i>' : '<i class="fas fa-folder text-xs mr-2 text-blue-500"></i>'}
        ${node.name}
    `;

    if (!isDisabled) {
        button.addEventListener('click', () => {
            selectedCategoryDestination = node.id;
            document.querySelectorAll('#move-category-tree-container button').forEach(btn => {
                btn.classList.remove('bg-indigo-100', 'text-indigo-700');
            });
            button.classList.add('bg-indigo-100', 'text-indigo-700');
        });
    }

    div.appendChild(button);

    // Render children (if any)
    if (node.children && node.children.length > 0) {
        const childrenContainer = document.createElement('div');
        node.children.forEach(child => {
            childrenContainer.appendChild(createTreeNode(child, depth + 1));
        });
        div.appendChild(childrenContainer);
    }

    return div;
}

window.confirmCategoryMove = function() {
    if (selectedCategoryDestination === null) {
        showNotification('Veuillez sélectionner une destination', 'warning');
        return;
    }

    const selected = Array.from(window.folderExplorer.selectedFolders);
    const destinationId = selectedCategoryDestination === 'root' ? null : selectedCategoryDestination;

    // Bulk move
    fetch(window.folderExplorer.urls.bulkMove, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: new URLSearchParams({
            'categoryIds[]': selected,
            'destinationId': destinationId || ''
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            closeMoveCategoryModal();
            if (typeof loadTreeData === 'function') {
                loadTreeData();
            }
            if (typeof showNotification === 'function') {
                showNotification(data.message, 'success');
            } else {
                alert(data.message);
            }
        } else {
            if (typeof showNotification === 'function') {
                showNotification(data.message, 'error');
            } else {
                alert('Erreur: ' + data.message);
            }
        }
    })
    .catch(error => {
        if (typeof showNotification === 'function') {
            showNotification('Erreur lors du déplacement', 'error');
        } else {
            alert('Erreur lors du déplacement');
        }
        console.error(error);
    });
};
</script>