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

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

{% block stylesheets %}
    {{ parent() }}
    <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;
            margin-bottom: 1.5rem;
        }

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

        /* 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;
            align-items: center;
        }

        /* 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;
        }

        .breadcrumb-item {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
        }

        .breadcrumb-separator {
            color: #9ca3af;
            margin: 0 0.5rem;
        }

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

        /* 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;
            font-size: 0.875rem;
        }

        .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;
        }

        .context-menu-item.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .context-menu-item.disabled:hover {
            background: white;
        }

        /* JSTree customization */
        #folder-tree {
            padding: 0.5rem;
        }

        #folder-tree .jstree-anchor {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
        }

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

        #folder-tree .jstree-clicked {
            background: #dbeafe !important;
            color: #1e40af !important;
        }

        #tree-search {
            font-size: 0.875rem;
        }

        /* Mobile responsiveness */
        @media (max-width: 1024px) {
            .explorer-sidebar {
                position: fixed;
                left: -300px;
                top: 0;
                bottom: 0;
                z-index: 40;
                box-shadow: 2px 0 10px rgba(0,0,0,0.1);
            }

            .explorer-sidebar.show {
                left: 0;
            }

            .explorer-main {
                width: 100%;
            }

            .explorer-container {
                height: auto;
                min-height: 400px;
            }
        }

        /* Backdrop for mobile sidebar */
        .sidebar-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 35;
        }

        .sidebar-backdrop.show {
            display: block;
        }
    </style>
{% endblock %}

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

    {# Breadcrumb #}
    <nav class="flex mb-4" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="{{ path('admin_companies_index') }}" class="inline-flex items-center 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"></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"></i>
                    <span class="text-sm font-medium text-gray-500">Documents</span>
                </div>
            </li>
        </ol>
    </nav>

    {# Tabs Navigation Component #}
    {% include 'admin/companies/_tabs_navigation.html.twig' with {
        company: company,
        active_tab: 'documents'
    } %}

    {# Header avec boutons d'action #}
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h2 class="text-2xl font-bold text-gray-900">
                <i class="fas fa-file-alt mr-2 text-indigo-600"></i>
                Documents
            </h2>
            <p class="mt-1 text-sm text-gray-600">
                {{ mediaList|length }} document(s) associé(s) à cette entreprise
            </p>
        </div>

        {% if not company.deletedAt %}
            <div class="flex items-center space-x-3">
                <button type="button"
                        onclick="document.getElementById('manageTagsModal').classList.remove('hidden')"
                        class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
                    <i class="fas fa-tags mr-2"></i>
                    Gérer les tags
                </button>
                <a href="{{ path('admin_companies_documents_upload_page', {id: company.id}) }}"
                   class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm 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 transition-all transform hover:scale-105">
                    <i class="fas fa-upload mr-2"></i>
                    Téléverser un document
                </a>
            </div>
        {% endif %}
    </div>

    {# Alert si entreprise supprimée #}
    {% if company.deletedAt %}
        <div class="rounded-md bg-yellow-50 p-4 mb-6 border border-yellow-200">
            <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">
                        Cette entreprise est supprimée. Vous ne pouvez pas téléverser de nouveaux documents.
                    </p>
                </div>
            </div>
        </div>
    {% endif %}

    {# Expiration Alerts #}
    {% if expiredCount > 0 %}
        <div class="rounded-md bg-red-50 p-4 mb-6 border border-red-200">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-circle text-red-400 text-xl"></i>
                </div>
                <div class="ml-3 flex-1">
                    <h3 class="text-sm font-medium text-red-800">
                        <strong>{{ expiredCount }}</strong> document(s) expiré(s)
                    </h3>
                    <p class="mt-1 text-sm text-red-700">
                        Des documents ont dépassé leur date d'expiration et nécessitent une attention immédiate.
                    </p>
                </div>
                <div class="ml-3">
                    <a href="{{ path('admin_companies_documents', app.request.query.all|merge({'id': company.id, 'expiration': 'expired'})) }}"
                       class="inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700">
                        <i class="fas fa-filter mr-2"></i>
                        Voir les documents expirés
                    </a>
                </div>
            </div>
        </div>
    {% endif %}

    {% if expiringSoonCount > 0 %}
        <div class="rounded-md bg-orange-50 p-4 mb-6 border border-orange-200">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-clock text-orange-400 text-xl"></i>
                </div>
                <div class="ml-3 flex-1">
                    <h3 class="text-sm font-medium text-orange-800">
                        <strong>{{ expiringSoonCount }}</strong> document(s) expire(nt) dans moins de 7 jours
                    </h3>
                    <p class="mt-1 text-sm text-orange-700">
                        Action requise rapidement pour renouveler ces documents.
                    </p>
                </div>
                <div class="ml-3">
                    <a href="{{ path('admin_companies_documents', app.request.query.all|merge({'id': company.id, 'expiration': 'expiring_soon'})) }}"
                       class="inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-orange-600 hover:bg-orange-700">
                        <i class="fas fa-filter mr-2"></i>
                        Voir les documents
                    </a>
                </div>
            </div>
        </div>
    {% endif %}

    {% if expiringMonthCount > 0 and expiringSoonCount == 0 %}
        <div class="rounded-md bg-blue-50 p-4 mb-6 border border-blue-200">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-info-circle text-blue-400 text-xl"></i>
                </div>
                <div class="ml-3 flex-1">
                    <h3 class="text-sm font-medium text-blue-800">
                        <strong>{{ expiringMonthCount }}</strong> document(s) expire(nt) dans moins de 30 jours
                    </h3>
                    <p class="mt-1 text-sm text-blue-700">
                        Pensez à planifier le renouvellement de ces documents.
                    </p>
                </div>
                <div class="ml-3">
                    <a href="{{ path('admin_companies_documents', app.request.query.all|merge({'id': company.id, 'expiration': 'expiring_month'})) }}"
                       class="inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
                        <i class="fas fa-filter mr-2"></i>
                        Voir les documents
                    </a>
                </div>
            </div>
        </div>
    {% endif %}

    {# Advanced Filters Panel #}
    <div class="mb-6 bg-white shadow rounded-lg p-5">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-medium text-gray-900">
                <i class="fas fa-filter mr-2 text-indigo-600"></i>
                Filtres de recherche
            </h3>
            {% if searchQuery or selectedFileType or selectedExpiration or dateFrom or dateTo or selectedUploader %}
                <a href="{{ path('admin_companies_documents', {'id': company.id}) }}"
                   class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-red-600 hover:text-red-800">
                    <i class="fas fa-times-circle mr-1"></i>
                    Réinitialiser tous les filtres
                </a>
            {% endif %}
        </div>

        <form method="get" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {# Search Input #}
            <div class="col-span-full md:col-span-2">
                <label for="search" class="block text-sm font-medium text-gray-700 mb-1">
                    <i class="fas fa-search mr-1"></i>
                    Rechercher
                </label>
                <input type="text"
                       name="search"
                       id="search"
                       value="{{ searchQuery }}"
                       placeholder="Nom du fichier ou description..."
                       class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
            </div>

            {# File Type Filter #}
            <div>
                <label for="file_type" class="block text-sm font-medium text-gray-700 mb-1">
                    <i class="fas fa-file mr-1"></i>
                    Type de fichier
                </label>
                <select name="file_type"
                        id="file_type"
                        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                    <option value="">Tous les types</option>
                    <option value="pdf" {{ selectedFileType == 'pdf' ? 'selected' : '' }}>PDF</option>
                    <option value="image" {{ selectedFileType == 'image' ? 'selected' : '' }}>Images</option>
                    <option value="video" {{ selectedFileType == 'video' ? 'selected' : '' }}>Vidéos</option>
                    <option value="document" {{ selectedFileType == 'document' ? 'selected' : '' }}>Documents</option>
                    <option value="excel" {{ selectedFileType == 'excel' ? 'selected' : '' }}>Excel</option>
                    <option value="word" {{ selectedFileType == 'word' ? 'selected' : '' }}>Word</option>
                </select>
            </div>

            {# Expiration Filter #}
            <div>
                <label for="expiration" class="block text-sm font-medium text-gray-700 mb-1">
                    <i class="fas fa-calendar-times mr-1"></i>
                    Expiration
                </label>
                <select name="expiration"
                        id="expiration"
                        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                    <option value="">Toutes les expirations</option>
                    <option value="expired" {{ selectedExpiration == 'expired' ? 'selected' : '' }}>Expirés</option>
                    <option value="expiring_soon" {{ selectedExpiration == 'expiring_soon' ? 'selected' : '' }}>Expire sous 7 jours</option>
                    <option value="expiring_month" {{ selectedExpiration == 'expiring_month' ? 'selected' : '' }}>Expire sous 30 jours</option>
                    <option value="no_expiration" {{ selectedExpiration == 'no_expiration' ? 'selected' : '' }}>Sans expiration</option>
                </select>
            </div>

            {# Date From #}
            <div>
                <label for="date_from" class="block text-sm font-medium text-gray-700 mb-1">
                    <i class="fas fa-calendar-alt mr-1"></i>
                    Date début
                </label>
                <input type="date"
                       name="date_from"
                       id="date_from"
                       value="{{ dateFrom }}"
                       class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
            </div>

            {# Date To #}
            <div>
                <label for="date_to" class="block text-sm font-medium text-gray-700 mb-1">
                    <i class="fas fa-calendar-alt mr-1"></i>
                    Date fin
                </label>
                <input type="date"
                       name="date_to"
                       id="date_to"
                       value="{{ dateTo }}"
                       class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
            </div>

            {# Uploader Filter #}
            {% if uploaders is not empty %}
                <div>
                    <label for="uploader" class="block text-sm font-medium text-gray-700 mb-1">
                        <i class="fas fa-user mr-1"></i>
                        Téléversé par
                    </label>
                    <select name="uploader"
                            id="uploader"
                            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                        <option value="">Tous les utilisateurs</option>
                        {% for uploader in uploaders %}
                            <option value="{{ uploader.userId }}" {{ selectedUploader == uploader.userId ? 'selected' : '' }}>
                                {{ uploader.firstName }} {{ uploader.lastName }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
            {% endif %}

            {# Sort By #}
            <div>
                <label for="sort" class="block text-sm font-medium text-gray-700 mb-1">
                    <i class="fas fa-sort mr-1"></i>
                    Trier par
                </label>
                <select name="sort"
                        id="sort"
                        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                    <option value="date_desc" {{ sortBy == 'date_desc' ? 'selected' : '' }}>Date (plus récent)</option>
                    <option value="date_asc" {{ sortBy == 'date_asc' ? 'selected' : '' }}>Date (plus ancien)</option>
                    <option value="name_asc" {{ sortBy == 'name_asc' ? 'selected' : '' }}>Nom (A-Z)</option>
                    <option value="name_desc" {{ sortBy == 'name_desc' ? 'selected' : '' }}>Nom (Z-A)</option>
                    <option value="size_asc" {{ sortBy == 'size_asc' ? 'selected' : '' }}>Taille (petit → grand)</option>
                    <option value="size_desc" {{ sortBy == 'size_desc' ? 'selected' : '' }}>Taille (grand → petit)</option>
                    <option value="expiration_asc" {{ sortBy == 'expiration_asc' ? 'selected' : '' }}>Expiration (plus proche)</option>
                    <option value="expiration_desc" {{ sortBy == 'expiration_desc' ? 'selected' : '' }}>Expiration (plus loin)</option>
                </select>
            </div>

            {# Hidden inputs to preserve other filters #}
            <input type="hidden" name="category" value="{{ selectedCategory }}">
            <input type="hidden" name="tag" value="{{ selectedTag }}">
            <input type="hidden" name="view" value="{{ viewMode }}">

            {# Submit Button #}
            <div class="col-span-full flex items-end justify-end gap-3">
                <button type="submit"
                        class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm 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 transition-all">
                    <i class="fas fa-search mr-2"></i>
                    Appliquer les filtres
                </button>
            </div>
        </form>
    </div>

    {# Filtres par catégorie #}
    {% if categories is not empty %}
        <div class="mb-6 bg-white shadow rounded-lg p-4">
            <div class="flex items-center gap-2 flex-wrap">
                <span class="text-sm font-medium text-gray-700">Filtrer par catégorie :</span>
                <a href="{{ path('admin_companies_documents', {id: company.id}) }}"
                   class="inline-flex items-center px-3 py-1.5 rounded-md text-sm font-medium transition-colors
                          {% if selectedCategory is empty %}bg-indigo-100 text-indigo-700{% else %}bg-gray-100 text-gray-700 hover:bg-gray-200{% endif %}">
                    <i class="fas fa-th mr-1.5"></i>
                    Toutes
                </a>
                {% for category in categories %}
                    <a href="{{ path('admin_companies_documents', {id: company.id, category: category.id}) }}"
                       class="inline-flex items-center px-3 py-1.5 rounded-md text-sm font-medium transition-colors
                              {% if selectedCategory == category.id %}{{ category.badgeColorClass }}{% else %}bg-gray-100 text-gray-700 hover:bg-gray-200{% endif %}">
                        <i class="fas {{ category.icon }} mr-1.5"></i>
                        {{ category.name }}
                    </a>
                {% endfor %}
                <a href="{{ path('admin_companies_documents', {id: company.id, category: 'none'}) }}"
                   class="inline-flex items-center px-3 py-1.5 rounded-md text-sm font-medium transition-colors
                          {% if selectedCategory == 'none' %}bg-gray-600 text-white{% else %}bg-gray-100 text-gray-700 hover:bg-gray-200{% endif %}">
                    <i class="fas fa-ban mr-1.5"></i>
                    Sans catégorie
                </a>
            </div>
        </div>
    {% endif %}

    {# Filtres par tags #}
    {% if allTags is defined and allTags is not empty %}
        <div class="mb-6 bg-white shadow rounded-lg p-4">
            <div class="flex items-center gap-2 flex-wrap">
                <span class="text-sm font-medium text-gray-700">
                    <i class="fas fa-tags mr-1"></i>
                    Filtrer par tag :
                </span>
                <a href="{{ path('admin_companies_documents', {id: company.id}) }}"
                   class="inline-flex items-center px-3 py-1.5 rounded-md text-sm font-medium transition-colors
                          {% if selectedTag is empty %}bg-indigo-100 text-indigo-700{% else %}bg-gray-100 text-gray-700 hover:bg-gray-200{% endif %}">
                    <i class="fas fa-th mr-1.5"></i>
                    Tous les tags
                </a>
                {% for tag in allTags %}
                    <a href="{{ path('admin_companies_documents', {id: company.id, tag: tag.id}) }}"
                       class="inline-flex items-center px-3 py-1.5 rounded-md text-sm font-medium transition-colors
                              {% if selectedTag == tag.id %}{{ tag.badgeColorClass }}{% else %}bg-gray-100 text-gray-700 hover:bg-gray-200{% endif %}">
                        {% if tag.icon %}
                            <i class="fas {{ tag.icon }} mr-1.5"></i>
                        {% endif %}
                        {{ tag.name }}
                    </a>
                {% endfor %}
                <button type="button"
                        onclick="document.getElementById('manageTagsModal').classList.remove('hidden')"
                        class="inline-flex items-center px-3 py-1.5 rounded-md text-sm font-medium transition-colors bg-gray-200 text-gray-800 hover:bg-gray-300">
                    <i class="fas fa-cog mr-1.5"></i>
                    Gérer les tags
                </button>
            </div>
        </div>
    {% endif %}

    {# Windows Explorer Interface - Folder Navigation #}
    <div class="explorer-container">
        {# Backdrop for mobile #}
        <div class="sidebar-backdrop" id="sidebar-backdrop" onclick="toggleSidebar(false)"></div>

        {# Left Panel - Folder Tree #}
        <div class="explorer-sidebar" id="folder-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> Dossiers
                    </h3>
                    <button type="button" id="btn-toggle-sidebar-close" class="lg:hidden text-gray-500 hover:text-gray-700" title="Masquer" onclick="toggleSidebar(false)">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="relative mb-2">
                    <input type="text" id="tree-search" placeholder="Rechercher un dossier..."
                        class="w-full px-3 py-2 pr-8 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 text-xs"></i>
                </div>
            </div>
            <div id="folder-tree"></div>
        </div>

        {# Right Panel - Documents in Current Folder #}
        <div class="explorer-main">
            {# Toolbar #}
            <div class="explorer-toolbar">
                <button type="button" id="btn-show-sidebar" class="lg:hidden 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" onclick="toggleSidebar(true)">
                    <i class="fas fa-bars mr-2"></i>
                    Dossiers
                </button>
                {% if not company.deletedAt %}
                    <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">
                        <i class="fas fa-folder-plus mr-1"></i>
                        <span class="hidden sm:inline">Nouveau dossier</span>
                        <span class="sm:hidden">Nouveau</span>
                    </button>
                    <button type="button" id="btn-copy" class="inline-flex items-center px-2 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"></i>
                        <span class="hidden md:inline ml-1">Copier</span>
                    </button>
                    <button type="button" id="btn-cut" class="inline-flex items-center px-2 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"></i>
                        <span class="hidden md:inline ml-1">Couper</span>
                    </button>
                    <button type="button" id="btn-paste" class="inline-flex items-center px-2 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"></i>
                        <span class="hidden md:inline ml-1">Coller</span>
                    </button>
                    <button type="button" id="btn-delete" class="inline-flex items-center px-2 py-2 border border-gray-300 text-sm font-medium rounded-md text-red-600 bg-white hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                        <i class="fas fa-trash"></i>
                        <span class="hidden md:inline ml-1">Supprimer</span>
                    </button>
                    {% if is_granted('ROLE_ADMIN') %}
                        <button type="button" id="btn-restore" class="inline-flex items-center px-2 py-2 border border-gray-300 text-sm font-medium rounded-md text-green-600 bg-white hover:bg-green-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                            <i class="fas fa-undo"></i>
                            <span class="hidden md:inline ml-1">Restaurer</span>
                        </button>
                    {% endif %}
                {% endif %}
                <div class="ml-auto flex items-center gap-2">
                    <span class="text-xs sm:text-sm text-gray-600" id="folder-selection-count">Aucune sélection</span>
                </div>
            </div>

            {# Breadcrumb #}
            <div class="explorer-breadcrumb">
                <button type="button" id="btn-go-up" class="text-gray-500 hover:text-indigo-600 disabled:opacity-50 disabled:cursor-not-allowed" 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="javascript:void(0)" class="breadcrumb-item text-sm text-gray-700 hover:text-indigo-600 font-medium" data-folder-id="root" onclick="navigateToFolder('root')">
                        <i class="fas fa-home mr-1"></i>Tous les documents
                    </a>
                </div>
            </div>

            {# Documents Content Area #}
            <div class="explorer-content">

    {# View Mode Toggle + Stats - Desktop Only #}
    <div class="hidden lg:flex items-center justify-between mb-6">
        <div class="text-sm text-gray-600">
            <span class="font-medium">{{ mediaList|length }}</span> document(s) trouvé(s)
        </div>

        <div class="flex items-center space-x-2">
            <span class="text-sm font-medium text-gray-700 mr-2">Affichage:</span>
            <a href="{{ path('admin_companies_documents', app.request.query.all|merge({'id': company.id, 'view': 'table'})) }}"
               class="inline-flex items-center px-3 py-2 border {{ viewMode == 'table' ? 'border-indigo-600 text-indigo-600 bg-indigo-50' : 'border-gray-300 text-gray-700 bg-white hover:bg-gray-50' }} text-sm font-medium rounded-l-md transition-colors duration-150">
                <i class="fas fa-table mr-1.5"></i>
                Tableau
            </a>
            <a href="{{ path('admin_companies_documents', app.request.query.all|merge({'id': company.id, 'view': 'grid'})) }}"
               class="inline-flex items-center px-3 py-2 border {{ viewMode == 'grid' ? 'border-indigo-600 text-indigo-600 bg-indigo-50' : 'border-gray-300 text-gray-700 bg-white hover:bg-gray-50' }} text-sm font-medium rounded-r-md transition-colors duration-150">
                <i class="fas fa-th-large mr-1.5"></i>
                Grille
            </a>
        </div>
    </div>

    {# Desktop Table View #}
    {% if viewMode == 'table' %}
    <div class="hidden lg:block bg-white shadow rounded-lg overflow-hidden">
        {% if mediaList is empty %}
            {# Empty State #}
            <div class="p-12 text-center text-gray-500">
                <div class="flex flex-col items-center justify-center">
                    <i class="fas fa-file-alt text-4xl text-gray-300 mb-3"></i>
                    <p class="font-medium text-lg">Aucun document disponible</p>
                    <p class="text-gray-400 mt-1">
                        {% if selectedCategory %}
                            Aucun document dans cette catégorie
                        {% else %}
                            Commencez par téléverser un document pour cette entreprise
                        {% endif %}
                    </p>
                    {% if not company.deletedAt %}
                        <div class="mt-6">
                            <button type="button"
                                    onclick="document.getElementById('uploadModal').classList.remove('hidden')"
                                    class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                                <i class="fas fa-upload mr-2"></i>
                                Téléverser un document
                            </button>
                        </div>
                    {% endif %}
                </div>
            </div>
        {% else %}
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Fichier
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Catégorie
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Tags
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Expiration
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Type
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Taille
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Téléversé par
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Date
                            </th>
                            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Actions
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for media in mediaList %}
                            <tr class="hover:bg-gray-50 transition-colors duration-150">
                                {# Fichier Info #}
                                <td class="px-6 py-4">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center bg-gray-100 rounded">
                                            {% if media.category == 'image' %}
                                                <img src="{{ path(media_download_route(), {id: media.id}) }}"
                                                     alt="{{ media.originalFileName }}"
                                                     class="h-10 w-10 rounded object-cover"
                                                     onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                                                <i class="fas fa-image text-2xl text-gray-600" style="display:none;"></i>
                                            {% else %}
                                                <i class="fas fa-{{ media.category == 'video' ? 'video' : (media.category == 'document' ? 'file-pdf' : 'file') }} text-2xl text-gray-600"></i>
                                            {% endif %}
                                        </div>
                                        <div class="ml-4">
                                            <div class="text-sm font-medium text-gray-900 truncate max-w-[200px]" title="{{ media.originalFileName }}">
                                                {{ media.originalFileName }}
                                            </div>
                                            <div class="text-xs text-gray-500 truncate">
                                                {{ media.mimeType }}
                                            </div>
                                        </div>
                                    </div>
                                </td>

                                {# Catégorie #}
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {% if media.documentCategory %}
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ media.documentCategory.badgeColorClass }}">
                                            <i class="fas {{ media.documentCategory.icon }} mr-1"></i>
                                            {{ media.documentCategory.name }}
                                        </span>
                                    {% else %}
                                        <span class="text-sm text-gray-400 italic">Sans catégorie</span>
                                    {% endif %}
                                </td>

                                {# Tags #}
                                <td class="px-6 py-4">
                                    {% if media.tags is not empty %}
                                        <div class="flex flex-wrap gap-1">
                                            {% for tag in media.tags %}
                                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {{ tag.badgeColorClass }}">
                                                    {% if tag.icon %}
                                                        <i class="fas {{ tag.icon }} mr-1"></i>
                                                    {% endif %}
                                                    {{ tag.name }}
                                                </span>
                                            {% endfor %}
                                        </div>
                                    {% else %}
                                        <button type="button"
                                                onclick="openAddTagsModal({{ media.id }})"
                                                class="text-xs text-gray-400 hover:text-indigo-600 transition-colors">
                                            <i class="fas fa-plus-circle mr-1"></i>
                                            Ajouter tags
                                        </button>
                                    {% endif %}
                                </td>

                                {# Expiration #}
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {% if media.expiresAt %}
                                        {% set now = 'now'|date('U') %}
                                        {% set expirationDate = media.expiresAt|date('U') %}
                                        {% set daysLeft = ((expirationDate - now) / 86400)|round(0, 'floor') %}

                                        {% if daysLeft < 0 %}
                                            {# Expiré #}
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                                <i class="fas fa-exclamation-circle mr-1"></i>
                                                Expiré
                                            </span>
                                        {% elseif daysLeft <= 7 %}
                                            {# Expire bientôt #}
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                                <i class="fas fa-clock mr-1"></i>
                                                {{ daysLeft }}j restant{{ daysLeft > 1 ? 's' : '' }}
                                            </span>
                                        {% elseif daysLeft <= 30 %}
                                            {# OK mais dans moins d'un mois #}
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                                <i class="fas fa-info-circle mr-1"></i>
                                                {{ daysLeft }}j restants
                                            </span>
                                        {% else %}
                                            {# Tout va bien #}
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                <i class="fas fa-check-circle mr-1"></i>
                                                {{ media.expiresAt|date('d/m/Y') }}
                                            </span>
                                        {% endif %}
                                    {% else %}
                                        <span class="text-sm text-gray-400 italic">Aucune</span>
                                    {% endif %}
                                </td>

                                {# Type #}
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">
                                        {{ media.category|upper }}
                                    </span>
                                </td>

                                {# Taille #}
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                    {{ media.formattedFileSize }}
                                </td>

                                {# Téléversé par #}
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-8 w-8">
                                            <img class="h-8 w-8 rounded-full" src="{{ media.uploadedBy.profilePhoto|profile_picture_url }}" alt="{{ media.uploadedBy.fullName }}">
                                        </div>
                                        <div class="ml-3">
                                            <div class="text-sm font-medium text-gray-900">
                                                {{ media.uploadedBy.fullName }}
                                            </div>
                                        </div>
                                    </div>
                                </td>

                                {# Date #}
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ media.createdAt|date('d/m/Y H:i') }}
                                </td>

                                {# Actions #}
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <div class="flex items-center justify-end gap-1">
                                        {# Edit #}
                                        {% if not company.deletedAt %}
                                            <button type="button"
                                                    onclick="openEditModal({{ media.id }})"
                                                    class="inline-flex items-center px-2 py-1 text-xs font-medium rounded text-indigo-600 hover:bg-indigo-50 transition-colors duration-150">
                                                <i class="fas fa-edit mr-1"></i>
                                                Éditer
                                            </button>
                                        {% endif %}

                                        {# Download #}
                                        <a href="{{ path(media_download_route(), {id: media.id}) }}"
                                           data-turbo="false"
                                           target="_blank"
                                           class="inline-flex items-center px-2 py-1 text-xs font-medium rounded text-blue-600 hover:bg-blue-50 transition-colors duration-150">
                                            <i class="fas fa-download mr-1"></i>
                                            Télécharger
                                        </a>

                                        {# View Details #}
                                        <a href="{{ path(media_show_route(), {id: media.id}) }}"
                                           class="inline-flex items-center px-2 py-1 text-xs font-medium rounded text-gray-600 hover:bg-gray-50 transition-colors duration-150">
                                            <i class="fas fa-eye mr-1"></i>
                                            Voir
                                        </a>

                                        {# Delete (Admin only) #}
                                        {% if is_granted('ROLE_ADMIN') and not company.deletedAt %}
                                            <form method="post" action="{{ path('admin_media_delete', {id: media.id}) }}" class="inline">
                                                <input type="hidden" name="_token" value="{{ csrf_token('delete_media_' ~ media.id) }}">
                                                <button type="submit"
                                                        onclick="return confirm('Êtes-vous sûr de vouloir supprimer ce document ?');"
                                                        class="inline-flex items-center px-2 py-1 text-xs font-medium rounded text-red-600 hover:bg-red-50 transition-colors duration-150">
                                                    <i class="fas fa-trash mr-1"></i>
                                                    Supprimer
                                                </button>
                                            </form>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}
    </div>
    {% endif %}

    {# Desktop Grid View #}
    {% if viewMode == 'grid' %}
        <div class="hidden lg:block">
            {% if mediaList is empty %}
                <div class="bg-white shadow rounded-lg p-12 text-center text-gray-500">
                    <div class="flex flex-col items-center justify-center">
                        <i class="fas fa-file-alt text-4xl text-gray-300 mb-3"></i>
                        <p class="font-medium text-lg">Aucun document disponible</p>
                        <p class="text-gray-400 mt-1">
                            {% if selectedCategory %}
                                Aucun document dans cette catégorie
                            {% else %}
                                Commencez par téléverser un document pour cette entreprise
                            {% endif %}
                        </p>
                        {% if not company.deletedAt %}
                            <div class="mt-6">
                                <button type="button"
                                        onclick="document.getElementById('uploadModal').classList.remove('hidden')"
                                        class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                                    <i class="fas fa-upload mr-2"></i>
                                    Téléverser un document
                                </button>
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% else %}
                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                    {% for media in mediaList %}
                        {% include 'admin/companies/documents/_document_grid_card.html.twig' with {media: media, company: company} %}
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    {% endif %}

    {# Mobile Card View (Always visible on mobile) #}
    <div class="lg:hidden">
        {% if mediaList is empty %}
            <div class="bg-white shadow rounded-lg p-12 text-center text-gray-500">
                <div class="flex flex-col items-center justify-center">
                    <i class="fas fa-file-alt text-4xl text-gray-300 mb-3"></i>
                    <p class="font-medium text-lg">Aucun document disponible</p>
                    <p class="text-gray-400 mt-1">Commencez par téléverser un document</p>
                    {% if not company.deletedAt %}
                        <div class="mt-6">
                            <button type="button"
                                    onclick="document.getElementById('uploadModal').classList.remove('hidden')"
                                    class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                                <i class="fas fa-upload mr-2"></i>
                                Téléverser un document
                            </button>
                        </div>
                    {% endif %}
                </div>
            </div>
        {% else %}
            <div class="grid grid-cols-1 gap-4">
                {% for media in mediaList %}
                    {% include 'admin/companies/documents/_document_grid_card.html.twig' with {media: media, company: company} %}
                {% endfor %}
            </div>
        {% endif %}
    </div>

            </div> {# /.explorer-content #}
        </div> {# /.explorer-main #}
    </div> {# /.explorer-container #}

    {# Context Menu for Folders #}
    <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>
        <div class="context-menu-item" data-action="properties">
            <i class="fas fa-info-circle"></i>
            <span>Propriétés</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 danger" data-action="delete">
            <i class="fas fa-trash"></i>
            <span>Supprimer</span>
        </div>
        {% 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>

</div>

{# Upload Modal #}
<div id="uploadModal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" onclick="document.getElementById('uploadModal').classList.add('hidden')"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-indigo-600 px-4 py-3">
                <h3 class="text-lg leading-6 font-medium text-white" id="modal-title">
                    <i class="fas fa-upload mr-2"></i>
                    Téléverser un document
                </h3>
            </div>

            {{ form_start(uploadForm, {'action': path('admin_companies_documents_upload', {id: company.id}), 'attr': {'class': ''}}) }}
            <div class="bg-white px-4 pt-5 pb-4 sm:p-6">
                <div class="space-y-4">
                    {{ form_row(uploadForm.file) }}
                    {{ form_row(uploadForm.documentCategory) }}
                    {{ form_row(uploadForm.visibility) }}
                    {{ form_row(uploadForm.description) }}
                </div>
            </div>
            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-3">
                {{ form_row(uploadForm.submit) }}
                <button type="button"
                        onclick="document.getElementById('uploadModal').classList.add('hidden')"
                        class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:mt-0 sm:w-auto sm:text-sm">
                    Annuler
                </button>
            </div>
            {{ form_end(uploadForm) }}
        </div>
    </div>
</div>

{# Edit Document Modal #}
<div id="editDocumentModal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="edit-modal-title" role="dialog" aria-modal="true"
     data-controller="document-edit">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"
             onclick="document.getElementById('editDocumentModal').classList.add('hidden')"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
            <div class="bg-indigo-600 px-4 py-3 flex items-center justify-between">
                <h3 class="text-lg leading-6 font-medium text-white" id="edit-modal-title">
                    <i class="fas fa-edit mr-2"></i>
                    Éditer le document
                </h3>
                <button type="button"
                        onclick="document.getElementById('editDocumentModal').classList.add('hidden')"
                        class="text-white hover:text-gray-200 transition-colors">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>

            <div class="bg-white px-4 pt-5 pb-4 sm:p-6">
                <div id="editDocumentContent" class="space-y-4">
                    {# Content will be loaded dynamically via AJAX #}
                    <div class="text-center py-8">
                        <i class="fas fa-spinner fa-spin text-4xl text-gray-400"></i>
                        <p class="mt-2 text-gray-500">Chargement...</p>
                    </div>
                </div>
            </div>

            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-3">
                <button type="button"
                        data-action="click->document-edit#save"
                        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 sm:w-auto sm:text-sm">
                    <i class="fas fa-save mr-2"></i>
                    Enregistrer
                </button>
                <button type="button"
                        onclick="document.getElementById('editDocumentModal').classList.add('hidden')"
                        class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:mt-0 sm:w-auto sm:text-sm">
                    Annuler
                </button>
            </div>
        </div>
    </div>
</div>

{# Manage Tags Modal #}
<div id="manageTagsModal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="tags-modal-title" role="dialog" aria-modal="true"
     data-controller="tag-manager">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"
             onclick="document.getElementById('manageTagsModal').classList.add('hidden')"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full">
            <div class="bg-indigo-600 px-4 py-3 flex items-center justify-between">
                <h3 class="text-lg leading-6 font-medium text-white" id="tags-modal-title">
                    <i class="fas fa-tags mr-2"></i>
                    Gérer les tags
                </h3>
                <button type="button"
                        onclick="document.getElementById('manageTagsModal').classList.add('hidden')"
                        class="text-white hover:text-gray-200 transition-colors">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>

            <div class="bg-white px-4 pt-5 pb-4 sm:p-6">
                {# Create New Tag Form #}
                <div class="mb-6 pb-6 border-b border-gray-200">
                    <h4 class="text-sm font-medium text-gray-900 mb-4">
                        <i class="fas fa-plus-circle mr-2"></i>
                        Créer un nouveau tag
                    </h4>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="md:col-span-2">
                            <input type="text"
                                   data-tag-manager-target="newTagName"
                                   placeholder="Nom du tag"
                                   class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                        </div>
                        <div>
                            <select data-tag-manager-target="newTagColor"
                                    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                <option value="blue">Bleu</option>
                                <option value="green">Vert</option>
                                <option value="red">Rouge</option>
                                <option value="yellow">Jaune</option>
                                <option value="purple">Violet</option>
                                <option value="pink">Rose</option>
                                <option value="indigo">Indigo</option>
                                <option value="orange">Orange</option>
                                <option value="teal">Teal</option>
                                <option value="gray">Gris</option>
                            </select>
                        </div>
                    </div>
                    <button type="button"
                            data-action="click->tag-manager#createTag"
                            data-tag-manager-target="createButton"
                            class="mt-3 inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all">
                        <i class="fas fa-plus mr-2" data-tag-manager-target="createIcon"></i>
                        <i class="fas fa-spinner fa-spin mr-2 hidden" data-tag-manager-target="createSpinner"></i>
                        <span data-tag-manager-target="createText">Créer le tag</span>
                    </button>
                </div>

                {# Existing Tags List #}
                <div>
                    <h4 class="text-sm font-medium text-gray-900 mb-4">
                        <i class="fas fa-list mr-2"></i>
                        Tags existants
                    </h4>
                    <div id="tagsList" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                        {# Tags will be loaded dynamically #}
                        <div class="col-span-full text-center py-8">
                            <i class="fas fa-spinner fa-spin text-4xl text-gray-400"></i>
                            <p class="mt-2 text-gray-500">Chargement des tags...</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button type="button"
                        onclick="document.getElementById('manageTagsModal').classList.add('hidden'); location.reload();"
                        class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:w-auto sm:text-sm">
                    Fermer
                </button>
            </div>
        </div>
    </div>
</div>

{# Add Tags Quick Modal #}
<div id="addTagsModal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="add-tags-modal-title" role="dialog" aria-modal="true"
     data-controller="document-actions">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"
             onclick="document.getElementById('addTagsModal').classList.add('hidden')"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-indigo-600 px-4 py-3 flex items-center justify-between">
                <h3 class="text-lg leading-6 font-medium text-white" id="add-tags-modal-title">
                    <i class="fas fa-tag mr-2"></i>
                    Ajouter des tags
                </h3>
                <button type="button"
                        onclick="document.getElementById('addTagsModal').classList.add('hidden')"
                        class="text-white hover:text-gray-200 transition-colors">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>

            <div class="bg-white px-4 pt-5 pb-4 sm:p-6">
                <div id="addTagsContent" class="space-y-4">
                    {# Content will be loaded dynamically #}
                    <div class="text-center py-8">
                        <i class="fas fa-spinner fa-spin text-4xl text-gray-400"></i>
                        <p class="mt-2 text-gray-500">Chargement...</p>
                    </div>
                </div>
            </div>

            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-3">
                <button type="button"
                        data-action="click->document-actions#saveTags"
                        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 sm:w-auto sm:text-sm">
                    <i class="fas fa-save mr-2"></i>
                    Enregistrer
                </button>
                <button type="button"
                        onclick="document.getElementById('addTagsModal').classList.add('hidden')"
                        class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:mt-0 sm:w-auto sm:text-sm">
                    Annuler
                </button>
            </div>
        </div>
    </div>
</div>

{# Folder Management Modals #}
{% 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' %}

<script>
    // Global functions for opening modals
    function openEditModal(mediaId) {
        const modal = document.getElementById('editDocumentModal');
        modal.classList.remove('hidden');
        // Load edit form via AJAX (will be handled by Stimulus controller)
        const event = new CustomEvent('load-edit-form', { detail: { mediaId: mediaId } });
        modal.dispatchEvent(event);
    }

    function openAddTagsModal(mediaId) {
        const modal = document.getElementById('addTagsModal');
        modal.classList.remove('hidden');
        // Load tags selection via AJAX (will be handled by Stimulus controller)
        const event = new CustomEvent('load-tags-form', { detail: { mediaId: mediaId } });
        modal.dispatchEvent(event);
    }

    // Tag Manager - Prevention of multiple clicks with animations
    document.addEventListener('DOMContentLoaded', function() {
        const manageTagsModal = document.getElementById('manageTagsModal');
        if (!manageTagsModal) return;

        const createButton = manageTagsModal.querySelector('[data-tag-manager-target="createButton"]');
        const createIcon = manageTagsModal.querySelector('[data-tag-manager-target="createIcon"]');
        const createSpinner = manageTagsModal.querySelector('[data-tag-manager-target="createSpinner"]');
        const createText = manageTagsModal.querySelector('[data-tag-manager-target="createText"]');
        const newTagName = manageTagsModal.querySelector('[data-tag-manager-target="newTagName"]');
        const newTagColor = manageTagsModal.querySelector('[data-tag-manager-target="newTagColor"]');

        // Disable button with loading animation
        function disableCreateButton() {
            if (createButton) {
                createButton.disabled = true;
                if (createIcon) createIcon.classList.add('hidden');
                if (createSpinner) createSpinner.classList.remove('hidden');
                if (createText) createText.textContent = 'Création...';
            }
        }

        // Enable button and reset
        function enableCreateButton() {
            if (createButton) {
                createButton.disabled = false;
                if (createIcon) createIcon.classList.remove('hidden');
                if (createSpinner) createSpinner.classList.add('hidden');
                if (createText) createText.textContent = 'Créer le tag';
            }
        }

        // Create tag handler (if data-action is used, this will be called)
        if (createButton) {
            createButton.addEventListener('click', function(e) {
                if (createButton.disabled) return; // Prevent multiple clicks

                const tagName = newTagName?.value?.trim();
                const tagColor = newTagColor?.value || 'blue';

                if (!tagName) {
                    alert('Le nom du tag est requis');
                    return;
                }

                disableCreateButton();

                // AJAX request to create tag
                fetch('{{ path('admin_companies_tags_create', {id: company.id})|e('js') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: JSON.stringify({
                        name: tagName,
                        color: tagColor
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Success - reload tags list
                        if (newTagName) newTagName.value = '';
                        loadTags(); // Reload tags list
                    } else {
                        alert(data.message || 'Erreur lors de la création du tag');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Une erreur est survenue');
                })
                .finally(() => {
                    enableCreateButton();
                });
            });
        }

        // Load tags function
        function loadTags() {
            const tagsList = document.getElementById('tagsList');
            if (!tagsList) return;

            tagsList.innerHTML = '<div class="col-span-full text-center py-8"><i class="fas fa-spinner fa-spin text-4xl text-gray-400"></i><p class="mt-2 text-gray-500">Chargement des tags...</p></div>';

            fetch('{{ path('admin_companies_tags', {id: company.id})|e('js') }}', {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(tags => {
                if (tags.length === 0) {
                    tagsList.innerHTML = '<div class="col-span-full text-center py-8 text-gray-500">Aucun tag créé</div>';
                } else {
                    tagsList.innerHTML = tags.map(tag => `
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-200">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-${tag.color}-100 text-${tag.color}-800">
                                ${tag.icon ? '<i class="fas ' + tag.icon + ' mr-1"></i>' : ''}
                                ${tag.name}
                                <span class="ml-1 text-xs opacity-75">(${tag.mediaCount})</span>
                            </span>
                            <div class="flex items-center gap-2">
                                <button type="button"
                                        onclick="toggleTag(${tag.id}, this)"
                                        class="text-xs px-2 py-1 rounded ${tag.isActive ? 'text-green-600 hover:bg-green-50' : 'text-gray-400 hover:bg-gray-100'} transition-colors disabled:opacity-50">
                                    <i class="fas ${tag.isActive ? 'fa-toggle-on' : 'fa-toggle-off'}"></i>
                                </button>
                                <button type="button"
                                        onclick="deleteTag(${tag.id}, this)"
                                        class="text-xs px-2 py-1 rounded text-red-600 hover:bg-red-50 transition-colors disabled:opacity-50">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    `).join('');
                }
            })
            .catch(error => {
                console.error('Error loading tags:', error);
                tagsList.innerHTML = '<div class="col-span-full text-center py-8 text-red-500">Erreur lors du chargement</div>';
            });
        }

        // Load tags when modal opens
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (!manageTagsModal.classList.contains('hidden')) {
                    loadTags();
                }
            });
        });
        observer.observe(manageTagsModal, { attributes: true, attributeFilter: ['class'] });
    });

    // Toggle tag (with button disable during request)
    function toggleTag(tagId, button) {
        if (button.disabled) return;
        button.disabled = true;
        const originalHTML = button.innerHTML;
        button.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';

        fetch('{{ path('admin_companies_tags_toggle', {companyId: company.id, tagId: '__TAG_ID__'})|e('js') }}'.replace('__TAG_ID__', tagId), {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Reload tags list
                const tagsList = document.getElementById('tagsList');
                const loadEvent = new Event('reload-tags');
                document.dispatchEvent(loadEvent);
                location.reload(); // Simple reload for now
            } else {
                alert(data.message || 'Erreur');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Une erreur est survenue');
        })
        .finally(() => {
            button.disabled = false;
            button.innerHTML = originalHTML;
        });
    }

    // Delete tag (with button disable during request)
    function deleteTag(tagId, button) {
        if (button.disabled) return;
        if (!confirm('Êtes-vous sûr de vouloir supprimer ce tag ?')) return;

        button.disabled = true;
        const originalHTML = button.innerHTML;
        button.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';

        fetch('{{ path('admin_companies_tags_delete', {companyId: company.id, tagId: '__TAG_ID__'})|e('js') }}'.replace('__TAG_ID__', tagId), {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload(); // Simple reload for now
            } else {
                alert(data.message || 'Erreur');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Une erreur est survenue');
        })
        .finally(() => {
            button.disabled = false;
            button.innerHTML = originalHTML;
        });
    }

    // ============================================================================
    // FOLDER EXPLORER JAVASCRIPT - Hierarchical Category Navigation
    // ============================================================================

    // Global state for folder explorer
    window.folderExplorer = {
        companyId: {{ company.id }},
        currentFolderId: {{ selectedCategory ? "'" ~ selectedCategory ~ "'" : 'null' }},
        selectedFolders: new Set(),
        clipboard: null, // {action: 'copy'|'cut', folders: []}
        treeData: [],
        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') }}'
        }
    };

    // Mobile sidebar toggle
    function toggleSidebar(show) {
        const sidebar = document.getElementById('folder-sidebar');
        const backdrop = document.getElementById('sidebar-backdrop');
        if (show) {
            sidebar?.classList.add('show');
            backdrop?.classList.add('show');
        } else {
            sidebar?.classList.remove('show');
            backdrop?.classList.remove('show');
        }
    }

    // Initialize on DOM ready
    document.addEventListener('DOMContentLoaded', function() {
        // jQuery and JSTree are loaded via Webpack (see bootstrap-webpack.js)
        if (typeof $ !== 'undefined' && typeof $.jstree !== 'undefined') {
            console.log('Initializing folder explorer with jQuery and JSTree from npm packages');
            initializeFolderTree();
            initializeToolbar();
            initializeContextMenu();
            loadTreeData();
        } else {
            console.error('jQuery or JSTree not loaded. Please check bootstrap-webpack.js');
        }
    });

    // Initialize JSTree
    function initializeFolderTree() {
        $('#folder-tree').jstree({
            'core': {
                'data': [],
                'check_callback': true,
                'themes': {
                    'name': 'default',
                    'dots': true,
                    'icons': true
                }
            },
            'plugins': ['search', 'contextmenu'],
            'search': {
                'show_only_matches': true,
                'show_only_matches_children': true
            },
            'contextmenu': {
                'items': function(node) {
                    return {
                        'open': {
                            'label': 'Ouvrir',
                            'icon': 'fas fa-folder-open',
                            'action': function() {
                                navigateToFolder(node.id);
                            }
                        },
                        'properties': {
                            'label': 'Propriétés',
                            'icon': 'fas fa-info-circle',
                            'action': function() {
                                showPropertiesModal(node.id);
                            }
                        },
                        'separator1': { 'separator_before': true },
                        'copy': {
                            'label': 'Copier',
                            'icon': 'fas fa-copy',
                            'action': function() {
                                copyToClipboard([node.id]);
                            }
                        },
                        'cut': {
                            'label': 'Couper',
                            'icon': 'fas fa-cut',
                            'action': function() {
                                cutToClipboard([node.id]);
                            }
                        },
                        'paste': {
                            'label': 'Coller',
                            'icon': 'fas fa-paste',
                            '_disabled': !window.folderExplorer.clipboard,
                            'action': function() {
                                pasteFromClipboard(node.id);
                            }
                        },
                        'separator2': { 'separator_before': true },
                        'delete': {
                            'label': 'Supprimer',
                            'icon': 'fas fa-trash',
                            'action': function() {
                                deleteSelection([node.id]);
                            }
                        }
                    };
                }
            }
        });

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

        // Search
        let searchTimeout = null;
        $('#tree-search').on('input', function() {
            clearTimeout(searchTimeout);
            const searchValue = $(this).val();
            searchTimeout = setTimeout(function() {
                $('#folder-tree').jstree('search', searchValue);
            }, 300);
        });
    }

    // Load tree data from API
    function loadTreeData() {
        fetch(window.folderExplorer.urls.treeData)
            .then(response => response.json())
            .then(data => {
                // Handle different response formats
                let categories = data;
                if (data && typeof data === 'object' && !Array.isArray(data)) {
                    // If response is {data: [...]} or similar
                    categories = data.data || data.categories || data.tree || [];
                }

                // Ensure it's an array
                if (!Array.isArray(categories)) {
                    console.error('Invalid tree data format:', data);
                    categories = [];
                }

                window.folderExplorer.treeData = categories;
                const jsTreeData = buildJSTreeData(categories);
                $('#folder-tree').jstree(true).settings.core.data = jsTreeData;
                $('#folder-tree').jstree(true).refresh();

                // Select current folder if any
                if (window.folderExplorer.currentFolderId) {
                    setTimeout(() => {
                        $('#folder-tree').jstree('select_node', window.folderExplorer.currentFolderId);
                    }, 300);
                }
            })
            .catch(error => {
                console.error('Error loading tree data:', error);
                showNotification('Erreur lors du chargement de l\'arborescence', 'error');
            });
    }

    // Build JSTree data format
    function buildJSTreeData(categories) {
        return categories.map(cat => convertToJSTreeFormat(cat));
    }

    function convertToJSTreeFormat(category) {
        const node = {
            id: category.id.toString(),
            text: category.name + (category.media_count ? ` (${category.media_count})` : ''),
            icon: 'fas fa-folder text-blue-500',
            state: {
                opened: category.depth < 2
            },
            data: category
        };

        if (category.is_deleted) {
            node.icon = 'fas fa-folder text-red-500';
            node.text += ' [Supprimé]';
        }

        if (category.children && category.children.length > 0) {
            node.children = category.children.map(child => convertToJSTreeFormat(child));
        }

        return node;
    }

    // Navigate to folder - RELOAD PAGE with category filter
    function navigateToFolder(folderId) {
        window.folderExplorer.currentFolderId = folderId;
        updateBreadcrumb(folderId);

        // Reload page with category parameter
        const url = new URL(window.location.href);

        if (folderId === 'root' || folderId === null) {
            url.searchParams.delete('category');
        } else {
            url.searchParams.set('category', folderId);
        }

        // Preserve other query params (search, file_type, expiration, etc.)
        window.location.href = url.toString();
    }

    // Find folder by ID in tree data
    function findFolderById(folderId, categories) {
        if (!categories) categories = window.folderExplorer.treeData;

        for (let category of categories) {
            if (category.id.toString() === folderId.toString()) {
                return category;
            }
            if (category.children && category.children.length > 0) {
                const found = findFolderById(folderId, category.children);
                if (found) return found;
            }
        }
        return null;
    }

    // Update breadcrumb
    function updateBreadcrumb(folderId) {
        const breadcrumbPath = document.getElementById('breadcrumb-path');
        if (!breadcrumbPath) return;

        const btnGoUp = document.getElementById('btn-go-up');

        if (folderId === 'root' || folderId === null) {
            breadcrumbPath.innerHTML = `
                <a href="javascript:void(0)" class="breadcrumb-item text-sm text-gray-700 hover:text-indigo-600 font-medium" data-folder-id="root" onclick="navigateToFolder('root')">
                    <i class="fas fa-home mr-1"></i>Tous les documents
                </a>
            `;
            if (btnGoUp) btnGoUp.disabled = true;
            return;
        }

        const folder = findFolderById(folderId);
        if (!folder) return;

        const path = getPathToFolder(folder);
        let breadcrumbHTML = `
            <a href="javascript:void(0)" class="breadcrumb-item text-sm text-gray-700 hover:text-indigo-600" data-folder-id="root" onclick="navigateToFolder('root')">
                <i class="fas fa-home mr-1"></i>Racine
            </a>
        `;

        path.forEach((item, index) => {
            breadcrumbHTML += `<span class="breadcrumb-separator">/</span>`;
            const isLast = index === path.length - 1;
            breadcrumbHTML += `
                <a href="javascript:void(0)"
                   class="breadcrumb-item text-sm ${isLast ? 'text-indigo-600 font-medium' : 'text-gray-700 hover:text-indigo-600'}"
                   data-folder-id="${item.id}"
                   onclick="navigateToFolder('${item.id}')">
                    ${item.name}
                </a>
            `;
        });

        breadcrumbPath.innerHTML = breadcrumbHTML;

        // Enable "go up" button
        if (btnGoUp) {
            btnGoUp.disabled = false;
            btnGoUp.onclick = () => goToParent();
        }
    }

    // Get path to folder (array of parent folders)
    function getPathToFolder(folder) {
        const path = [folder];
        let current = folder;
        while (current.parent_id) {
            current = findFolderById(current.parent_id);
            if (current) path.unshift(current);
            else break;
        }
        return path;
    }

    // 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;
        const countEl = document.getElementById('folder-selection-count');

        if (countEl) {
            if (count === 0) {
                countEl.textContent = 'Aucune sélection';
            } else {
                countEl.textContent = `${count} dossier(s) sélectionné(s)`;
            }
        }

        // Enable/disable toolbar buttons
        const btnCopy = document.getElementById('btn-copy');
        const btnCut = document.getElementById('btn-cut');
        const btnDelete = document.getElementById('btn-delete');
        const btnRestore = document.getElementById('btn-restore');
        const btnPaste = document.getElementById('btn-paste');

        const hasSelection = count > 0;

        if (btnCopy) btnCopy.disabled = !hasSelection;
        if (btnCut) btnCut.disabled = !hasSelection;
        if (btnDelete) btnDelete.disabled = !hasSelection;
        if (btnRestore) btnRestore.disabled = !hasSelection;
        if (btnPaste) btnPaste.disabled = !window.folderExplorer.clipboard;
    }

    // Initialize toolbar buttons
    function initializeToolbar() {
        document.getElementById('btn-new-folder')?.addEventListener('click', () => {
            showNewFolderModal(window.folderExplorer.currentFolderId);
        });

        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);
        document.getElementById('btn-restore')?.addEventListener('click', restoreSelection);
    }

    // Clipboard operations
    function copyToClipboard(folderIds) {
        const folders = folderIds || Array.from(window.folderExplorer.selectedFolders);
        if (folders.length === 0) return;

        window.folderExplorer.clipboard = {
            action: 'copy',
            folders: folders
        };

        showNotification(`${folders.length} dossier(s) copié(s)`, 'info');
        updateSelectionUI();
    }

    function cutToClipboard(folderIds) {
        const folders = folderIds || Array.from(window.folderExplorer.selectedFolders);
        if (folders.length === 0) return;

        window.folderExplorer.clipboard = {
            action: 'cut',
            folders: folders
        };

        showNotification(`${folders.length} dossier(s) coupé(s)`, 'info');
        updateSelectionUI();
    }

    function pasteFromClipboard(destinationId) {
        if (!window.folderExplorer.clipboard) {
            showNotification('Presse-papiers vide', 'warning');
            return;
        }

        const { action, folders } = window.folderExplorer.clipboard;
        const destination = destinationId || window.folderExplorer.currentFolderId;

        if (action === 'copy') {
            // Copy operation - not yet implemented in this context
            showNotification('Fonction copier à venir', 'info');
        } else if (action === 'cut') {
            // Move operation
            const url = window.folderExplorer.urls.bulkMove;
            const formData = new FormData();
            folders.forEach(id => formData.append('categoryIds[]', id));
            formData.append('destinationId', destination || '');

            fetch(url, {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showNotification(data.message, 'success');
                    window.folderExplorer.clipboard = null;
                    loadTreeData();
                    clearSelection();
                } else {
                    showNotification(data.message, 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showNotification('Erreur lors du déplacement', 'error');
            });
        }
    }

    function deleteSelection(folderIds) {
        const folders = folderIds || Array.from(window.folderExplorer.selectedFolders);
        if (folders.length === 0) return;

        if (!confirm(`Êtes-vous sûr de vouloir supprimer ${folders.length} dossier(s) ?`)) {
            return;
        }

        const url = window.folderExplorer.urls.bulkDelete;
        const formData = new FormData();
        folders.forEach(id => formData.append('categoryIds[]', id));

        fetch(url, {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification(data.message, 'success');
                loadTreeData();
                clearSelection();
            } else {
                showNotification(data.message, 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('Erreur lors de la suppression', 'error');
        });
    }

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

        if (!confirm(`Êtes-vous sûr de vouloir restaurer ${folders.length} dossier(s) ?`)) {
            return;
        }

        const url = window.folderExplorer.urls.bulkRestore;
        const formData = new FormData();
        folders.forEach(id => formData.append('categoryIds[]', id));

        fetch(url, {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification(data.message, 'success');
                loadTreeData();
                clearSelection();
            } else {
                showNotification(data.message, 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('Erreur lors de la restauration', 'error');
        });
    }

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

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

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

        // Handle context menu item clicks
        contextMenu.querySelectorAll('.context-menu-item').forEach(item => {
            item.addEventListener('click', (e) => {
                e.stopPropagation();
                const action = item.getAttribute('data-action');
                if (!item.classList.contains('disabled')) {
                    handleContextMenuAction(action);
                }
                contextMenu.classList.remove('show');
            });
        });
    }

    function showContextMenu(x, y, folderId) {
        const contextMenu = document.getElementById('context-menu');
        if (!contextMenu) return;

        contextMenu.style.left = x + 'px';
        contextMenu.style.top = y + 'px';
        contextMenu.classList.add('show');
    }

    function handleContextMenuAction(action) {
        const selectedIds = Array.from(window.folderExplorer.selectedFolders);

        switch(action) {
            case 'open':
                if (selectedIds.length === 1) {
                    navigateToFolder(selectedIds[0]);
                }
                break;
            case 'properties':
                if (selectedIds.length === 1) {
                    showPropertiesModal(selectedIds[0]);
                }
                break;
            case 'copy':
                copyToClipboard();
                break;
            case 'cut':
                cutToClipboard();
                break;
            case 'paste':
                pasteFromClipboard();
                break;
            case 'delete':
                deleteSelection();
                break;
            case 'restore':
                restoreSelection();
                break;
        }
    }

    // Notification helper
    function showNotification(message, type = 'info') {
        // Use existing notification system or simple alert
        if (typeof window.showToast === 'function') {
            window.showToast(message, type);
        } else {
            console.log(`[${type.toUpperCase()}] ${message}`);
            // Could also create a simple toast element here
        }
    }

</script>
{% endblock %}