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

{% block page_title %}Detail audit #{{ log.id }}{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="bg-gradient-to-r from-gray-700 to-gray-900 rounded-lg shadow-lg p-6 text-white">
        <div class="flex items-center justify-between flex-wrap gap-4">
            <div>
                <h1 class="text-3xl font-bold"><i class="fas fa-shield-alt mr-3"></i>Detail de l'audit</h1>
                <p class="mt-2 text-gray-300">{{ log.actionLabel }} — {{ log.createdAt|date('d/m/Y H:i:s') }}</p>
            </div>
            <a href="{{ path('manager_pos_audit_logs_index') }}" class="inline-flex items-center px-4 py-2 bg-white/20 text-white rounded-lg text-sm hover:bg-white/30 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>Retour
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {# Main info #}
        <div class="lg:col-span-2 space-y-6">
            {# Description #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
                <h2 class="text-sm font-semibold text-gray-900 dark:text-white mb-3"><i class="fas fa-info-circle mr-2 text-blue-500"></i>Description</h2>
                <p class="text-sm text-gray-700 dark:text-gray-300">{{ log.description }}</p>
            </div>

            {# Old vs New values #}
            {% if log.oldValues or log.newValues %}
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
                    <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                        <h2 class="text-sm font-semibold text-gray-900 dark:text-white"><i class="fas fa-exchange-alt mr-2 text-orange-500"></i>Modifications</h2>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                            <thead class="bg-gray-50 dark:bg-gray-700">
                                <tr>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Champ</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Avant</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Apres</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                                {% set allKeys = [] %}
                                {% if log.oldValues %}
                                    {% for key in log.oldValues|keys %}
                                        {% set allKeys = allKeys|merge([key]) %}
                                    {% endfor %}
                                {% endif %}
                                {% if log.newValues %}
                                    {% for key in log.newValues|keys %}
                                        {% if key not in allKeys %}
                                            {% set allKeys = allKeys|merge([key]) %}
                                        {% endif %}
                                    {% endfor %}
                                {% endif %}

                                {% for key in allKeys %}
                                    {% set oldVal = log.oldValues[key]|default(null) %}
                                    {% set newVal = log.newValues[key]|default(null) %}
                                    <tr class="{{ oldVal != newVal ? 'bg-yellow-50 dark:bg-yellow-900/10' : '' }}">
                                        <td class="px-4 py-2 text-sm font-medium text-gray-900 dark:text-white">{{ key }}</td>
                                        <td class="px-4 py-2 text-sm text-red-600">
                                            {% if oldVal is iterable %}
                                                <code class="text-xs">{{ oldVal|json_encode }}</code>
                                            {% else %}
                                                {{ oldVal ?? '-' }}
                                            {% endif %}
                                        </td>
                                        <td class="px-4 py-2 text-sm text-green-600">
                                            {% if newVal is iterable %}
                                                <code class="text-xs">{{ newVal|json_encode }}</code>
                                            {% else %}
                                                {{ newVal ?? '-' }}
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            {% endif %}

            {# Metadata #}
            {% if log.metadata|default([])|length > 0 %}
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
                    <h2 class="text-sm font-semibold text-gray-900 dark:text-white mb-3"><i class="fas fa-database mr-2 text-purple-500"></i>Metadonnees</h2>
                    <div class="space-y-1">
                        {% for key, value in log.metadata %}
                            <div class="flex justify-between text-sm">
                                <span class="text-gray-500">{{ key }}</span>
                                <span class="font-medium text-gray-900 dark:text-white">
                                    {% if value is iterable %}
                                        <code class="text-xs">{{ value|json_encode }}</code>
                                    {% else %}
                                        {{ value }}
                                    {% endif %}
                                </span>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
        </div>

        {# Sidebar #}
        <div class="space-y-6">
            {# Log details #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
                <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3"><i class="fas fa-clipboard-list mr-1 text-gray-500"></i>Informations</h3>
                <div class="space-y-3 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-500">ID :</span>
                        <span class="font-mono text-gray-900 dark:text-white">#{{ log.id }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Action :</span>
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
                            {% if 'created' in log.action or 'enabled' in log.action or 'approved' in log.action %}
                                bg-green-100 text-green-800
                            {% elseif 'deleted' in log.action or 'voided' in log.action or 'cancelled' in log.action or 'rejected' in log.action %}
                                bg-red-100 text-red-800
                            {% else %}
                                bg-blue-100 text-blue-800
                            {% endif %}
                        ">{{ log.actionLabel }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Type :</span>
                        <span class="font-medium text-gray-900 dark:text-white capitalize">{{ log.entityType|replace({'_': ' '}) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">ID entite :</span>
                        <span class="font-mono text-gray-900 dark:text-white">#{{ log.entityId }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Date :</span>
                        <span class="font-medium text-gray-900 dark:text-white">{{ log.createdAt|date('d/m/Y H:i:s') }}</span>
                    </div>
                </div>
            </div>

            {# User info #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
                <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3"><i class="fas fa-user mr-1 text-indigo-500"></i>Utilisateur</h3>
                <div class="space-y-3 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-500">Nom :</span>
                        <span class="font-medium text-gray-900 dark:text-white">{{ log.user.fullName|default(log.user.email) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Email :</span>
                        <span class="text-gray-900 dark:text-white text-xs">{{ log.user.email }}</span>
                    </div>
                </div>
            </div>

            {# Security info #}
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-5">
                <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3"><i class="fas fa-lock mr-1 text-red-500"></i>Securite</h3>
                <div class="space-y-3 text-sm">
                    <div>
                        <span class="text-gray-500 block">Adresse IP :</span>
                        <span class="font-mono text-gray-900 dark:text-white">{{ log.ipAddress ?? 'N/A' }}</span>
                    </div>
                    {% if log.userAgent %}
                        <div>
                            <span class="text-gray-500 block">User Agent :</span>
                            <span class="text-xs text-gray-700 dark:text-gray-400 break-all">{{ log.userAgent }}</span>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}