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

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

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('css/admin/document-explorer.css') }}" rel="stylesheet">
{% 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'
    } %}

    {# Page Header #}
    <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 and (is_granted('ROLE_ADMIN') or is_granted('ROLE_MANAGER')) %}
            <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>

    {# Expiration Alerts Component #}
    {% include 'admin/companies/documents/_expiration_alerts.html.twig' with {
        company: company,
        expiredCount: expiredCount,
        expiringSoonCount: expiringSoonCount,
        expiringMonthCount: expiringMonthCount
    } %}

    {# Filters Panel Component #}
    {% include 'admin/companies/documents/_filters_panel.html.twig' with {
        company: company,
        searchQuery: searchQuery,
        selectedFileType: selectedFileType,
        selectedExpiration: selectedExpiration,
        dateFrom: dateFrom,
        dateTo: dateTo,
        selectedUploader: selectedUploader,
        uploaders: uploaders,
        sortBy: sortBy,
        selectedCategory: selectedCategory,
        selectedTag: selectedTag,
        viewMode: viewMode
    } %}

    {# Category Filter Chips Component #}
    {% include 'admin/companies/documents/_category_chips.html.twig' with {
        company: company,
        categories: categories,
        selectedCategory: selectedCategory
    } %}

    {# Tag Filter Chips Component #}
    {% include 'admin/companies/documents/_tag_chips.html.twig' with {
        company: company,
        allTags: allTags,
        selectedTag: selectedTag
    } %}

    {# Windows Explorer Interface - Folder Navigation #}
    <div class="explorer-container"
         data-controller="folder-explorer"
         data-folder-explorer-company-id-value="{{ company.id }}"
         data-folder-explorer-current-folder-id-value="{{ selectedCategory ?? 'null' }}"
         data-folder-explorer-tree-data-value="[]">
        {# Backdrop for mobile #}
        <div class="sidebar-backdrop" id="sidebar-backdrop" onclick="toggleSidebar(false)"></div>

        {# Left Panel - Folder Tree Component #}
        {% include 'admin/companies/documents/_folder_sidebar.html.twig' %}

        {# Right Panel - Documents in Current Folder #}
        <div class="explorer-main">
            {# Toolbar + Breadcrumb Component #}
            {% include 'admin/companies/documents/_explorer_toolbar.html.twig' with {
                company: company
            } %}

            {# Documents Content Area #}
            <div class="explorer-content">
                {# Documents Table Component #}
                {% include 'admin/companies/documents/_documents_table.html.twig' with {
                    mediaList: mediaList,
                    company: company,
                    viewMode: viewMode,
                    selectedCategory: selectedCategory
                } %}

                {# Documents Grid Component #}
                {% include 'admin/companies/documents/_documents_grid.html.twig' with {
                    mediaList: mediaList,
                    company: company,
                    viewMode: viewMode,
                    selectedCategory: selectedCategory
                } %}
            </div>
        </div>
    </div>

    {# 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>
    </div>

</div>

{# Modals #}
{% include 'admin/companies/documents/modals/_upload.html.twig' with {
    company: company,
    uploadForm: uploadForm
} %}
{% include 'admin/companies/documents/modals/_edit_document.html.twig' %}
{% include 'admin/companies/documents/modals/_manage_tags.html.twig' %}
{% include 'admin/companies/documents/modals/_add_tags.html.twig' %}

{# Folder Management Modals #}
{% include 'admin/companies/categories/_modal_new_folder.html.twig' %}
{% include 'admin/companies/categories/_modal_properties.html.twig' %}
{% include 'admin/companies/categories/_modal_move.html.twig' %}

{# Document Bulk Action Modals #}
{% include 'admin/companies/documents/_modal_delete_confirm.html.twig' %}
{% include 'admin/companies/documents/_modal_move_folder.html.twig' %}
{% endblock %}