{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}Dossiers - {{ company.name }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {# JSTree CSS #}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.16/themes/default/style.min.css" />
    <style>
        /* Windows Explorer Layout */
        .explorer-container {
            display: flex;
            height: calc(100vh - 200px);
            min-height: 600px;
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            overflow: hidden;
            background: white;
        }

        /* Left Panel - Tree */
        .explorer-sidebar {
            width: 300px;
            border-right: 1px solid #e5e7eb;
            overflow-y: auto;
            background: #f9fafb;
        }

        /* Right Panel - Content */
        .explorer-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* Toolbar */
        .explorer-toolbar {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid #e5e7eb;
            background: white;
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        /* Breadcrumb */
        .explorer-breadcrumb {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid #e5e7eb;
            background: #f9fafb;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            overflow-x: auto;
        }

        /* Content Area */
        .explorer-content {
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
        }

        /* Folder Grid */
        .folder-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
        }

        .folder-card {
            padding: 1rem;
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
        }

        .folder-card:hover {
            background: #f3f4f6;
            border-color: #3b82f6;
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .folder-card.selected {
            background: #dbeafe;
            border-color: #3b82f6;
        }

        .folder-card.deleted {
            opacity: 0.5;
            border-color: #ef4444;
        }

        .folder-icon {
            font-size: 3rem;
            margin-bottom: 0.5rem;
            color: #3b82f6;
        }

        .folder-card.deleted .folder-icon {
            color: #ef4444;
        }

        .folder-name {
            font-size: 0.875rem;
            font-weight: 500;
            color: #374151;
            word-break: break-word;
        }

        .folder-stats {
            font-size: 0.75rem;
            color: #6b7280;
            margin-top: 0.25rem;
        }

        /* Context Menu */
        .context-menu {
            position: fixed;
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            min-width: 200px;
            display: none;
        }

        .context-menu.show {
            display: block;
        }

        .context-menu-item {
            padding: 0.5rem 1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: background 0.2s;
        }

        .context-menu-item:hover {
            background: #f3f4f6;
        }

        .context-menu-item.danger:hover {
            background: #fee2e2;
            color: #dc2626;
        }

        .context-menu-divider {
            height: 1px;
            background: #e5e7eb;
            margin: 0.25rem 0;
        }

        /* JSTree customization */
        #folder-tree .jstree-anchor {
            padding: 0.25rem 0.5rem;
        }

        #folder-tree .jstree-icon {
            color: #3b82f6;
        }

        /* Empty state */
        .empty-state {
            text-align: center;
            padding: 3rem 1rem;
            color: #6b7280;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .explorer-sidebar {
                width: 250px;
            }

            .folder-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 480px) {
            .folder-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
{% endblock %}

{% block content %}
<div class="max-w-full mx-auto px-4 sm:px-6 lg:px-8 py-4">

    {# Page Header #}
    <div class="mb-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <nav class="flex mb-2" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1">
                    <li class="inline-flex items-center">
                        <a href="{{ path('admin_companies_index') }}" class="text-sm font-medium text-gray-700 hover:text-indigo-600">
                            <i class="fas fa-building mr-2"></i>Entreprises
                        </a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <i class="fas fa-chevron-right text-gray-400 mx-2 text-xs"></i>
                            <a href="{{ path('admin_companies_show', {id: company.id}) }}" class="text-sm font-medium text-gray-700 hover:text-indigo-600">
                                {{ company.name }}
                            </a>
                        </div>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <i class="fas fa-chevron-right text-gray-400 mx-2 text-xs"></i>
                            <span class="text-sm font-medium text-gray-500">Dossiers</span>
                        </div>
                    </li>
                </ol>
            </nav>
            <h2 class="text-2xl font-bold text-gray-900">
                <i class="fas fa-folder-tree mr-2 text-indigo-600"></i>
                Gestion des dossiers
            </h2>
        </div>
        <div class="flex gap-2">
            <a href="{{ path('admin_companies_documents', {id: company.id}) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                <i class="fas fa-file mr-2"></i>
                Documents
            </a>
        </div>
    </div>

    {# Windows Explorer Interface #}
    <div class="explorer-container">

        {# Left Panel - Folder Tree #}
        <div class="explorer-sidebar">
            <div class="p-3 border-b border-gray-200 bg-white">
                <div class="flex items-center justify-between mb-2">
                    <h3 class="text-sm font-semibold text-gray-700">
                        <i class="fas fa-sitemap mr-1"></i> Arborescence
                    </h3>
                    <button type="button" id="btn-refresh-tree" class="text-gray-500 hover:text-indigo-600" title="Actualiser">
                        <i class="fas fa-sync-alt"></i>
                    </button>
                </div>
                <div class="relative">
                    <input type="text" id="tree-search" placeholder="Rechercher..." class="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500" />
                    <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i>
                </div>
            </div>
            <div id="folder-tree" class="p-2"></div>
        </div>

        {# Right Panel - Content #}
        <div class="explorer-main">

            {# Toolbar #}
            <div class="explorer-toolbar">
                {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_MANAGER') %}
                <button type="button" id="btn-new-folder" class="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    <i class="fas fa-folder-plus mr-2"></i>
                    Nouveau dossier
                </button>
                <button type="button" id="btn-copy" class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                    <i class="fas fa-copy mr-2"></i>
                    Copier
                </button>
                <button type="button" id="btn-cut" class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                    <i class="fas fa-cut mr-2"></i>
                    Couper
                </button>
                <button type="button" id="btn-paste" class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                    <i class="fas fa-paste mr-2"></i>
                    Coller
                </button>
                <button type="button" id="btn-delete" class="inline-flex items-center px-3 py-2 border border-red-300 text-sm font-medium rounded-md text-red-700 bg-white hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                    <i class="fas fa-trash mr-2"></i>
                    Supprimer
                </button>
                {% endif %}
                {% if is_granted('ROLE_ADMIN') %}
                <button type="button" id="btn-restore" class="inline-flex items-center px-3 py-2 border border-green-300 text-sm font-medium rounded-md text-green-700 bg-white hover:bg-green-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                    <i class="fas fa-undo mr-2"></i>
                    Restaurer
                </button>
                {% endif %}
                <div class="ml-auto flex items-center gap-2">
                    <span class="text-sm text-gray-600" id="selection-count">Aucune sélection</span>
                </div>
            </div>

            {# Breadcrumb Navigation #}
            <div class="explorer-breadcrumb">
                <button type="button" id="btn-go-up" class="text-gray-500 hover:text-indigo-600" title="Dossier parent" disabled>
                    <i class="fas fa-arrow-up"></i>
                </button>
                <div id="breadcrumb-path" class="flex items-center gap-1 flex-1 overflow-x-auto">
                    <a href="#" class="breadcrumb-item text-sm text-gray-700 hover:text-indigo-600 font-medium" data-folder-id="root">
                        <i class="fas fa-home mr-1"></i>Racine
                    </a>
                </div>
            </div>

            {# Content Area - Folder Grid #}
            <div class="explorer-content">
                <div id="folder-grid" class="folder-grid">
                    {# Populated by JavaScript #}
                </div>
                <div id="empty-state" class="empty-state hidden">
                    <i class="fas fa-folder-open text-6xl text-gray-300 mb-4"></i>
                    <p class="text-lg font-medium text-gray-500">Ce dossier est vide</p>
                    <p class="text-sm text-gray-400 mt-2">Créez un nouveau dossier ou uploadez des documents</p>
                </div>
            </div>
        </div>
    </div>

    {# Context Menu #}
    <div id="context-menu" class="context-menu">
        <div class="context-menu-item" data-action="open">
            <i class="fas fa-folder-open"></i>
            <span>Ouvrir</span>
        </div>
        {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_MANAGER') %}
        <div class="context-menu-item" data-action="rename">
            <i class="fas fa-edit"></i>
            <span>Renommer</span>
        </div>
        <div class="context-menu-divider"></div>
        <div class="context-menu-item" data-action="copy">
            <i class="fas fa-copy"></i>
            <span>Copier</span>
        </div>
        <div class="context-menu-item" data-action="cut">
            <i class="fas fa-cut"></i>
            <span>Couper</span>
        </div>
        <div class="context-menu-item" data-action="paste">
            <i class="fas fa-paste"></i>
            <span>Coller</span>
        </div>
        <div class="context-menu-divider"></div>
        <div class="context-menu-item" data-action="new-subfolder">
            <i class="fas fa-folder-plus"></i>
            <span>Nouveau sous-dossier</span>
        </div>
        <div class="context-menu-divider"></div>
        <div class="context-menu-item danger" data-action="delete">
            <i class="fas fa-trash"></i>
            <span>Supprimer</span>
        </div>
        {% endif %}
        {% if is_granted('ROLE_ADMIN') %}
        <div class="context-menu-item" data-action="restore">
            <i class="fas fa-undo"></i>
            <span>Restaurer</span>
        </div>
        {% endif %}
        <div class="context-menu-divider"></div>
        <div class="context-menu-item" data-action="properties">
            <i class="fas fa-info-circle"></i>
            <span>Propriétés</span>
        </div>
    </div>

</div>

{# Modals will be added in separate files #}
{% include 'admin/companies/categories/_modal_new_folder.html.twig' %}
{% include 'admin/companies/categories/_modal_move.html.twig' %}
{% include 'admin/companies/categories/_modal_properties.html.twig' %}

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {# JSTree Library #}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.16/jstree.min.js"></script>

    <script>
        // Global state
        window.folderExplorer = {
            companyId: {{ company.id }},
            currentFolderId: null,
            selectedFolders: new Set(),
            clipboard: null, // {action: 'copy'|'cut', folders: [...]}
            treeData: [],

            // API URLs
            urls: {
                treeData: '{{ path('admin_companies_categories_api_tree', {id: company.id})|e('js') }}',
                move: '{{ path('admin_companies_categories_move', {id: company.id})|e('js') }}',
                copy: '{{ path('admin_companies_categories_copy', {id: company.id})|e('js') }}',
                delete: '{{ path('admin_companies_categories_soft_delete', {id: company.id})|e('js') }}',
                bulkMove: '{{ path('admin_companies_categories_bulk_move', {id: company.id})|e('js') }}',
                bulkDelete: '{{ path('admin_companies_categories_bulk_delete', {id: company.id})|e('js') }}',
                bulkRestore: '{{ path('admin_companies_categories_bulk_restore', {id: company.id})|e('js') }}'
            }
        };

        // Initialize on DOM ready
        document.addEventListener('DOMContentLoaded', function() {
            console.log('Folder Explorer initializing...');
            initializeFolderTree();
            initializeToolbar();
            initializeContextMenu();
            loadTreeData();
        });

        // Initialize JSTree
        function initializeFolderTree() {
            $('#folder-tree').jstree({
                'core': {
                    'data': [],
                    'check_callback': true,
                    'themes': {
                        'responsive': true,
                        'icons': true
                    }
                },
                'plugins': ['search', 'dnd', 'contextmenu'],
                'search': {
                    'show_only_matches': true,
                    'show_only_matches_children': true
                },
                'dnd': {
                    'is_draggable': function(nodes) {
                        return true;
                    }
                }
            });

            // Tree events
            $('#folder-tree').on('select_node.jstree', function(e, data) {
                const folderId = data.node.id;
                navigateToFolder(folderId);
            });

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

        // Load tree data from API
        function loadTreeData() {
            fetch(window.folderExplorer.urls.treeData)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        window.folderExplorer.treeData = data.tree;
                        buildJSTreeData(data.tree);
                        navigateToFolder('root');
                    }
                })
                .catch(error => {
                    console.error('Error loading tree:', error);
                    showNotification('Erreur lors du chargement de l\'arbre', 'error');
                });
        }

        // Convert API data to JSTree format
        function buildJSTreeData(treeData) {
            const jsTreeData = convertToJSTreeFormat(treeData);
            $('#folder-tree').jstree(true).settings.core.data = jsTreeData;
            $('#folder-tree').jstree(true).refresh();
        }

        function convertToJSTreeFormat(nodes) {
            return nodes.map(node => ({
                id: node.id.toString(),
                text: node.name + (node.media_count > 0 ? ` (${node.media_count})` : ''),
                icon: node.is_deleted ? 'fas fa-folder text-red-500' : 'fas fa-folder text-blue-500',
                state: {
                    opened: node.depth === 0
                },
                children: node.children ? convertToJSTreeFormat(node.children) : [],
                data: node
            }));
        }

        // Navigate to folder
        function navigateToFolder(folderId) {
            window.folderExplorer.currentFolderId = folderId;
            updateBreadcrumb(folderId);
            loadFolderContent(folderId);
            clearSelection();
        }

        // Load folder content
        function loadFolderContent(folderId) {
            const folder = findFolderById(folderId, window.folderExplorer.treeData);
            const grid = document.getElementById('folder-grid');
            const emptyState = document.getElementById('empty-state');

            grid.innerHTML = '';

            if (folder && folder.children && folder.children.length > 0) {
                emptyState.classList.add('hidden');
                folder.children.forEach(child => {
                    grid.appendChild(createFolderCard(child));
                });
            } else if (folderId === 'root') {
                emptyState.classList.add('hidden');
                window.folderExplorer.treeData.forEach(child => {
                    grid.appendChild(createFolderCard(child));
                });
            } else {
                emptyState.classList.remove('hidden');
            }
        }

        // Create folder card element
        function createFolderCard(folder) {
            const card = document.createElement('div');
            card.className = 'folder-card' + (folder.is_deleted ? ' deleted' : '');
            card.dataset.folderId = folder.id;
            card.innerHTML = `
                <div class="folder-icon">
                    <i class="${folder.icon || 'fas fa-folder'}"></i>
                </div>
                <div class="folder-name">${folder.name}</div>
                <div class="folder-stats">${folder.media_count} fichier(s)</div>
            `;

            // Double-click to open
            card.addEventListener('dblclick', () => navigateToFolder(folder.id.toString()));

            // Click to select
            card.addEventListener('click', (e) => {
                if (e.ctrlKey || e.metaKey) {
                    toggleSelection(folder.id);
                } else if (e.shiftKey) {
                    // TODO: Range selection
                } else {
                    clearSelection();
                    toggleSelection(folder.id);
                }
            });

            // Right-click context menu
            card.addEventListener('contextmenu', (e) => {
                e.preventDefault();
                if (!window.folderExplorer.selectedFolders.has(folder.id)) {
                    clearSelection();
                    toggleSelection(folder.id);
                }
                showContextMenu(e.clientX, e.clientY);
            });

            return card;
        }

        // Find folder by ID in tree
        function findFolderById(id, tree) {
            if (id === 'root') return {children: tree};

            for (const node of tree) {
                if (node.id.toString() === id.toString()) return node;
                if (node.children) {
                    const found = findFolderById(id, node.children);
                    if (found) return found;
                }
            }
            return null;
        }

        // Update breadcrumb
        function updateBreadcrumb(folderId) {
            const breadcrumb = document.getElementById('breadcrumb-path');
            const btnGoUp = document.getElementById('btn-go-up');

            if (folderId === 'root') {
                breadcrumb.innerHTML = `
                    <a href="#" class="breadcrumb-item text-sm text-indigo-600 font-medium" data-folder-id="root">
                        <i class="fas fa-home mr-1"></i>Racine
                    </a>
                `;
                btnGoUp.disabled = true;
            } else {
                const folder = findFolderById(folderId, window.folderExplorer.treeData);
                if (folder) {
                    const path = getPathToFolder(folder);
                    breadcrumb.innerHTML = path.map((item, index) => `
                        <span class="flex items-center gap-1">
                            ${index > 0 ? '<i class="fas fa-chevron-right text-gray-400 text-xs"></i>' : ''}
                            <a href="#" class="breadcrumb-item text-sm ${index === path.length - 1 ? 'text-indigo-600 font-medium' : 'text-gray-700 hover:text-indigo-600'}" data-folder-id="${item.id}">
                                ${index === 0 ? '<i class="fas fa-home mr-1"></i>' : ''}${item.name}
                            </a>
                        </span>
                    `).join('');
                    btnGoUp.disabled = false;
                }
            }

            // Breadcrumb click events
            breadcrumb.querySelectorAll('.breadcrumb-item').forEach(item => {
                item.addEventListener('click', (e) => {
                    e.preventDefault();
                    navigateToFolder(item.dataset.folderId);
                });
            });
        }

        // Get path to folder (breadcrumb)
        function getPathToFolder(folder) {
            // TODO: Implement based on folder parent_id
            return [{id: 'root', name: 'Racine'}, {id: folder.id, name: folder.name}];
        }

        // Selection management
        function toggleSelection(folderId) {
            if (window.folderExplorer.selectedFolders.has(folderId)) {
                window.folderExplorer.selectedFolders.delete(folderId);
            } else {
                window.folderExplorer.selectedFolders.add(folderId);
            }
            updateSelectionUI();
        }

        function clearSelection() {
            window.folderExplorer.selectedFolders.clear();
            updateSelectionUI();
        }

        function updateSelectionUI() {
            const count = window.folderExplorer.selectedFolders.size;
            document.getElementById('selection-count').textContent =
                count === 0 ? 'Aucune sélection' : `${count} élément(s) sélectionné(s)`;

            // Update folder cards
            document.querySelectorAll('.folder-card').forEach(card => {
                const id = parseInt(card.dataset.folderId);
                if (window.folderExplorer.selectedFolders.has(id)) {
                    card.classList.add('selected');
                } else {
                    card.classList.remove('selected');
                }
            });

            // Update toolbar buttons
            const hasSelection = count > 0;
            document.getElementById('btn-copy').disabled = !hasSelection;
            document.getElementById('btn-cut').disabled = !hasSelection;
            document.getElementById('btn-delete').disabled = !hasSelection;
            if (document.getElementById('btn-restore')) {
                document.getElementById('btn-restore').disabled = !hasSelection;
            }
            document.getElementById('btn-paste').disabled = !window.folderExplorer.clipboard;
        }

        // Toolbar initialization
        function initializeToolbar() {
            document.getElementById('btn-refresh-tree').addEventListener('click', loadTreeData);
            document.getElementById('btn-new-folder').addEventListener('click', () => {
                // TODO: Show new folder modal
                console.log('New folder');
            });
            document.getElementById('btn-copy').addEventListener('click', copyToClipboard);
            document.getElementById('btn-cut').addEventListener('click', cutToClipboard);
            document.getElementById('btn-paste').addEventListener('click', pasteFromClipboard);
            document.getElementById('btn-delete').addEventListener('click', deleteSelection);
            if (document.getElementById('btn-restore')) {
                document.getElementById('btn-restore').addEventListener('click', restoreSelection);
            }
            document.getElementById('btn-go-up').addEventListener('click', goToParent);
        }

        // Clipboard operations
        function copyToClipboard() {
            window.folderExplorer.clipboard = {
                action: 'copy',
                folders: Array.from(window.folderExplorer.selectedFolders)
            };
            updateSelectionUI();
            showNotification('Dossier(s) copié(s)', 'success');
        }

        function cutToClipboard() {
            window.folderExplorer.clipboard = {
                action: 'cut',
                folders: Array.from(window.folderExplorer.selectedFolders)
            };
            updateSelectionUI();
            showNotification('Dossier(s) coupé(s)', 'success');
        }

        function pasteFromClipboard() {
            if (!window.folderExplorer.clipboard) return;

            const destination = window.folderExplorer.currentFolderId === 'root' ? null : window.folderExplorer.currentFolderId;

            if (window.folderExplorer.clipboard.action === 'copy') {
                // Copy operation
                // TODO: Implement bulk copy
                console.log('Paste (copy):', window.folderExplorer.clipboard.folders, 'to', destination);
            } else {
                // Move operation
                // TODO: Implement bulk move
                console.log('Paste (move):', window.folderExplorer.clipboard.folders, 'to', destination);
            }
        }

        function deleteSelection() {
            if (window.folderExplorer.selectedFolders.size === 0) return;

            if (confirm(`Supprimer ${window.folderExplorer.selectedFolders.size} dossier(s) ?`)) {
                // TODO: Implement bulk delete
                console.log('Delete:', Array.from(window.folderExplorer.selectedFolders));
            }
        }

        function restoreSelection() {
            if (window.folderExplorer.selectedFolders.size === 0) return;

            // TODO: Implement bulk restore
            console.log('Restore:', Array.from(window.folderExplorer.selectedFolders));
        }

        function goToParent() {
            const folder = findFolderById(window.folderExplorer.currentFolderId, window.folderExplorer.treeData);
            if (folder && folder.parent_id) {
                navigateToFolder(folder.parent_id.toString());
            } else {
                navigateToFolder('root');
            }
        }

        // Context menu
        function initializeContextMenu() {
            const menu = document.getElementById('context-menu');

            // Close on click outside
            document.addEventListener('click', () => {
                menu.classList.remove('show');
            });

            // Menu item actions
            menu.querySelectorAll('.context-menu-item').forEach(item => {
                item.addEventListener('click', (e) => {
                    e.stopPropagation();
                    const action = item.dataset.action;
                    handleContextMenuAction(action);
                    menu.classList.remove('show');
                });
            });
        }

        function showContextMenu(x, y) {
            const menu = document.getElementById('context-menu');
            menu.style.left = x + 'px';
            menu.style.top = y + 'px';
            menu.classList.add('show');
        }

        function handleContextMenuAction(action) {
            console.log('Context menu action:', action);
            switch(action) {
                case 'open':
                    if (window.folderExplorer.selectedFolders.size === 1) {
                        navigateToFolder(Array.from(window.folderExplorer.selectedFolders)[0].toString());
                    }
                    break;
                case 'copy':
                    copyToClipboard();
                    break;
                case 'cut':
                    cutToClipboard();
                    break;
                case 'paste':
                    pasteFromClipboard();
                    break;
                case 'delete':
                    deleteSelection();
                    break;
                case 'restore':
                    restoreSelection();
                    break;
                // TODO: Implement other actions
            }
        }

        // Utility: Show notification
        function showNotification(message, type = 'info') {
            // Use global showToast if available, otherwise create toast inline
            if (typeof window.showToast === 'function') {
                window.showToast(message, type);
            } else {
                // Inline toast implementation
                const colors = {
                    success: 'bg-green-500',
                    error: 'bg-red-500',
                    warning: 'bg-yellow-500',
                    info: 'bg-blue-500'
                };

                const icons = {
                    success: 'fa-check-circle',
                    error: 'fa-exclamation-circle',
                    warning: 'fa-exclamation-triangle',
                    info: 'fa-info-circle'
                };

                const toast = document.createElement('div');
                toast.className = `fixed top-20 right-4 ${colors[type] || colors.info} text-white px-6 py-3 rounded-lg shadow-lg z-50 transition-all duration-300 flex items-center gap-2`;
                toast.style.opacity = '0';
                toast.innerHTML = `
                    <i class="fas ${icons[type] || icons.info}"></i>
                    <span>${message}</span>
                `;

                document.body.appendChild(toast);

                // Fade in
                setTimeout(() => {
                    toast.style.opacity = '1';
                }, 10);

                // Fade out and remove
                setTimeout(() => {
                    toast.style.opacity = '0';
                    setTimeout(() => toast.remove(), 300);
                }, 3000);
            }
        }
    </script>
{% endblock %}