{% extends '@App/partials/base.html.twig' %}

{% block title %}Rapports d'erreurs{% endblock %}

{% block content %}
  <div class="body-wrapper">
    <div class="container-fluid py-4">
      <div class="d-flex flex-wrap align-items-start justify-content-between gap-3 mb-4">
        <div>
          <div class="d-flex flex-wrap align-items-center gap-2 mb-1">
            <h2 class="mb-0 fw-bold">Rapports d'erreurs</h2>
            <span class="badge bg-light text-dark border px-3 py-2">{{ stats.total }} erreurs enregistrées</span>
          </div>
          <p class="text-muted mb-0">Consultez et analysez les erreurs applicatives remontées par la plateforme.</p>
        </div>
      </div>

      <form method="get" class="card border-0 shadow-sm mb-4">
        <div class="card-body p-3">
          <div class="row g-3 align-items-center">
            <div class="col-12 col-xl-7">
              <label class="visually-hidden" for="error-report-q">Recherche</label>
              <input id="error-report-q" type="text" class="form-control form-control-lg" name="q" value="{{ filters.q }}" placeholder="Rechercher par message, URL ou utilisateur...">
            </div>
            <div class="col-12 col-md-4 col-xl-2">
              <select class="form-select form-select-lg" name="status_code">
                <option value="">Tous les codes</option>
                {% for code in statusCodeOptions %}
                  <option value="{{ code }}" {{ filters.status_code == (code ~ '') ? 'selected' : '' }}>{{ code }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-12 col-md-4 col-xl-2">
              <select class="form-select form-select-lg" name="period">
                {% for value, label in periodOptions %}
                  <option value="{{ value }}" {{ filters.period == value ? 'selected' : '' }}>{{ label }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-12 col-md-4 col-xl-1">
              <select class="form-select form-select-lg" name="email_sent">
                <option value="">Email</option>
                <option value="1" {{ filters.email_sent == '1' ? 'selected' : '' }}>Envoyé</option>
                <option value="0" {{ filters.email_sent == '0' ? 'selected' : '' }}>Non envoyé</option>
              </select>
            </div>
            <div class="col-12 col-md-4 col-xl-2">
              <select class="form-select form-select-lg" name="handled">
                <option value="0" {{ filters.handled == '0' ? 'selected' : '' }}>Non traitées</option>
                <option value="1" {{ filters.handled == '1' ? 'selected' : '' }}>Traitées</option>
                <option value="" {{ filters.handled == '' ? 'selected' : '' }}>Toutes</option>
              </select>
            </div>
            <div class="col-12 d-flex justify-content-end gap-2">
              <a href="{{ path('app_admin_error_report_index') }}" class="btn btn-light border">Réinitialiser</a>
              <button type="submit" class="btn btn-primary">Filtrer</button>
            </div>
          </div>
        </div>
      </form>

      <div class="row g-3 mb-4">
        <div class="col-12 col-md-6 col-xl-3">
          <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
              <div class="text-uppercase text-muted fw-semibold small mb-3">Dernières 24h</div>
              <div class="display-6 fw-bold mb-1">{{ stats.last24h }}</div>
              <div class="text-muted">Incidents récents</div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-xl-3">
          <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
              <div class="text-uppercase text-muted fw-semibold small mb-3">Erreurs 500</div>
              <div class="display-6 fw-bold mb-1">{{ stats.errors500 }}</div>
              <div class="text-muted">Sur les 7 derniers jours</div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-xl-3">
          <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
              <div class="text-uppercase text-muted fw-semibold small mb-3">Utilisateurs impactés</div>
              <div class="display-6 fw-bold mb-1">{{ stats.uniqueUsers }}</div>
              <div class="text-muted">Utilisateurs uniques</div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-xl-3">
          <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
              <div class="text-uppercase text-muted fw-semibold small mb-3">Emails envoyés</div>
              <div class="display-6 fw-bold mb-1">{{ stats.emailSentRate }}%</div>
              <div class="text-muted">{{ stats.sentEmailCount }} rapports notifiés</div>
            </div>
          </div>
        </div>
      </div>

      <div class="card border-0 shadow-sm overflow-hidden">
        <div class="table-responsive">
          <table class="table align-middle mb-0">
            <thead class="table-light">
              <tr>
                <th>Date</th>
                <th>Code</th>
                <th>Message</th>
                <th>URL</th>
                <th>Utilisateur</th>
                <th>Env.</th>
                <th>Email</th>
                <th>Traitement</th>
                <th class="text-end">Action</th>
              </tr>
            </thead>
            <tbody>
              {% for report in reports %}
                {% set handledAtValue = report.handledAt %}
                <tr>
                  <td>
                    <div class="fw-semibold">{{ report.createdAt|date('d/m/Y') }}</div>
                    <div class="text-muted small">{{ report.createdAt|date('H:i:s') }}</div>
                  </td>
                  <td>
                    <span class="badge {{ report.statusCode >= 500 ? 'bg-danger-subtle text-danger' : report.statusCode == 404 ? 'bg-warning-subtle text-warning' : 'bg-light text-dark border' }}">
                      {{ report.statusCode }}
                    </span>
                  </td>
                  <td style="min-width: 260px;">
                    <div class="fw-semibold text-truncate" style="max-width: 340px;">{{ report.exceptionMessage }}</div>
                    <div class="text-muted small">{{ report.exceptionClass|split('\\\\')|last }}</div>
                  </td>
                  <td>
                    <code class="small">{{ report.path ?: report.url }}</code>
                  </td>
                  <td>
                    <div class="fw-semibold">{{ report.userDisplayName ?: 'Utilisateur inconnu' }}</div>
                    <div class="text-muted small">{{ report.userEmail ?: 'Non connecté' }}</div>
                  </td>
                  <td>
                    <span class="badge bg-light text-dark border">{{ report.environment }}</span>
                  </td>
                  <td>
                    <span class="badge {{ report.isEmailSent ? 'bg-success-subtle text-success' : 'bg-secondary-subtle text-secondary' }}">
                      {{ report.isEmailSent ? 'Envoyé' : 'Non envoyé' }}
                    </span>
                  </td>
                  <td>
                    {% if handledAtValue %}
                      <span class="badge bg-success-subtle text-success">Traitée le {{ handledAtValue|date('d/m/Y') }}</span>
                    {% else %}
                      <span class="badge bg-warning-subtle text-warning">À traiter</span>
                    {% endif %}
                  </td>
                  <td class="text-end">
                    <div class="d-inline-flex gap-2">
                      <a href="{{ path('app_admin_error_report_show', { id: report.id }) }}" class="btn btn-sm btn-outline-primary">Détails</a>
                      {% if not handledAtValue %}
                        <form method="post" action="{{ path('app_admin_error_report_handle', { id: report.id }) }}">
                          <input type="hidden" name="_token" value="{{ csrf_token('handle_error_report_' ~ report.id) }}">
                          <button type="submit" class="btn btn-sm btn-success">Marquer traitée</button>
                        </form>
                      {% endif %}
                    </div>
                  </td>
                </tr>
              {% else %}
                <tr>
                  <td colspan="9" class="text-center py-5 text-muted">Aucun rapport d’erreur ne correspond aux filtres.</td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 p-3 border-top">
          <div class="text-muted">
            Affichage de {{ reports is not empty ? ((page - 1) * perPage) + 1 : 0 }} à {{ ((page - 1) * perPage) + reports|length }} sur {{ total }} erreurs
          </div>
          <div class="d-flex gap-2">
            {% set previousPage = page > 1 ? page - 1 : 1 %}
            {% set nextPage = page < totalPages ? page + 1 : totalPages %}
            <a href="{{ path('app_admin_error_report_index', filters|merge({ page: previousPage })) }}" class="btn btn-light border {{ page <= 1 ? 'disabled' : '' }}">Précédent</a>
            <a href="{{ path('app_admin_error_report_index', filters|merge({ page: nextPage })) }}" class="btn btn-success {{ page >= totalPages ? 'disabled' : '' }}">Suivant</a>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}