<!-- MCP Logs Module — Trinity Console -->
<!-- Chronicler #78 | April 11, 2026 -->

<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
  <div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
    <div class="text-sm text-gray-500 dark:text-gray-400">Total Commands</div>
    <div class="text-2xl font-bold mt-1"><%= stats.total %></div>
  </div>
  <div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
    <div class="text-sm text-gray-500 dark:text-gray-400">Successful</div>
    <div class="text-2xl font-bold mt-1 text-green-500"><%= stats.success_count %></div>
  </div>
  <div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
    <div class="text-sm text-gray-500 dark:text-gray-400">Failed</div>
    <div class="text-2xl font-bold mt-1 text-red-500"><%= stats.fail_count %></div>
  </div>
  <div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
    <div class="text-sm text-gray-500 dark:text-gray-400">Avg Execution</div>
    <div class="text-2xl font-bold mt-1 text-frost"><%= stats.avg_time %>ms</div>
  </div>
</div>

<!-- Filters -->
<div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4 mb-6">
  <form method="GET" class="flex flex-wrap gap-4 items-end">
    <div>
      <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Server</label>
      <select name="server" class="bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 text-sm">
        <option value="">All Servers</option>
        <% servers.forEach(s => { %>
          <option value="<%= s %>" <%= query.server === s ? 'selected' : '' %>><%= s %></option>
        <% }); %>
      </select>
    </div>
    <div>
      <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Status</label>
      <select name="success" class="bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md px-3 py-2 text-sm">
        <option value="">All</option>
        <option value="true" <%= query.success === 'true' ? 'selected' : '' %>>Success</option>
        <option value="false" <%= query.success === 'false' ? 'selected' : '' %>>Failed</option>
      </select>
    </div>
    <div class="flex gap-2">
      <button type="submit" class="bg-frost text-white px-4 py-2 rounded-md text-sm hover:opacity-90 transition">Filter</button>
      <a href="/admin/mcp-logs" class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-md text-sm hover:opacity-90 transition">Reset</a>
    </div>
  </form>
</div>

<!-- Logs Table -->
<div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
  <table class="w-full">
    <thead>
      <tr class="border-b border-gray-200 dark:border-gray-700 text-left text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider">
        <th class="px-4 py-3">Time</th>
        <th class="px-4 py-3">Server</th>
        <th class="px-4 py-3">Command</th>
        <th class="px-4 py-3">Status</th>
        <th class="px-4 py-3">Duration</th>
        <th class="px-4 py-3"></th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
      <% if (logs.length === 0) { %>
        <tr>
          <td colspan="6" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
            <% if (stats.total == 0) { %>
              No commands logged yet. Commands executed via Trinity Core will appear here.
            <% } else { %>
              No logs match your filters.
            <% } %>
          </td>
        </tr>
      <% } %>
      <% logs.forEach(log => {
        const time = new Date(log.executed_at);
        const timeStr = time.toLocaleString('en-US', { month:'short', day:'numeric', hour:'numeric', minute:'2-digit', second:'2-digit', hour12:true });
        const cmdShort = log.command.length > 60 ? log.command.substring(0, 60) + '...' : log.command;
      %>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition cursor-pointer" onclick="toggleDetail('<%= log.id %>')">
          <td class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap"><%= timeStr %></td>
          <td class="px-4 py-3">
            <span class="inline-block px-2 py-0.5 text-xs rounded-full
              <% if (log.server === 'tx1-dallas') { %>bg-fire/20 text-fire
              <% } else if (log.server === 'nc1-charlotte') { %>bg-frost/20 text-frost
              <% } else if (log.server === 'command-center' || log.server === 'trinity-core') { %>bg-universal/20 text-universal
              <% } else { %>bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300
              <% } %>
            "><%= log.server %></span>
          </td>
          <td class="px-4 py-3"><code class="text-xs text-gray-300"><%= cmdShort %></code></td>
          <td class="px-4 py-3">
            <% if (log.success) { %>
              <span class="inline-block px-2 py-0.5 text-xs rounded-full bg-green-500/20 text-green-500">✓ OK</span>
            <% } else { %>
              <span class="inline-block px-2 py-0.5 text-xs rounded-full bg-red-500/20 text-red-500">✗ Fail</span>
            <% } %>
          </td>
          <td class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400"><%= log.execution_time_ms || '—' %>ms</td>
          <td class="px-4 py-3 text-xs text-gray-400">▼</td>
        </tr>
        <!-- Expandable detail row -->
        <tr id="detail-<%= log.id %>" style="display:none;" class="bg-gray-50 dark:bg-gray-800/30">
          <td colspan="6" class="px-4 py-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <div class="text-xs text-gray-500 dark:text-gray-400 mb-1 font-semibold">Full Command</div>
                <pre class="bg-gray-900 text-green-400 text-xs p-3 rounded-md overflow-x-auto max-h-32"><%= log.command %></pre>
              </div>
              <div>
                <div class="text-xs text-gray-500 dark:text-gray-400 mb-1 font-semibold">Output</div>
                <pre class="bg-gray-900 text-gray-300 text-xs p-3 rounded-md overflow-x-auto max-h-32"><%= log.stdout || '(no output)' %></pre>
              </div>
              <% if (log.stderr) { %>
              <div>
                <div class="text-xs text-yellow-500 mb-1 font-semibold">STDERR</div>
                <pre class="bg-yellow-900/20 text-yellow-300 text-xs p-3 rounded-md overflow-x-auto max-h-32"><%= log.stderr %></pre>
              </div>
              <% } %>
              <% if (log.error) { %>
              <div>
                <div class="text-xs text-red-500 mb-1 font-semibold">Error</div>
                <pre class="bg-red-900/20 text-red-300 text-xs p-3 rounded-md overflow-x-auto max-h-32"><%= log.error %></pre>
              </div>
              <% } %>
            </div>
          </td>
        </tr>
      <% }); %>
    </tbody>
  </table>
</div>

<!-- Pagination -->
<% if (total > limit) { %>
<div class="flex justify-center mt-6 gap-2">
  <% const totalPages = Math.ceil(total / limit); %>
  <% const currentPage = Math.floor(offset / limit) + 1; %>
  <% for (let i = 1; i <= totalPages && i <= 10; i++) {
    const pageOffset = (i - 1) * limit;
    const params = new URLSearchParams({...query, offset: pageOffset});
    params.delete('offset');
    if (pageOffset > 0) params.set('offset', pageOffset);
  %>
    <a href="/admin/mcp-logs?<%= params.toString() %>"
       class="px-3 py-1 rounded-md text-sm <%= currentPage === i ? 'bg-frost text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600' %> transition">
      <%= i %>
    </a>
  <% } %>
</div>
<% } %>

<script>
function toggleDetail(id) {
  const row = document.getElementById('detail-' + id);
  if (row) {
    row.style.display = row.style.display === 'none' ? '' : 'none';
  }
}
</script>
