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

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

{% block content %}
<div class="max-w-7xl mx-auto">
    {# En-tête #}
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 flex items-center">
                <i class="fas fa-database text-indigo-600 mr-3"></i>
                {{ page_title }}
            </h1>
            <p class="mt-1 text-sm text-gray-600">Gestion des sauvegardes de base de données MySQL</p>
        </div>
        <div>
            <a href="{{ path('app_admin_database_create') }}"
               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">
                <i class="fas fa-plus mr-2"></i> Créer une Sauvegarde
            </a>
        </div>
    </div>

    {# Alertes de diagnostic #}
    {% if diagnostic.tools is defined and not diagnostic.tools.mysqldump_available %}
        <div class="rounded-md bg-yellow-50 p-4 mb-6">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-triangle text-yellow-400"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-yellow-800">Attention</h3>
                    <div class="mt-2 text-sm text-yellow-700">
                        mysqldump n'est pas disponible sur ce système. Les sauvegardes ne pourront pas être créées.
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    {% if diagnostic.directories is defined and not diagnostic.directories.backup_directory_writable %}
        <div class="rounded-md bg-red-50 p-4 mb-6">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-circle text-red-400"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-red-800">Erreur</h3>
                    <div class="mt-2 text-sm text-red-700">
                        Le dossier de sauvegarde n'est pas accessible en écriture.
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    {# Statistiques #}
    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-6">
        {# Total Sauvegardes #}
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
                            <i class="fas fa-database text-2xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Total Sauvegardes</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.total_backups|default(0) }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        {# Espace Utilisé #}
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white">
                            <i class="fas fa-hdd text-2xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Espace Utilisé</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.formatted_total_size|default('0 B') }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        {# Compressées #}
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
                            <i class="fas fa-compress text-2xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Compressées</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.compressed_backups|default(0) }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        {# Dernière Sauvegarde #}
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-md bg-yellow-500 text-white">
                            <i class="fas fa-clock text-2xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Dernière Sauvegarde</dt>
                            <dd class="text-sm font-semibold text-gray-900">
                                {% if stats.newest_backup %}
                                    {{ stats.newest_backup|date('d/m/Y H:i') }}
                                {% else %}
                                    Aucune
                                {% endif %}
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# Actions rapides et sauvegardes récentes #}
    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
        {# Actions rapides #}
        <div class="bg-white shadow overflow-hidden rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
                    <i class="fas fa-bolt text-yellow-500 mr-2"></i>
                    Actions Rapides
                </h3>
                <div class="space-y-3">
                    <a href="{{ path('app_admin_database_create') }}"
                       class="block w-full text-center px-4 py-2 border border-indigo-300 shadow-sm text-sm font-medium rounded-md text-indigo-700 bg-white hover:bg-indigo-50">
                        <i class="fas fa-plus mr-2"></i> Nouvelle Sauvegarde
                    </a>
                    <a href="{{ path('app_admin_database_history') }}"
                       class="block w-full text-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-history mr-2"></i> Historique Complet
                    </a>
                    <a href="{{ path('app_admin_database_cleanup') }}"
                       class="block w-full text-center px-4 py-2 border border-yellow-300 shadow-sm text-sm font-medium rounded-md text-yellow-700 bg-white hover:bg-yellow-50">
                        <i class="fas fa-broom mr-2"></i> Nettoyage
                    </a>
                    <a href="{{ path('app_admin_database_diagnostic') }}"
                       class="block w-full text-center px-4 py-2 border border-blue-300 shadow-sm text-sm font-medium rounded-md text-blue-700 bg-white hover:bg-blue-50">
                        <i class="fas fa-stethoscope mr-2"></i> Diagnostic
                    </a>
                </div>
            </div>
        </div>

        {# Sauvegardes récentes #}
        <div class="lg:col-span-2 bg-white shadow overflow-hidden rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg leading-6 font-medium text-gray-900">
                        <i class="fas fa-clock-rotate-left text-blue-500 mr-2"></i>
                        Sauvegardes Récentes
                    </h3>
                    <a href="{{ path('app_admin_database_history') }}"
                       class="text-sm font-medium text-indigo-600 hover:text-indigo-500">
                        Voir tout <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                </div>

                {% if recent_backups is empty %}
                    <div class="text-center py-12">
                        <i class="fas fa-inbox text-gray-400 text-5xl mb-4"></i>
                        <p class="text-gray-500 mb-4">Aucune sauvegarde disponible</p>
                        <a href="{{ path('app_admin_database_create') }}"
                           class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                            Créer la première sauvegarde
                        </a>
                    </div>
                {% else %}
                    <div class="overflow-hidden">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fichier</th>
                                    <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                    <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Taille</th>
                                    <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Intégrité</th>
                                    <th class="px-3 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 backup in recent_backups %}
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-3 py-4 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <i class="fas fa-file-archive {{ backup.compressed ? 'text-green-500' : 'text-gray-400' }} mr-2"></i>
                                                <span class="text-sm text-gray-900">{{ backup.filename }}</span>
                                            </div>
                                        </td>
                                        <td class="px-3 py-4 whitespace-nowrap text-sm text-gray-500">
                                            {{ backup.datetime|date('d/m/Y H:i:s') }}
                                        </td>
                                        <td class="px-3 py-4 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                                {{ backup.formatted_size }}
                                            </span>
                                        </td>
                                        <td class="px-3 py-4 whitespace-nowrap">
                                            {% if backup.integrity_check.valid %}
                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                    <i class="fas fa-check mr-1"></i> Valide
                                                </span>
                                            {% else %}
                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                                    <i class="fas fa-times mr-1"></i> Invalide
                                                </span>
                                            {% endif %}
                                        </td>
                                        <td class="px-3 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <a href="{{ path('app_admin_database_download', {filename: backup.filename}) }}"
                                               class="text-indigo-600 hover:text-indigo-900"
                                               title="Télécharger">
                                                <i class="fas fa-download"></i>
                                            </a>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    {# Informations système #}
    {% if diagnostic is not empty %}
        <div class="mt-6 bg-white shadow overflow-hidden rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
                    <i class="fas fa-info-circle text-blue-500 mr-2"></i>
                    Informations Système
                </h3>
                <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
                    <div>
                        <div class="text-sm text-gray-500">Système d'exploitation</div>
                        <div class="mt-1 text-sm font-medium text-gray-900">{{ diagnostic.system.os|default('N/A') }}</div>
                    </div>
                    <div>
                        <div class="text-sm text-gray-500">Base de données</div>
                        <div class="mt-1 text-sm font-medium text-gray-900">{{ diagnostic.mysql.database|default('N/A') }}</div>
                    </div>
                    <div>
                        <div class="text-sm text-gray-500">mysqldump</div>
                        <div class="mt-1">
                            {% if diagnostic.tools.mysqldump_available %}
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                    Disponible
                                </span>
                            {% else %}
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                    Indisponible
                                </span>
                            {% endif %}
                        </div>
                    </div>
                    <div>
                        <div class="text-sm text-gray-500">Rétention</div>
                        <div class="mt-1 text-sm font-medium text-gray-900">{{ diagnostic.config.retention_days|default('N/A') }} jours</div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
</div>
{% endblock %}