<div class="stats-grid" style="margin-bottom:20px">
  <div class="stat-card">
    <div class="stat-icon" style="background:#fefce8"><i class="bi bi-hourglass-split" style="color:#ca8a04"></i></div>
    <div><p class="stat-label">Pending Review</p><p class="stat-value"><%= reviewStats?.pending || 0 %></p></div>
  </div>
  <div class="stat-card">
    <div class="stat-icon" style="background:#f0fdf4"><i class="bi bi-check-circle-fill" style="color:#16a34a"></i></div>
    <div><p class="stat-label">Published</p><p class="stat-value"><%= reviewStats?.active || 0 %></p></div>
  </div>
  <div class="stat-card">
    <div class="stat-icon" style="background:#fef2f2"><i class="bi bi-trash-fill" style="color:#dc2626"></i></div>
    <div><p class="stat-label">Removed</p><p class="stat-value"><%= reviewStats?.removed || 0 %></p></div>
  </div>
</div>

<div class="page-actions" style="margin-bottom:16px">
  <a href="/admin/reviews?status=pending_review" class="btn btn-<%= status==='pending_review'?'primary':'secondary' %> btn-sm">Pending (<%= reviewStats?.pending || 0 %>)</a>
  <a href="/admin/reviews?status=active" class="btn btn-<%= status==='active'?'primary':'secondary' %> btn-sm">Published</a>
  <a href="/admin/reviews?status=removed" class="btn btn-<%= status==='removed'?'primary':'secondary' %> btn-sm">Removed</a>
</div>

<div class="admin-card">
  <% if (reviews && reviews.length) { %>
  <% reviews.forEach(r => { %>
  <div style="padding:20px;border-bottom:1px solid #f3f4f6;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start" id="review-row-<%= r.id %>">
    <div>
      <div style="display:flex;align-items:center;gap:10px;margin-bottom:8px">
        <div>
          <% for(let i=1;i<=5;i++){%><i class="bi bi-star<%= i<=r.rating?'-fill':'' %>" style="color:<%= i<=r.rating?'#f59e0b':'#e5e7eb' %>;font-size:.9rem"></i><%}%>
          <span class="badge badge-<%= r.source==='member'?'info':'warning' %>" style="margin-left:6px;font-size:.65rem"><%= r.source %></span>
        </div>
        <a href="/directory/<%= r.org_slug %>" target="_blank" style="font-size:.8rem;color:#6b7280"><%= r.org_name %></a>
      </div>
      <% if(r.title){%><p style="font-weight:700;font-size:.9rem;margin:0 0 4px">"<%= r.title %>"</p><%}%>
      <p style="font-size:.875rem;color:#374151;margin:0 0 8px;line-height:1.5"><%= r.content %></p>
      <div style="font-size:.75rem;color:#9ca3af">
        <% if(r.reviewer_id){ %>
        Member review
        <% } else { %>
        <%= r.reviewer_name %><% if(r.reviewer_company){%> · <%= r.reviewer_company %><%}%> · <a href="mailto:<%= r.reviewer_email %>" style="color:#6b7280"><%= r.reviewer_email %></a>
        <% } %>
        · <%= moment(r.created_at).fromNow() %>
      </div>
    </div>
    <div style="display:flex;gap:6px;flex-shrink:0">
      <% if(r.status === 'pending_review') { %>
      <button class="btn btn-sm btn-success approve-review" data-id="<%= r.id %>"><i class="bi bi-check-lg"></i> Approve</button>
      <button class="btn btn-sm btn-danger remove-review" data-id="<%= r.id %>"><i class="bi bi-x-lg"></i> Remove</button>
      <% } else if(r.status === 'active') { %>
      <button class="btn btn-sm btn-danger remove-review" data-id="<%= r.id %>"><i class="bi bi-trash"></i> Remove</button>
      <% } else { %>
      <button class="btn btn-sm btn-secondary approve-review" data-id="<%= r.id %>"><i class="bi bi-arrow-counterclockwise"></i> Restore</button>
      <% } %>
    </div>
  </div>
  <% }) %>
  <% } else { %>
  <div style="text-align:center;padding:40px;color:#9ca3af">No reviews in this queue.</div>
  <% } %>
</div>

<script>
document.querySelectorAll('.approve-review').forEach(btn => {
  btn.addEventListener('click', async () => {
    const res = await fetch(`/admin/reviews/${btn.dataset.id}/approve`, { method:'POST' });
    if((await res.json()).success) document.getElementById(`review-row-${btn.dataset.id}`).remove();
  });
});

document.querySelectorAll('.remove-review').forEach(btn => {
  btn.addEventListener('click', async () => {
    const reason = prompt('Reason for removal (optional):') ?? '';
    const res = await fetch(`/admin/reviews/${btn.dataset.id}/remove`, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ reason }) });
    if((await res.json()).success) document.getElementById(`review-row-${btn.dataset.id}`).remove();
  });
});
</script>
