{% 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>
                    <div class="flex items-center">
                        <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                        <a href="{{ path('app_admin_emails_logs_list') }}" class="text-sm font-medium text-gray-700 hover:text-indigo-600">Liste</a>
                    </div>
                </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">#{{ emailLog.id }}</span>
                    </div>
                </li>
            </ol>
        </nav>
        <div class="flex justify-between items-center">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Email #{{ emailLog.id }}</h1>
                <p class="mt-1 text-sm text-gray-600">{{ emailLog.recipient }}</p>
            </div>
            <div class="flex space-x-2">
                {% if emailLog.isFailed and emailLog.attemptCount < 5 %}
                    <form method="post" action="{{ path('app_admin_emails_logs_retry', {id: emailLog.id}) }}" style="display: inline;">
                        <input type="hidden" name="_token" value="{{ csrf_token('retry_email_' ~ emailLog.id) }}">
                        <button type="submit"
                                onclick="return confirm('Réessayer l\'envoi de cet email ?')"
                                class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700">
                            <i class="fas fa-redo mr-2"></i> Réessayer
                        </button>
                    </form>
                {% endif %}
                <form method="post" action="{{ path('app_admin_emails_logs_delete', {id: emailLog.id}) }}" style="display: inline;">
                    <input type="hidden" name="_token" value="{{ csrf_token('delete_email_' ~ emailLog.id) }}">
                    <button type="submit"
                            onclick="return confirm('Supprimer cet email ?\n\nCette action est irréversible.')"
                            class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700">
                        <i class="fas fa-trash mr-2"></i> Supprimer
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
        {# Contenu principal #}
        <div class="lg:col-span-2 space-y-6">
            {# Informations email #}
            <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-info-circle text-blue-500 mr-2"></i>
                        Informations
                    </h3>
                    <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                        <div class="sm:col-span-2">
                            <dt class="text-sm font-medium text-gray-500">Destinataire</dt>
                            <dd class="mt-1 text-sm text-gray-900 font-semibold">{{ emailLog.recipient }}</dd>
                        </div>

                        <div class="sm:col-span-2">
                            <dt class="text-sm font-medium text-gray-500">Sujet</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ emailLog.subject }}</dd>
                        </div>

                        <div>
                            <dt class="text-sm font-medium text-gray-500">Statut</dt>
                            <dd class="mt-1">
                                {% if emailLog.isSent %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                        <i class="fas fa-check mr-1"></i> Envoyé
                                    </span>
                                {% elseif emailLog.isFailed %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                        <i class="fas fa-times mr-1"></i> Échoué
                                    </span>
                                {% else %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                        <i class="fas fa-clock mr-1"></i> En attente
                                    </span>
                                {% endif %}
                            </dd>
                        </div>

                        <div>
                            <dt class="text-sm font-medium text-gray-500">Tentatives</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ emailLog.attemptCount }}</dd>
                        </div>

                        <div>
                            <dt class="text-sm font-medium text-gray-500">Créé le</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ emailLog.createdAt|date('d/m/Y à H:i:s') }}</dd>
                        </div>

                        {% if emailLog.sentAt %}
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Envoyé le</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ emailLog.sentAt|date('d/m/Y à H:i:s') }}</dd>
                            </div>
                        {% endif %}

                        {% if emailLog.lastAttemptAt %}
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Dernière tentative</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ emailLog.lastAttemptAt|date('d/m/Y à H:i:s') }}</dd>
                            </div>
                        {% endif %}

                        {% if emailLog.templateName %}
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Template</dt>
                                <dd class="mt-1 text-sm text-gray-900">
                                    <i class="fas fa-file-code text-indigo-500"></i> {{ emailLog.templateName }}
                                </dd>
                            </div>
                        {% endif %}

                        {% if emailLog.fromEmail %}
                            <div class="sm:col-span-2">
                                <dt class="text-sm font-medium text-gray-500">Expéditeur</dt>
                                <dd class="mt-1 text-sm text-gray-900">
                                    {% if emailLog.fromName %}
                                        {{ emailLog.fromName }} &lt;{{ emailLog.fromEmail }}&gt;
                                    {% else %}
                                        {{ emailLog.fromEmail }}
                                    {% endif %}
                                </dd>
                            </div>
                        {% endif %}
                    </dl>
                </div>
            </div>

            {# Erreur si échec #}
            {% if emailLog.isFailed and emailLog.failureReason %}
                <div class="bg-red-50 border-l-4 border-red-400 p-4">
                    <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">Raison de l'échec</h3>
                            <div class="mt-2 text-sm text-red-700">
                                <pre class="whitespace-pre-wrap">{{ emailLog.failureReason }}</pre>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}

            {# Preview du contenu #}
            <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-eye text-purple-500 mr-2"></i>
                        Aperçu du Contenu
                    </h3>

                    {# Tabs #}
                    <div class="border-b border-gray-200 mb-4">
                        <nav class="-mb-px flex space-x-8" aria-label="Tabs">
                            {% if emailLog.htmlBody %}
                                <button onclick="showTab('html')"
                                        id="tab-html"
                                        class="tab-button border-b-2 py-2 px-1 text-sm font-medium border-indigo-500 text-indigo-600">
                                    <i class="fas fa-code mr-1"></i> HTML
                                </button>
                            {% endif %}
                            <button onclick="showTab('text')"
                                    id="tab-text"
                                    class="tab-button border-b-2 py-2 px-1 text-sm font-medium {{ emailLog.htmlBody ? 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' : 'border-indigo-500 text-indigo-600' }}">
                                <i class="fas fa-file-alt mr-1"></i> Texte
                            </button>
                        </nav>
                    </div>

                    {# Tab contents #}
                    {% if emailLog.htmlBody %}
                        <div id="content-html" class="tab-content">
                            <iframe sandbox="allow-same-origin"
                                    srcdoc="{{ emailLog.htmlBody|e('html_attr') }}"
                                    class="w-full border border-gray-300 rounded"
                                    style="height: 500px;"></iframe>
                        </div>
                    {% endif %}

                    <div id="content-text" class="tab-content {{ emailLog.htmlBody ? 'hidden' : '' }}">
                        <div class="bg-gray-50 p-4 rounded-md">
                            <pre class="whitespace-pre-wrap text-sm text-gray-900">{{ emailLog.body }}</pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# Sidebar #}
        <div class="space-y-6">
            {# Config SMTP #}
            {% if emailLog.smtpConfiguration %}
                <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-server text-blue-500 mr-2"></i>
                            Config SMTP
                        </h3>
                        <dl class="space-y-2">
                            <div>
                                <dt class="text-xs text-gray-500">Nom</dt>
                                <dd class="text-sm font-medium text-gray-900">{{ emailLog.smtpConfiguration.name }}</dd>
                            </div>
                            <div>
                                <dt class="text-xs text-gray-500">Hôte</dt>
                                <dd class="text-sm text-gray-900">{{ emailLog.smtpConfiguration.host }}:{{ emailLog.smtpConfiguration.port }}</dd>
                            </div>
                        </dl>
                    </div>
                </div>
            {% endif %}

            {# Métadonnées template #}
            {% if emailLog.templateData %}
                <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-database text-gray-600 mr-2"></i>
                            Données Template
                        </h3>
                        <pre class="text-xs bg-gray-900 text-gray-100 p-3 rounded overflow-x-auto">{{ emailLog.templateData|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
                    </div>
                </div>
            {% endif %}

            {# Actions #}
            <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
                    </h3>
                    <div class="space-y-3">
                        <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-arrow-left mr-2"></i> Retour à la liste
                        </a>
                        <a href="{{ path('app_admin_emails_logs_index') }}"
                           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-home mr-2"></i> Dashboard
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{# Scripts pour tabs #}
<script>
function showTab(tab) {
    // Hide all
    document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
    document.querySelectorAll('.tab-button').forEach(el => {
        el.classList.remove('border-indigo-500', 'text-indigo-600');
        el.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
    });

    // Show selected
    document.getElementById('content-' + tab).classList.remove('hidden');
    const button = document.getElementById('tab-' + tab);
    button.classList.add('border-indigo-500', 'text-indigo-600');
    button.classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
}
</script>
{% endblock %}