{% extends 'dashboard/base.html' %}
{% block title %}Reviews{% endblock %}
{% block page_title %}Reviews{% endblock %}

{% block content %}
<div class="page-header">
  <div class="breadcrumb"><a href="{% url 'dashboard:home' %}">Dashboard</a> <span>/</span> Reviews</div>
  <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px">
    <div><h1 class="page-title">Product Reviews</h1><p class="page-subtitle">Moderate and manage customer reviews</p></div>
    <div style="display:flex;gap:8px;flex-wrap:wrap">
      <a href="?status=" class="btn btn-sm {% if not status_filter %}btn-primary{% else %}btn-outline{% endif %}">All</a>
      <a href="?status=approved" class="btn btn-sm {% if status_filter == 'approved' %}btn-success{% else %}btn-outline{% endif %}">Approved</a>
      <a href="?status=pending" class="btn btn-sm {% if status_filter == 'pending' %}btn-accent{% else %}btn-outline{% endif %}">Pending</a>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-body" style="padding:0">
    <div class="table-wrap">
      <table class="data-table">
        <thead>
          <tr>
            <th>Product</th>
            <th>Customer</th>
            <th>Rating</th>
            <th>Review</th>
            <th>Date</th>
            <th>Status</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for review in reviews %}
          <tr>
            <td>
              <div style="font-weight:500;font-size:13px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                {{ review.product.name }}
              </div>
            </td>
            <td>
              <div style="font-size:13px">{{ review.user.get_full_name|default:review.user.username }}</div>
              <div style="font-size:11px;color:var(--muted)">{{ review.user.email }}</div>
            </td>
            <td>
              <div style="color:#f59e0b;font-size:14px;letter-spacing:1px">
                {% for i in "12345" %}{% if forloop.counter <= review.rating %}★{% else %}☆{% endif %}{% endfor %}
              </div>
              <div style="font-size:11px;color:var(--muted)">{{ review.rating }}/5</div>
            </td>
            <td style="max-width:220px">
              <p style="font-size:13px;line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical">
                {{ review.comment }}
              </p>
            </td>
            <td style="font-size:12px;white-space:nowrap">{{ review.created_at|date:"M d, Y" }}</td>
            <td>
              {% if review.is_approved %}
                <span class="badge badge-success"><i class="fas fa-check" style="font-size:9px"></i> Approved</span>
              {% else %}
                <span class="badge badge-warning"><i class="fas fa-clock" style="font-size:9px"></i> Pending</span>
              {% endif %}
            </td>
            <td>
              <div style="display:flex;gap:6px">
                <form action="{% url 'dashboard:review_toggle' review.pk %}" method="POST" style="display:inline">
                  {% csrf_token %}
                  <button type="submit" class="btn btn-sm btn-icon {% if review.is_approved %}btn-outline{% else %}btn-success{% endif %}"
                          title="{% if review.is_approved %}Unapprove{% else %}Approve{% endif %}">
                    <i class="fas fa-{% if review.is_approved %}eye-slash{% else %}check{% endif %}"></i>
                  </button>
                </form>
                <form id="del-rev-{{ review.pk }}" action="{% url 'dashboard:review_delete' review.pk %}" method="POST" style="display:inline">
                  {% csrf_token %}
                  <button type="button" class="btn btn-danger btn-sm btn-icon" title="Delete"
                          onclick="confirmDelete('del-rev-{{ review.pk }}','Delete this review?')">
                    <i class="fas fa-trash"></i>
                  </button>
                </form>
              </div>
            </td>
          </tr>
          {% empty %}
          <tr><td colspan="7">
            <div class="empty-state"><i class="fas fa-star"></i><h3>No reviews yet</h3></div>
          </td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

{% if reviews.has_other_pages %}
<div class="pagination">
  {% if reviews.has_previous %}<a href="?page={{ reviews.previous_page_number }}&status={{ status_filter }}" class="page-btn"><i class="fas fa-chevron-left"></i></a>{% endif %}
  {% for num in reviews.paginator.page_range %}
  <a href="?page={{ num }}&status={{ status_filter }}" class="page-btn {% if reviews.number == num %}active{% endif %}">{{ num }}</a>
  {% endfor %}
  {% if reviews.has_next %}<a href="?page={{ reviews.next_page_number }}&status={{ status_filter }}" class="page-btn"><i class="fas fa-chevron-right"></i></a>{% endif %}
</div>
{% endif %}
{% endblock %}