{% set tech = data.tech|default({}) %}
{% set uptime = tech.uptimePercent|default(0) %}
{% set dbMs = tech.dbResponseMs|default(0) %}
{% set errorRate = tech.errorRate|default(0) %}
{% set rpm = tech.apiReqPerMin|default(0) %}
{% set degraded = tech.degradedServices|default(0) %}

<style>
  .tech-card{border:1px solid #e5e7eb;border-radius:14px;background:#fff}
  .tech-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
  .tech-mini{border:1px solid transparent;border-radius:12px;padding:1rem}
  .tech-mini .value{font-size:2.2rem;font-weight:800;line-height:1.1}
  .tech-main-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
  .tech-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
  .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}
  .log-line{border-left:4px solid;border-radius:10px;padding:.85rem}
  @media (max-width:1400px){.tech-main-grid,.tech-bottom-grid{grid-template-columns: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">Supervision technique de la plateforme • Monitoring temps réel</p>
  </div>
  <div class="d-flex gap-2">
    <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>Tous systèmes opérationnels
    </span>
    <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>{{ degraded }} service dégradé
    </span>
  </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">Santé des Services</h4>
        <span class="text-muted small"><i class="ti ti-clock me-1"></i>Temps réel</span>
      </div>
      <div class="tech-mini-grid mb-3">
        <div class="tech-mini" style="background:#ecfdf3;border-color:#bbf7d0;color:#166534;">
          <div class="small fw-semibold">Uptime global</div>
          <div class="value">{{ uptime|number_format(2, ',', ' ') }}%</div>
          <div class="small">30 derniers jours</div>
        </div>
        <div class="tech-mini" style="background:#eff6ff;border-color:#bfdbfe;color:#1e40af;">
          <div class="small fw-semibold">Temps DB</div>
          <div class="value">{{ dbMs|number_format(1, ',', ' ') }}ms</div>
          <div class="small">Mesure live</div>
        </div>
        <div class="tech-mini" style="background:#fff7ed;border-color:#fed7aa;color:#9a3412;">
          <div class="small fw-semibold">Taux d'erreur</div>
          <div class="value">{{ errorRate|number_format(3, ',', ' ') }}%</div>
          <div class="small">24 dernières heures</div>
        </div>
        <div class="tech-mini" style="background:#f5f3ff;border-color:#ddd6fe;color:#6d28d9;">
          <div class="small fw-semibold">Débit API</div>
          <div class="value">{{ rpm|number_format(2, ',', ' ') }}</div>
          <div class="small">req/min actuellement</div>
        </div>
      </div>
      <div class="border rounded-3 p-2">
        <div class="text-center fw-semibold mb-2">Activité API (24h)</div>
        <div id="tech-activity-chart" style="height:220px;"></div>
      </div>
    </div>
  </div>

  <div class="tech-card">
    <div class="card-body p-4">
      <h4 class="fw-bold mb-3">État des Services</h4>
      <div class="d-grid gap-2 mb-3">
        <div class="service-row ok d-flex justify-content-between align-items-center">
          <div><div class="fw-semibold">API Core</div><div class="small text-muted">Authentification & données</div></div>
          <div class="text-end"><div class="fw-semibold text-success">Opérationnel</div><div class="small text-muted">{{ dbMs|number_format(1, ',', ' ') }}ms</div></div>
        </div>
        <div class="service-row ok d-flex justify-content-between align-items-center">
          <div><div class="fw-semibold">Génération PDF</div><div class="small text-muted">Documents & reçus fiscaux</div></div>
          <div class="text-end"><div class="fw-semibold text-success">Opérationnel</div><div class="small text-muted">via worker</div></div>
        </div>
        <div class="service-row {{ degraded > 0 ? 'warn' : 'ok' }} d-flex justify-content-between align-items-center">
          <div><div class="fw-semibold">Signature électronique</div><div class="small text-muted">Conventions & contrats</div></div>
          <div class="text-end"><div class="fw-semibold {{ degraded > 0 ? 'text-warning' : 'text-success' }}">{{ degraded > 0 ? 'Dégradé' : 'Opérationnel' }}</div><div class="small text-muted">{{ errorRate|number_format(3, ',', ' ') }}%</div></div>
        </div>
        <div class="service-row ok d-flex justify-content-between align-items-center">
          <div><div class="fw-semibold">Stockage fichiers</div><div class="small text-muted">Documents & médias</div></div>
          <div class="text-end"><div class="fw-semibold text-success">Opérationnel</div><div class="small text-muted">{{ tech.events24h|default(0) }} événements</div></div>
        </div>
        <div class="service-row ok d-flex justify-content-between align-items-center">
          <div><div class="fw-semibold">Notifications email</div><div class="small text-muted">Alertes & communications</div></div>
          <div class="text-end"><div class="fw-semibold text-success">Opérationnel</div><div class="small text-muted">{{ tech.alerts24h|default(0) }} alertes</div></div>
        </div>
      </div>
      <div class="rounded-3 p-3" style="background:#f8fafc;border:1px solid #e2e8f0;">
        <div class="fw-semibold mb-1">Incident en cours</div>
        <div class="small text-muted">Risque signature électronique • corrélé aux conventions en attente</div>
      </div>
    </div>
  </div>
</div>

<div class="tech-bottom-grid">
  <div class="tech-card">
    <div class="card-body p-4">
      <h4 class="fw-bold mb-3">Journaux & Événements</h4>
      <div class="d-grid gap-2 mb-3">
        <div class="log-line" style="background:#fff1f2;border-left-color:#ef4444;">
          <div class="fw-semibold text-danger">Erreurs détectées</div>
          <div class="small text-danger">Dernières 24h : {{ tech.errors24h|default(0) }}</div>
        </div>
        <div class="log-line" style="background:#fff7ed;border-left-color:#f97316;">
          <div class="fw-semibold text-warning">Alertes actives</div>
          <div class="small text-warning">Dernières 24h : {{ tech.alerts24h|default(0) }}</div>
        </div>
        <div class="log-line" style="background:#eff6ff;border-left-color:#3b82f6;">
          <div class="fw-semibold text-primary">Infos techniques</div>
          <div class="small text-primary">Dernières 24h : {{ tech.infos24h|default(0) }}</div>
        </div>
      </div>
      <div class="rounded-3 p-3 border d-flex justify-content-between align-items-center">
        <div>
          <div class="fw-semibold">Événements 24h</div>
          <div class="small text-muted">Trafic mesuré via connexions utilisateurs</div>
        </div>
        <div class="fw-bold fs-8">{{ tech.events24h|default(0)|number_format(0, ',', ' ') }}</div>
      </div>
    </div>
  </div>

  <div class="tech-card">
    <div class="card-body p-4">
      <h4 class="fw-bold mb-3">Déploiements & Versions</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 en production</div>
          </div>
          <span class="badge bg-success">stable</span>
        </div>
      </div>
      <div class="rounded-3 border p-3 d-flex justify-content-between"><span>Uptime</span><strong>{{ uptime|number_format(2, ',', ' ') }}%</strong></div>
      <div class="rounded-3 border p-3 d-flex justify-content-between mt-2"><span>Requêtes / sec</span><strong>{{ tech.dbRequestsPerSec|default(0)|number_format(4, ',', ' ') }}</strong></div>
      <button class="btn btn-primary w-100 mt-3"><i class="ti ti-rocket me-1"></i>Planifier déploiement</button>
    </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: 'Requêtes API', 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: ['#16a34a'],
      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>