<%- include('../operationsContent/assets.ejs') %>
<link rel="stylesheet" href="/admin/assets/css/pages/product-reporting.css?v=1.0.0">
<main class="kt-ops kt-product-reporting" data-ops-page data-product-reporting-page
  data-ops-csrf-token="<%= csrfToken %>"
  data-ops-loading="<%= i18n.__('operationsContent.loading') %>"
  data-ops-refreshing="<%= i18n.__('operationsContent.refreshing') %>"
  data-ops-load-error="<%= i18n.__('operationsContent.loadError') %>"
  data-ops-action-success="<%= i18n.__('operationsContent.actionSuccess') %>"
  data-ops-action-error="<%= i18n.__('operationsContent.actionError') %>">
  <div class="kt-ops__stack">
    <%- include('../operationsContent/hero.ejs', {
      heading: i18n.__('productReports.reportsTitle'),
      description: i18n.__('productReports.reportsDescription'),
      icon: 'ti-shield-exclamation',
      count: counts.all,
      primaryUrl: '/dashboard/product-report-reasons',
      primaryLabel: i18n.__('productReports.reasonsTitle'),
      primaryIcon: 'ti-flag-3',
      backUrl: null
    }) %>

    <nav class="kt-ops-status-nav kt-product-reporting__tabs" aria-label="<%= i18n.__('productReports.status') %>">
      <% const currentStatus = currentFilters.status || 'all'; %>
      <% const reportStatuses = ['all', 'pending', 'reviewed', 'dismissed', 'action_taken']; %>
      <% const statusIcons = { all: 'ti-stack-2', pending: 'ti-clock-hour-4', reviewed: 'ti-circle-check', dismissed: 'ti-circle-x', action_taken: 'ti-shield-check' }; %>
      <% reportStatuses.forEach(function(statusKey) { %>
        <a href="/dashboard/product-reports<%= statusKey === 'all' ? '' : '?status=' + statusKey %>"
          class="<%= currentStatus === statusKey ? 'is-active is-' + statusKey.replace('_', '-') : '' %>">
          <i class="ti <%= statusIcons[statusKey] %>"></i>
          <span><%= i18n.__(statusKey === 'all' ? 'productReports.allStatuses' : 'productReports.' + statusKey) %></span>
          <strong><%= counts[statusKey] || 0 %></strong>
        </a>
      <% }) %>
    </nav>

    <section class="kt-ops-toolbar">
      <div class="kt-ops-toolbar__main">
        <span class="kt-ops-section-icon"><i class="ti ti-report-search"></i></span>
        <div>
          <h2><%= i18n.__('productReports.reports') %></h2>
          <p><%= i18n.__('productReports.reportsDescription') %></p>
        </div>
      </div>
      <div class="kt-ops-toolbar__actions">
        <button class="kt-ops-btn" type="button" data-ops-refresh>
          <i class="ti ti-refresh"></i><span><%= i18n.__('operationsContent.refresh') %></span>
        </button>
        <button class="kt-ops-btn" type="button" data-ops-filter-toggle
          aria-expanded="false" aria-controls="product-reports-filter">
          <i class="ti ti-adjustments-horizontal"></i>
          <span><%= i18n.__('operationsContent.openFilters') %></span>
        </button>
      </div>
    </section>

    <section class="kt-ops-filter" id="product-reports-filter" data-ops-filter hidden>
      <form action="/dashboard/product-reports/filter" method="get"
        data-ops-filter-form data-ops-history-url="/dashboard/product-reports">
        <header class="kt-ops-filter__header">
          <div class="kt-ops-filter__heading">
            <span class="kt-ops-section-icon"><i class="ti ti-filter"></i></span>
            <div>
              <h2><%= i18n.__('operationsContent.filters') %></h2>
              <p><%= i18n.__('operationsContent.filterDescription') %></p>
            </div>
          </div>
          <button class="kt-ops-btn kt-ops-btn--icon" type="button" data-ops-filter-close
            aria-label="<%= i18n.__('operationsContent.closeFilters') %>"><i class="ti ti-x"></i></button>
        </header>
        <div class="kt-ops-filter__body" data-ops-filter-body>
          <div class="kt-ops-filter__grid">
            <div class="kt-ops-field" data-ops-field>
              <label for="report-search"><%= i18n.__('productReports.search') %></label>
              <div class="kt-product-reporting__control-icon">
                <i class="ti ti-search" aria-hidden="true"></i>
                <input class="kt-ops-control" id="report-search" name="search" type="search"
                  maxlength="120" value="<%= currentFilters.search || '' %>"
                  placeholder="<%= i18n.__('productReports.searchReports') %>">
              </div>
              <p class="kt-ops-field__error" data-ops-field-error></p>
            </div>
            <div class="kt-ops-field" data-ops-field>
              <label for="report-status"><%= i18n.__('productReports.status') %></label>
              <div data-ops-select>
                <select id="report-status" name="status" data-ops-native-select>
                  <option value="all"><%= i18n.__('productReports.allStatuses') %></option>
                  <% ['pending', 'reviewed', 'dismissed', 'action_taken'].forEach(function(status) { %>
                    <option value="<%= status %>" <%= currentStatus === status ? 'selected' : '' %>><%= i18n.__('productReports.' + status) %></option>
                  <% }) %>
                </select>
              </div>
              <p class="kt-ops-field__error" data-ops-field-error></p>
            </div>
            <div class="kt-ops-field" data-ops-field>
              <label for="report-reason"><%= i18n.__('productReports.reason') %></label>
              <div data-ops-select>
                <select id="report-reason" name="reasonId" data-ops-native-select>
                  <option value=""><%= i18n.__('productReports.allReasons') %></option>
                  <% reasonOptions.forEach(function(reason) { %>
                    <option value="<%= reason.id %>" <%= currentFilters.reasonId === reason.id ? 'selected' : '' %>>
                      <%= reason.title[lang === 'ar' ? 'ar' : 'en'] %>
                    </option>
                  <% }) %>
                </select>
              </div>
              <p class="kt-ops-field__error" data-ops-field-error></p>
            </div>
            <div class="kt-ops-field" data-ops-field>
              <label for="report-from"><%= i18n.__('productReports.dateFrom') %></label>
              <input class="kt-ops-control" id="report-from" name="from" type="date"
                value="<%= currentFilters.from || '' %>">
              <p class="kt-ops-field__error" data-ops-field-error></p>
            </div>
            <div class="kt-ops-field" data-ops-field>
              <label for="report-to"><%= i18n.__('productReports.dateTo') %></label>
              <input class="kt-ops-control" id="report-to" name="to" type="date"
                value="<%= currentFilters.to || '' %>">
              <p class="kt-ops-field__error" data-ops-field-error></p>
            </div>
          </div>
        </div>
        <footer class="kt-ops-filter__footer">
          <button class="kt-ops-btn" type="button" data-ops-filter-reset>
            <i class="ti ti-filter-x"></i><span><%= i18n.__('operationsContent.resetFilters') %></span>
          </button>
          <button class="kt-ops-btn kt-ops-btn--primary" type="submit">
            <i class="ti ti-check"></i><span><%= i18n.__('operationsContent.applyFilters') %></span>
          </button>
        </footer>
      </form>
    </section>

    <section class="kt-ops-resource" data-ops-resource aria-live="polite">
      <div class="kt-ops-loading" data-ops-loading hidden>
        <span class="kt-ops-loading__pill">
          <span class="kt-ops-loading__spinner"></span>
          <span data-ops-loading-label><%= i18n.__('operationsContent.loading') %></span>
        </span>
      </div>
      <%- include('./dataTable.ejs', { reports, paginationHtml, total }) %>
    </section>
  </div>

  <div class="kt-ops-modal" data-ops-modal data-product-report-review-modal role="dialog"
    aria-modal="true" aria-labelledby="product-report-review-title"
    aria-hidden="true" tabindex="-1" hidden>
    <section class="kt-ops-modal__dialog">
      <header class="kt-ops-modal__header">
        <div>
          <span class="kt-ops-eyebrow"><%= i18n.__('productReports.reviewAction') %></span>
          <h2 id="product-report-review-title"><%= i18n.__('productReports.reviewAction') %></h2>
          <p><%= i18n.__('productReports.reviewActionHint') %></p>
        </div>
        <button class="kt-ops-modal__close" type="button" data-ops-modal-close
          aria-label="<%= i18n.__('operationsContent.modalClose') %>"><i class="ti ti-x"></i></button>
      </header>
      <form data-product-report-review-form>
        <div class="kt-ops-modal__body">
          <div class="kt-product-reporting__review-context" data-product-report-review-context></div>
          <div class="kt-ops-field" data-ops-field>
            <label for="review-status"><%= i18n.__('productReports.status') %></label>
            <div data-ops-select>
              <select id="review-status" name="status" data-ops-native-select required>
                <option value="reviewed"><%= i18n.__('productReports.reviewed') %></option>
                <option value="dismissed"><%= i18n.__('productReports.dismissed') %></option>
                <option value="action_taken"><%= i18n.__('productReports.action_taken') %></option>
              </select>
            </div>
            <p class="kt-ops-field__error" data-ops-field-error></p>
          </div>
          <div class="kt-ops-field" data-ops-field>
            <label for="review-notes"><%= i18n.__('productReports.adminNotes') %></label>
            <textarea class="kt-ops-control" id="review-notes" name="adminNotes"
              maxlength="1000" placeholder="<%= i18n.__('productReports.reviewActionHint') %>"></textarea>
            <p class="kt-ops-field__error" data-ops-field-error></p>
          </div>
        </div>
        <footer class="kt-ops-modal__actions">
          <button class="kt-ops-btn" type="button" data-ops-modal-close><%= i18n.__('operationsContent.cancel') %></button>
          <button class="kt-ops-btn kt-ops-btn--primary" type="submit"
            data-ops-loading-label="<%= i18n.__('operationsContent.saving') %>">
            <span class="kt-ops-btn__spinner" data-ops-button-spinner hidden></span>
            <i class="ti ti-shield-check"></i>
            <span data-ops-button-label><%= i18n.__('productReports.saveReview') %></span>
          </button>
        </footer>
      </form>
    </section>
  </div>
</main>
<%- include('../operationsContent/scripts.ejs') %>
<script src="/admin/assets/js/pages/product-reporting.js?v=1.0.0"></script>
