{{gtag}}
<style>
  {{custom_css}}
  th { color: #6e84a3; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
  .rv-msg { max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
  .rv-msg.expanded { white-space: normal; overflow: visible; }
  .rv-url { font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace; font-size: .8rem;
    max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rv-ip { font-family: monospace; font-size: .85rem; }
  .rv-filter { display: inline-block; padding: .35rem .75rem; border-radius: .375rem;
    font-size: .82rem; cursor: pointer; text-decoration: none; color: #495057; border: 1px solid #dee2e6; }
  .rv-filter.active { background: #2c7be5; color: #fff; border-color: #2c7be5; }
  .rv-filter:hover { background: #e9ecef; color: #212529; }
  .rv-filter.active:hover { background: #1a68d1; color: #fff; }
  .btn-approve { background: #00d97e; color: #fff; border: none; padding: .25rem .5rem; border-radius: .25rem;
    font-size: .78rem; cursor: pointer; }
  .btn-approve:hover { background: #00b86b; }
  .btn-deny { background: #e63757; color: #fff; border: none; padding: .25rem .5rem; border-radius: .25rem;
    font-size: .78rem; cursor: pointer; }
  .btn-deny:hover { background: #c82333; }
  .btn-delete { background: #6c757d; color: #fff; border: none; padding: .25rem .5rem; border-radius: .25rem;
    font-size: .78rem; cursor: pointer; }
  .btn-delete:hover { background: #545b62; }
  .badge-pending { background: #f6c343; color: #212529; }
  .badge-approved { background: #00d97e; color: #fff; }
  .badge-denied { background: #e63757; color: #fff; }
  .badge-expired { background: #95aac9; color: #fff; }
  .rv-actions { white-space: nowrap; }
  .rv-actions label { font-size: .75rem; margin-left: .25rem; cursor: pointer; }
  .rv-actions input[type="checkbox"] { vertical-align: middle; }
</style>

<script type="text/javascript" nonce="{{nonce}}">
  window.BITFIRE_NONCE = '{{api_code}}';
</script>

{{header}}

<div class="bf-man-content">
<div class="container-fluid">

<div class="card mt-4">

  <div class="card-header d-flex align-items-center justify-content-between" style="flex-wrap:wrap;gap:.5rem;">
    <div>
      <h3 class="mb-0" style="font-size:1.15rem;">
        Block Reviews
        <span class="badge bg-warning text-dark ms-2" style="font-size:.75rem;">{{pending_count}} pending</span>
      </h3>
      <p class="text-muted mb-0" style="font-size:.82rem;margin-top:.2rem;">
        Messages from blocked visitors requesting review of their block.
      </p>
    </div>
    <div class="d-flex" style="gap:.5rem;">
      <a href="{{exceptions_url}}" class="btn btn-sm btn-outline-secondary">
        <i class="fe fe-shield" style="margin-right:.3rem;"></i>Exceptions
      </a>
    </div>
  </div>

  <div class="card-body">

    <!-- Info box -->
    <div style="background:#f0f9ff;border:1px solid #bae6fd;border-radius:.375rem;padding:1rem 1.25rem;margin-bottom:1.25rem;">
      <h5 style="margin:0 0 .4rem;font-size:.95rem;color:#0369a1;">
        <i class="fe fe-info" style="margin-right:.35rem;"></i>How block reviews work
      </h5>
      <p style="margin:0 0 .5rem;font-size:.875rem;color:#374151;">
        When BitFire blocks a visitor, they can submit a message explaining what they were doing.
        <strong>Approve</strong> marks the block as a false positive. Check "Create Exception" to
        automatically add a WAF exception so the same request won't be blocked again.
        <strong>Deny</strong> confirms the block was correct. Reviews expire after 30 days.
      </p>
    </div>

    <!-- Filter tabs -->
    <div style="margin-bottom:1rem; display:flex; gap:.5rem; flex-wrap:wrap;">
      <a href="{{filter_all_url}}" class="rv-filter {{filter_all_active}}">All ({{total_count}})</a>
      <a href="{{filter_pending_url}}" class="rv-filter {{filter_pending_active}}">Pending ({{pending_count}})</a>
      <a href="{{filter_approved_url}}" class="rv-filter {{filter_approved_active}}">Approved ({{approved_count}})</a>
      <a href="{{filter_denied_url}}" class="rv-filter {{filter_denied_active}}">Denied ({{denied_count}})</a>
      <a href="{{filter_expired_url}}" class="rv-filter {{filter_expired_active}}">Expired ({{expired_count}})</a>
    </div>

    <!-- Empty state -->
    <div class="{{has_no_reviews}}" style="text-align:center;padding:2.5rem 1rem;color:#6b7280;">
      <i class="fe fe-check-circle" style="font-size:2.5rem;color:#16a34a;display:block;margin-bottom:.75rem;"></i>
      <p style="margin:0 0 .4rem;font-weight:600;">No reviews to show.</p>
      <p style="margin:0;font-size:.875rem;">
        When blocked visitors submit review requests, they will appear here.
      </p>
    </div>

    <!-- Table -->
    <div class="{{has_reviews}}">

      <div class="table-responsive">
        <table class="table table-hover table-sm mb-0" id="rv-table">
          <thead class="table-light">
            <tr>
              <th style="width:140px;">Time</th>
              <th style="width:120px;">IP</th>
              <th style="width:140px;">Block Reason</th>
              <th style="width:200px;">URL</th>
              <th>Message</th>
              <th style="width:80px;">Status</th>
              <th style="width:220px;">Actions</th>
            </tr>
          </thead>
          <tbody id="rv-tbody">
            {{rows}}
          </tbody>
        </table>
      </div>

    </div><!-- /has_reviews -->

  </div><!-- /card-body -->
</div><!-- /card -->

</div><!-- /container-fluid -->
</div><!-- /bf-man-content -->

<script type="text/javascript" nonce="{{nonce}}">
(function () {
  'use strict';

  // expand truncated messages on click
  document.addEventListener('click', function (e) {
    var msg = e.target.closest('.rv-msg');
    if (msg) { msg.classList.toggle('expanded'); }
  });

  // approve action
  document.addEventListener('click', function (e) {
    var btn = e.target.closest('.rv-approve-btn');
    if (!btn) return;
    e.preventDefault();
    var id = btn.getAttribute('data-id');
    var row = btn.closest('tr');
    var chk = row ? row.querySelector('.rv-create-ex') : null;
    var createEx = chk ? chk.checked : false;

    btn.disabled = true;
    btn.textContent = '...';

    BitFire_api('review_action', { id: id, action: 'approve', create_exception: createEx ? 1 : 0 })
      .then(function (r) { return r.json(); })
      .then(function (res) {
        if (res && res.success) {
          if (row) { row.style.background = 'rgba(0,217,126,.08)'; }
          // update status badge
          var badge = row ? row.querySelector('.rv-badge') : null;
          if (badge) { badge.className = 'badge badge-approved rv-badge'; badge.textContent = 'Approved'; }
          // replace action buttons
          var actions = row ? row.querySelector('.rv-actions') : null;
          if (actions) { actions.innerHTML = '<button class="btn-delete rv-delete-btn" data-id="' + id + '">Delete</button>'; }
          var note = (res.data && res.data.exception_uuid && res.data.exception_uuid !== 'exists')
            ? 'Approved. Exception created.' : 'Approved.';
          btn.textContent = note;
        } else {
          btn.disabled = false;
          btn.textContent = 'Approve';
          alert('Error: ' + ((res && res.note) || 'unknown'));
        }
      })
      .catch(function () { btn.disabled = false; btn.textContent = 'Approve'; });
  });

  // deny action
  document.addEventListener('click', function (e) {
    var btn = e.target.closest('.rv-deny-btn');
    if (!btn) return;
    e.preventDefault();
    var id = btn.getAttribute('data-id');
    var row = btn.closest('tr');

    btn.disabled = true;
    btn.textContent = '...';

    BitFire_api('review_action', { id: id, action: 'deny' })
      .then(function (r) { return r.json(); })
      .then(function (res) {
        if (res && res.success) {
          if (row) { row.style.background = 'rgba(230,55,87,.06)'; }
          var badge = row ? row.querySelector('.rv-badge') : null;
          if (badge) { badge.className = 'badge badge-denied rv-badge'; badge.textContent = 'Denied'; }
          var actions = row ? row.querySelector('.rv-actions') : null;
          if (actions) { actions.innerHTML = '<button class="btn-delete rv-delete-btn" data-id="' + id + '">Delete</button>'; }
        } else {
          btn.disabled = false;
          btn.textContent = 'Deny';
          alert('Error: ' + ((res && res.note) || 'unknown'));
        }
      })
      .catch(function () { btn.disabled = false; btn.textContent = 'Deny'; });
  });

  // delete action
  document.addEventListener('click', function (e) {
    var btn = e.target.closest('.rv-delete-btn');
    if (!btn) return;
    e.preventDefault();
    var id = btn.getAttribute('data-id');
    if (!confirm('Delete this review permanently?')) return;
    var row = btn.closest('tr');

    btn.disabled = true;
    btn.textContent = '...';

    BitFire_api('review_action', { id: id, action: 'delete' })
      .then(function (r) { return r.json(); })
      .then(function (res) {
        if (res && res.success) {
          if (row) { row.remove(); }
        } else {
          btn.disabled = false;
          btn.textContent = 'Delete';
          alert('Delete failed: ' + ((res && res.note) || 'unknown'));
        }
      })
      .catch(function () { btn.disabled = false; btn.textContent = 'Delete'; });
  });

})();
</script>