{% 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">
        <nav class="flex mb-4" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3">
                <li class="inline-flex items-center">
                    <a href="{{ path('app_admin_emails_logs_index') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-indigo-600">
                        <i class="fas fa-envelope mr-2"></i> Logs Emails
                    </a>
                </li>
                <li aria-current="page">
                    <div class="flex items-center">
                        <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                        <span class="text-sm font-medium text-gray-500">Liste</span>
                    </div>
                </li>
            </ol>
        </nav>
        <div class="flex justify-between items-center">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 flex items-center">
                    <i class="fas fa-list text-indigo-600 mr-3"></i>
                    {{ page_title }}
                </h1>
                <p class="mt-1 text-sm text-gray-600">{{ pagination.getTotalItemCount }} email(s) trouvé(s)</p>
            </div>
            <a href="{{ path('app_admin_emails_logs_export_csv', app.request.query.all) }}"
               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">
                <i class="fas fa-download mr-2"></i> Exporter CSV
            </a>
        </div>
    </div>

    <div class="bg-white shadow rounded-lg overflow-hidden mb-6">
        {# Filtres #}
        <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
            <h3 class="text-lg leading-6 font-medium text-gray-900">
                <i class="fas fa-filter text-gray-400 mr-2"></i>
                Filtres de Recherche
            </h3>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <form method="get" action="{{ path('app_admin_emails_logs_list') }}" data-controller="form-submit" class="space-y-4">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    {# Recherche #}
                    <div>
                        <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Recherche globale</label>
                        <input type="text"
                               name="search"
                               id="search"
                               value="{{ filters.search|default('') }}"
                               placeholder="Destinataire, sujet..."
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    </div>

                    {# Statut #}
                    <div>
                        <label for="status" class="block text-sm font-medium text-gray-700 mb-1">Statut d'envoi</label>
                        <select name="status"
                                id="status"
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="">Tous les statuts</option>
                            <option value="sent" {{ filters.status|default('') == 'sent' ? 'selected' : '' }}>✓ Envoyés</option>
                            <option value="failed" {{ filters.status|default('') == 'failed' ? 'selected' : '' }}>✗ Échoués</option>
                            <option value="pending" {{ filters.status|default('') == 'pending' ? 'selected' : '' }}>⏳ En attente</option>
                        </select>
                    </div>

                    {# Template #}
                    <div>
                        <label for="template" class="block text-sm font-medium text-gray-700 mb-1">Template Email</label>
                        <select name="template"
                                id="template"
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="">Tous les templates</option>
                            {% for tpl in templates %}
                                <option value="{{ tpl }}" {{ filters.template|default('') == tpl ? 'selected' : '' }}>
                                    {{ tpl }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>

                    {# Date de début #}
                    <div>
                        <label for="dateFrom" class="block text-sm font-medium text-gray-700 mb-1">Date de début</label>
                        <input type="date"
                               name="dateFrom"
                               id="dateFrom"
                               value="{{ filters.dateFrom is defined ? filters.dateFrom|date('Y-m-d') : '' }}"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    </div>

                    {# Date de fin #}
                    <div>
                        <label for="dateTo" class="block text-sm font-medium text-gray-700 mb-1">Date de fin</label>
                        <input type="date"
                               name="dateTo"
                               id="dateTo"
                               value="{{ filters.dateTo is defined ? filters.dateTo|date('Y-m-d') : '' }}"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    </div>

                    {# Tentatives min #}
                    <div>
                        <label for="minAttempts" class="block text-sm font-medium text-gray-700 mb-1">Tentatives minimum</label>
                        <input type="number"
                               name="minAttempts"
                               id="minAttempts"
                               min="0"
                               value="{{ filters.minAttempts|default('') }}"
                               placeholder="Ex: 2"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    </div>
                </div>

                {# Action Buttons #}
                <div class="flex justify-between items-center pt-4 border-t border-gray-200">
                    <div class="text-sm text-gray-500">
                        <i class="fas fa-info-circle mr-1"></i>
                        Filtrez les emails pour analyser les envois
                    </div>
                    <div class="flex space-x-3">
                        <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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
                            <i class="fas fa-times mr-2"></i>
                            Réinitialiser
                        </a>
                        <button type="submit"
                                data-form-submit-target="submit"
                                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 transition-colors">
                            <i class="fas fa-filter mr-2"></i>
                            <span data-form-submit-target="buttonText">Filtrer</span>
                            <span data-form-submit-target="spinner" class="hidden ml-2">
                                <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                            </span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="bg-white shadow rounded-lg overflow-hidden">
        {# Liste des emails #}

        {# Liste des emails #}
        {% if pagination.getTotalItemCount == 0 %}
            <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">Aucun email trouvé</p>
                <a href="{{ path('app_admin_emails_logs_index') }}"
                   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">
                    <i class="fas fa-arrow-left mr-2"></i> Retour au Dashboard
                </a>
            </div>
        {% else %}
            {# Desktop Table #}
            <div class="hidden lg:block overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                ID
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Destinataire
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Sujet
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Statut
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Tentatives
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Créé le
                            </th>
                            <th scope="col" class="px-6 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 email in pagination %}
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    #{{ email.id }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">{{ email.recipient }}</div>
                                    {% if email.templateName %}
                                        <div class="text-xs text-gray-500">
                                            <i class="fas fa-file-code"></i> {{ email.templateName }}
                                        </div>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4">
                                    <div class="text-sm text-gray-900 max-w-md truncate">{{ email.subject }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {% if email.isSent %}
                                        <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> Envoyé
                                        </span>
                                    {% elseif email.isFailed %}
                                        <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> Échoué
                                        </span>
                                    {% else %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                            <i class="fas fa-clock mr-1"></i> En attente
                                        </span>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ email.attemptCount >= 3 ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800' }}">
                                        {{ email.attemptCount }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-gray-900">{{ email.createdAt|date('d/m/Y') }}</div>
                                    <div class="text-xs text-gray-500">{{ email.createdAt|date('H:i') }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <div class="flex justify-end space-x-2">
                                        <a href="{{ path('app_admin_emails_logs_show', {id: email.id}) }}"
                                           class="text-indigo-600 hover:text-indigo-900"
                                           title="Voir détails">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        {% if email.isFailed and email.attemptCount < 5 %}
                                            <button type="button"
                                                    onclick="confirmRetry({{ email.id }}, '{{ email.recipient|e('js') }}')"
                                                    class="text-green-600 hover:text-green-900"
                                                    title="Réessayer">
                                                <i class="fas fa-redo"></i>
                                            </button>
                                        {% endif %}
                                        <button type="button"
                                                onclick="confirmDelete({{ email.id }}, '{{ email.recipient|e('js') }}')"
                                                class="text-red-600 hover:text-red-900"
                                                title="Supprimer">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            {# Mobile Cards #}
            <div class="lg:hidden p-4 space-y-4">
                {% for email in pagination %}
                    {% include 'admin/components/cards/email_logs_card.html.twig' with {item: email} %}
                {% endfor %}
            </div>

            {# Pagination #}
            {% if pagination.pageCount > 1 %}
                <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
                    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                        <div>
                            <p class="text-sm text-gray-700">
                                Page <span class="font-medium">{{ pagination.currentPageNumber }}</span> sur <span class="font-medium">{{ pagination.pageCount }}</span>
                            </p>
                        </div>
                        <div>
                            {{ knp_pagination_render(pagination) }}
                        </div>
                    </div>
                </div>
            {% endif %}
        {% endif %}
    </div>
</div>

{# Formulaires cachés pour actions #}
<form id="retryForm" method="post" style="display: none;">
    <input type="hidden" name="_token" id="retryToken">
</form>

<form id="deleteForm" method="post" style="display: none;">
    <input type="hidden" name="_token" id="deleteToken">
</form>

{# Scripts #}
<script>
// Réessayer un email
function confirmRetry(id, recipient) {
    if (confirm(`Voulez-vous réessayer l'envoi à:\n${recipient} ?`)) {
        const form = document.getElementById('retryForm');
        form.action = '{{ path('app_admin_emails_logs_retry', {id: '__ID__'}) }}'.replace('__ID__', id);
        document.getElementById('retryToken').value = '{{ csrf_token('retry_email_') }}' + id;
        form.submit();
    }
}

// Supprimer un email
function confirmDelete(id, recipient) {
    if (confirm(`Voulez-vous supprimer l'email à:\n${recipient} ?\n\nCette action est irréversible.`)) {
        const form = document.getElementById('deleteForm');
        form.action = '{{ path('app_admin_emails_logs_delete', {id: '__ID__'}) }}'.replace('__ID__', id);
        document.getElementById('deleteToken').value = '{{ csrf_token('delete_email_') }}' + id;
        form.submit();
    }
}
</script>
{% endblock %}