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

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

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

    {# 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>
                    <a href="{{ path('admin_companies_documents', {id: company.id}) }}" class="text-sm font-medium text-gray-700 hover:text-indigo-600">
                        Documents
                    </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">Upload</span>
                </div>
            </li>
        </ol>
    </nav>

    {# Header #}
    <div class="mb-6">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">
                    <i class="fas fa-cloud-upload-alt mr-2 text-indigo-600"></i>
                    Téléverser des documents
                </h1>
                <p class="mt-2 text-sm text-gray-600">
                    Téléversez plusieurs documents en même temps pour {{ company.name }}
                </p>
            </div>
            <a href="{{ path('admin_companies_documents', {id: company.id}) }}"
               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">
                <i class="fas fa-arrow-left mr-2"></i>
                Retour aux documents
            </a>
        </div>
    </div>

    {# Information Banner - Upload Limits #}
    <div class="mb-6 rounded-md bg-blue-50 p-4 border border-blue-200">
        <div class="flex">
            <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">
                    Informations de téléversement
                </h3>
                <div class="mt-2 text-sm text-blue-700">
                    <ul class="list-disc list-inside space-y-1">
                        <li><strong>Nombre de fichiers :</strong> Illimité</li>
                        <li><strong>Taille par fichier :</strong> Illimitée (attention aux fichiers très volumineux)</li>
                        <li><strong>Types de fichiers acceptés :</strong> PDF, Word, Excel, PowerPoint, Images (JPG, PNG, GIF), Archives (ZIP, RAR), Vidéos (MP4), Audio (MP3)</li>
                        <li><strong>Compression automatique :</strong> Les images de plus de 2 MB seront automatiquement compressées</li>
                        <li><strong>Traitement par lot :</strong> Les uploads multiples (>15 fichiers) sont traités par groupes de 15 pour une meilleure fiabilité et un suivi de progression précis</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    {# Drop Zone #}
    <div class="bg-white shadow rounded-lg mb-6">
        <div class="p-6">
            <div data-document-upload-target="dropzone"
                 class="border-2 border-dashed border-gray-300 rounded-lg p-12 text-center hover:border-indigo-500 transition-colors duration-200 cursor-pointer"
                 data-action="drop->document-upload#handleDrop dragover->document-upload#handleDragOver dragleave->document-upload#handleDragLeave click->document-upload#openFilePicker">

                <div class="flex flex-col items-center">
                    <i class="fas fa-cloud-upload-alt text-6xl text-gray-400 mb-4"></i>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">
                        Glissez et déposez vos fichiers ici
                    </h3>
                    <p class="text-sm text-gray-500 mb-4">
                        ou cliquez pour parcourir vos fichiers
                    </p>
                    <p class="text-xs text-gray-400">
                        PDF, Word, Excel, PowerPoint, Images, Archives (taille illimitée)
                    </p>
                </div>

                <input type="file"
                       multiple
                       data-document-upload-target="fileInput"
                       data-action="change->document-upload#handleFileSelect"
                       class="hidden"
                       accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.jpg,.jpeg,.png,.gif,.zip,.rar,.mp4,.mp3">
            </div>
        </div>
    </div>

    {# Selected Files List #}
    <div data-document-upload-target="fileListContainer" class="hidden bg-white shadow rounded-lg mb-6">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">
                Fichiers sélectionnés (<span data-document-upload-target="fileCount">0</span>)
            </h2>
        </div>
        <div class="p-6">
            <div data-document-upload-target="fileList" class="space-y-3">
                {# Files will be added here by JavaScript #}
            </div>
        </div>
    </div>

    {# Upload Options #}
    <div data-document-upload-target="optionsContainer" class="hidden bg-white shadow rounded-lg mb-6" data-controller="expiration-reminder">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">
                <i class="fas fa-cog mr-2"></i>
                Options d'upload
            </h2>
            <p class="text-sm text-gray-500 mt-1">Ces options seront appliquées à tous les fichiers sélectionnés</p>
        </div>
        <div class="p-6">
            <div class="space-y-6">
                {# Section 1: Informations de base #}
                <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                    <h3 class="text-sm font-semibold text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-info-circle mr-2 text-indigo-600"></i>
                        Informations générales
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {# Category Selection - Hierarchical #}
                        <div>
                            <label for="upload-category" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-folder-tree mr-1"></i>
                                Catégorie (dossier de destination)
                            </label>
                            <select id="upload-category"
                                    data-document-upload-target="categorySelect"
                                    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm">
                                <option value="">📁 Sans catégorie (racine)</option>
                            </select>
                            <p class="mt-1 text-xs text-gray-500">
                                <i class="fas fa-info-circle mr-1"></i>
                                Les documents seront placés dans le dossier sélectionné
                            </p>
                        </div>

                        {# Visibility Selection #}
                        <div>
                            <label for="upload-visibility" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-eye mr-1"></i>
                                Visibilité
                            </label>
                            <select id="upload-visibility"
                                    data-document-upload-target="visibilitySelect"
                                    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm">
                                <option value="protected">🔒 Protected (visible aux managers)</option>
                                <option value="private">🔐 Private (visible à vous seul)</option>
                            </select>
                        </div>
                    </div>
                </div>

                {# Section 2: Tags #}
                <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                    <h3 class="text-sm font-semibold text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-tags mr-2 text-indigo-600"></i>
                        Tags
                    </h3>
                    <div>
                        <label for="upload-tags" class="block text-sm font-medium text-gray-700 mb-2">
                            Sélectionnez les tags
                        </label>
                        <select id="upload-tags"
                                data-document-upload-target="tagsSelect"
                                multiple
                                class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
                                style="min-height: 120px;">
                            {% if allTags is defined and allTags is not empty %}
                                {% for tag in allTags %}
                                    <option value="{{ tag.id }}">
                                        {% if tag.icon %}<i class="fas {{ tag.icon }}"></i> {% endif %}{{ tag.name }}
                                    </option>
                                {% endfor %}
                            {% endif %}
                        </select>
                        <p class="mt-1 text-xs text-gray-500">
                            <i class="fas fa-info-circle mr-1"></i>
                            Maintenez Ctrl (Windows) ou Cmd (Mac) pour sélectionner plusieurs tags
                        </p>
                    </div>
                </div>

                {# Section 3: Expiration et Rappels #}
                <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                    <h3 class="text-sm font-semibold text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-calendar-times mr-2 text-indigo-600"></i>
                        Expiration et rappels
                    </h3>

                    {# Date d'expiration #}
                    <div class="mb-4">
                        <label for="upload-expiration" class="block text-sm font-medium text-gray-700 mb-2">
                            Date d'expiration (optionnel)
                        </label>
                        <input type="date"
                               id="upload-expiration"
                               name="expiresAt"
                               data-document-upload-target="expirationDate"
                               data-expiration-reminder-target="expirationDate"
                               data-action="change->expiration-reminder#updateReminderVisibility"
                               min="{{ 'now'|date('Y-m-d') }}"
                               class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm">
                        <p class="mt-1 text-xs text-gray-500">
                            <i class="fas fa-info-circle mr-1"></i>
                            La date d'expiration permet de suivre la validité du document
                        </p>
                    </div>

                    {# Configuration des rappels #}
                    <div class="pl-4 border-l-4 border-indigo-200">
                        <div class="mb-3">
                            <label class="inline-flex items-center">
                                <input type="checkbox"
                                       id="upload-enable-reminder"
                                       data-document-upload-target="enableReminder"
                                       data-expiration-reminder-target="enableCheckbox"
                                       data-action="change->expiration-reminder#toggleReminderSection"
                                       class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <span class="ml-2 text-sm font-medium text-gray-700">
                                    <i class="fas fa-bell mr-1"></i>
                                    Activer un rappel avant expiration
                                </span>
                            </label>
                        </div>

                        <div class="reminder-section space-y-3" style="display: none;" data-expiration-reminder-target="reminderSection">
                            <div>
                                <label for="upload-reminder-days" class="block text-sm font-medium text-gray-700 mb-2">
                                    Nombre de jours avant expiration
                                </label>
                                <input type="number"
                                       id="upload-reminder-days"
                                       data-document-upload-target="reminderDays"
                                       data-expiration-reminder-target="daysInput"
                                       data-action="input->expiration-reminder#validateReminderDays"
                                       min="1"
                                       max="365"
                                       placeholder="Ex: 7"
                                       class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm">
                                <p class="mt-1 text-xs text-gray-500">
                                    <i class="fas fa-info-circle mr-1"></i>
                                    Vous recevrez un email de rappel avant l'expiration
                                </p>
                            </div>

                            <div>
                                <label for="upload-reminder-notes" class="block text-sm font-medium text-gray-700 mb-2">
                                    Notes pour le rappel (optionnel)
                                </label>
                                <textarea id="upload-reminder-notes"
                                          data-document-upload-target="reminderNotes"
                                          data-expiration-reminder-target="notesTextarea"
                                          rows="2"
                                          placeholder="Ex: Renouveler ce document auprès de..."
                                          class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"></textarea>
                            </div>

                            <div id="reminderDateDisplay"
                                 data-expiration-reminder-target="reminderDisplay"
                                 class="text-sm text-gray-600 bg-blue-50 p-3 rounded-md">
                                <i class="fas fa-info-circle mr-1"></i>
                                <span>Le rappel sera calculé automatiquement</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# Action Buttons #}
    <div data-document-upload-target="actionsContainer" class="hidden flex items-center justify-end gap-3">
        <button type="button"
                data-action="click->document-upload#clearAll"
                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">
            <i class="fas fa-times mr-2"></i>
            Tout annuler
        </button>
        <button type="button"
                data-action="click->document-upload#uploadAll"
                data-document-upload-target="uploadButton"
                class="inline-flex items-center px-6 py-3 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">
            <i class="fas fa-cloud-upload-alt mr-2"></i>
            Téléverser <span data-document-upload-target="uploadCount" class="ml-1"></span>
        </button>
    </div>

    {# Upload Progress #}
    <div data-document-upload-target="progressContainer" class="hidden bg-white shadow rounded-lg mt-6">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Progression</h2>
        </div>
        <div class="p-6">
            <div class="w-full bg-gray-200 rounded-full h-4 mb-2">
                <div data-document-upload-target="progressBar"
                     class="bg-indigo-600 h-4 rounded-full transition-all duration-300"
                     style="width: 0%"></div>
            </div>
            <p class="text-sm text-gray-600 text-center">
                <span data-document-upload-target="progressText">0%</span>
            </p>
        </div>
    </div>

    {# Upload Results #}
    <div data-document-upload-target="resultsContainer" class="hidden bg-white shadow rounded-lg mt-6">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Résultats</h2>
        </div>
        <div class="p-6">
            <div data-document-upload-target="results"></div>
            <div class="mt-4 flex justify-end">
                <a href="{{ path('admin_companies_documents', {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">
                    <i class="fas fa-check mr-2"></i>
                    Voir tous les documents
                </a>
            </div>
        </div>
    </div>

    {# Failed Files Section - Retry Mechanism #}
    <div id="failed-files-section" class="hidden bg-white shadow rounded-lg mt-6 border-2 border-red-300">
        <div class="px-6 py-4 border-b border-red-200 bg-red-50">
            <div class="flex items-center justify-between">
                <h2 class="text-lg font-medium text-red-900 flex items-center">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    Fichiers en échec (<span id="failed-files-count">0</span>)
                </h2>
                <button type="button"
                        onclick="window.documentUploadController.retryFailedFiles()"
                        class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                    <i class="fas fa-redo mr-2"></i>
                    Relancer l'upload
                </button>
            </div>
            <p class="mt-2 text-sm text-red-700">
                <i class="fas fa-info-circle mr-1"></i>
                Ces fichiers n'ont pas pu être téléversés. Cliquez sur "Relancer l'upload" pour réessayer.
            </p>
        </div>
        <div class="p-6">
            <div id="failed-files-list" class="space-y-3">
                {# Failed files will be added here by JavaScript #}
            </div>
        </div>
    </div>

</div>

{# Template for file item #}
<template id="file-item-template">
    <div class="flex items-start gap-4 p-4 bg-white rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition-shadow" data-file-id="">
        {# Preview or Icon #}
        <div class="flex-shrink-0 h-20 w-20 flex items-center justify-center bg-gray-50 rounded-lg border border-gray-200 overflow-hidden">
            {# Image preview will be inserted here by JS if it's an image #}
            <img data-file-preview class="hidden h-full w-full object-cover" alt="Preview">
            {# Icon for non-images #}
            <i class="fas fa-file text-gray-400 text-2xl" data-file-icon></i>
        </div>

        {# File Info #}
        <div class="flex-1 min-w-0 space-y-2">
            {# Editable filename #}
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">Nom du fichier</label>
                <input type="text"
                       data-file-name-input
                       class="block w-full text-sm font-medium text-gray-900 border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                       placeholder="Nom du fichier">
                <p class="mt-1 text-xs text-gray-500">
                    <i class="fas fa-info-circle mr-1"></i>
                    Modifiez le nom si nécessaire (l'extension sera ajoutée automatiquement)
                </p>
            </div>

            {# File size and type #}
            <div class="flex items-center gap-3 text-xs text-gray-500">
                <span data-file-size></span>
                <span>•</span>
                <span data-file-type></span>
            </div>

            {# Upload status (hidden initially, shown during upload) #}
            <div data-file-status class="hidden">
                <div class="w-full bg-gray-200 rounded-full h-2">
                    <div data-file-progress class="bg-indigo-600 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
                </div>
                <p class="mt-1 text-xs text-gray-600" data-file-status-text>En attente...</p>
            </div>
        </div>

        {# Remove button #}
        <button type="button"
                class="flex-shrink-0 p-2 text-red-600 hover:text-red-900 hover:bg-red-50 rounded-lg transition-colors"
                data-action="click->document-upload#removeFile"
                data-file-remove
                title="Supprimer">
            <i class="fas fa-times-circle text-xl"></i>
        </button>
    </div>
</template>

<script>
/**
 * Populate category select with hierarchical structure
 * This function loads the category tree and builds a hierarchical select
 */
document.addEventListener('DOMContentLoaded', function() {
    const categorySelect = document.getElementById('upload-category');
    const companyId = {{ company.id }};

    if (!categorySelect) return;

    // Fetch category tree data from API
    fetch(`/companies/${companyId}/categories/api/tree-data`)
        .then(response => response.json())
        .then(data => {
            if (data.success && data.tree) {
                populateCategorySelect(data.tree);
            }
        })
        .catch(error => {
            console.error('Failed to load categories:', error);
        });

    function populateCategorySelect(treeData) {
        // Keep the default "Sans catégorie" option
        const defaultOption = categorySelect.querySelector('option[value=""]');

        // Clear existing options except default
        categorySelect.innerHTML = '';
        if (defaultOption) {
            categorySelect.appendChild(defaultOption);
        }

        // Build hierarchical options
        function addOptions(categories, depth = 0) {
            categories.forEach(category => {
                // Skip deleted categories
                if (category.is_deleted) return;

                // Indentation based on depth
                const indent = '\u00A0\u00A0'.repeat(depth); // Non-breaking spaces
                const icon = '📂';
                const docCount = category.media_count > 0 ? ` (${category.media_count})` : '';

                const option = document.createElement('option');
                option.value = category.id;
                option.textContent = `${indent}${icon} ${category.name}${docCount}`;

                // Add depth info as data attribute
                option.setAttribute('data-depth', depth);
                option.setAttribute('data-path', category.path || '');

                categorySelect.appendChild(option);

                // Add children recursively
                if (category.children && category.children.length > 0) {
                    addOptions(category.children, depth + 1);
                }
            });
        }

        addOptions(treeData);
    }

    // Pre-select category from URL if present
    const urlParams = new URLSearchParams(window.location.search);
    const preselectedCategory = urlParams.get('category');
    if (preselectedCategory) {
        // Wait for options to be populated
        setTimeout(() => {
            categorySelect.value = preselectedCategory;
        }, 500);
    }
});
</script>
{% endblock %}