{% extends "base.html" %}
{% block title %}{{ _("Audit Log") }}{% endblock %}
{% block content %}
<div class="p-3 sm:p-6 max-w-6xl">

  <div class="flex items-center justify-between mb-6">
    <div>
      <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
        <span class="material-symbols-outlined text-brand-600 dark:text-brand-400">history</span>
        {{ _("Audit Log") }}
        {% if locked %}
        <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-bold tracking-wide bg-purple-100 dark:bg-purple-500/20 text-purple-600 dark:text-purple-400 border border-purple-200 dark:border-purple-500/30">MAX</span>
        {% endif %}
      </h2>
      <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ _("A record of all ticket actions and account events in your workspace.") }}</p>
    </div>
    {% if not locked %}
    <span class="text-xs text-gray-400 dark:text-gray-500">{% trans count=total_count %}{{ count }} event{% pluralize %}{{ count }} events{% endtrans %}</span>
    {% endif %}
  </div>

  {% if locked %}
  {# ── Upsell / locked state ── #}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-8 text-center">
    <div class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-purple-100 dark:bg-purple-500/20 mb-4">
      <span class="material-symbols-outlined text-purple-600 dark:text-purple-400 text-2xl">lock</span>
    </div>
    <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-2">{{ _("Audit Log requires the MAX plan") }}</h3>
    <p class="text-sm text-gray-500 dark:text-gray-400 mb-5 max-w-sm mx-auto">
      {% trans %}Track every ticket action, status change, and account event with a full searchable history. Available on MAX.{% endtrans %}
    </p>
    <button type="button" onclick='showUpgradeModal("max", {{ _("Audit Log")|tojson }})'
            class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold text-white bg-purple-600 hover:bg-purple-700 rounded-xl transition-colors">
      <span class="material-symbols-outlined text-base">upgrade</span>
      {{ _("Upgrade to MAX") }}
    </button>
  </div>

  {% elif logs %}
  {# ── Log table ── #}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
    <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="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ _("Timestamp") }}</th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400">{{ _("Actor") }}</th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400">{{ _("Action") }}</th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400">{{ _("Details") }}</th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ _("IP") }}</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
          {% for log in logs %}
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
            <td class="px-4 py-3 whitespace-nowrap text-xs text-gray-500 dark:text-gray-400 font-mono">
              {{ log.created_at|localdt('%Y-%m-%d %H:%M:%S') if log.created_at else '—' }}
            </td>
            <td class="px-4 py-3 text-gray-700 dark:text-gray-300 text-xs max-w-[160px] truncate" title="{{ log.actor }}">
              {% if log.actor == 'System' %}
                <span class="inline-flex items-center gap-1 text-gray-400 dark:text-gray-500">
                  <span class="material-symbols-outlined text-xs">smart_toy</span>
                  {{ _("System") }}
                </span>
              {% else %}
                {{ log.actor }}
              {% endif %}
            </td>
            <td class="px-4 py-3">
              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
                {% if 'sent' in log.action or 'reply' in log.action %}
                  bg-green-100 dark:bg-green-500/20 text-green-700 dark:text-green-300
                {% elif 'status' in log.action %}
                  bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-300
                {% elif 'credential' in log.action %}
                  bg-amber-100 dark:bg-amber-500/20 text-amber-700 dark:text-amber-300
                {% elif 'priority' in log.action %}
                  bg-orange-100 dark:bg-orange-500/20 text-orange-700 dark:text-orange-300
                {% else %}
                  bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300
                {% endif %}
              ">
                {{ log.action | audit_action }}
              </span>
            </td>
            <td class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400 font-mono max-w-xs truncate" title="{{ log.payload_json or '' }}">
              {% if log.payload_json %}
                {{ log.payload_json[:120] }}{% if log.payload_json | length > 120 %}…{% endif %}
              {% else %}
                <span class="text-gray-300 dark:text-gray-600">—</span>
              {% endif %}
            </td>
            <td class="px-4 py-3 text-xs text-gray-400 dark:text-gray-500 font-mono whitespace-nowrap">
              {{ log.ip_address or '—' }}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    {# ── Pagination ── #}
    {% if total_pages > 1 %}
    <div class="border-t border-gray-100 dark:border-gray-700 px-4 py-3 flex items-center justify-between bg-gray-50 dark:bg-gray-800/50">
      <span class="text-xs text-gray-500 dark:text-gray-400">
        {{ _("Page %(page)s of %(total_pages)s", page=page, total_pages=total_pages) }}
      </span>
      <div class="flex items-center gap-2">
        {% if page > 1 %}
        <a href="{{ url_for('settings_audit_log', page=page-1) }}"
           class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
          <span class="material-symbols-outlined text-sm">chevron_left</span>
          {{ _("Prev") }}
        </a>
        {% endif %}
        {% if page < total_pages %}
        <a href="{{ url_for('settings_audit_log', page=page+1) }}"
           class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
          {{ _("Next") }}
          <span class="material-symbols-outlined text-sm">chevron_right</span>
        </a>
        {% endif %}
      </div>
    </div>
    {% endif %}
  </div>

  {% else %}
  {# ── Empty state ── #}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-12 text-center">
    <span class="material-symbols-outlined text-4xl text-gray-300 dark:text-gray-600 mb-3 block">history</span>
    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ _("No audit events yet") }}</p>
    <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">{{ _("Events will appear here as your team uses ModuleDesk.") }}</p>
  </div>
  {% endif %}

</div>
{% endblock %}