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

{% block page_title %}Performance & Optimisation{% 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">Performance & Optimisation</h1>
            <p class="mt-2 text-sm text-gray-700">Surveillance et optimisation des performances</p>
        </div>
        <div class="mt-4 sm:mt-0">
            <a href="{{ path('admin_system_index') }}" 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
            </a>
        </div>
    </div>
</div>

{# Optimisation rapide #}
<div class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg shadow-lg mb-8">
    <div class="px-6 py-8 text-center">
        <h2 class="text-2xl font-bold text-white mb-2">Optimisation Complète</h2>
        <p class="text-blue-100 mb-6">Vider le cache, préchauffer, optimiser l'autoloader et nettoyer les sessions</p>
        <form method="post" action="{{ path('admin_system_optimize') }}" onsubmit="return confirm('Lancer l\'optimisation complète du système ?')">
            <input type="hidden" name="_token" value="{{ csrf_token('system-optimize') }}">
            <button type="submit" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-gray-50 shadow-lg">
                <i class="fas fa-rocket mr-2"></i>
                Optimiser le Système
            </button>
        </form>
    </div>
</div>

{# Métriques Performances #}
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2 mb-8">
    {# CPU & Mémoire #}
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">
                <i class="fas fa-microchip text-blue-500 mr-2"></i>
                CPU & Mémoire
            </h3>
            <dl class="space-y-4">
                <div>
                    <dt class="text-sm font-medium text-gray-500 mb-1">Utilisation CPU</dt>
                    <dd class="flex items-center">
                        <div class="flex-1 bg-gray-200 rounded-full h-4">
                            <div class="bg-blue-600 h-4 rounded-full" style="width: {{ system_info.hardware.cpu.usage }}%"></div>
                        </div>
                        <span class="ml-3 text-sm font-semibold text-gray-900">{{ system_info.hardware.cpu.usage }}%</span>
                    </dd>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500 mb-1">Utilisation RAM</dt>
                    <dd class="flex items-center">
                        <div class="flex-1 bg-gray-200 rounded-full h-4">
                            <div class="bg-green-600 h-4 rounded-full" style="width: {{ system_info.hardware.memory.usage_percent }}%"></div>
                        </div>
                        <span class="ml-3 text-sm font-semibold text-gray-900">{{ system_info.hardware.memory.usage_percent }}%</span>
                    </dd>
                </div>
            </dl>
        </div>
    </div>

    {# Disque #}
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">
                <i class="fas fa-hdd text-purple-500 mr-2"></i>
                Espace Disque
            </h3>
            {% for mount, disk in system_info.disk %}
            <div class="mb-3">
                <dt class="text-sm font-medium text-gray-500 mb-1">{{ mount }}</dt>
                <dd class="flex items-center">
                    <div class="flex-1 bg-gray-200 rounded-full h-4">
                        <div class="bg-purple-600 h-4 rounded-full" style="width: {{ disk.usage_percent }}%"></div>
                    </div>
                    <span class="ml-3 text-xs font-semibold text-gray-900">{{ disk.formatted.used }} / {{ disk.formatted.total }}</span>
                </dd>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

{# Charge Système #}
<div class="bg-white shadow rounded-lg">
    <div class="px-4 py-5 sm:p-6">
        <h3 class="text-lg font-medium text-gray-900 mb-4">
            <i class="fas fa-chart-line text-orange-500 mr-2"></i>
            Charge Système
        </h3>
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
            <div class="text-center">
                <dt class="text-sm font-medium text-gray-500">1 minute</dt>
                <dd class="mt-1 text-2xl font-semibold text-gray-900">{{ system_info.load['1min'] }}</dd>
            </div>
            <div class="text-center">
                <dt class="text-sm font-medium text-gray-500">5 minutes</dt>
                <dd class="mt-1 text-2xl font-semibold text-gray-900">{{ system_info.load['5min'] }}</dd>
            </div>
            <div class="text-center">
                <dt class="text-sm font-medium text-gray-500">15 minutes</dt>
                <dd class="mt-1 text-2xl font-semibold text-gray-900">{{ system_info.load['15min'] }}</dd>
            </div>
        </div>
    </div>
</div>

{% endblock %}