<div class="header-Outro">
  <div class="row content single-Col">
    <h1>Site Reports</h1>
  </div>
</div>

<div class="content single-Col misc-page">
  <article>
    <% if @reports.empty? %>
      <div style="text-align: center; padding: 40px;">
        <p><em>No reports found.</em></p>
      </div>
    <% else %>
      <div class="row">
        <% @reports.each_with_index do |report, index| %>
          <div class="col col-33" id="report-<%= report.id %>">
            <div class="block" style="height: 100%; display: flex; flex-direction: column;">
              <% 
                # Use the specific site_file_path from report, or default to index.html
                if report.site_file_path && !report.site_file_path.empty?
                  screenshot_path = report.site_file_path
                else
                  screenshot_path = 'index.html'
                end

                blur_sensitive_screenshot = @moderation_blur_categories.include?(report.type)
              %>
              
              <div style="position: relative; margin-bottom: 10px;">
                <a href="<%= report.site.uri + '/' + screenshot_path %>" target="_blank">
                  <img src="<%= report.site.screenshot_url(screenshot_path, '540x405') %>"
                       style="width: 100%; height: auto; border: 1px solid #ddd;<%= ' filter: blur(4px);' if blur_sensitive_screenshot %>">
                </a>
                <% if report.type && !report.type.empty? %>
                  <span class="alert-error" style="position: absolute; top: 5px; right: 5px; padding: 2px 6px; font-size: 11px; border-radius: 3px;">
                    <%= report.type.upcase %>
                  </span>
                <% end %>
              </div>
              
              <h4><%== report.site.supporter? ? '<i class="fa fa-heart"></i>' : '' %><%= report.site.username %></h4>
              
              <small style="word-break: break-all; display: block; margin-bottom: 10px;">
                <a href="<%= report.site.uri + '/' + screenshot_path %>" target="_blank"><%= report.site.uri + '/' + screenshot_path %></a>
              </small>
              
              <small style="line-height: 1.4; display: block; margin-bottom: 10px;">
                <a href="/admin/site/<%= report.site.username %>" target="_blank">Site Info</a> • 
                <a href="/site/<%= report.site.username %>" target="_blank">Site Profile</a> • 
                <a href="<%= report.site.uri %>" target="_blank">Site Root</a>
              </small>
              
              <p><strong><%= report.type %></strong> • <%= report.created_at.ago %><% if report.reporting_site %> • reported by <a href="<%= report.reporting_site.uri %>" target="_blank"><%= report.reporting_site.username %></a><% end %>
              </p>
              
              <div style="background: #f9f9f9; padding: 8px; margin-bottom: 10px; border-left: 3px solid #ddd; font-size: 12px; height: 60px; overflow-y: auto;">
                <% if report.comments && !report.comments.empty? %>
                  <%= report.comments[0..200] %><%= report.comments.length > 200 ? '...' : '' %>
                <% else %>
                  <span style="color: #999; font-style: italic;">No comments</span>
                <% end %>
              </div>
              
              <small style="color: #666; margin-bottom: 15px; display: block; flex-grow: 1;">
                <%= report.site.views.format_large_number %> views
              </small>
              
              <div id="actions-<%= report.id %>">
                <button class="btn btn-Action" onclick="banSite('<%= report.site.username %>', <%= report.id %>, '<%= report.type %>')" style="margin-right: 5px;">
                  Ban Site
                </button>
                <% if !report.site.is_nsfw %>
                  <button class="btn btn-Action" onclick="markNSFW('<%= report.site.username %>', <%= report.id %>)" style="margin-right: 5px;">
                    Mark NSFW
                  </button>
                <% end %>
                
                <button class="btn" onclick="dismissReport(<%= report.id %>)">
                  Dismiss
                </button>
              </div>
              
            </div>
          </div>
          
          <% if (index + 1) % 3 == 0 && index != @reports.length - 1 %>
            </div><div class="row">
          <% end %>
        <% end %>

        <%== erb :'_pagination', layout: false %>
      </div>
    <% end %>
  </article>
</div>

<script>
function banSite(username, reportId, reportType) {
  var formData = new FormData();
  formData.append('usernames', username);
  formData.append('csrf_token', '<%= csrf_token %>');
  
  fetch('/admin/ban', {
    method: 'POST',
    body: formData
  }).then(function() {
    window.location.reload();
  }).catch(function(error) {
    alert('Error: ' + error);
  });
}

function unbanSite(username, reportId) {
  var formData = new FormData();
  formData.append('username', username);
  formData.append('csrf_token', '<%= csrf_token %>');
  
  fetch('/admin/unban', {
    method: 'POST',
    body: formData
  }).then(function() {
    window.location.reload();
  }).catch(function(error) {
    alert('Error: ' + error);
  });
}

function markNSFW(username, reportId) {
  var formData = new FormData();
  formData.append('username', username);
  formData.append('csrf_token', '<%= csrf_token %>');
  
  fetch('/admin/mark_nsfw', {
    method: 'POST',
    body: formData
  }).then(function() {
    // After marking as NSFW, dismiss the report
    var dismissData = new FormData();
    dismissData.append('csrf_token', '<%= csrf_token %>');
    return fetch('/admin/reports/' + reportId + '/dismiss', {
      method: 'POST',
      body: dismissData
    });
  }).then(function() {
    window.location.reload();
  }).catch(function(error) {
    alert('Error: ' + error);
  });
}

function dismissReport(reportId) {
  var formData = new FormData();
  formData.append('csrf_token', '<%= csrf_token %>');
  
  fetch('/admin/reports/' + reportId + '/dismiss', {
    method: 'POST',
    body: formData
  }).then(function(response) {
    if (response.ok) {
      window.location.reload();
    }
  }).catch(function(error) {
    alert('Error: ' + error);
  });
}
</script>
