{% extends "admin/layout.html" %}
{% block title %}Deletion Log – Admin{% endblock %}
{% block body %}
<div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="heading-deletion-log">
            <i class="fa fa-trash-clock mr-2 text-red-500"></i>{% trans %}Deletion Log{% endtrans %}
        </h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
            {% trans %}Audit trail of all deleted files, conversions, users, teams, and shares.{% endtrans %}
            <strong>{{ total }}</strong> {% trans %}record(s) total.{% endtrans %}
        </p>
    </div>
</div>

<div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden mb-6">
    <form method="GET" action="{{ full_url('/admin/deletion-log') }}" class="px-5 py-4 border-b border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50 flex flex-wrap gap-3 items-end">
        <div>
            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Search{% endtrans %}</label>
            <input type="text" name="q" value="{{ search }}" placeholder="{% trans %}Name or user…{% endtrans %}"
                class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-red-400">
        </div>
        <div>
            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Type{% endtrans %}</label>
            <select name="entity_type" class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-red-400">
                <option value="">{% trans %}All types{% endtrans %}</option>
                {% for et in entity_types %}
                <option value="{{ et }}" {% if entity_type == et %}selected{% endif %}>{{ et | replace('_', ' ') | title }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}Actor Role{% endtrans %}</label>
            <select name="actor_role" class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-red-400">
                <option value="">{% trans %}All roles{% endtrans %}</option>
                {% for ar in actor_roles %}
                <option value="{{ ar }}" {% if actor_role == ar %}selected{% endif %}>{{ ar | title }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}From Date{% endtrans %}</label>
            <input type="date" name="from_date" value="{{ from_date }}"
                class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-red-400">
        </div>
        <div>
            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{% trans %}To Date{% endtrans %}</label>
            <input type="date" name="to_date" value="{{ to_date }}"
                class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-red-400">
        </div>
        <div class="flex gap-2">
            <button type="submit" class="px-4 py-2 rounded-lg bg-gray-800 dark:bg-gray-700 text-white text-sm font-medium hover:bg-gray-900 dark:hover:bg-gray-600 transition-all">
                <i class="fa fa-filter mr-1"></i>{% trans %}Filter{% endtrans %}
            </button>
            {% if search or entity_type or actor_role or from_date or to_date %}
            <a href="{{ full_url('/admin/deletion-log') }}" class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">
                <i class="fa fa-times mr-1"></i>{% trans %}Clear{% endtrans %}
            </a>
            {% endif %}
        </div>
    </form>

    {% if entries %}
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}When{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Type{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Item Name{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Actor{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Role{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Size{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Details{% endtrans %}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                {% for entry in entries %}
                {% set type_colors = {
                    'file': 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
                    'conversion': 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',
                    'share': 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400',
                    'team': 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
                    'team_member': 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
                    'user': 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
                } %}
                {% set role_colors = {
                    'admin': 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
                    'scheduler': 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400',
                    'user': 'bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-400',
                    'team_member': 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
                    'api': 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-400',
                } %}
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400 whitespace-nowrap text-xs">
                        {{ entry.deleted_at[:16].replace('T', ' ') if entry.deleted_at else '—' }}
                    </td>
                    <td class="px-4 py-3">
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {{ type_colors.get(entry.entity_type, 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400') }}">
                            {{ entry.entity_type | replace('_', ' ') | title }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-gray-800 dark:text-gray-200 max-w-xs truncate" title="{{ entry.entity_name }}">
                        {{ entry.entity_name or '—' }}
                    </td>
                    <td class="px-4 py-3 text-gray-700 dark:text-gray-300 whitespace-nowrap">
                        {% if entry.actor_username %}
                        <span class="font-medium">{{ entry.actor_username }}</span>
                        {% if entry.actor_user_id %}
                        <a href="{{ full_url('/admin/users/' + entry.actor_user_id | string + '/edit') }}"
                           class="ml-1 text-xs text-gray-400 hover:text-blue-500 transition-colors"
                           title="{% trans %}View user{% endtrans %}">#{{ entry.actor_user_id }}</a>
                        {% endif %}
                        {% else %}—{% endif %}
                    </td>
                    <td class="px-4 py-3">
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {{ role_colors.get(entry.actor_role, 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400') }}">
                            {{ entry.actor_role | title }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400 whitespace-nowrap text-xs">
                        {% if entry.file_size_bytes %}
                            {% set sz = entry.file_size_bytes %}
                            {% if sz >= 1073741824 %}{{ '%.1f' | format(sz / 1073741824) }} GB
                            {% elif sz >= 1048576 %}{{ '%.1f' | format(sz / 1048576) }} MB
                            {% elif sz >= 1024 %}{{ '%.0f' | format(sz / 1024) }} KB
                            {% else %}{{ sz }} B{% endif %}
                        {% else %}—{% endif %}
                    </td>
                    <td class="px-4 py-3 text-gray-400 dark:text-gray-500 text-xs">
                        {% if entry.team_name %}
                        <span class="mr-2"><i class="fa fa-users mr-1"></i>{{ entry.team_name }}</span>
                        {% endif %}
                        {% if entry.extra_meta and entry.extra_meta != '{}' %}
                        <span class="font-mono bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded text-xs" title="{{ entry.extra_meta }}">
                            {%- set meta = entry.extra_meta | tojson -%}
                            meta
                        </span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% if total_pages > 1 %}
    <div class="px-5 py-4 border-t border-gray-100 dark:border-gray-800 flex items-center justify-between">
        <p class="text-xs text-gray-500 dark:text-gray-400">
            {% trans %}Page{% endtrans %} {{ page }} {% trans %}of{% endtrans %} {{ total_pages }}
        </p>
        <div class="flex gap-2">
            {% if page > 1 %}
            <a href="?page={{ page - 1 }}&q={{ search }}&entity_type={{ entity_type }}&actor_role={{ actor_role }}&from_date={{ from_date }}&to_date={{ to_date }}"
               class="px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">{% trans %}Previous{% endtrans %}</a>
            {% endif %}
            {% if page < total_pages %}
            <a href="?page={{ page + 1 }}&q={{ search }}&entity_type={{ entity_type }}&actor_role={{ actor_role }}&from_date={{ from_date }}&to_date={{ to_date }}"
               class="px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">{% trans %}Next{% endtrans %}</a>
            {% endif %}
        </div>
    </div>
    {% endif %}

    {% else %}
    <div class="px-5 py-16 text-center">
        <i class="fa fa-trash text-5xl text-gray-300 dark:text-gray-700 mb-4 block"></i>
        <p class="text-sm text-gray-500 dark:text-gray-400">{% trans %}No deletion events recorded yet.{% endtrans %}</p>
        {% if search or entity_type or actor_role %}
        <a href="{{ full_url('/admin/deletion-log') }}" class="mt-3 inline-block text-xs text-blue-500 hover:underline">{% trans %}Clear filters{% endtrans %}</a>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}