{% extends 'admin/layout.html.twig' %}

{% block page_title %}Email Logs{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-xl font-bold text-gray-800">Email Statistics</h2>
            <p class="text-sm text-gray-500">Monitor all outgoing emails from the system</p>
        </div>
    </div>

    {# Today's Quota Usage #}
    <div class="bg-white rounded-lg border-2 {% if urgencyLevel == 'critical' %}border-red-500{% elseif urgencyLevel == 'high' %}border-orange-500{% elseif urgencyLevel == 'medium' %}border-yellow-500{% elseif urgencyLevel == 'low' %}border-blue-500{% else %}border-gray-200{% endif %} p-5">
        <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-4">
            <div>
                <h3 class="text-lg font-semibold text-gray-900">Today's Quota Usage</h3>
                <p class="text-sm text-gray-500 mt-1">{{ todayStats.date ? todayStats.date|date('l, F j, Y') : 'Today' }}</p>
            </div>
            <div class="text-right">
                <div class="text-3xl font-bold {% if urgencyLevel == 'critical' %}text-red-600{% elseif urgencyLevel == 'high' %}text-orange-600{% elseif urgencyLevel == 'medium' %}text-yellow-600{% elseif urgencyLevel == 'low' %}text-blue-600{% else %}text-gray-900{% endif %}">
                    {{ todayStats.totalCount }} / {{ quotaLimit }}
                </div>
                <div class="text-sm text-gray-500 mt-1">{{ quotaUsagePercent }}% used</div>
            </div>
        </div>

        {# Progress bar #}
        <div class="relative w-full bg-gray-200 h-8 rounded-full overflow-hidden">
            <div class="absolute inset-y-0 left-0 {% if urgencyLevel == 'critical' %}bg-red-500{% elseif urgencyLevel == 'high' %}bg-orange-500{% elseif urgencyLevel == 'medium' %}bg-yellow-500{% elseif urgencyLevel == 'low' %}bg-blue-500{% else %}bg-green-500{% endif %} transition-all duration-500"
                 style="width: {{ quotaUsagePercent > 100 ? 100 : quotaUsagePercent }}%"></div>
            <div class="absolute inset-0 flex items-center justify-center text-sm font-medium text-gray-900">
                {{ remaining }} emails remaining
            </div>
        </div>

        {% if urgencyLevel == 'critical' %}
            <div class="mt-4 bg-red-50 border border-red-200 rounded-lg p-4">
                <p class="text-sm text-red-800">
                    <strong><i class="bi bi-exclamation-triangle-fill mr-1"></i> Quota Exceeded:</strong> You've reached your daily email limit. Additional emails may not be delivered.
                </p>
            </div>
        {% elseif urgencyLevel == 'high' %}
            <div class="mt-4 bg-orange-50 border border-orange-200 rounded-lg p-4">
                <p class="text-sm text-orange-800">
                    <strong><i class="bi bi-exclamation-triangle mr-1"></i> Warning:</strong> You're approaching your daily quota limit. Monitor email activity closely.
                </p>
            </div>
        {% endif %}
    </div>

    {# Summary Cards #}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        {# Today #}
        <div class="bg-white rounded-lg border border-gray-200 p-5">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-sm font-medium text-gray-500">Today</h3>
                <i class="bi bi-calendar-event text-blue-500"></i>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ todayStats.totalCount }}</div>
            <div class="text-sm text-gray-500">emails sent</div>

            {% if todayStats.breakdown|length > 0 %}
                <div class="mt-4 pt-4 border-t border-gray-200 space-y-2">
                    {% for type, count in todayStats.breakdown %}
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-600">{{ type|replace({'_': ' '})|title }}</span>
                            <span class="font-medium text-gray-900">{{ count }}</span>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        </div>

        {# This Week #}
        <div class="bg-white rounded-lg border border-gray-200 p-5">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-sm font-medium text-gray-500">Last 7 Days</h3>
                <i class="bi bi-graph-up text-green-500"></i>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ weekTotal }}</div>
            <div class="text-sm text-gray-500">emails sent</div>
            <div class="text-xs text-gray-400 mt-2">Avg: {{ (weekTotal / 7)|round(1) }} per day</div>
        </div>

        {# This Month #}
        <div class="bg-white rounded-lg border border-gray-200 p-5">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-sm font-medium text-gray-500">Last 30 Days</h3>
                <i class="bi bi-bar-chart text-purple-500"></i>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ monthTotal }}</div>
            <div class="text-sm text-gray-500">emails sent</div>
            <div class="text-xs text-gray-400 mt-2">Avg: {{ (monthTotal / 30)|round(1) }} per day</div>
        </div>
    </div>

    {# Daily Breakdown Chart #}
    {% if weekStats|length > 0 %}
    <div class="bg-white rounded-lg border border-gray-200 p-5">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Last 7 Days Trend</h3>
        <div class="space-y-3">
            {% for stats in weekStats %}
                {% set percent = (stats.totalCount / quotaLimit * 100)|round(1) %}
                <div>
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-sm font-medium text-gray-700">{{ stats.date|date('D, M j') }}</span>
                        <span class="text-sm text-gray-600">{{ stats.totalCount }} / {{ quotaLimit }} ({{ percent }}%)</span>
                    </div>
                    <div class="w-full bg-gray-200 h-5 rounded-full overflow-hidden">
                        <div class="h-full {% if percent >= 100 %}bg-red-500{% elseif percent >= 90 %}bg-orange-500{% elseif percent >= 75 %}bg-yellow-500{% else %}bg-green-500{% endif %} transition-all"
                             style="width: {{ percent > 100 ? 100 : percent }}%"></div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {# Detailed Logs #}
    <div class="bg-white rounded-lg border border-gray-200">
        <div class="p-5 border-b border-gray-200">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                <h3 class="text-lg font-semibold text-gray-900">Email Logs</h3>
                <input type="date"
                       id="dateSelector"
                       value="{{ selectedDate }}"
                       class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-kitsco-accent focus:border-transparent"
                       onchange="window.location.href = '{{ path('admin_email_log_index') }}?date=' + this.value">
            </div>
            <p class="text-sm text-gray-500 mt-1">Showing {{ selectedDateLogs|length }} emails sent on {{ selectedDate|date('F j, Y') }}</p>
        </div>

        {% if selectedDateLogs|length > 0 %}
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50 border-b border-gray-200">
                        <tr>
                            <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
                            <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Recipient</th>
                            <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subject</th>
                            <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                            <th class="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for log in selectedDateLogs %}
                            <tr class="hover:bg-gray-50">
                                <td class="px-5 py-4 whitespace-nowrap text-sm text-gray-900">
                                    {{ log.sentAt|date('g:i A') }}
                                </td>
                                <td class="px-5 py-4 text-sm text-gray-900">
                                    {% if log.recipientUser %}
                                        <div>{{ log.recipientUser.fullName }}</div>
                                        <div class="text-xs text-gray-500">{{ log.recipientEmail }}</div>
                                    {% else %}
                                        {{ log.recipientEmail }}
                                    {% endif %}
                                </td>
                                <td class="px-5 py-4 text-sm text-gray-900 max-w-xs truncate">
                                    {{ log.subject }}
                                </td>
                                <td class="px-5 py-4 whitespace-nowrap text-sm">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                        {{ log.emailType|replace({'_': ' '})|title }}
                                    </span>
                                </td>
                                <td class="px-5 py-4 whitespace-nowrap text-sm">
                                    {% if log.status == 'sent' %}
                                        <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="bi bi-check-circle mr-1"></i> Sent
                                        </span>
                                    {% else %}
                                        <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="bi bi-x-circle mr-1"></i> Failed
                                        </span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="p-8 text-center">
                <i class="bi bi-envelope text-4xl text-gray-300"></i>
                <h3 class="mt-2 text-sm font-medium text-gray-900">No emails sent</h3>
                <p class="mt-1 text-sm text-gray-500">No emails were sent on this date.</p>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}