<div class="flex items-center justify-between mb-6">
  <h1 class="text-2xl font-bold text-gray-800">Reviews</h1>
  <div class="flex gap-2">
    <a href="?status=pending" class="px-3 py-1.5 rounded-lg text-sm border <%= status === 'pending' ? 'bg-indigo-600 text-white border-indigo-600' : 'border-gray-300 text-gray-600' %>">Pending</a>
    <a href="?status=approved" class="px-3 py-1.5 rounded-lg text-sm border <%= status === 'approved' ? 'bg-indigo-600 text-white border-indigo-600' : 'border-gray-300 text-gray-600' %>">Approved</a>
    <a href="/admin/reviews" class="px-3 py-1.5 rounded-lg text-sm border border-gray-300 text-gray-600">All</a>
  </div>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
  <table class="w-full text-sm">
    <thead class="bg-gray-50">
      <tr class="text-left text-gray-500">
        <th class="px-6 py-4 font-medium">Product</th>
        <th class="px-6 py-4 font-medium">User</th>
        <th class="px-6 py-4 font-medium">Rating</th>
        <th class="px-6 py-4 font-medium">Comment</th>
        <th class="px-6 py-4 font-medium">Date</th>
        <th class="px-6 py-4 font-medium text-center">Status</th>
        <th class="px-6 py-4 font-medium text-right">Actions</th>
      </tr>
    </thead>
    <tbody>
      <% if (typeof reviews !== 'undefined' && reviews && reviews.length) { %>
        <% reviews.forEach(function(review) { %>
          <tr class="border-t hover:bg-gray-50">
            <td class="px-6 py-4"><%= review.Product ? review.Product.name : 'N/A' %></td>
            <td class="px-6 py-4"><%= review.User ? review.User.name : 'N/A' %></td>
            <td class="px-6 py-4"><div class="flex text-yellow-400 text-sm"><% for (let i = 1; i <= 5; i++) { %><i class="fas fa-star<%= i <= review.rating ? '' : '-o' %>"></i><% } %></div></td>
            <td class="px-6 py-4 max-w-xs truncate"><%= review.comment || '-' %></td>
            <td class="px-6 py-4 text-gray-500"><%= new Date(review.createdAt).toLocaleDateString('en-IN') %></td>
            <td class="px-6 py-4 text-center">
              <span class="px-2 py-0.5 rounded-full text-xs font-medium <%= review.isApproved ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700' %>"><%= review.isApproved ? 'Approved' : 'Pending' %></span>
            </td>
            <td class="px-6 py-4 text-right">
              <% if (!review.isApproved) { %>
                <button onclick="approveReview(<%= review.id %>)" class="text-green-600 hover:text-green-800 mr-3 text-sm"><i class="fas fa-check"></i> Approve</button>
              <% } %>
              <form action="/admin/reviews/<%= review.id %>/delete" method="POST" class="inline" onsubmit="return confirm('Delete this review?')">
                <button type="submit" class="text-red-500 hover:text-red-700 text-sm"><i class="fas fa-trash"></i></button>
              </form>
            </td>
          </tr>
        <% }) %>
      <% } else { %>
        <tr><td colspan="7" class="px-6 py-12 text-center text-gray-400">No reviews found.</td></tr>
      <% } %>
    </tbody>
  </table>
</div>

<script>
async function approveReview(id) {
  const res = await fetch('/admin/reviews/' + id + '/approve', { method: 'POST' });
  const data = await res.json();
  if (data.success) location.reload();
}
</script>
