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

{% block page_title %}Gestion Système{% endblock %}

{% block content %}
<div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-900">Gestion Système</h1>
    <p class="mt-2 text-sm text-gray-700">Surveillance et maintenance du système</p>
</div>

{# Résumé système - Cartes #}
<div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8">
    {# CPU #}
    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-microchip text-4xl text-blue-500"></i>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">CPU</dt>
                        <dd class="text-lg font-semibold text-gray-900">{{ system_summary.cpu_cores }} cores</dd>
                        <dd class="text-sm text-gray-500">Charge: {{ system_summary.load_average }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    {# RAM #}
    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-memory text-4xl text-green-500"></i>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">RAM</dt>
                        <dd class="text-lg font-semibold text-gray-900">{{ system_summary.memory_usage_percent }}%</dd>
                        <dd class="text-sm text-gray-500">utilisée</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    {# Disque #}
    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-hdd text-4xl text-purple-500"></i>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Disque</dt>
                        <dd class="text-lg font-semibold text-gray-900">{{ system_summary.disk_usage_percent }}%</dd>
                        <dd class="text-sm text-gray-500">utilisé</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    {# Uptime #}
    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-clock text-4xl text-orange-500"></i>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Uptime</dt>
                        <dd class="text-lg font-semibold text-gray-900">{{ system_summary.uptime_formatted }}</dd>
                        <dd class="text-sm text-gray-500">{{ system_summary.platform }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 gap-6 lg:grid-cols-2 mb-8">
    {# Cache #}
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">
                <i class="fas fa-database mr-2 text-blue-500"></i>
                Cache
            </h3>
            <dl class="space-y-3">
                <div class="flex justify-between">
                    <dt class="text-sm font-medium text-gray-500">Taille totale</dt>
                    <dd class="text-sm font-semibold text-gray-900">{{ cache_info.formatted_size }}</dd>
                </div>
                <div class="flex justify-between">
                    <dt class="text-sm font-medium text-gray-500">Fichiers</dt>
                    <dd class="text-sm font-semibold text-gray-900">{{ cache_info.file_count }}</dd>
                </div>
                {% if cache_stats.opcache.enabled %}
                <div class="flex justify-between">
                    <dt class="text-sm font-medium text-gray-500">OPcache</dt>
                    <dd class="text-sm font-semibold text-green-600">
                        <i class="fas fa-check-circle"></i> Activé
                    </dd>
                </div>
                {% endif %}
            </dl>
            <div class="mt-4">
                <a href="{{ path('admin_system_cache') }}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
                    Gérer le cache
                    <i class="fas fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </div>

    {# Logs #}
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">
                <i class="fas fa-file-alt mr-2 text-green-500"></i>
                Logs
            </h3>
            <dl class="space-y-3">
                <div class="flex justify-between">
                    <dt class="text-sm font-medium text-gray-500">Taille totale</dt>
                    <dd class="text-sm font-semibold text-gray-900">{{ logs_info.formatted_size }}</dd>
                </div>
                <div class="flex justify-between">
                    <dt class="text-sm font-medium text-gray-500">Fichiers</dt>
                    <dd class="text-sm font-semibold text-gray-900">{{ logs_info.file_count }}</dd>
                </div>
                <div class="flex justify-between">
                    <dt class="text-sm font-medium text-gray-500">Plus ancien</dt>
                    <dd class="text-sm text-gray-900">{{ logs_info.oldest_log|date('d/m/Y') }}</dd>
                </div>
            </dl>
            <div class="mt-4">
                <a href="{{ path('admin_system_logs') }}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700">
                    Gérer les logs
                    <i class="fas fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </div>
</div>

{# Sessions & Actions rapides #}
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
    {# Sessions #}
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">
                <i class="fas fa-users mr-2 text-purple-500"></i>
                Sessions
            </h3>
            <dl class="space-y-3">
                <div class="flex justify-between">
                    <dt class="text-sm font-medium text-gray-500">Total</dt>
                    <dd class="text-sm font-semibold text-gray-900">{{ sessions_info.total_count }}</dd>
                </div>
                <div class="flex justify-between">
                    <dt class="text-sm font-medium text-gray-500">Actives</dt>
                    <dd class="text-sm font-semibold text-green-600">{{ sessions_info.active_count }}</dd>
                </div>
                <div class="flex justify-between">
                    <dt class="text-sm font-medium text-gray-500">Expirées</dt>
                    <dd class="text-sm font-semibold text-orange-600">{{ sessions_info.expired_count }}</dd>
                </div>
            </dl>
            <div class="mt-4">
                <form method="post" action="{{ path('admin_system_sessions_clear') }}" onsubmit="return confirm('Nettoyer les sessions expirées ?')">
                    <input type="hidden" name="_token" value="{{ csrf_token('sessions-clear') }}">
                    <button type="submit" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        <i class="fas fa-trash mr-2"></i>
                        Nettoyer sessions
                    </button>
                </form>
            </div>
        </div>
    </div>

    {# Symfony Info #}
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">
                <i class="fab fa-symfony mr-2 text-black"></i>
                Symfony
            </h3>
            <dl class="space-y-3">
                <div class="flex justify-between">
                    <dt class="text-sm font-medium text-gray-500">Version</dt>
                    <dd class="text-sm font-semibold text-gray-900">{{ symfony_info.version }}</dd>
                </div>
                <div class="flex justify-between">
                    <dt class="text-sm font-medium text-gray-500">Environnement</dt>
                    <dd class="text-sm font-semibold">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ symfony_info.environment == 'prod' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                            {{ symfony_info.environment }}
                        </span>
                    </dd>
                </div>
                <div class="flex justify-between">
                    <dt class="text-sm font-medium text-gray-500">Debug</dt>
                    <dd class="text-sm font-semibold">
                        {% if symfony_info.debug_mode %}
                            <span class="text-orange-600"><i class="fas fa-exclamation-triangle"></i> Activé</span>
                        {% else %}
                            <span class="text-green-600"><i class="fas fa-check"></i> Désactivé</span>
                        {% endif %}
                    </dd>
                </div>
            </dl>
            <div class="mt-4">
                <a href="{{ path('admin_system_info') }}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-gray-800 hover:bg-gray-900">
                    Infos détaillées
                    <i class="fas fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}