<!-- Discord Action Log — Trinity Console -->
<!-- REQ-2026-04-15-discord-action-log (Chronicler #92, Issue #1) -->

<style>
  .badge { display:inline-block; padding:2px 8px; border-radius:9999px; font-size:10px; font-weight:600; }
  .badge-success { background:#065f46; color:#a7f3d0; }
  .badge-fail    { background:#7f1d1d; color:#fecaca; }
  .at-reaction_role_add    { background:#1e3a8a; color:#bfdbfe; }
  .at-reaction_role_remove { background:#4c1d95; color:#ddd6fe; }
  .at-wanderer_assigned    { background:#065f46; color:#a7f3d0; }
  .at-welcome_dm           { background:#92400e; color:#fde68a; }
  .at-link_reminder_dm     { background:#164e63; color:#a5f3fc; }
</style>

<div class="flex items-center justify-between mb-4">
  <h1 class="text-2xl font-bold">📜 Discord Action Log</h1>
</div>

<!-- Filters -->
<form method="get" action="/admin/discord-log" class="flex flex-wrap gap-2 mb-4 items-center">
  <select name="action_type" onchange="this.form.submit()" class="bg-gray-800 text-gray-200 text-xs rounded px-2 py-1 border border-gray-700">
    <option value="">All types</option>
    <% actionTypes.forEach(function(t) { %>
      <option value="<%= t %>" <%= filters.action_type === t ? 'selected' : '' %>><%= t %></option>
    <% }) %>
  </select>
  <input type="text" name="search" placeholder="Search Discord ID or username"
         value="<%= filters.search || '' %>"
         class="bg-gray-800 text-gray-200 text-xs rounded px-2 py-1 border border-gray-700 w-56">
  <button type="submit" class="bg-cyan-600 hover:bg-cyan-700 text-white px-3 py-1 rounded text-xs">Filter</button>
  <% if (filters.action_type || filters.search) { %>
    <a href="/admin/discord-log" class="text-xs text-cyan-400 hover:underline ml-2">Clear</a>
  <% } %>
</form>

<!-- Table -->
<div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
  <% if (logs.length === 0) { %>
    <div class="p-6 text-center text-gray-500">No actions logged yet.</div>
  <% } else { %>
    <div class="overflow-x-auto">
      <table class="w-full text-sm">
        <thead class="bg-gray-100 dark:bg-gray-800 text-xs uppercase text-gray-500 dark:text-gray-400">
          <tr>
            <th class="px-3 py-2 text-left">Time</th>
            <th class="px-3 py-2 text-left">Action</th>
            <th class="px-3 py-2 text-left">User</th>
            <th class="px-3 py-2 text-left">Status</th>
            <th class="px-3 py-2 text-left">Details</th>
          </tr>
        </thead>
        <tbody>
          <% logs.forEach(function(l) { %>
            <tr class="border-t border-gray-200 dark:border-gray-700">
              <td class="px-3 py-2 text-gray-500 text-xs whitespace-nowrap"><%= new Date(l.created_at).toLocaleString() %></td>
              <td class="px-3 py-2">
                <span class="badge at-<%= l.action_type %>"><%= l.action_type %></span>
              </td>
              <td class="px-3 py-2">
                <% if (l.username) { %>
                  <span class="text-gray-200"><%= l.username %></span>
                  <span class="text-gray-600 text-xs ml-1">(<%= l.discord_id %>)</span>
                <% } else if (l.discord_id) { %>
                  <span class="text-gray-400 font-mono text-xs"><%= l.discord_id %></span>
                <% } else { %>
                  <span class="text-gray-600 text-xs">—</span>
                <% } %>
              </td>
              <td class="px-3 py-2">
                <% if (l.success) { %>
                  <span class="badge badge-success">OK</span>
                <% } else { %>
                  <span class="badge badge-fail">FAIL</span>
                <% } %>
              </td>
              <td class="px-3 py-2 text-gray-400 text-xs">
                <% if (l.error_message) { %>
                  <span class="text-red-400" title="<%= l.error_message %>">❌ <%= l.error_message.substring(0, 60) %></span>
                <% } else { %>
                  <%
                    var d = typeof l.details === 'string' ? JSON.parse(l.details || '{}') : (l.details || {});
                    var parts = [];
                    if (d.roleId)    parts.push('role:' + d.roleId);
                    if (d.emoji)     parts.push('emoji:' + d.emoji);
                    if (d.tierLevel) parts.push('tier:' + d.tierLevel);
                  %>
                  <span class="text-gray-500"><%= parts.join(' · ') || '—' %></span>
                <% } %>
              </td>
            </tr>
          <% }) %>
        </tbody>
      </table>
    </div>
  <% } %>
</div>

<div class="text-xs text-gray-500 mt-3">Showing most recent 100 actions.</div>
