{% set tech = data.tech|default({}) %}
{% set platformStatus = tech.platformStatus|default('ok') %}
{% set errors24h = tech.errors24h|default(0) %}
{% set errors500 = tech.errors500|default(0) %}
{% set errors404 = tech.errors404|default(0) %}
{% set errors4xx = tech.errors4xx|default(0) %}
{% set impactedUsers = tech.impactedUsers24h|default(0) %}
{% set emailSent24h = tech.emailSent24h|default(0) %}
{% set emailSentRate24h = tech.emailSentRate24h|default(0) %}
{% set totalReports = tech.totalReports|default(0) %}
{% set appVersion = tech.appVersion|default('n/a') %}
{% set recentReports = tech.recentReports|default([]) %}
{% set latestCritical = tech.latestCritical|default(null) %}
{% set statusDistribution = tech.statusDistribution|default({}) %}
{% set serviceStatuses = tech.serviceStatuses|default([]) %}

<style>
  .tech-card{border:1px solid #e5e7eb;border-radius:14px;background:#fff}
  .tech-mini-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
  .tech-mini{border:1px solid #e5e7eb;border-radius:12px;padding:1rem;background:#fff}
  .tech-mini .value{font-size:2.2rem;font-weight:800;line-height:1.1}
  .tech-main-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:1rem}
  .tech-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
  .incident-row{border:1px solid #e5e7eb;border-radius:12px;padding:1rem;background:#fff}
  .incident-row + .incident-row{margin-top:.75rem}
  .service-row{border:1px solid #dbeafe;border-radius:12px;padding:.85rem}
  .service-row.ok{background:#f0fdf4;border-color:#bbf7d0}
  .service-row.warn{background:#fff7ed;border-color:#fed7aa}
  .service-row.incident{background:#fff1f2;border-color:#fecdd3}
  .code-badge{display:inline-flex;align-items:center;justify-content:center;min-width:56px;padding:.45rem .75rem;border-radius:999px;font-weight:700}
  .code-500{background:#fee2e2;color:#dc2626}
  .code-404{background:#fef3c7;color:#d97706}
  .code-400{background:#ffedd5;color:#ea580c}
  .code-default{background:#e5e7eb;color:#475569}
  @media (max-width:1400px){.tech-main-grid,.tech-bottom-grid{grid-template-columns:1fr}}
  @media (max-width:992px){.tech-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:768px){.tech-mini-grid{grid-template-columns:1fr}}
</style>

<div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
  <div>
    <h1 class="fw-bold mb-1" style="font-size:42px;">Infrastructure & Technique</h1>
    <p class="text-muted mb-0 fs-4">Vue pilotée par les rapports d’erreurs applicatives enregistrés dans FundUp</p>
  </div>
  <div class="d-flex gap-2 flex-wrap">
    {% if platformStatus == 'ok' %}
      <span class="badge rounded-pill px-3 py-2 bg-success-subtle text-success border border-success-subtle fs-4">
        <i class="ti ti-circle-filled me-1" style="font-size:8px;"></i>Plateforme stable
      </span>
    {% elseif platformStatus == 'warning' %}
      <span class="badge rounded-pill px-3 py-2 bg-warning-subtle text-warning border border-warning-subtle fs-4">
        <i class="ti ti-alert-triangle me-1"></i>Erreurs à surveiller
      </span>
    {% else %}
      <span class="badge rounded-pill px-3 py-2 bg-danger-subtle text-danger border border-danger-subtle fs-4">
        <i class="ti ti-alert-octagon me-1"></i>Incident applicatif
      </span>
    {% endif %}
    <span class="badge rounded-pill px-3 py-2 bg-light text-dark border fs-4">Version {{ appVersion }}</span>
  </div>
</div>

<div class="tech-mini-grid mb-4">
  <div class="tech-mini">
    <div class="small fw-semibold text-muted">Rapports d’erreur 24h</div>
    <div class="value">{{ errors24h|number_format(0, ',', ' ') }}</div>
    <div class="small text-muted">{{ totalReports|number_format(0, ',', ' ') }} au total</div>
  </div>
  <div class="tech-mini">
    <div class="small fw-semibold text-muted">Erreurs 500</div>
    <div class="value text-danger">{{ errors500|number_format(0, ',', ' ') }}</div>
    <div class="small text-muted">Incidents serveur sur 24h</div>
  </div>
  <div class="tech-mini">
    <div class="small fw-semibold text-muted">Utilisateurs impactés</div>
    <div class="value text-primary">{{ impactedUsers|number_format(0, ',', ' ') }}</div>
    <div class="small text-muted">Utilisateurs distincts sur 24h</div>
  </div>
  <div class="tech-mini">
    <div class="small fw-semibold text-muted">Emails support</div>
    <div class="value text-success">{{ emailSent24h|number_format(0, ',', ' ') }}</div>
    <div class="small text-muted">{{ emailSentRate24h }}% des erreurs 24h</div>
  </div>
</div>

<div class="tech-main-grid mb-4">
  <div class="tech-card">
    <div class="card-body p-4">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="fw-bold mb-0">Activité des erreurs</h4>
        <span class="text-muted small"><i class="ti ti-clock me-1"></i>24 dernières heures</span>
      </div>
      <div class="border rounded-3 p-2 mb-3">
        <div class="text-center fw-semibold mb-2">Rapports par tranche horaire</div>
        <div id="tech-activity-chart" style="height:220px;"></div>
      </div>
      <div class="row g-3">
        <div class="col-md-4">
          <div class="rounded-3 p-3 border h-100">
            <div class="small text-muted">404</div>
            <div class="fw-bold fs-7 text-warning">{{ errors404|number_format(0, ',', ' ') }}</div>
            <div class="small text-muted">Pages introuvables</div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="rounded-3 p-3 border h-100">
            <div class="small text-muted">4xx</div>
            <div class="fw-bold fs-7 text-orange">{{ errors4xx|number_format(0, ',', ' ') }}</div>
            <div class="small text-muted">Erreurs client</div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="rounded-3 p-3 border h-100">
            <div class="small text-muted">500+</div>
            <div class="fw-bold fs-7 text-danger">{{ errors500|number_format(0, ',', ' ') }}</div>
            <div class="small text-muted">Incidents serveur</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="tech-card">
    <div class="card-body p-4">
      <h4 class="fw-bold mb-3">État des services</h4>
      {% if serviceStatuses is not empty %}
        <div class="d-grid gap-2 mb-3">
          {% for service in serviceStatuses %}
            <div class="service-row {{ service.state == 'incident' ? 'incident' : (service.state == 'warning' ? 'warn' : 'ok') }} d-flex justify-content-between align-items-center">
              <div>
                <div class="fw-semibold">{{ service.label }}</div>
                <div class="small text-muted">{{ service.description }}</div>
              </div>
              <div class="text-end">
                <div class="fw-semibold {{ service.state == 'incident' ? 'text-danger' : (service.state == 'warning' ? 'text-warning' : 'text-success') }}">
                  {{ service.state == 'incident' ? 'Incident' : (service.state == 'warning' ? 'À surveiller' : 'Opérationnel') }}
                </div>
                <div class="small text-muted">
                  {{ service.count|number_format(0, ',', ' ') }} erreur{{ service.count > 1 ? 's' : '' }} / 24h
                </div>
              </div>
            </div>
          {% endfor %}
        </div>
      {% else %}
        <div class="rounded-3 p-3 border bg-light text-muted">Aucune donnée de service disponible.</div>
      {% endif %}

      <h5 class="fw-bold mb-3 mt-4">Répartition des codes</h5>
      {% if statusDistribution is not empty %}
        <div class="d-grid gap-2 mb-3">
          {% for code, count in statusDistribution %}
            {% set badgeClass = code >= 500 ? 'code-500' : (code == 404 ? 'code-404' : (code >= 400 ? 'code-400' : 'code-default')) %}
            <div class="d-flex justify-content-between align-items-center border rounded-3 p-3">
              <div class="d-flex align-items-center gap-3">
                <span class="code-badge {{ badgeClass }}">{{ code }}</span>
                <div>
                  <div class="fw-semibold">Code {{ code }}</div>
                  <div class="small text-muted">Occurrences récentes</div>
                </div>
              </div>
              <div class="fw-bold fs-6">{{ count|number_format(0, ',', ' ') }}</div>
            </div>
          {% endfor %}
        </div>
      {% endif %}

      <div class="rounded-3 p-3 mt-3 {{ latestCritical and latestCritical.statusCode >= 500 ? 'bg-danger-subtle border border-danger-subtle' : 'bg-light border' }}">
        <div class="fw-semibold mb-1">Dernier incident notable</div>
        {% if latestCritical %}
          <div class="small {{ latestCritical.statusCode >= 500 ? 'text-danger' : 'text-muted' }}">
            {{ latestCritical.exceptionMessage }}
          </div>
          <div class="small text-muted mt-1">
            {{ latestCritical.path ?: latestCritical.url ?: 'URL indisponible' }} • {{ latestCritical.createdAt|date('d/m/Y H:i') }}
          </div>
        {% else %}
          <div class="small text-muted">Aucun incident notable actuellement.</div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<div class="tech-bottom-grid">
  <div class="tech-card">
    <div class="card-body p-4">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="fw-bold mb-0">Derniers rapports</h4>
        <a href="{{ path('app_admin_error_report_index') }}" class="btn btn-light border btn-sm">Voir tous les rapports</a>
      </div>
      {% if recentReports is not empty %}
        {% for report in recentReports %}
          {% set badgeClass = report.statusCode >= 500 ? 'code-500' : (report.statusCode == 404 ? 'code-404' : (report.statusCode >= 400 ? 'code-400' : 'code-default')) %}
          <div class="incident-row">
            <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
              <div class="d-flex align-items-start gap-3">
                <span class="code-badge {{ badgeClass }}">{{ report.statusCode }}</span>
                <div>
                  <div class="fw-semibold">
                    {{ report.exceptionMessage|length > 100 ? report.exceptionMessage|slice(0, 100) ~ '…' : report.exceptionMessage }}
                  </div>
                  <div class="small text-muted mt-1">{{ report.path ?: report.url ?: 'URL indisponible' }}</div>
                  <div class="small text-muted mt-1">
                    {{ report.createdAt|date('d/m/Y H:i:s') }}
                    {% if report.userDisplayName or report.userEmail %}
                      • {{ report.userDisplayName ?: report.userEmail }}
                    {% endif %}
                  </div>
                </div>
              </div>
              <div class="text-end">
                <div class="small text-muted">{{ report.environment }}</div>
                <div class="small {{ report.isEmailSent ? 'text-success' : 'text-muted' }}">{{ report.isEmailSent ? 'Email support envoyé' : 'Email non envoyé' }}</div>
                <a href="{{ path('app_admin_error_report_show', { id: report.id }) }}" class="btn btn-link btn-sm px-0 mt-1">Détails</a>
              </div>
            </div>
          </div>
        {% endfor %}
      {% else %}
        <div class="rounded-3 p-4 border bg-light text-center text-muted">Aucun rapport d’erreur enregistré pour le moment.</div>
      {% endif %}
    </div>
  </div>

  <div class="tech-card">
    <div class="card-body p-4">
      <h4 class="fw-bold mb-3">Synthèse plateforme</h4>
      <div class="rounded-3 p-3 mb-2" style="background:#ecfdf3;border:1px solid #bbf7d0;">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <div class="fw-semibold">Version actuelle</div>
            <div class="small text-muted">Application surveillée via les rapports d’erreur</div>
          </div>
          <span class="badge bg-success">v{{ appVersion }}</span>
        </div>
      </div>
      <div class="rounded-3 border p-3 d-flex justify-content-between">
        <span>Rapports d’erreur 24h</span>
        <strong>{{ errors24h|number_format(0, ',', ' ') }}</strong>
      </div>
      <div class="rounded-3 border p-3 d-flex justify-content-between mt-2">
        <span>Emails support envoyés</span>
        <strong>{{ emailSent24h|number_format(0, ',', ' ') }}</strong>
      </div>
      <div class="rounded-3 border p-3 d-flex justify-content-between mt-2">
        <span>Utilisateurs impactés</span>
        <strong>{{ impactedUsers|number_format(0, ',', ' ') }}</strong>
      </div>
      <div class="rounded-3 border p-3 d-flex justify-content-between mt-2">
        <span>Incidents serveur 500+</span>
        <strong class="text-danger">{{ errors500|number_format(0, ',', ' ') }}</strong>
      </div>
      <a href="{{ path('app_admin_error_report_index') }}" class="btn btn-primary w-100 mt-3">
        <i class="ti ti-bug me-1"></i>Ouvrir les rapports d'erreurs
      </a>
    </div>
  </div>
</div>

<script>
  (function () {
    const el = document.getElementById('tech-activity-chart')
    if (!el || !window.ApexCharts) return
    if (el.__techChart) { el.__techChart.destroy() }

    const chart = new ApexCharts(el, {
      chart: { type: 'area', height: 220, toolbar: { show: false } },
      series: [{ name: 'Rapports d’erreur', data: {{ tech.activitySeries|default([0,0,0,0,0,0,0])|json_encode|raw }} }],
      xaxis: { categories: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'] },
      colors: ['#ef4444'],
      stroke: { curve: 'smooth', width: 3 },
      dataLabels: { enabled: false },
      fill: { type: 'gradient', gradient: { opacityFrom: .25, opacityTo: .08, stops: [0,100] } },
      grid: { borderColor: '#eef2f7' }
    })
    chart.render()
    el.__techChart = chart
  })()
</script>