{#
    Modal: Move Documents to Folder
    Selection modal with JSTree for choosing destination folder

    Required variables:
    - company: Company entity
#}
<div id="modal-move-folder" 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-2xl 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-folder-open mr-2 text-indigo-600"></i>
                    Déplacer les documents
                </h3>
                <p class="text-xs text-gray-500 mt-1">
                    Sélectionnez le dossier de destination
                </p>
            </div>
            <button type="button" class="text-gray-400 hover:text-gray-600" onclick="closeMoveModal()">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>

        {# Body #}
        <div class="mb-5">
            <p class="text-sm text-gray-700 mb-3">
                Déplacer <span id="move-count" class="font-bold text-indigo-600">0</span> document(s) vers :
            </p>

            {# Search Box and New Folder Button #}
            <div class="mb-3 flex gap-2">
                <input type="text" id="move-tree-search" placeholder="Rechercher un dossier..."
                    class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
                <button type="button"
                        onclick="openNewFolderModalFromMove()"
                        class="px-3 py-2 border border-indigo-600 text-sm font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50"
                        title="Créer un nouveau dossier">
                    <i class="fas fa-folder-plus"></i>
                    <span class="hidden sm:inline ml-1">Nouveau</span>
                </button>
            </div>

            {# Uncategorized Option #}
            <div class="mb-3 p-3 bg-gray-50 rounded-lg border border-gray-200 cursor-pointer hover:bg-indigo-50 hover:border-indigo-300"
                onclick="selectDestinationFolder(null, 'Aucun dossier (racine)')">
                <div class="flex items-center">
                    <input type="radio" name="destination-folder" value="" id="destination-root"
                        class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300">
                    <label for="destination-root" class="ml-2 block text-sm font-medium text-gray-700 cursor-pointer">
                        <i class="fas fa-home mr-2 text-gray-500"></i>
                        Aucun dossier (racine)
                    </label>
                </div>
            </div>

            {# Folder Tree #}
            <div class="border border-gray-300 rounded-lg p-3 bg-white max-h-96 overflow-y-auto">
                <div id="move-folder-tree"></div>
            </div>

            {# Selected Destination Display #}
            <div id="selected-destination" class="mt-3 p-3 bg-indigo-50 border border-indigo-200 rounded-lg hidden">
                <p class="text-sm text-gray-700">
                    <strong>Destination :</strong> <span id="selected-destination-name" class="text-indigo-600"></span>
                </p>
            </div>
        </div>

        {# Footer #}
        <div class="flex gap-2 justify-end">
            <button type="button" onclick="closeMoveModal()"
                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-move" onclick="confirmBulkMove()" disabled
                class="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed">
                <i class="fas fa-folder-open mr-2"></i>
                Déplacer
            </button>
        </div>
    </div>
</div>

<script>
let selectedDestinationId = null;
let moveTreeInitialized = false;

window.showMoveModal = function() {
    const modal = document.getElementById('modal-move-folder');
    const count = window.documentSelection.selectedDocuments.size;

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

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

    // Initialize tree if not done yet
    if (!moveTreeInitialized) {
        initializeMoveTree();
        moveTreeInitialized = true;
    }

    // Reset selection
    selectedDestinationId = null;
    document.getElementById('selected-destination').classList.add('hidden');
    document.getElementById('btn-confirm-move').disabled = true;
    document.getElementById('destination-root').checked = false;

    // Deselect all tree nodes
    if ($('#move-folder-tree').jstree(true)) {
        $('#move-folder-tree').jstree('deselect_all');
    }

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

window.closeMoveModal = function() {
    const modal = document.getElementById('modal-move-folder');
    modal.classList.add('hidden');
};

function initializeMoveTree() {
    // Convert tree data to JSTree format
    const convertToJSTreeFormat = function(nodes) {
        if (!nodes || !Array.isArray(nodes)) return [];

        return nodes.map(node => ({
            id: node.id.toString(),
            text: node.name + (node.media_count > 0 ? ` (${node.media_count})` : ''),
            icon: 'fas fa-folder text-blue-500',
            state: {
                opened: true  // Open all folders in modal for better visibility
            },
            children: node.children ? convertToJSTreeFormat(node.children) : []
        }));
    };

    const treeData = convertToJSTreeFormat(window.folderExplorer?.treeData || []);

    $('#move-folder-tree').jstree({
        'core': {
            'data': treeData,
            'themes': {
                'responsive': true,
                'icons': true
            }
        },
        'plugins': ['search'],
        'search': {
            'show_only_matches': true,
            'show_only_matches_children': true
        }
    });

    // Tree selection event
    $('#move-folder-tree').on('select_node.jstree', function(e, data) {
        selectDestinationFolder(data.node.id, data.node.text);
    });

    // Search functionality
    let searchTimeout = false;
    $('#move-tree-search').on('keyup', function() {
        if(searchTimeout) { clearTimeout(searchTimeout); }
        searchTimeout = setTimeout(function() {
            const v = $('#move-tree-search').val();
            $('#move-folder-tree').jstree(true).search(v);
        }, 250);
    });
}

function selectDestinationFolder(folderId, folderName) {
    selectedDestinationId = folderId;

    // Update UI
    document.getElementById('selected-destination-name').textContent = folderName;
    document.getElementById('selected-destination').classList.remove('hidden');
    document.getElementById('btn-confirm-move').disabled = false;

    // Update radio button
    if (folderId === null) {
        document.getElementById('destination-root').checked = true;
        // Deselect tree
        if ($('#move-folder-tree').jstree(true)) {
            $('#move-folder-tree').jstree('deselect_all');
        }
    } else {
        document.getElementById('destination-root').checked = false;
    }
}

function confirmBulkMove() {
    if (selectedDestinationId === undefined) {
        alert('Veuillez sélectionner un dossier de destination');
        return;
    }

    // Close modal
    closeMoveModal();

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

// Open new folder modal from move modal
window.openNewFolderModalFromMove = function() {
    // Store that we're coming from move modal
    sessionStorage.setItem('returnToMoveModal', 'true');

    // Close move modal temporarily
    closeMoveModal();

    // Open new folder modal (defined in _modal_new_folder.html.twig)
    if (typeof openNewFolderModal === 'function') {
        openNewFolderModal();
    } else if (typeof window.openNewFolderModal === 'function') {
        window.openNewFolderModal();
    } else {
        // Fallback: try to find and click the new folder button
        const newFolderBtn = document.getElementById('btn-new-folder');
        if (newFolderBtn) {
            newFolderBtn.click();
        } else {
            console.error('New folder modal function not found');
            alert('Fonction de création de dossier non disponible');
            // Reopen move modal
            showMoveModal();
        }
    }
};

// Function to refresh tree after new folder creation
window.refreshMoveTreeAndReopen = function() {
    // Reload tree data from controller
    if (window.folderExplorer && typeof window.folderExplorer.loadCategoriesData === 'function') {
        window.folderExplorer.loadCategoriesData();

        // Wait for tree data to load, then reopen move modal
        setTimeout(() => {
            showMoveModal();
            sessionStorage.removeItem('returnToMoveModal');
        }, 500);
    } else {
        // Fallback: just reload the page
        window.location.reload();
    }
};

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