<div class="container mx-auto px-4 py-8">
  <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-4">
    <h1 class="text-3xl font-bold">Gönderim Logları</h1>
    <form method="GET" action="/delivery" class="flex items-center gap-2 flex-wrap">
      <input type="text" name="q" value="<%= q || '' %>" placeholder="Ara..." class="input input-bordered input-sm w-40">
      <select name="status" class="select select-bordered select-sm">
        <option value="">Tümü</option>
        <option value="success" <%= String(statusFilter||'')==='success'?'selected':'' %>>Başarılı</option>
        <option value="error" <%= String(statusFilter||'')==='error'?'selected':'' %>>Hata</option>
      </select>
      <select name="method" class="select select-bordered select-sm">
        <option value="" <%= (method||'')===''?'selected':'' %>>Method: Tümü</option>
        <option value="scheduler" <%= method==='scheduler'?'selected':'' %>>Scheduler</option>
        <option value="manual" <%= method==='manual'?'selected':'' %>>Manual</option>
      </select>
      <select name="channelId" class="select select-bordered select-sm">
        <option value="">Kanal: Tümü</option>
        <% (channels||[]).forEach(function(c){ %>
          <option value="<%= c.id %>" <%= String(channelId||'')===String(c.id)?'selected':'' %>><%= c.name %></option>
        <% }) %>
      </select>
      <input type="date" name="from" value="<%= from || '' %>" class="input input-bordered input-sm" placeholder="Başlangıç">
      <input type="date" name="to" value="<%= to || '' %>" class="input input-bordered input-sm" placeholder="Bitiş">
      <select name="limit" class="select select-bordered select-sm">
        <% [10,20,50,100].forEach(function(n){ %>
          <option value="<%= n %>" <%= Number(limit||20)===n?'selected':'' %>><%= n %>/sayfa</option>
        <% }) %>
      </select>
      <button class="btn btn-primary btn-sm" type="submit">Ara</button>
      <a href="/delivery" class="btn btn-sm">Temizle</a>
    </form>
  </div>

  <div class="bg-white shadow rounded overflow-hidden">
    <table class="table w-full">
      <thead class="bg-gray-50">
        <tr>
          <th class="px-4">Zaman</th>
          <th class="px-4">Durum</th>
          <th class="px-4">Kanal</th>
          <th class="px-4">Kaynak</th>
          <th class="px-4">ID</th>
          <th class="px-4">İşlem</th>
        </tr>
      </thead>
      <tbody>
        <% (items||[]).forEach(function(it){ %>
          <tr>
            <td class="px-4 py-2"><%= new Date(it.created_at).toLocaleString('tr-TR') %></td>
            <td class="px-4 py-2">
              <span class="badge <%= Number(it.status)===200 ? 'badge-success' : 'badge-error' %>">
                <%= Number(it.status)===200 ? 'Başarılı' : 'Hata' %>
              </span>
            </td>
            <td class="px-4 py-2"><%= it.channelName || (it.channelId?('#'+it.channelId):'') %></td>
            <td class="px-4 py-2"><%= it.resource || '' %></td>
            <td class="px-4 py-2"><%= it.resource_id || '' %></td>
            <td class="px-4 py-2">
              <button data-id="<%= it.id %>" class="btn btn-xs js-show-json">Detay (JSON)</button>
            </td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  </div>

  <% if (typeof page !== 'undefined' && typeof pages !== 'undefined') { %>
    <% const qs = 'q=' + encodeURIComponent(q||'') + '&status=' + encodeURIComponent(statusFilter||'') + '&limit=' + encodeURIComponent(limit||20) + '&method=' + encodeURIComponent(method||'') + '&channelId=' + encodeURIComponent(channelId||'') + '&from=' + encodeURIComponent(from||'') + '&to=' + encodeURIComponent(to||''); %>
    <%- include('../partials/pagination', { page, pages, total, perPage: limit, qs }) %>
  <% } %>
</div>

<!-- JSON Detay Modal -->
<dialog id="jsonModal" class="modal">
  <div class="modal-box w-11/12 max-w-3xl">
    <div class="flex items-center justify-between mb-2">
      <h3 class="font-bold text-lg">Kayıt Detayı</h3>
      <form method="dialog"><button class="btn btn-sm">Kapat</button></form>
    </div>
    <pre id="jsonContent" class="bg-base-200 p-3 rounded overflow-auto max-h-[60vh]"></pre>
  </div>
</dialog>

<script>
  document.addEventListener('DOMContentLoaded', function(){
    document.body.addEventListener('click', async function(e){
      const btn = e.target.closest('.js-show-json');
      if (!btn) return;
      e.preventDefault();
      const id = btn.getAttribute('data-id');
      try {
        const res = await fetch(`/audit/${id}.json`, { headers: { 'Accept': 'application/json' } });
        const data = await res.json();
        const pre = document.getElementById('jsonContent');
        pre.textContent = JSON.stringify(data.data || data, null, 2);
        const dlg = document.getElementById('jsonModal');
        dlg && dlg.showModal && dlg.showModal();
      } catch (err) {
        alert('Detay yüklenemedi');
      }
    });
  });
</script>
