{% 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="mb-6">
        <div class="flex justify-between items-center">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 flex items-center">
                    <i class="fas fa-envelope text-indigo-600 mr-3"></i>
                    {{ page_title }}
                </h1>
                <p class="mt-1 text-sm text-gray-600">Gestion et surveillance des emails envoyés</p>
            </div>
            <a href="{{ path('app_admin_emails_logs_list') }}"
               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-list mr-2"></i> Liste Complète
            </a>
        </div>
    </div>

    {# Statistiques principales #}
    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-5 mb-6">
        {# Total #}
        <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-gray-500 text-white">
                            <i class="fas fa-envelope 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</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.total|default(0)|number_format(0, ',', ' ') }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        {# Envoyés #}
        <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-check-circle text-2xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Envoyés</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.sent|default(0)|number_format(0, ',', ' ') }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        {# Échoués #}
        <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-red-500 text-white">
                            <i class="fas fa-exclamation-circle text-2xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Échoués</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.failed|default(0)|number_format(0, ',', ' ') }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        {# En attente #}
        <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">En attente</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.pending|default(0)|number_format(0, ',', ' ') }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        {# Taux de succès #}
        <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-percentage text-2xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Succès</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.success_rate|default(0) }}%</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
        {# Graphique et échecs récents #}
        <div class="lg:col-span-2 space-y-6">
            {# Graphique des envois #}
            <div class="bg-white shadow 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-chart-line text-blue-500 mr-2"></i>
                        Envois des 30 derniers jours
                    </h3>
                    <div class="h-64">
                        <canvas id="emailsChart"></canvas>
                    </div>
                </div>
            </div>

            {# Échecs récents #}
            <div class="bg-white shadow 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-exclamation-triangle text-red-500 mr-2"></i>
                        Échecs Récents (24h)
                    </h3>

                    {% if recent_failures is empty %}
                        <div class="text-center py-8">
                            <i class="fas fa-check-circle text-green-400 text-4xl mb-3"></i>
                            <p class="text-gray-500">Aucun échec récent</p>
                        </div>
                    {% else %}
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Destinataire</th>
                                        <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Sujet</th>
                                        <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Tentatives</th>
                                        <th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                                        <th scope="col" class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    {% for email in recent_failures %}
                                        <tr class="hover:bg-gray-50">
                                            <td class="px-4 py-2 text-sm text-gray-900">{{ email.recipient }}</td>
                                            <td class="px-4 py-2 text-sm text-gray-900 max-w-xs truncate">{{ email.subject }}</td>
                                            <td class="px-4 py-2 text-sm">
                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ email.attemptCount >= 3 ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800' }}">
                                                    {{ email.attemptCount }}
                                                </span>
                                            </td>
                                            <td class="px-4 py-2 text-sm text-gray-500">{{ email.lastAttemptAt|date('d/m H:i') }}</td>
                                            <td class="px-4 py-2 text-right text-sm">
                                                <a href="{{ path('app_admin_emails_logs_show', {id: email.id}) }}"
                                                   class="inline-flex items-center px-2 py-1 text-xs font-medium rounded text-blue-600 hover:bg-blue-50 transition-colors duration-150">
                                                    <i class="fas fa-eye mr-1"></i>
                                                    Voir
                                                </a>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>

                        <div class="mt-4 text-center">
                            <a href="{{ path('app_admin_emails_logs_list', {status: 'failed'}) }}"
                               class="text-sm text-indigo-600 hover:text-indigo-900">
                                Voir tous les échecs <i class="fas fa-arrow-right ml-1"></i>
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        {# Sidebar #}
        <div class="space-y-6">
            {# Périodes d'activité #}
            <div class="bg-white shadow 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-calendar-week text-orange-500 mr-2"></i>
                        Périodes d'Activité
                    </h3>
                    <dl class="space-y-3">
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">Aujourd'hui</dt>
                            <dd class="text-sm font-semibold text-gray-900">{{ stats.today|default(0) }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">Dernières 24h</dt>
                            <dd class="text-sm font-semibold text-gray-900">{{ stats.last_24h|default(0) }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">Derniers 7 jours</dt>
                            <dd class="text-sm font-semibold text-gray-900">{{ stats.last_7d|default(0) }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-sm text-gray-500">Derniers 30 jours</dt>
                            <dd class="text-sm font-semibold text-gray-900">{{ stats.last_30d|default(0) }}</dd>
                        </div>
                    </dl>
                </div>
            </div>

            {# Actions rapides #}
            <div class="bg-white shadow 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">
                        {% if stats.failed > 0 %}
                            <button onclick="document.getElementById('retryFailedForm').submit()"
                                    class="block w-full text-center px-4 py-2 border border-green-300 shadow-sm text-sm font-medium rounded-md text-green-700 bg-white hover:bg-green-50">
                                <i class="fas fa-redo mr-2"></i> Réessayer Échecs ({{ stats.failed }})
                            </button>
                        {% endif %}

                        <a href="{{ path('app_admin_emails_logs_list') }}"
                           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-list mr-2"></i> Tous les Emails
                        </a>

                        <a href="{{ path('app_admin_emails_logs_list', {status: 'failed'}) }}"
                           class="block w-full text-center px-4 py-2 border border-red-300 shadow-sm text-sm font-medium rounded-md text-red-700 bg-white hover:bg-red-50">
                            <i class="fas fa-exclamation-circle mr-2"></i> Emails Échoués
                        </a>

                        <a href="{{ path('app_admin_emails_logs_list', {status: 'pending'}) }}"
                           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-clock mr-2"></i> En Attente
                        </a>

                        <a href="{{ path('app_admin_emails_logs_export_csv') }}"
                           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-download mr-2"></i> Exporter CSV
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{# Formulaire caché pour réessayer les échecs #}
<form id="retryFailedForm" method="post" action="{{ path('app_admin_emails_logs_retry_failed') }}" style="display: none;">
    <input type="hidden" name="_token" value="{{ csrf_token('retry_failed_emails') }}">
    <input type="hidden" name="max_attempts" value="5">
    <input type="hidden" name="limit" value="50">
</form>

{# Chart.js #}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
// Données pour le graphique
const chartData = {{ chart_data|json_encode|raw }};

// Graphique des emails
const ctx = document.getElementById('emailsChart');
if (ctx) {
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: chartData.map(d => {
                const date = new Date(d.date);
                return date.toLocaleDateString('fr-FR', {month: 'short', day: 'numeric'});
            }),
            datasets: [
                {
                    label: 'Envoyés',
                    data: chartData.map(d => d.sent),
                    borderColor: 'rgb(34, 197, 94)',
                    backgroundColor: 'rgba(34, 197, 94, 0.1)',
                    fill: true,
                    tension: 0.3
                },
                {
                    label: 'Échoués',
                    data: chartData.map(d => d.failed),
                    borderColor: 'rgb(239, 68, 68)',
                    backgroundColor: 'rgba(239, 68, 68, 0.1)',
                    fill: true,
                    tension: 0.3
                },
                {
                    label: 'En attente',
                    data: chartData.map(d => d.pending),
                    borderColor: 'rgb(234, 179, 8)',
                    backgroundColor: 'rgba(234, 179, 8, 0.1)',
                    fill: true,
                    tension: 0.3
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        precision: 0
                    }
                }
            }
        }
    });
}

// Confirmation pour réessayer les échecs
document.getElementById('retryFailedForm')?.addEventListener('submit', function(e) {
    const failedCount = {{ stats.failed|default(0) }};
    if (!confirm(`Voulez-vous réessayer l'envoi de ${failedCount} email(s) échoué(s) ?`)) {
        e.preventDefault();
        return false;
    }
});
</script>
{% endblock %}