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

{% block title %}Détail de l'erreur{% endblock %}

{% set statusClass = report.statusCode >= 500 ? 'danger' : (report.statusCode == 404 ? 'warning' : (report.statusCode >= 400 ? 'orange' : 'secondary')) %}
{% set emailSent = report.isEmailSent %}
{% set userName = report.userDisplayName ?: 'Utilisateur inconnu' %}
{% set userEmail = report.userEmail ?: 'Non connecté' %}
{% set method = report.method ?: 'n/a' %}
{% set routeName = report.routeName ?: 'n/a' %}
{% set fullUrl = report.url ?: 'n/a' %}
{% set pathValue = report.path ?: 'n/a' %}
{% set ipValue = report.ip ?: 'n/a' %}
{% set referrerValue = report.referrer ?: 'n/a' %}
{% set fileValue = report.file ?: 'Fichier inconnu' %}
{% set lineValue = report.lineNumber ?: 'n/a' %}
{% set bodyValue = report.bodyPreview ?: 'Aucun body enregistré.' %}
{% set responseValue = report.responsePreview ?: 'Aucune réponse enregistrée.' %}
{% set traceValue = report.tracePreview ?: 'Trace indisponible.' %}
{% set handledAtValue = report.handledAt %}

{% 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 align-items-center gap-2 mb-1">
            <a href="{{ path('app_admin_error_report_index') }}" class="btn btn-light border btn-sm">
              <i class="ti ti-arrow-left"></i>
            </a>
            <h2 class="mb-0 fw-bold">Détail de l'erreur</h2>
          </div>
          <p class="text-muted mb-0">{{ report.createdAt|date('d/m/Y à H:i:s') }}</p>
        </div>
        <div class="text-muted small text-end">
          <div>Enregistrement #{{ report.id }}</div>
          <div>Version {{ appVersion }}</div>
        </div>
        <div class="d-flex gap-2">
          {% if handledAtValue %}
            <span class="badge bg-success-subtle text-success align-self-center px-3 py-2">Traitée le {{ handledAtValue|date('d/m/Y à H:i') }}</span>
          {% else %}
            <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) }}">
              <input type="hidden" name="redirect_to" value="show">
              <button type="submit" class="btn btn-success">Marquer comme traitée</button>
            </form>
          {% endif %}
        </div>
      </div>

      <div class="card border-0 shadow-sm mb-4" style="background: #fff7f7; border: 1px solid rgba(220, 53, 69, .18) !important;">
        <div class="card-body d-flex flex-wrap align-items-start gap-3">
          <div class="rounded-3 d-inline-flex align-items-center justify-content-center" style="width: 56px; height: 56px; background: rgba(220, 53, 69, .08); color: #dc3545;">
            <i class="ti ti-alert-triangle-filled fs-4"></i>
          </div>
          <div class="flex-grow-1">
            <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
              <span class="badge bg-{{ statusClass }} px-3 py-2">{{ report.statusCode }}</span>
              <strong class="fs-4">{{ report.exceptionClass|split('\\\\')|last }}</strong>
            </div>
            <div class="fs-5 fw-semibold text-dark">{{ report.exceptionMessage }}</div>
            <div class="text-muted small mt-2">{{ report.exceptionClass }}</div>
          </div>
        </div>
      </div>

      <div class="row g-4 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">Utilisateur</div>
              <div class="fw-bold fs-5">{{ userName }}</div>
              <div class="text-muted">{{ userEmail }}</div>
              <div class="text-muted small mt-2">ID : {{ report.userId ?: 'n/a' }}</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">Environnement</div>
              <div class="fw-bold fs-5 text-capitalize">{{ report.environment }}</div>
              <div class="text-muted mt-1">Version {{ appVersion }}</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">Email support</div>
              <span class="badge {{ emailSent ? 'bg-success-subtle text-success' : 'bg-secondary-subtle text-secondary' }} px-3 py-2">
                {{ emailSent ? 'Envoyé' : 'Non envoyé' }}
              </span>
            </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">Traitement</div>
              {% if handledAtValue %}
                <span class="badge bg-success-subtle text-success px-3 py-2">Traitée</span>
                <div class="text-muted mt-2">{{ handledAtValue|date('d/m/Y à H:i:s') }}</div>
              {% else %}
                <span class="badge bg-warning-subtle text-warning px-3 py-2">À traiter</span>
              {% endif %}
            </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">Client</div>
              <div class="fw-semibold">{{ report.userAgent ?: 'User-Agent indisponible' }}</div>
              <div class="text-muted small mt-2">IP : {{ ipValue }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
          <h5 class="fw-bold mb-3">Requête HTTP</h5>
          <div class="row g-3">
            <div class="col-md-3">
              <div class="text-muted small">Méthode</div>
              <div class="fw-semibold">{{ method }}</div>
            </div>
            <div class="col-md-3">
              <div class="text-muted small">Route Symfony</div>
              <div class="fw-semibold">{{ routeName }}</div>
            </div>
            <div class="col-md-3">
              <div class="text-muted small">Path</div>
              <code>{{ pathValue }}</code>
            </div>
            <div class="col-md-3">
              <div class="text-muted small">Referrer</div>
              <code>{{ referrerValue }}</code>
            </div>
            <div class="col-12">
              <div class="text-muted small">URL complète</div>
              <pre class="bg-light rounded-3 p-3 small overflow-auto mb-0">{{ fullUrl }}</pre>
            </div>
          </div>
        </div>
      </div>

      <div class="row g-4 mb-4">
        <div class="col-12 col-xl-6">
          <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
              <h5 class="fw-bold mb-3">Contexte technique</h5>
              <div class="row g-3">
                <div class="col-12">
                  <div class="text-muted small">Fichier</div>
                  <pre class="bg-light rounded-3 p-3 small overflow-auto mb-0">{{ fileValue }}</pre>
                </div>
                <div class="col-md-6">
                  <div class="text-muted small">Ligne</div>
                  <div class="fw-semibold">{{ lineValue }}</div>
                </div>
                <div class="col-md-6">
                  <div class="text-muted small">Code HTTP</div>
                  <div class="fw-semibold">{{ report.statusCode }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-xl-6">
          <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
              <h5 class="fw-bold mb-3">Entête d'exception</h5>
              <div class="text-muted small">Classe</div>
              <pre class="bg-light rounded-3 p-3 small overflow-auto mb-3">{{ report.exceptionClass }}</pre>
              <div class="text-muted small">Message</div>
              <pre class="bg-light rounded-3 p-3 small overflow-auto mb-0">{{ report.exceptionMessage }}</pre>
            </div>
          </div>
        </div>
      </div>

      <div class="row g-4">
        <div class="col-12 col-xl-6">
          <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
              <h5 class="fw-bold mb-3">Query params</h5>
              <pre class="bg-light rounded-3 p-3 small overflow-auto mb-0">{{ queryParamsJson }}</pre>
            </div>
          </div>
        </div>
        <div class="col-12 col-xl-6">
          <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
              <h5 class="fw-bold mb-3">Request params</h5>
              <pre class="bg-light rounded-3 p-3 small overflow-auto mb-0">{{ requestParamsJson }}</pre>
            </div>
          </div>
        </div>
        <div class="col-12 col-xl-6">
          <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
              <h5 class="fw-bold mb-3">Attributs de requête</h5>
              <pre class="bg-light rounded-3 p-3 small overflow-auto mb-0">{{ attributesJson }}</pre>
            </div>
          </div>
        </div>
        <div class="col-12 col-xl-6">
          <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
              <h5 class="fw-bold mb-3">Headers</h5>
              <pre class="bg-light rounded-3 p-3 small overflow-auto mb-0">{{ headersJson }}</pre>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="card border-0 shadow-sm">
            <div class="card-body">
              <h5 class="fw-bold mb-3">Body</h5>
              <pre class="bg-light rounded-3 p-3 small overflow-auto mb-0">{{ bodyValue }}</pre>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="card border-0 shadow-sm">
            <div class="card-body">
              <h5 class="fw-bold mb-3">Response preview</h5>
              <pre class="bg-light rounded-3 p-3 small overflow-auto mb-0">{{ responseValue }}</pre>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="card border-0 shadow-sm">
            <div class="card-body">
              <h5 class="fw-bold mb-3">Trace</h5>
              <pre class="bg-light rounded-3 p-3 small overflow-auto mb-0">{{ traceValue }}</pre>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}