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

{% block page_title %}Solde 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="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">Solde SMS</h1>
                    <p class="mt-2 text-sm text-gray-700">
                        Consultez votre crédit SMS restant
                    </p>
                </div>
            </div>
            <div class="mt-4 sm:mt-0">
                <form method="get" class="inline">
                    <button type="submit" name="refresh" value="1"
                            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-sync-alt mr-2"></i>
                        Rafraîchir
                    </button>
                </form>
            </div>
        </div>
    </div>

    {# Active Configuration Check #}
    {% if not activeConfig %}
        <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-triangle text-red-400 text-xl"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-red-800">Aucune configuration active</h3>
                    <div class="mt-2 text-sm text-red-700">
                        <p>Vous devez activer une configuration SMS pour consulter le solde.</p>
                        <a href="{{ path('admin_sms_index') }}" class="font-medium underline">
                            Configurer maintenant
                        </a>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        {# Balance Display #}
        {% set balanceStatus = balanceData.status|default('unknown') %}
        {% set balance = balanceData.balance|default(0) %}

        {# Main Balance Card #}
        <div class="bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg shadow-xl overflow-hidden mb-6">
            <div class="px-6 py-8">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <p class="text-indigo-100 text-sm font-medium uppercase tracking-wide mb-2">
                            Solde actuel
                        </p>
                        <p class="text-white text-5xl font-bold mb-2">
                            {{ balance|number_format(0, ',', ' ') }}
                        </p>
                        <p class="text-indigo-100 text-lg">
                            crédits SMS disponibles
                        </p>
                    </div>
                    <div class="flex-shrink-0 ml-6">
                        <div class="bg-white bg-opacity-20 rounded-full p-6">
                            <i class="fas fa-wallet text-white text-6xl"></i>
                        </div>
                    </div>
                </div>

                {# Balance Status #}
                <div class="mt-6 pt-6 border-t border-indigo-400">
                    <div class="flex items-center justify-between">
                        <span class="text-indigo-100 text-sm font-medium">Statut:</span>
                        {% if balanceStatus == 'critical' %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-bold bg-red-500 text-white">
                                <i class="fas fa-exclamation-triangle mr-2"></i>
                                CRITIQUE - Rechargez immédiatement
                            </span>
                        {% elseif balanceStatus == 'warning' %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-bold bg-yellow-500 text-white">
                                <i class="fas fa-exclamation-circle mr-2"></i>
                                FAIBLE - Rechargez bientôt
                            </span>
                        {% elseif balanceStatus == 'ok' %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-bold bg-blue-500 text-white">
                                <i class="fas fa-info-circle mr-2"></i>
                                CORRECT
                            </span>
                        {% elseif balanceStatus == 'good' %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-bold bg-green-500 text-white">
                                <i class="fas fa-check-circle mr-2"></i>
                                EXCELLENT
                            </span>
                        {% else %}
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-bold bg-gray-500 text-white">
                                <i class="fas fa-question-circle mr-2"></i>
                                INCONNU
                            </span>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        {# Alert Thresholds #}
        <div class="bg-white shadow rounded-lg overflow-hidden mb-6">
            <div class="px-6 py-5">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Seuils d'alerte</h3>
                <div class="space-y-4">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-red-500 rounded-full mr-3"></div>
                            <span class="text-sm font-medium text-gray-900">Critique</span>
                        </div>
                        <span class="text-sm text-gray-500">{"<"} 50 crédits</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-yellow-500 rounded-full mr-3"></div>
                            <span class="text-sm font-medium text-gray-900">Faible</span>
                        </div>
                        <span class="text-sm text-gray-500">50 - 99 crédits</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-blue-500 rounded-full mr-3"></div>
                            <span class="text-sm font-medium text-gray-900">Correct</span>
                        </div>
                        <span class="text-sm text-gray-500">100 - 499 crédits</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-green-500 rounded-full mr-3"></div>
                            <span class="text-sm font-medium text-gray-900">Excellent</span>
                        </div>
                        <span class="text-sm text-gray-500">≥ 500 crédits</span>
                    </div>
                </div>
            </div>
        </div>

        {# Configuration Details #}
        <div class="bg-white shadow rounded-lg overflow-hidden">
            <div class="px-6 py-5">
                <h3 class="text-lg font-medium text-gray-900 mb-4">Configuration utilisée</h3>
                <dl class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Nom de la configuration</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ activeConfig.name }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Expéditeur</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ activeConfig.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 truncate">{{ activeConfig.apiEndpoint }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Dernière vérification</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ lastCheck|date('d/m/Y à H:i') }}</dd>
                    </div>
                </dl>
            </div>
        </div>

        {# Recommendations based on balance #}
        {% if balanceStatus == 'critical' or balanceStatus == 'warning' %}
            <div class="mt-6 {{ balanceStatus == 'critical' ? 'bg-red-50 border-red-200' : 'bg-yellow-50 border-yellow-200' }} border rounded-lg p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-lightbulb {{ balanceStatus == 'critical' ? 'text-red-400' : 'text-yellow-400' }} text-xl"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium {{ balanceStatus == 'critical' ? 'text-red-800' : 'text-yellow-800' }}">
                            Recommandations
                        </h3>
                        <div class="mt-2 text-sm {{ balanceStatus == 'critical' ? 'text-red-700' : 'text-yellow-700' }}">
                            <ul class="list-disc list-inside space-y-1">
                                {% if balanceStatus == 'critical' %}
                                    <li>Rechargez votre compte SendText immédiatement pour éviter une interruption de service</li>
                                    <li>Contactez SendText pour recharger votre solde</li>
                                    <li>Suspendez temporairement les envois automatiques si nécessaire</li>
                                {% else %}
                                    <li>Prévoyez un rechargement dans les prochains jours</li>
                                    <li>Estimez vos besoins en fonction de votre utilisation habituelle</li>
                                    <li>Configurez une alerte automatique si disponible</li>
                                {% endif %}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    {% endif %}

</div>
{% endblock %}