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

{% block page_title %}Statistiques 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="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">Statistiques SMS</h1>
                <p class="mt-2 text-sm text-gray-700">
                    Vue d'ensemble de vos envois SMS
                </p>
            </div>
        </div>
    </div>

    {# Today Stats #}
    <div class="mb-6">
        <h2 class="text-lg font-medium text-gray-900 mb-4">Aujourd'hui</h2>
        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
            <div class="bg-white overflow-hidden shadow rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-paper-plane text-indigo-600 text-2xl"></i>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Total envoyés</dt>
                                <dd class="text-2xl font-bold text-gray-900">{{ dashboardStats.today.total }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-check-circle text-green-600 text-2xl"></i>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Délivrés</dt>
                                <dd class="text-2xl font-bold text-gray-900">{{ dashboardStats.today.delivered }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-clock text-yellow-600 text-2xl"></i>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">En attente</dt>
                                <dd class="text-2xl font-bold text-gray-900">{{ dashboardStats.today.pending }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-times-circle text-red-600 text-2xl"></i>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Échecs</dt>
                                <dd class="text-2xl font-bold text-gray-900">{{ dashboardStats.today.failed }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# This Month Stats #}
    <div class="mb-6">
        <h2 class="text-lg font-medium text-gray-900 mb-4">Ce mois-ci</h2>
        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
            <div class="bg-gradient-to-br from-indigo-500 to-purple-600 overflow-hidden shadow-lg rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-paper-plane text-white text-2xl"></i>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-indigo-100 truncate">Total envoyés</dt>
                                <dd class="text-2xl font-bold text-white">{{ dashboardStats.this_month.total }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-gradient-to-br from-green-500 to-green-600 overflow-hidden shadow-lg rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-check-circle text-white text-2xl"></i>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-green-100 truncate">Délivrés</dt>
                                <dd class="text-2xl font-bold text-white">{{ dashboardStats.this_month.delivered }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-gradient-to-br from-yellow-500 to-yellow-600 overflow-hidden shadow-lg rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-clock text-white text-2xl"></i>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-yellow-100 truncate">En attente</dt>
                                <dd class="text-2xl font-bold text-white">{{ dashboardStats.this_month.pending }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-gradient-to-br from-red-500 to-red-600 overflow-hidden shadow-lg rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-times-circle text-white text-2xl"></i>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-red-100 truncate">Échecs</dt>
                                <dd class="text-2xl font-bold text-white">{{ dashboardStats.this_month.failed }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# All Time Stats #}
    <div class="mb-6">
        <h2 class="text-lg font-medium text-gray-900 mb-4">Total (depuis le début)</h2>
        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
            <div class="bg-white overflow-hidden shadow rounded-lg border-2 border-indigo-200">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-paper-plane text-indigo-600 text-2xl"></i>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Total envoyés</dt>
                                <dd class="text-2xl font-bold text-gray-900">{{ dashboardStats.total.total|number_format(0, ',', ' ') }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg border-2 border-green-200">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-check-circle text-green-600 text-2xl"></i>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Délivrés</dt>
                                <dd class="text-2xl font-bold text-gray-900">{{ dashboardStats.total.delivered|number_format(0, ',', ' ') }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg border-2 border-yellow-200">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-clock text-yellow-600 text-2xl"></i>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">En attente</dt>
                                <dd class="text-2xl font-bold text-gray-900">{{ dashboardStats.total.pending|number_format(0, ',', ' ') }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg border-2 border-red-200">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-times-circle text-red-600 text-2xl"></i>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">Échecs</dt>
                                <dd class="text-2xl font-bold text-gray-900">{{ dashboardStats.total.failed|number_format(0, ',', ' ') }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# Success Rate #}
    <div class="mb-6 bg-white shadow rounded-lg overflow-hidden">
        <div class="px-6 py-5">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Taux de réussite global</h3>
            {% set totalSuccessRate = dashboardStats.total.total > 0 ? ((dashboardStats.total.delivered / dashboardStats.total.total) * 100)|round(2) : 0 %}
            <div class="flex items-center">
                <div class="flex-1">
                    <div class="w-full bg-gray-200 rounded-full h-6">
                        <div class="bg-{{ totalSuccessRate >= 80 ? 'green' : (totalSuccessRate >= 50 ? 'yellow' : 'red') }}-500 h-6 rounded-full flex items-center justify-center transition-all duration-500"
                             style="width: {{ totalSuccessRate }}%">
                            <span class="text-xs font-bold text-white">{{ totalSuccessRate }}%</span>
                        </div>
                    </div>
                </div>
            </div>
            <p class="mt-2 text-sm text-gray-500">
                {{ dashboardStats.total.delivered|number_format(0, ',', ' ') }} SMS délivrés sur {{ dashboardStats.total.total|number_format(0, ',', ' ') }} envoyés
            </p>
        </div>
    </div>

    {# Chart - Last 30 Days #}
    <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">Évolution des envois (30 derniers jours)</h3>
            <div class="h-96">
                <canvas id="smsChart"></canvas>
            </div>
        </div>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('smsChart').getContext('2d');

        const chartData = {{ chartData|json_encode|raw }};

        const labels = chartData.map(item => item.date);
        const deliveredData = chartData.map(item => item.delivered);
        const failedData = chartData.map(item => item.failed);
        const pendingData = chartData.map(item => item.pending);

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Délivrés',
                        data: deliveredData,
                        borderColor: 'rgb(34, 197, 94)',
                        backgroundColor: 'rgba(34, 197, 94, 0.1)',
                        borderWidth: 2,
                        fill: true,
                        tension: 0.4
                    },
                    {
                        label: 'Échecs',
                        data: failedData,
                        borderColor: 'rgb(239, 68, 68)',
                        backgroundColor: 'rgba(239, 68, 68, 0.1)',
                        borderWidth: 2,
                        fill: true,
                        tension: 0.4
                    },
                    {
                        label: 'En attente',
                        data: pendingData,
                        borderColor: 'rgb(234, 179, 8)',
                        backgroundColor: 'rgba(234, 179, 8, 0.1)',
                        borderWidth: 2,
                        fill: true,
                        tension: 0.4
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0
                        }
                    }
                },
                interaction: {
                    mode: 'nearest',
                    axis: 'x',
                    intersect: false
                }
            }
        });
    });
</script>
{% endblock %}