<div class="admin-tabs">
  <button class="atab active" data-tab="press">Press Releases (<%= pendingPR ? pendingPR.length : 0 %>)</button>
  <button class="atab" data-tab="published">Published (<%= publishedPR ? publishedPR.length : 0 %>)</button>
  <button class="atab" data-tab="social">Social Queue (<%= pendingSocial ? pendingSocial.length : 0 %>)</button>
  <button class="atab" data-tab="bulletin">Bulletin Reports (<%= reports ? reports.length : 0 %>)</button>
</div>

<!-- Press Releases -->
<div class="atab-content active" id="tab-press">
  <% if (pendingPR && pendingPR.length) { %>
  <div class="admin-card">
    <% pendingPR.forEach(pr => { %>
    <div class="moderation-item">
      <div class="mod-header">
        <div>
          <h4><%= pr.title %></h4>
          <p class="mod-meta"><strong><%= pr.org_name %></strong> · Submitted <%= moment(pr.created_at).fromNow() %></p>
        </div>
        <div class="mod-actions">
          <button class="btn btn-ghost btn-sm toggle-pr-body" data-id="<%= pr.id %>"><i class="bi bi-eye"></i> Read</button>
          <button class="btn btn-success btn-sm approve-pr" data-id="<%= pr.id %>"><i class="bi bi-check-circle-fill"></i> Approve & Publish</button>
          <button class="btn btn-danger btn-sm reject-pr" data-id="<%= pr.id %>"><i class="bi bi-x-circle-fill"></i> Reject</button>
        </div>
      </div>
      <% if (pr.excerpt) { %><p class="mod-preview"><%= pr.excerpt %></p><% } %>
      <div class="pr-full-body" id="pr-body-<%= pr.id %>" style="display:none;margin-top:16px;padding-top:16px;border-top:1px solid #e5e7eb">
        <% if (pr.image) { %><img src="<%= pr.image %>" alt="" style="max-width:100%;max-height:240px;object-fit:cover;border-radius:8px;margin-bottom:14px"><% } %>
        <div style="font-size:.875rem;color:#374151;line-height:1.8;white-space:pre-wrap"><%= pr.content %></div>
        <% if (pr.contact_name || pr.contact_email || pr.contact_phone) { %>
        <div style="margin-top:14px;padding-top:12px;border-top:1px solid #f3f4f6;font-size:.8rem;color:#6b7280">
          <strong>Press Contact:</strong>
          <%= pr.contact_name || '' %>
          <% if (pr.contact_email) { %> · <a href="mailto:<%= pr.contact_email %>"><%= pr.contact_email %></a><% } %>
          <% if (pr.contact_phone) { %> · <%= pr.contact_phone %><% } %>
        </div>
        <% } %>
      </div>
    </div>
    <% }) %>
  </div>
  <% } else { %><div class="empty-state"><i class="bi bi-inbox-fill"></i><h3>All clear!</h3><p>No press releases awaiting review.</p></div><% } %>
</div>

<!-- Published Press Releases -->
<div class="atab-content" id="tab-published">
  <% if (publishedPR && publishedPR.length) { %>
  <div class="admin-card">
    <% publishedPR.forEach(pr => { %>
    <div class="moderation-item">
      <div class="mod-header">
        <div>
          <h4><%= pr.title %></h4>
          <p class="mod-meta">
            <strong><%= pr.org_name %></strong> · Published <%= moment(pr.published_at).fromNow() %>
            <span class="badge badge-<%= pr.status === 'distributed' ? 'success' : 'info' %>" style="margin-left:6px"><%= pr.status %></span>
            <% if (pr.views > 0) { %><span style="margin-left:8px;font-size:.75rem;color:#9ca3af"><i class="bi bi-eye"></i> <%= pr.views %></span><% } %>
          </p>
        </div>
        <div class="mod-actions">
          <button class="btn btn-ghost btn-sm toggle-pub-body" data-id="<%= pr.id %>"><i class="bi bi-eye"></i> Read</button>
          <button class="btn btn-danger btn-sm takedown-pr" data-id="<%= pr.id %>"><i class="bi bi-shield-x"></i> Take Down</button>
        </div>
      </div>
      <% if (pr.excerpt) { %><p class="mod-preview"><%= pr.excerpt %></p><% } %>
      <div class="pr-full-body" id="pub-body-<%= pr.id %>" style="display:none;margin-top:16px;padding-top:16px;border-top:1px solid #e5e7eb">
        <% if (pr.image) { %><img src="<%= pr.image %>" alt="" style="max-width:100%;max-height:240px;object-fit:cover;border-radius:8px;margin-bottom:14px"><% } %>
        <div style="font-size:.875rem;color:#374151;line-height:1.8;white-space:pre-wrap"><%= pr.content %></div>
        <% if (pr.contact_name || pr.contact_email || pr.contact_phone) { %>
        <div style="margin-top:14px;padding-top:12px;border-top:1px solid #f3f4f6;font-size:.8rem;color:#6b7280">
          <strong>Press Contact:</strong>
          <%= pr.contact_name || '' %>
          <% if (pr.contact_email) { %> · <a href="mailto:<%= pr.contact_email %>"><%= pr.contact_email %></a><% } %>
          <% if (pr.contact_phone) { %> · <%= pr.contact_phone %><% } %>
        </div>
        <% } %>
      </div>
    </div>
    <% }) %>
  </div>
  <% } else { %><div class="empty-state"><i class="bi bi-newspaper"></i><h3>No published press releases.</h3></div><% } %>
</div>

<!-- Social -->
<div class="atab-content" id="tab-social">
  <% if (pendingSocial && pendingSocial.length) { %>
  <div class="admin-card">
    <% pendingSocial.forEach(s => { %>
    <div class="moderation-item">
      <div class="mod-header">
        <div><h4><%= s.title || s.submission_type %></h4><p class="mod-meta"><strong><%= s.org_name %></strong> · Submitted <%= moment(s.created_at).fromNow() %></p></div>
        <div class="mod-actions">
          <button class="btn btn-success btn-sm approve-social" data-id="<%= s.id %>"><i class="bi bi-check-circle-fill"></i> Approve</button>
          <button class="btn btn-danger btn-sm reject-social" data-id="<%= s.id %>"><i class="bi bi-x-circle-fill"></i> Reject</button>
        </div>
      </div>
      <p class="mod-preview"><%= s.content.substring(0,200) %></p>
      <% if (s.image) { %><div class="mod-image"><img src="<%= s.image %>" alt="Preview"></div><% } %>
    </div>
    <% }) %>
  </div>
  <% } else { %><div class="empty-state"><i class="bi bi-inbox-fill"></i><h3>All clear!</h3><p>No social submissions awaiting review.</p></div><% } %>
</div>

<!-- Bulletin -->
<div class="atab-content" id="tab-bulletin">
  <% if (reports && reports.length) { %>
  <div class="admin-card">
    <% reports.forEach(post => { %>
    <div class="moderation-item">
      <div class="mod-header">
        <div><h4><%= post.title %></h4><p class="mod-meta"><span class="badge badge-warning">Reported</span></p></div>
        <div class="mod-actions"><button class="btn btn-danger btn-sm remove-post" data-id="<%= post.id %>">Remove</button></div>
      </div>
    </div>
    <% }) %>
  </div>
  <% } else { %><div class="empty-state"><i class="bi bi-inbox-fill"></i><h3>No reported content.</h3></div><% } %>
</div>

<script>
document.querySelectorAll('.atab').forEach(tab => {
  tab.addEventListener('click', () => {
    document.querySelectorAll('.atab,.atab-content').forEach(el => el.classList.remove('active'));
    tab.classList.add('active');
    document.getElementById('tab-' + tab.dataset.tab).classList.add('active');
  });
});
document.querySelectorAll('.toggle-pr-body').forEach(btn => {
  btn.addEventListener('click', () => {
    const body = document.getElementById('pr-body-' + btn.dataset.id);
    const open = body.style.display !== 'none';
    body.style.display = open ? 'none' : 'block';
    btn.innerHTML = open ? '<i class="bi bi-eye"></i> Read' : '<i class="bi bi-eye-slash"></i> Hide';
  });
});
document.querySelectorAll('.toggle-pub-body').forEach(btn => {
  btn.addEventListener('click', () => {
    const body = document.getElementById('pub-body-' + btn.dataset.id);
    const open = body.style.display !== 'none';
    body.style.display = open ? 'none' : 'block';
    btn.innerHTML = open ? '<i class="bi bi-eye"></i> Read' : '<i class="bi bi-eye-slash"></i> Hide';
  });
});
document.querySelectorAll('.takedown-pr').forEach(btn => {
  btn.addEventListener('click', async () => {
    const reason = prompt('Reason for removal (shown to member):');
    if (reason === null) return;
    const res = await fetch(`/admin/content/press/${btn.dataset.id}/takedown`, {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({reason})});
    if ((await res.json()).success) {
      btn.closest('.moderation-item').remove();
      updateTabCount(document.querySelector('.atab[data-tab="published"]'), -1);
    }
  });
});
function updateTabCount(tabBtn, delta) {
  const m = tabBtn.textContent.match(/\((\d+)\)/);
  if (m) tabBtn.textContent = tabBtn.textContent.replace(/\(\d+\)/, `(${Math.max(0, parseInt(m[1]) + delta)})`);
}

document.querySelectorAll('.approve-pr,.reject-pr').forEach(btn => {
  btn.addEventListener('click', async () => {
    const action = btn.classList.contains('approve-pr') ? 'approve' : 'reject';
    const reason = action === 'reject' ? prompt('Rejection reason:') : null;
    const res = await fetch(`/admin/content/press/${btn.dataset.id}/${action}`, {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({rejection_reason:reason})});
    if ((await res.json()).success) {
      btn.closest('.moderation-item').remove();
      updateTabCount(document.querySelector('.atab[data-tab="press"]'), -1);
    }
  });
});
document.querySelectorAll('.approve-social,.reject-social').forEach(btn => {
  btn.addEventListener('click', async () => {
    const action = btn.classList.contains('approve-social') ? 'approve' : 'reject';
    const reason = action === 'reject' ? prompt('Rejection reason:') : null;
    const res = await fetch(`/admin/content/social/${btn.dataset.id}/${action}`, {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({rejection_reason:reason})});
    if ((await res.json()).success) {
      btn.closest('.moderation-item').remove();
      updateTabCount(document.querySelector('.atab[data-tab="social"]'), -1);
    }
  });
});
</script>
