{% extends 'admin/layout.html.twig' %}
{% block title %}Audit Log - KitscoApp{% endblock %}
{% block page_title %}Audit Log{% endblock %}

{% block content %}
<div class="mb-6">
    <p class="text-gray-500 text-sm">Track all user actions and system changes</p>
</div>

{# Filters #}
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-6">
    <form method="GET" action="{{ path('admin_audit_index') }}" class="flex flex-wrap gap-4 items-end">
        <div class="flex-1 min-w-[150px]">
            <label class="block text-xs font-medium text-gray-500 mb-1">User</label>
            <select name="user" class="w-full rounded-lg border-gray-300 text-sm focus:ring-kitsco-accent focus:border-kitsco-accent">
                <option value="">All Users</option>
                {% for user in users %}
                    <option value="{{ user.id }}" {{ filters.user == user.id ? 'selected' }}>{{ user.fullName }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="flex-1 min-w-[150px]">
            <label class="block text-xs font-medium text-gray-500 mb-1">Entity Type</label>
            <select name="entity_type" class="w-full rounded-lg border-gray-300 text-sm focus:ring-kitsco-accent focus:border-kitsco-accent">
                <option value="">All Types</option>
                {% for type in entityTypes %}
                    <option value="{{ type }}" {{ filters.entity_type == type ? 'selected' }}>{{ type }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="flex-1 min-w-[150px]">
            <label class="block text-xs font-medium text-gray-500 mb-1">Action</label>
            <select name="action" class="w-full rounded-lg border-gray-300 text-sm focus:ring-kitsco-accent focus:border-kitsco-accent">
                <option value="">All Actions</option>
                {% for actionType in actionTypes %}
                    <option value="{{ actionType.value }}" {{ filters.action == actionType.value ? 'selected' }}>{{ actionType.label }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="flex-1 min-w-[130px]">
            <label class="block text-xs font-medium text-gray-500 mb-1">From Date</label>
            <input type="date" name="date_from" value="{{ filters.date_from }}" class="w-full rounded-lg border-gray-300 text-sm focus:ring-kitsco-accent focus:border-kitsco-accent">
        </div>
        <div class="flex-1 min-w-[130px]">
            <label class="block text-xs font-medium text-gray-500 mb-1">To Date</label>
            <input type="date" name="date_to" value="{{ filters.date_to }}" class="w-full rounded-lg border-gray-300 text-sm focus:ring-kitsco-accent focus:border-kitsco-accent">
        </div>
        <div class="flex gap-2">
            <button type="submit" class="inline-flex items-center gap-1.5 bg-kitsco-accent hover:bg-kitsco-dark text-white font-medium py-2 px-4 rounded-lg transition-colors text-sm">
                <i class="bi bi-funnel"></i> Filter
            </button>
            <a href="{{ path('admin_audit_index') }}" class="inline-flex items-center gap-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 rounded-lg transition-colors text-sm">
                <i class="bi bi-x-lg"></i> Clear
            </a>
        </div>
    </form>
</div>

{# Results summary #}
<div class="flex items-center justify-between mb-4">
    <p class="text-sm text-gray-500">
        Showing {{ ((pagination.page - 1) * pagination.perPage) + 1 }}-{{ min(pagination.page * pagination.perPage, pagination.total) }}
        of {{ pagination.total|number_format }} entries
    </p>
</div>

{# Log table #}
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
                <tr>
                    <th class="px-4 py-3 text-left font-medium">Date/Time</th>
                    <th class="px-4 py-3 text-left font-medium">User</th>
                    <th class="px-4 py-3 text-left font-medium">Action</th>
                    <th class="px-4 py-3 text-left font-medium">Entity</th>
                    <th class="px-4 py-3 text-left font-medium">Description</th>
                    <th class="px-4 py-3 text-left font-medium">IP Address</th>
                    <th class="px-4 py-3 text-center font-medium">Details</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {% for log in logs %}
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-4 py-3 text-gray-500 whitespace-nowrap">
                        <div class="text-gray-800">{{ log.occurredAt|date('d M Y') }}</div>
                        <div class="text-xs text-gray-400">{{ log.occurredAt|date('H:i:s') }}</div>
                    </td>
                    <td class="px-4 py-3">
                        <div class="font-medium text-gray-800">{{ log.performedBy.fullName }}</div>
                        <div class="text-xs text-gray-400">{{ log.performedBy.email }}</div>
                    </td>
                    <td class="px-4 py-3">
                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium {{ log.actionType.badgeClass }}">
                            <i class="fas {{ log.actionType.icon }}"></i>
                            {{ log.actionType.label }}
                        </span>
                    </td>
                    <td class="px-4 py-3">
                        <div class="font-medium text-gray-800">{{ log.entityType }}</div>
                        {% if log.entityLabel %}
                            <div class="text-xs text-gray-500">{{ log.entityLabel }}</div>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 text-gray-600 max-w-xs truncate" title="{{ log.description }}">
                        {{ log.description|default('-') }}
                    </td>
                    <td class="px-4 py-3 text-gray-500 text-xs font-mono">
                        {{ log.ipAddress|default('-') }}
                    </td>
                    <td class="px-4 py-3 text-center">
                        {% if log.oldValues or log.newValues %}
                            <button type="button"
                                    class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 text-gray-500 hover:bg-gray-50 transition-colors"
                                    onclick="toggleDetails({{ log.id }})"
                                    title="View Details">
                                <i class="bi bi-chevron-down text-sm" id="icon-{{ log.id }}"></i>
                            </button>
                        {% else %}
                            <span class="text-gray-300">-</span>
                        {% endif %}
                    </td>
                </tr>
                {% if log.oldValues or log.newValues %}
                <tr id="details-{{ log.id }}" class="hidden bg-gray-50">
                    <td colspan="7" class="px-4 py-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            {% if log.oldValues %}
                            <div>
                                <h4 class="text-xs font-semibold text-gray-500 uppercase mb-2">Previous Values</h4>
                                <div class="bg-red-50 border border-red-100 rounded-lg p-3">
                                    <pre class="text-xs text-red-800 whitespace-pre-wrap">{{ log.oldValues|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
                                </div>
                            </div>
                            {% endif %}
                            {% if log.newValues %}
                            <div>
                                <h4 class="text-xs font-semibold text-gray-500 uppercase mb-2">New Values</h4>
                                <div class="bg-green-50 border border-green-100 rounded-lg p-3">
                                    <pre class="text-xs text-green-800 whitespace-pre-wrap">{{ log.newValues|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </td>
                </tr>
                {% endif %}
                {% else %}
                <tr>
                    <td colspan="7" class="px-4 py-16 text-center">
                        <div class="text-gray-400">
                            <i class="bi bi-clipboard-data text-4xl"></i>
                            <p class="mt-3 font-medium text-gray-500">No audit logs found</p>
                            <p class="text-sm text-gray-400">Try adjusting your filters</p>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{# Pagination #}
{% if pagination.totalPages > 1 %}
<div class="flex items-center justify-between mt-6">
    <div class="text-sm text-gray-500">
        Page {{ pagination.page }} of {{ pagination.totalPages }}
    </div>
    <div class="flex items-center gap-2">
        {% if pagination.page > 1 %}
            <a href="{{ path('admin_audit_index', filters|merge({page: pagination.page - 1})) }}"
               class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 text-sm">
                <i class="bi bi-chevron-left"></i> Previous
            </a>
        {% endif %}

        {% set start = max(1, pagination.page - 2) %}
        {% set end = min(pagination.totalPages, pagination.page + 2) %}

        {% if start > 1 %}
            <a href="{{ path('admin_audit_index', filters|merge({page: 1})) }}"
               class="inline-flex items-center justify-center w-9 h-9 rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 text-sm">1</a>
            {% if start > 2 %}
                <span class="text-gray-400">...</span>
            {% endif %}
        {% endif %}

        {% for p in start..end %}
            <a href="{{ path('admin_audit_index', filters|merge({page: p})) }}"
               class="inline-flex items-center justify-center w-9 h-9 rounded-lg border text-sm {{ p == pagination.page ? 'bg-kitsco-accent text-white border-kitsco-accent' : 'border-gray-300 text-gray-600 hover:bg-gray-50' }}">
                {{ p }}
            </a>
        {% endfor %}

        {% if end < pagination.totalPages %}
            {% if end < pagination.totalPages - 1 %}
                <span class="text-gray-400">...</span>
            {% endif %}
            <a href="{{ path('admin_audit_index', filters|merge({page: pagination.totalPages})) }}"
               class="inline-flex items-center justify-center w-9 h-9 rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 text-sm">{{ pagination.totalPages }}</a>
        {% endif %}

        {% if pagination.page < pagination.totalPages %}
            <a href="{{ path('admin_audit_index', filters|merge({page: pagination.page + 1})) }}"
               class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 text-sm">
                Next <i class="bi bi-chevron-right"></i>
            </a>
        {% endif %}
    </div>
</div>
{% endif %}

<script>
function toggleDetails(id) {
    const detailsRow = document.getElementById('details-' + id);
    const icon = document.getElementById('icon-' + id);

    if (detailsRow.classList.contains('hidden')) {
        detailsRow.classList.remove('hidden');
        icon.classList.remove('bi-chevron-down');
        icon.classList.add('bi-chevron-up');
    } else {
        detailsRow.classList.add('hidden');
        icon.classList.remove('bi-chevron-up');
        icon.classList.add('bi-chevron-down');
    }
}
</script>
{% endblock %}