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

{% block page_title %}Détails du SMS{% endblock %}

{% block content %}
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    {# Header Section #}
    <div class="mb-8">
        <div class="flex items-center space-x-4">
            <a href="{{ path('admin_sms_logs_index') }}"
               class="inline-flex items-center px-3 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 duration-150">
                <i class="fas fa-arrow-left mr-2"></i>
                Retour
            </a>
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Détails du SMS</h1>
                <p class="mt-2 text-sm text-gray-700">
                    SMS ID: {{ smsLog.id }}
                </p>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
        {# SMS Details #}
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Informations d'envoi</h3>
                <dl class="space-y-4">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Destinataire (téléphone)</dt>
                        <dd class="mt-1 text-sm text-gray-900 font-mono">
                            <i class="fas fa-mobile-alt text-indigo-600 mr-2"></i>
                            {{ smsLog.recipient }}
                        </dd>
                    </div>

                    {% if smsLog.user %}
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Utilisateur associé</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                {{ smsLog.user.fullName }}
                                <span class="text-gray-500">({{ smsLog.user.email }})</span>
                            </dd>
                        </div>
                    {% endif %}

                    <div>
                        <dt class="text-sm font-medium text-gray-500">Type de SMS</dt>
                        <dd class="mt-1">
                            {% if smsLog.smsType == 'flash' %}
                                <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-bolt mr-1"></i>
                                    Flash
                                </span>
                            {% else %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                    <i class="fas fa-sms mr-1"></i>
                                    Normal
                                </span>
                            {% endif %}
                        </dd>
                    </div>

                    <div>
                        <dt class="text-sm font-medium text-gray-500">Statut</dt>
                        <dd class="mt-1">
                            {% if smsLog.statusId == 3 %}
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
                                    <i class="fas fa-check-circle mr-2"></i>
                                    {{ smsLog.statusLabel }}
                                </span>
                            {% elseif smsLog.statusId == 1 %}
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
                                    <i class="fas fa-paper-plane mr-2"></i>
                                    {{ smsLog.statusLabel }}
                                </span>
                            {% elseif smsLog.statusId == 2 %}
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-orange-100 text-orange-800">
                                    <i class="fas fa-clock mr-2"></i>
                                    {{ smsLog.statusLabel }}
                                </span>
                            {% elseif smsLog.statusId == 4 %}
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
                                    <i class="fas fa-exclamation-circle mr-2"></i>
                                    {{ smsLog.statusLabel }}
                                </span>
                            {% elseif smsLog.statusId == 5 %}
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
                                    <i class="fas fa-ban mr-2"></i>
                                    {{ smsLog.statusLabel }}
                                </span>
                            {% else %}
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800">
                                    <i class="fas fa-question-circle mr-2"></i>
                                    {{ smsLog.statusLabel }}
                                </span>
                            {% endif %}
                        </dd>
                    </div>

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

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

        {# Configuration Used #}
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Configuration utilisée</h3>
                {% if smsLog.smsConfiguration %}
                    <dl class="space-y-4">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Nom de la configuration</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                <a href="{{ path('admin_sms_show', {id: smsLog.smsConfiguration.id}) }}"
                                   class="text-indigo-600 hover:text-indigo-800">
                                    {{ smsLog.smsConfiguration.name }}
                                </a>
                            </dd>
                        </div>

                        <div>
                            <dt class="text-sm font-medium text-gray-500">Nom d'expéditeur</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                {{ smsLog.smsConfiguration.senderName }}
                            </dd>
                        </div>

                        <div>
                            <dt class="text-sm font-medium text-gray-500">Endpoint API</dt>
                            <dd class="mt-1 text-sm text-gray-900 break-all">
                                {{ smsLog.smsConfiguration.apiEndpoint }}
                            </dd>
                        </div>
                    </dl>
                {% else %}
                    <p class="text-sm text-gray-500">Configuration non disponible</p>
                {% endif %}
            </div>
        </div>
    </div>

    {# Message Content #}
    <div class="mt-6 bg-white shadow rounded-lg overflow-hidden">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Contenu du message</h3>
            <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                <p class="text-sm text-gray-900 whitespace-pre-wrap">{{ smsLog.message }}</p>
            </div>
            <div class="mt-4 flex items-center justify-between text-sm text-gray-500">
                <div>
                    <i class="fas fa-info-circle mr-1"></i>
                    {{ smsLog.message|length }} caractères
                </div>
                <div>
                    {% set smsCount = (smsLog.message|length / 160)|round(0, 'ceil') %}
                    {{ smsCount }} SMS consommé(s)
                </div>
            </div>
        </div>
    </div>

    {# Campaign Association #}
    {% if smsLog.campaign %}
        <div class="mt-6 bg-white shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Campagne associée</h3>
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-900">{{ smsLog.campaign.name }}</p>
                        <p class="text-sm text-gray-500 mt-1">
                            Créée le {{ smsLog.campaign.createdAt|date('d/m/Y à H:i') }}
                            par {{ smsLog.campaign.createdBy.fullName }}
                        </p>
                    </div>
                    <a href="{{ path('admin_sms_campaigns_show', {id: smsLog.campaign.id}) }}"
                       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 duration-150">
                        <i class="fas fa-bullhorn mr-2"></i>
                        Voir la campagne
                    </a>
                </div>
            </div>
        </div>
    {% endif %}

    {# API Response (if available) #}
    {% if smsLog.apiResponse %}
        <div class="mt-6 bg-white shadow rounded-lg overflow-hidden">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Réponse complète de l'API</h3>
                <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto">
                    <pre class="text-sm text-green-400 font-mono whitespace-pre-wrap">{{ smsLog.apiResponse|json_encode(constant('JSON_PRETTY_PRINT') b-or constant('JSON_UNESCAPED_UNICODE') b-or constant('JSON_UNESCAPED_SLASHES')) }}</pre>
                </div>
                <p class="mt-2 text-xs text-gray-500">
                    <i class="fas fa-info-circle mr-1"></i>
                    Cette section contient la réponse complète de l'API SendText pour faciliter le debugging
                </p>
            </div>
        </div>
    {% endif %}

    {# Failure Reason (if failed) #}
    {% if smsLog.failureReason %}
        <div class="mt-6 bg-red-50 border border-red-200 rounded-lg p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-circle text-red-400 text-xl"></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">
                        <p>{{ smsLog.failureReason }}</p>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

</div>
{% endblock %}