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

{% block page_title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="mb-8">
    <div class="sm:flex sm:items-center sm:justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">{{ page_title }}</h1>
            <p class="mt-2 text-sm text-gray-700">Nettoyez les médias expirés, orphelins et les anciens logs</p>
        </div>
        <div class="mt-4 sm:mt-0">
            <a href="{{ path('admin_media_index') }}"
               class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                Retour à la liste
            </a>
        </div>
    </div>
</div>

{# Warning Banner #}
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
    <div class="flex">
        <div class="flex-shrink-0">
            <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
            </svg>
        </div>
        <div class="ml-3">
            <p class="text-sm text-yellow-700">
                <strong>Attention:</strong> Les suppressions effectuées ici sont permanentes et irréversibles. Vérifiez bien avant de valider.
            </p>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    {# Expired Media #}
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="px-6 py-4 bg-red-50 border-b border-red-200">
            <div class="flex items-center">
                <svg class="w-6 h-6 text-red-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <h2 class="text-lg font-semibold text-gray-900">Médias Expirés</h2>
            </div>
        </div>
        <div class="px-6 py-4">
            <p class="text-3xl font-bold text-gray-900">{{ expiredMedia|length }}</p>
            <p class="text-sm text-gray-500 mt-1">fichiers expirés</p>
            <p class="text-sm font-semibold text-red-600 mt-2">
                {% set sizeInMB = expiredSize / 1048576 %}
                Espace à libérer: {{ sizeInMB|number_format(2) }} MB
            </p>

            {% if expiredMedia|length > 0 %}
            <form method="post" class="mt-4" onsubmit="return confirm('Confirmer la suppression de {{ expiredMedia|length }} médias expirés ?');">
                <input type="hidden" name="_token" value="{{ csrf_token('cleanup_media') }}">
                <input type="hidden" name="cleanup_type" value="expired">
                <button type="submit" class="w-full px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700">
                    Supprimer les médias expirés
                </button>
            </form>

            <div class="mt-4 max-h-48 overflow-y-auto text-xs text-gray-600 border rounded p-2">
                <p class="font-semibold mb-2">Aperçu:</p>
                {% for media in expiredMedia|slice(0, 10) %}
                <p class="truncate">• {{ media.originalFileName }}</p>
                {% endfor %}
                {% if expiredMedia|length > 10 %}
                <p class="text-gray-400 italic">... et {{ expiredMedia|length - 10 }} autres</p>
                {% endif %}
            </div>
            {% else %}
            <p class="mt-4 text-sm text-green-600">✓ Aucun média expiré</p>
            {% endif %}
        </div>
    </div>

    {# Orphaned Media #}
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="px-6 py-4 bg-orange-50 border-b border-orange-200">
            <div class="flex items-center">
                <svg class="w-6 h-6 text-orange-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                </svg>
                <h2 class="text-lg font-semibold text-gray-900">Médias Orphelins</h2>
            </div>
        </div>
        <div class="px-6 py-4">
            <p class="text-3xl font-bold text-gray-900">{{ orphanedMedia|length }}</p>
            <p class="text-sm text-gray-500 mt-1">fichiers orphelins</p>
            <p class="text-xs text-gray-500 mt-1">(non liés, non accédés depuis 90 jours)</p>
            <p class="text-sm font-semibold text-orange-600 mt-2">
                {% set sizeInMB = orphanedSize / 1048576 %}
                Espace à libérer: {{ sizeInMB|number_format(2) }} MB
            </p>

            {% if orphanedMedia|length > 0 %}
            <form method="post" class="mt-4" onsubmit="return confirm('Confirmer la suppression de {{ orphanedMedia|length }} médias orphelins ?');">
                <input type="hidden" name="_token" value="{{ csrf_token('cleanup_media') }}">
                <input type="hidden" name="cleanup_type" value="orphaned">
                <button type="submit" class="w-full px-4 py-2 bg-orange-600 text-white text-sm font-medium rounded-lg hover:bg-orange-700">
                    Supprimer les médias orphelins
                </button>
            </form>

            <div class="mt-4 max-h-48 overflow-y-auto text-xs text-gray-600 border rounded p-2">
                <p class="font-semibold mb-2">Aperçu:</p>
                {% for media in orphanedMedia|slice(0, 10) %}
                <p class="truncate">• {{ media.originalFileName }}</p>
                {% endfor %}
                {% if orphanedMedia|length > 10 %}
                <p class="text-gray-400 italic">... et {{ orphanedMedia|length - 10 }} autres</p>
                {% endif %}
            </div>
            {% else %}
            <p class="mt-4 text-sm text-green-600">✓ Aucun média orphelin</p>
            {% endif %}
        </div>
    </div>

    {# Old Logs #}
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="px-6 py-4 bg-blue-50 border-b border-blue-200">
            <div class="flex items-center">
                <svg class="w-6 h-6 text-blue-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
                <h2 class="text-lg font-semibold text-gray-900">Anciens Logs</h2>
            </div>
        </div>
        <div class="px-6 py-4">
            <p class="text-sm text-gray-500 mt-1">Supprime les logs d'accès de plus de 90 jours</p>
            <p class="text-xs text-gray-500 mt-2">Conformité RGPD et optimisation de la base de données</p>

            <form method="post" class="mt-4" onsubmit="return confirm('Confirmer la suppression des logs de plus de 90 jours ?');">
                <input type="hidden" name="_token" value="{{ csrf_token('cleanup_media') }}">
                <input type="hidden" name="cleanup_type" value="logs">
                <button type="submit" class="w-full px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700">
                    Nettoyer les anciens logs
                </button>
            </form>

            <div class="mt-4 p-3 bg-blue-50 rounded text-xs text-blue-700">
                <p><strong>Note:</strong> Cette opération ne supprime pas les médias, uniquement les enregistrements de logs d'accès anciens.</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}