<!DOCTYPE html>
<html lang="<%= lang || 'id' %>">
<head>
  <meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
  <title><%= title %> | <%= company %></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="/css/admin.css">
  <style>
    .log-details { font-family: monospace; font-size: 11px; background: rgba(0,0,0,0.1); padding: 8px; border-radius: 4px; white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow-y: auto; }
    .badge-action { padding: 3px 8px; border-radius: 4px; font-weight: 600; font-size: 10px; }
    .badge-CREATE { background: var(--sdim); color: var(--success); }
    .badge-UPDATE { background: var(--wdim); color: var(--warning); }
    .badge-DELETE { background: var(--ddim); color: var(--danger); }
    .badge-LOGIN { background: var(--pdim); color: var(--primary); }
    .badge-LOGOUT { background: var(--bg3); color: var(--muted); }
    .stat-grid-4 { grid-template-columns: repeat(4, 1fr); }
  </style>
</head>
<body>
<%- include('partials/sidebar', { activePage: 'audit_logs', company }) %>

<div class="mw">
  <div class="topbar">
    <div class="tb-title">
      <button class="hb-menu" onclick="toggleSidebar()"><i class="bi bi-list"></i></button>
      <i class="bi bi-shield-lock"></i>
      <span><%= title %></span>
    </div>
    <div class="tb-right">
      <a href="/admin/logout" class="btn btn-g btn-sm"><i class="bi bi-box-arrow-left"></i></a>
    </div>
  </div>

  <div class="page">
    <div class="stat-grid stat-grid-4">
      <div class="sc p">
        <div class="sc-label">Total Log</div>
        <div class="sc-val"><%= stats.total %></div>
      </div>
      <div class="sc s">
        <div class="sc-label">Aktivitas 24 Jam</div>
        <div class="sc-val"><%= stats.recent_24h %></div>
      </div>
      <div class="sc w">
        <div class="sc-label">Update Data</div>
        <div class="sc-val"><%= stats.by_action.find(a => a.action === 'UPDATE')?.count || 0 %></div>
      </div>
      <div class="sc d">
        <div class="sc-label">Penghapusan</div>
        <div class="sc-val"><%= stats.by_action.find(a => a.action === 'DELETE')?.count || 0 %></div>
      </div>
    </div>

    <div class="card">
      <div class="card-hd">
        <h6><i class="bi bi-list-columns-reverse"></i> Log Aktivitas Sistem</h6>
        <div class="flex gap">
          <form class="flex gap" method="GET">
            <select class="fs fs-sm" name="action" onchange="this.form.submit()">
              <option value="">-- Semua Aksi --</option>
              <% stats.by_action.forEach(a => { %>
                <option value="<%= a.action %>" <%= filters.action === a.action ? 'selected' : '' %>><%= a.action %></option>
              <% }) %>
            </select>
            <select class="fs fs-sm" name="entity_type" onchange="this.form.submit()">
              <option value="">-- Semua Modul --</option>
              <% stats.by_entity_type.forEach(e => { %>
                <option value="<%= e.entity_type %>" <%= filters.entity_type === e.entity_type ? 'selected' : '' %>><%= e.entity_type %></option>
              <% }) %>
            </select>
          </form>
        </div>
      </div>
      <div class="tbl-wrap">
        <table class="dtbl">
          <thead>
            <tr>
              <th>Waktu</th>
              <th>Aksi</th>
              <th>Modul</th>
              <th>ID Entity</th>
              <th>Pelaku</th>
              <th>Detail</th>
              <th>IP / Device</th>
            </tr>
          </thead>
          <tbody>
            <% logs.forEach(log => { %>
              <tr>
                <td class="text-muted" style="font-size:11px">
                  <%= new Date(log.created_at).toLocaleString('id-ID') %>
                </td>
                <td>
                  <span class="badge-action badge-<%= log.action %>"><%= log.action %></span>
                </td>
                <td><span class="badge bm"><%= log.entity_type %></span></td>
                <td class="text-muted"><%= log.entity_id || '-' %></td>
                <td>
                  <div class="fw6"><%= log.actor_name %></div>
                  <div class="text-muted" style="font-size:10px"><%= log.actor_type %> (ID: <%= log.actor_id %>)</div>
                </td>
                <td>
                  <% if (log.details) { %>
                    <button class="btn btn-g btn-sm" onclick="toggleDetails('det-<%= log.id %>')">Lihat Detail</button>
                    <div id="det-<%= log.id %>" class="log-details mt-2" style="display:none">
                      <%= JSON.stringify(log.details, null, 2) %>
                    </div>
                  <% } else { %>
                    <span class="text-muted">-</span>
                  <% } %>
                </td>
                <td class="text-muted" style="font-size:10px">
                  <div><%= log.ip_address || '-' %></div>
                  <div style="max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="<%= log.user_agent %>">
                    <%= log.user_agent || '-' %>
                  </div>
                </td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<script>
  function toggleDetails(id) {
    const el = document.getElementById(id);
    el.style.display = el.style.display === 'none' ? 'block' : 'none';
  }
  function toggleSidebar() { document.querySelector('.sidebar').classList.toggle('open'); }
</script>
</body>
</html>
