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

{% block page_title %}Détails de la configuration SMS{% endblock %}

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

    {# Header Section #}
    <div class="mb-8">
        <div class="sm:flex sm:items-center sm:justify-between">
            <div class="flex items-center space-x-4">
                <a href="{{ path('admin_sms_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">{{ configuration.name }}</h1>
                    <p class="mt-2 text-sm text-gray-700">
                        Configuration ID: {{ configuration.id }}
                    </p>
                </div>
            </div>
            <div class="mt-4 sm:mt-0 flex space-x-3">
                {% if not configuration.isActive %}
                    <form method="post" action="{{ path('admin_sms_activate', {id: configuration.id}) }}" class="inline">
                        <button type="submit"
                                class="inline-flex items-center px-4 py-2 border border-green-600 shadow-sm text-sm font-medium rounded-md text-green-600 bg-white hover:bg-green-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-colors duration-150"
                                onclick="return confirm('Activer cette configuration ?')">
                            <i class="fas fa-check mr-2"></i>
                            Activer
                        </button>
                    </form>
                {% endif %}
                <form method="post" action="{{ path('admin_sms_test', {id: configuration.id}) }}" class="inline">
                    <button type="submit"
                            class="inline-flex items-center px-4 py-2 border border-blue-600 shadow-sm text-sm font-medium rounded-md text-blue-600 bg-white hover:bg-blue-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-150">
                        <i class="fas fa-vial mr-2"></i>
                        Tester la connexion
                    </button>
                </form>
                <a href="{{ path('admin_sms_edit', {id: configuration.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-edit mr-2"></i>
                    Modifier
                </a>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
        {# Configuration 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">Détails de la configuration</h3>
                <dl class="space-y-4">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Nom</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ configuration.name }}</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">{{ configuration.senderName }}</dd>
                    </div>

                    <div>
                        <dt class="text-sm font-medium text-gray-500">Statut</dt>
                        <dd class="mt-1">
                            {% if configuration.isActive %}
                                <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-circle mr-1"></i>
                                    Active
                                </span>
                            {% else %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                    <i class="fas fa-times-circle mr-1"></i>
                                    Inactive
                                </span>
                            {% endif %}
                        </dd>
                    </div>

                    <div>
                        <dt class="text-sm font-medium text-gray-500">API Key</dt>
                        <dd class="mt-1 text-sm text-gray-900 font-mono">
                            {{ configuration.apiKey[:20] }}...{{ configuration.apiKey[-10:] }}
                        </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">
                            <a href="{{ configuration.apiEndpoint }}" target="_blank" class="text-indigo-600 hover:text-indigo-800">
                                {{ configuration.apiEndpoint }}
                                <i class="fas fa-external-link-alt ml-1 text-xs"></i>
                            </a>
                        </dd>
                    </div>

                    <div>
                        <dt class="text-sm font-medium text-gray-500">Endpoint Solde</dt>
                        <dd class="mt-1 text-sm text-gray-900 break-all">
                            <a href="{{ configuration.balanceEndpoint }}" target="_blank" class="text-indigo-600 hover:text-indigo-800">
                                {{ configuration.balanceEndpoint }}
                                <i class="fas fa-external-link-alt ml-1 text-xs"></i>
                            </a>
                        </dd>
                    </div>

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

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

        {# Statistics #}
        <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">Statistiques d'utilisation</h3>

                <div class="space-y-4">
                    <div class="bg-gray-50 rounded-lg p-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-500">SMS envoyés (total)</p>
                                <p class="mt-1 text-2xl font-bold text-gray-900">{{ configuration.smsLogs|length }}</p>
                            </div>
                            <div class="flex-shrink-0">
                                <i class="fas fa-envelope text-indigo-600 text-3xl"></i>
                            </div>
                        </div>
                    </div>

                    <div class="bg-gray-50 rounded-lg p-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-500">Campagnes créées</p>
                                <p class="mt-1 text-2xl font-bold text-gray-900">{{ configuration.smsCampaigns|length }}</p>
                            </div>
                            <div class="flex-shrink-0">
                                <i class="fas fa-bullhorn text-green-600 text-3xl"></i>
                            </div>
                        </div>
                    </div>

                    <div class="bg-blue-50 rounded-lg p-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-blue-700">Dernière utilisation</p>
                                <p class="mt-1 text-sm font-medium text-blue-900">
                                    {% if configuration.smsLogs|length > 0 %}
                                        {{ configuration.smsLogs|last.createdAt|date('d/m/Y à H:i') }}
                                    {% else %}
                                        Jamais utilisée
                                    {% endif %}
                                </p>
                            </div>
                            <div class="flex-shrink-0">
                                <i class="fas fa-clock text-blue-600 text-3xl"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# Danger Zone #}
    {% if not configuration.isActive %}
        <div class="mt-6 bg-white shadow rounded-lg overflow-hidden border-2 border-red-200">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg font-medium text-red-900 mb-2">Zone de danger</h3>
                <p class="text-sm text-gray-500 mb-4">
                    La suppression d'une configuration est irréversible. Tous les logs associés seront conservés mais la configuration sera définitivement supprimée.
                </p>
                <form method="post" action="{{ path('admin_sms_delete', {id: configuration.id}) }}" class="inline">
                    <button type="submit"
                            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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-150"
                            onclick="return confirm('ATTENTION: Voulez-vous vraiment supprimer cette configuration ?\n\nCette action est irréversible.')">
                        <i class="fas fa-trash mr-2"></i>
                        Supprimer la configuration
                    </button>
                </form>
            </div>
        </div>
    {% else %}
        <div class="mt-6 bg-yellow-50 border border-yellow-200 rounded-lg p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-lock text-yellow-400 text-xl"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-yellow-800">Configuration protégée</h3>
                    <div class="mt-2 text-sm text-yellow-700">
                        <p>Cette configuration est active et ne peut pas être supprimée. Désactivez-la d'abord pour pouvoir la supprimer.</p>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

</div>
{% endblock %}