<div class="container mx-auto px-4 py-6">
  <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4 gap-3">
    <h1 class="text-2xl font-bold text-gray-800">Tüm Paylaşımlar</h1>
    <form class="flex items-center gap-2" method="GET" action="/posts">
      <input type="hidden" name="type" value="<%= type %>">
      <select name="channelId" class="select select-bordered select-sm max-w-[220px]">
        <option value="">Tüm Kanallar</option>
        <% if (Array.isArray(channels)) { channels.forEach(function(c){ %>
          <option value="<%= c.id %>" <%= String(channelId||'')===String(c.id) ? 'selected' : '' %>><%= c.name %></option>
        <% }) } %>
      </select>
      <input type="text" name="q" value="<%= q || '' %>" placeholder="Ara..." class="input input-bordered input-sm w-48" autocomplete="off">
      <button class="btn btn-primary btn-sm"><i class="fas fa-filter mr-1"></i>Uygula</button>
      <% if (q||channelId) { %>
        <a href="/posts?type=<%= encodeURIComponent(type||'all') %>" class="btn btn-sm"><i class="fas fa-times mr-1"></i>Temizle</a>
      <% } %>
    </form>
  </div>
  <details class="mb-4 bg-white 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>Tüm Paylaşımlar</b>, hem hemen gönderilmiş hem de planlanmış gönderileri tek listede gösterir.</p>
      <p><b>Filtreler</b>: Kanal filtresi ve arama kutusu ile sonuçları daraltın. Üstteki sekmelerle türü seçin: <i>Tümü/Hemen/Tek Seferlik/Günlük</i>.</p>
      <p><b>Sayfalama</b>: Alt bölümden sayfalar arasında gezinebilirsiniz.</p>
      <p><b>Yetkiler</b>: Yöneticiler tüm kanalları görebilir. Diğer kullanıcılar yalnızca erişim verilen kanallardaki gönderileri görür.</p>
    </div>
  </details>

  <div class="mb-4 flex flex-wrap gap-2">
    <a href="/posts?type=all&q=<%= encodeURIComponent(q||'') %>&channelId=<%= encodeURIComponent(channelId||'') %>" class="btn btn-sm <%= type==='all' ? 'btn-primary' : 'btn-outline' %>"><i class="fas fa-list mr-1"></i>Tümü</a>
    <a href="/posts?type=immediate&q=<%= encodeURIComponent(q||'') %>&channelId=<%= encodeURIComponent(channelId||'') %>" class="btn btn-sm <%= type==='immediate' ? 'btn-primary' : 'btn-outline' %>"><i class="fas fa-bolt mr-1"></i>Hemen</a>
    <a href="/posts?type=once&q=<%= encodeURIComponent(q||'') %>&channelId=<%= encodeURIComponent(channelId||'') %>" class="btn btn-sm <%= type==='once' ? 'btn-primary' : 'btn-outline' %>"><i class="fas fa-calendar-plus mr-1"></i>Tek Seferlik</a>
    <a href="/posts?type=daily&q=<%= encodeURIComponent(q||'') %>&channelId=<%= encodeURIComponent(channelId||'') %>" class="btn btn-sm <%= type==='daily' ? 'btn-primary' : 'btn-outline' %>"><i class="fas fa-calendar-day mr-1"></i>Günlük</a>
    <a href="/posts?type=weekly&q=<%= encodeURIComponent(q||'') %>&channelId=<%= encodeURIComponent(channelId||'') %>" class="btn btn-sm <%= type==='weekly' ? 'btn-primary' : 'btn-outline' %>"><i class="fas fa-calendar-week mr-1"></i>Haftalık</a>
    <div class="flex-1"></div>
    <a href="/posts/new" class="btn btn-sm btn-primary"><i class="fas fa-plus-circle mr-1"></i>Yeni</a>
    <div class="divider divider-horizontal"></div>
    <a href="/posts/export.json" class="btn btn-sm"><i class="fas fa-download mr-1"></i>JSON</a>
    <a href="/posts/export.csv" class="btn btn-sm"><i class="fas fa-file-csv mr-1"></i>CSV</a>
    <details class="ml-2">
      <summary class="btn btn-sm btn-outline"><i class="fas fa-upload mr-1"></i>İçe Aktar</summary>
      <form action="/posts/import" method="POST" class="mt-2 p-3 bg-white border rounded space-y-2 w-[min(520px,100%)]">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <div class="text-sm text-gray-600">JSON dizi yapıştırın. Örn: [{"title":"...","content":"...","image":null,"buttons":[]}]</div>
        <textarea name="data" rows="4" class="textarea textarea-bordered w-full" placeholder='[ { "title":"...","content":"...","image":null,"buttons":[] } ]'></textarea>
        <div class="text-right">
          <button class="btn btn-primary btn-sm" type="submit">İçe Aktar</button>
        </div>
      </form>
    </details>
  </div>

  <% if (items && items.length) { %>
  <div class="bg-white shadow-md rounded-lg overflow-x-auto">
    <div class="p-3 border-b flex items-center gap-2 text-sm">
      <input id="bulkAll" type="checkbox" class="checkbox checkbox-sm">
      <span>Hepsini seç</span>
      <div class="ml-auto flex items-center gap-2" id="bulkBar" style="display:none">
        <button id="bulkExport" class="btn btn-xs"><i class="fas fa-file-export mr-1"></i>Seçiliyi Dışa Aktar</button>
        <button id="bulkCancel" class="btn btn-warning btn-xs"><i class="fas fa-ban mr-1"></i>Seçili Planı İptal Et</button>
        <button id="bulkDelete" class="btn btn-error btn-xs"><i class="fas fa-trash mr-1"></i>Seçiliyi Sil</button>
      </div>
    </div>
    <table class="table table-zebra w-full">
      <thead class="bg-gray-50">
        <tr>
          <th class="px-6"><input type="checkbox" id="bulkAllHead" class="checkbox checkbox-sm"></th>
          <th class="px-6">Başlık</th>
          <th class="px-6">Kanal</th>
          <th class="px-6">Tür</th>
          <th class="px-6">Zaman</th>
          <th class="px-6">Oluşturma</th>
          <th class="px-6">Güncelleme</th>
          <th class="px-6">İşlemler</th>
        </tr>
      </thead>
      <tbody>
        <% items.forEach(i => { %>
          <tr class="hover">
            <td class="px-6 py-4 whitespace-nowrap">
              <input type="checkbox" class="checkbox checkbox-sm js-bulk" value="<%= i.id %>">
            </td>
            <td class="px-6 py-4 whitespace-nowrap"><div class="text-sm font-medium text-gray-900"><%= i.title %></div></td>
            <td class="px-6 py-4 whitespace-nowrap"><%= i.channelName || ('#'+(i.channelId||'')) %></td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="badge <%= i.type==='daily' ? 'badge-warning' : (i.type==='once' ? 'badge-info' : (i.type==='weekly' ? 'badge-accent' : 'badge-success')) %>">
                <%= i.type==='daily' ? 'Günlük' : (i.type==='once' ? 'Tek Seferlik' : (i.type==='weekly' ? 'Haftalık' : 'Hemen')) %>
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-500">
                <% if (i.type==='daily') { %>
                  <%= i.when %>
                <% } else if (i.type==='weekly') { %>
                  <% const dn = ['Pazar','Pazartesi','Salı','Çarşamba','Perşembe','Cuma','Cumartesi']; const parts = String(i.when||'').split(' '); const wd = parseInt(parts[0]||'0',10)||0; const tm = parts[1]||''; %>
                  <%= (dn[wd] || ('Gün#'+wd)) + ' ' + tm %>
                <% } else { %>
                  <%= new Date(i.when).toLocaleString('tr-TR', { timeZone: 'Europe/Istanbul' }) %>
                <% } %>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><%= i.createdAt ? new Date(i.createdAt).toLocaleString('tr-TR', { timeZone: 'Europe/Istanbul' }) : '-' %></td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><%= i.updatedAt ? new Date(i.updatedAt).toLocaleString('tr-TR', { timeZone: 'Europe/Istanbul' }) : '-' %></td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
              <a href="/posts/<%= i.id %>/edit" class="btn btn-xs btn-outline"><i class="fas fa-edit mr-1"></i>Düzenle</a>
              <form action="/posts/<%= i.id %>/delete" method="POST" class="inline ml-1" onsubmit="return confirm('Silmek istediğinize emin misiniz? Bu işlem planı da kaldırır.')">
                <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                <button type="submit" class="btn btn-xs btn-error"><i class="fas fa-trash"></i></button>
              </form>
            </td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  </div>

  <!-- Sayfalama -->
  <% const qs = 'type=' + encodeURIComponent(type||'all') + '&q=' + encodeURIComponent(q||'') + '&channelId=' + encodeURIComponent(channelId||''); %>
  <%- include('../partials/pagination', { page, pages, total, perPage, qs }) %>
  <% } else { %>
    <div class="bg-white shadow-md rounded-lg p-8 text-center">
      <i class="fas fa-inbox text-5xl text-gray-300 mb-4"></i>
      <h3 class="text-lg font-semibold text-gray-900">Kayıt bulunamadı</h3>
      <p class="mt-1 text-sm text-gray-500">Filtreleri değiştirip tekrar deneyin veya yeni bir gönderi oluşturun.</p>
      <div class="mt-4">
        <a href="/posts/new" class="btn btn-primary btn-sm"><i class="fas fa-plus-circle mr-1"></i>Yeni Gönderi</a>
      </div>
    </div>
  <% } %>
</div>

<form id="bulkForm" method="POST" style="display:none">
  <input type="hidden" name="_csrf" value="<%= csrfToken %>">
  <div id="bulkIds"></div>
  <!-- dynamic action set by JS -->
  <input type="submit">
  <script>
    (function(){
      const allToggles = [document.getElementById('bulkAll'), document.getElementById('bulkAllHead')].filter(Boolean);
      const bulkBar = document.getElementById('bulkBar');
      const form = document.getElementById('bulkForm');
      const idsHolder = document.getElementById('bulkIds');
      function getChecks(){ return Array.from(document.querySelectorAll('.js-bulk:checked')).map(el=>el.value); }
      function syncBar(){ const any = getChecks().length>0; if (bulkBar) bulkBar.style.display = any ? '' : 'none'; }
      function setAll(v){ document.querySelectorAll('.js-bulk').forEach(cb=>{ cb.checked = v; }); syncBar(); }
      allToggles.forEach(t => t && t.addEventListener('change', e=> setAll(e.target.checked)));
      document.addEventListener('change', function(e){ if (e.target && e.target.classList && e.target.classList.contains('js-bulk')) syncBar(); });
      function submitTo(url, targetBlank){
        const ids = getChecks(); if (!ids.length) return;
        idsHolder.innerHTML = '';
        ids.forEach(id => { const inp = document.createElement('input'); inp.type='hidden'; inp.name='ids'; inp.value=id; idsHolder.appendChild(inp); });
        form.action = url; if (targetBlank) form.target = '_blank'; else form.target=''; form.submit();
      }
      const exp = document.getElementById('bulkExport');
      const del = document.getElementById('bulkDelete');
      const canc = document.getElementById('bulkCancel');
      exp && exp.addEventListener('click', function(e){ e.preventDefault(); submitTo('/posts/bulk/export.json', true); });
      canc && canc.addEventListener('click', function(e){ e.preventDefault(); if (confirm('Seçili gönderilerin planlarını iptal etmek istiyor musunuz? Gönderiler silinmez.')) submitTo('/posts/bulk/cancel-schedule'); });
      del && del.addEventListener('click', function(e){ e.preventDefault(); if (confirm('Seçili gönderileri silmek istiyor musunuz?')) submitTo('/posts/bulk/delete'); });
    })();
  </script>
</form>
