<div class="container mx-auto px-4 py-8">
  <div class="max-w-6xl mx-auto bg-white shadow rounded p-6">
    <details class="mb-4 border rounded p-4">
      <summary class="cursor-pointer font-semibold">Bu sayfa ne işe yarar? Nasıl kullanırım?</summary>
      <div class="mt-3 text-sm text-gray-700 space-y-2">
        <p><b>Audit Log</b> tüm istekleri ve işlemleri kayıt altına alır (kullanıcı, IP, UA, metod, URL, durum, action/resource).</p>
        <p><b>Filtreler</b>: Kullanıcı adı, action/resource, HTTP metod, durum, tarih aralığı ve serbest metin (URL/UA/IP) ile daraltın.</p>
        <p><b>Sayfalama</b>: Alt kısımdan sayfa numaraları ile gezinin.</p>
        <p><b>Detay</b>: Bir satıra tıklayarak detayları modal içinde görüntüleyin.</p>
      </div>
    </details>
    <h1 class="text-2xl font-bold mb-4">Audit Log</h1>
    <form method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-3 mb-4">
      <input type="hidden" name="_csrf" value="<%= csrfToken %>">
      <div>
        <label class="text-xs text-gray-600">Kullanıcı</label>
        <input class="input input-bordered input-sm w-full" type="text" name="username" value="<%= (query && query.username) || '' %>">
      </div>
      <div>
        <label class="text-xs text-gray-600">Action</label>
        <input class="input input-bordered input-sm w-full" type="text" name="action" value="<%= (query && query.action) || '' %>">
      </div>
      <div>
        <label class="text-xs text-gray-600">Resource</label>
        <input class="input input-bordered input-sm w-full" type="text" name="resource" value="<%= (query && query.resource) || '' %>">
      </div>
      <div>
        <label class="text-xs text-gray-600">Method</label>
        <input class="input input-bordered input-sm w-full" type="text" name="method" value="<%= (query && query.method) || '' %>">
      </div>
      <div>
        <label class="text-xs text-gray-600">Status</label>
        <input class="input input-bordered input-sm w-full" type="number" name="status" value="<%= (query && query.status) || '' %>">
      </div>
      <div>
        <label class="text-xs text-gray-600">From</label>
        <input class="input input-bordered input-sm w-full" type="date" name="from" value="<%= (query && query.from) || '' %>">
      </div>
      <div>
        <label class="text-xs text-gray-600">To</label>
        <input class="input input-bordered input-sm w-full" type="date" name="to" value="<%= (query && query.to) || '' %>">
      </div>
      <div class="md:col-span-2">
        <label class="text-xs text-gray-600">Ara (URL/UA/IP)</label>
        <input class="input input-bordered input-sm w-full" type="text" name="q" placeholder="/posts, Mozilla, 1.2.3.4" value="<%= (query && query.q) || '' %>">
      </div>
      <div class="md:col-span-4">
        <button class="btn btn-primary btn-sm">Filtrele</button>
        <a class="btn btn-sm ml-2" href="/audit">Temizle</a>
      </div>
    </form>
    <div class="overflow-x-auto bg-white rounded">
      <table class="table table-zebra w-full">
        <thead class="bg-gray-50">
          <tr>
            <th class="px-3">ID</th>
            <th class="px-3">Zaman</th>
            <th class="px-3">Kullanıcı</th>
            <th class="px-3">IP</th>
            <th class="px-3">UA</th>
            <th class="px-3">Metod</th>
            <th class="px-3">URL</th>
            <th class="px-3">Durum</th>
            <th class="px-3">Action</th>
            <th class="px-3">Resource</th>
          </tr>
        </thead>
        <tbody>
          <% (rows || []).forEach(function(r){ %>
            <tr class="cursor-pointer hover:bg-gray-50" data-id="<%= r.id %>">
              <td class="px-3 py-2"><%= r.id %></td>
              <td class="px-3 py-2"><%= new Date(r.created_at).toLocaleString('tr-TR') %></td>
              <td class="px-3 py-2"><%= r.username || ('#'+(r.user_id||'')) %></td>
              <td class="px-3 py-2"><%= r.ip || '' %></td>
              <td class="px-3 py-2 text-xs truncate max-w-xs" title="<%= r.user_agent || '' %>"><%= r.user_agent || '' %></td>
              <td class="px-3 py-2"><%= r.method %></td>
              <td class="px-3 py-2 text-xs truncate max-w-lg" title="<%= r.url %>"><%= r.url %></td>
              <td class="px-3 py-2"><%= r.status %></td>
              <td class="px-3 py-2"><%= r.action || '' %></td>
              <td class="px-3 py-2"><%= r.resource || '' %> <%= r.resource_id ? '('+r.resource_id+')' : '' %></td>
            </tr>
          <% }) %>
        </tbody>
      </table>
    </div>
    <div class="mt-4">
      <% const qs = 'username=' + encodeURIComponent((query&&query.username)||'')
        + '&action=' + encodeURIComponent((query&&query.action)||'')
        + '&resource=' + encodeURIComponent((query&&query.resource)||'')
        + '&method=' + encodeURIComponent((query&&query.method)||'')
        + '&status=' + encodeURIComponent((query&&query.status)||'')
        + '&q=' + encodeURIComponent((query&&query.q)||'')
        + '&from=' + encodeURIComponent((query&&query.from)||'')
        + '&to=' + encodeURIComponent((query&&query.to)||'')
        + '&limit=' + encodeURIComponent(limit||20);
      %>
      <%- include('../partials/pagination', { page, pages, total, perPage: limit, qs }) %>
    </div>

    <!-- Detail Modal -->
    <div id="audit-modal" class="fixed inset-0 bg-black/40 hidden items-center justify-center">
      <div class="bg-white rounded shadow max-w-3xl w-[90%] p-4 relative">
        <button id="audit-modal-close" class="absolute top-2 right-2 px-2 py-1 border rounded">Kapat</button>
        <h3 class="text-lg font-semibold mb-2">Kayıt Detayı</h3>
        <pre id="audit-modal-pre" class="bg-gray-50 p-3 rounded text-xs overflow-auto max-h-[60vh]"></pre>
      </div>
    </div>
    <script>
      (function(){
        var rows = document.querySelectorAll('tbody tr[data-id]');
        var modal = document.getElementById('audit-modal');
        var pre = document.getElementById('audit-modal-pre');
        var closeBtn = document.getElementById('audit-modal-close');
        function open(){ modal.classList.remove('hidden'); modal.classList.add('flex'); }
        function close(){ modal.classList.add('hidden'); modal.classList.remove('flex'); }
        if (closeBtn) closeBtn.addEventListener('click', close);
        if (modal) modal.addEventListener('click', function(e){ if (e.target===modal) close(); });
        rows.forEach(function(tr){
          tr.addEventListener('click', function(){
            var id = this.getAttribute('data-id');
            fetch('/audit/'+id+'.json').then(function(r){ return r.json(); }).then(function(j){
              if (j && j.ok) {
                try { pre.textContent = JSON.stringify(j.data, null, 2); } catch { pre.textContent = String(j.data); }
                open();
              }
            });
          });
        });
      })();
    </script>
  </div>
</div>
