{% set conventionsPending = data.conventionsPending|default(0) %}
{% set projetsActifs = data.projetActifs|default(0) %}
{% set paidCompanies = data.paidCompanies|default(0) %}
{% set risques = data.risques|default({}) %}
{% set criticalRisks = risques.critical|default(0) %}
{% set highRisks = risques.high|default(0) %}
{% set moderateRisks = risques.moderate|default(0) %}
{% set trendPct = risques.trend|default(0) %}
{% set complianceScore = risques.complianceScore|default(0) %}
{% set activeRisks = risques.active|default(conventionsPending) %}
{% set riskSeries = risques.series|default({}) %}

<style>
  .risk-dashboard-card{border:1px solid #e5e7eb;border-radius:14px;background:#fff}
  .risk-overview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
  .risk-mini{border-radius:12px;padding:1rem;border:1px solid transparent}
  .risk-mini-title{font-size:.82rem;font-weight:700}
  .risk-mini-value{font-size:2.1rem;font-weight:800;line-height:1.1}
  .risk-col-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
  .risk-item{border-radius:12px;padding:.95rem;border-left:4px solid}
  .risk-pill{border-radius:999px;padding:.15rem .5rem;font-size:.72rem;font-weight:700}
  .risk-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
  .risk-alert-line{border-radius:12px;padding:.95rem;border-left:4px solid}
  @media (max-width: 1400px){
    .risk-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .risk-col-grid{grid-template-columns:1fr}
    .risk-bottom-grid{grid-template-columns:1fr}
  }
  @media (max-width: 768px){
    .risk-overview-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;">Surveillance des Risques</h1>
    <p class="text-muted mb-0 fs-4">Détection proactive et gestion des risques critiques • Mise à jour temps réel</p>
  </div>
  <div class="d-flex gap-2">
    <span class="badge rounded-pill px-3 py-2 bg-danger-subtle text-danger border border-danger-subtle fs-4">
      <i class="ti ti-circle-filled me-1" style="font-size:8px;"></i>{{ activeRisks }} risques actifs
    </span>
    <button type="button" class="btn btn-warning text-white"><i class="ti ti-shield me-1"></i>Plan d'action</button>
  </div>
</div>

<div class="risk-dashboard-card mb-4">
  <div class="card-body p-4">
    <h4 class="fw-bold mb-4">Vue d'ensemble des Risques</h4>
    <div class="risk-overview-grid">
      <div class="risk-mini" style="background:#fff1f2;border-color:#fecdd3;color:#991b1b;">
        <div class="d-flex justify-content-between mb-1"><span class="risk-mini-title">Critiques</span><i class="ti ti-alert-triangle"></i></div>
        <div class="risk-mini-value">{{ criticalRisks }}</div>
        <div class="small">Action immédiate requise</div>
      </div>
      <div class="risk-mini" style="background:#fff7ed;border-color:#fed7aa;color:#9a3412;">
        <div class="d-flex justify-content-between mb-1"><span class="risk-mini-title">Élevés</span><i class="ti ti-alert-triangle"></i></div>
        <div class="risk-mini-value">{{ highRisks }}</div>
        <div class="small">Surveillance renforcée</div>
      </div>
      <div class="risk-mini" style="background:#fefce8;border-color:#fde68a;color:#a16207;">
        <div class="d-flex justify-content-between mb-1"><span class="risk-mini-title">Modérés</span><i class="ti ti-alert-circle"></i></div>
        <div class="risk-mini-value">{{ moderateRisks }}</div>
        <div class="small">Suivi préventif</div>
      </div>
      <div class="risk-mini" style="background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8;">
        <div class="d-flex justify-content-between mb-1"><span class="risk-mini-title">Tendance</span><i class="ti ti-chart-line"></i></div>
        <div class="risk-mini-value">+{{ trendPct }}%</div>
        <div class="small">vs mois dernier</div>
      </div>
    </div>
  </div>
</div>

<div class="risk-col-grid mb-4">
  <div class="risk-dashboard-card">
    <div class="card-body p-3">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <h4 class="fw-bold mb-0">Risques de Conformité</h4>
        <span class="risk-pill text-danger bg-danger-subtle">CRITIQUE</span>
      </div>
      <div class="d-grid gap-2 mb-3">
        <div class="risk-item" style="background:#fff1f2;border-left-color:#ef4444;">
          <div class="d-flex justify-content-between align-items-center"><div class="fw-semibold text-danger">Reçus fiscaux manquants</div><span class="risk-pill text-danger bg-danger-subtle">{{ criticalRisks }}</span></div>
          <div class="small text-danger">Délai légal dépassé sur {{ criticalRisks }} reçus</div>
        </div>
        <div class="risk-item" style="background:#fff7ed;border-left-color:#f97316;">
          <div class="d-flex justify-content-between align-items-center"><div class="fw-semibold text-warning">Conventions non signées</div><span class="risk-pill text-warning bg-warning-subtle">{{ conventionsPending }}</span></div>
          <div class="small text-warning">{{ conventionsPending }} conventions à relancer</div>
        </div>
        <div class="risk-item" style="background:#fefce8;border-left-color:#eab308;">
          <div class="d-flex justify-content-between align-items-center"><div class="fw-semibold" style="color:#a16207">Factures en retard</div><span class="risk-pill" style="background:#fef3c7;color:#b45309">{{ highRisks }}</span></div>
          <div class="small" style="color:#a16207">Retard moyen: 8 jours</div>
        </div>
      </div>
      <div class="rounded-3 p-3" style="background:#f8fafc;border:1px solid #e2e8f0;">
        <div class="fw-semibold mb-1">Score de conformité global</div>
        <div class="d-flex justify-content-between align-items-center"><div class="fs-8 fw-bold text-danger">{{ complianceScore }}%</div><i class="ti ti-arrow-down text-danger"></i></div>
        <div class="progress mt-2" style="height:8px;"><div class="progress-bar bg-danger" style="width:{{ complianceScore }}%"></div></div>
      </div>
    </div>
  </div>

  <div class="risk-dashboard-card">
    <div class="card-body p-3">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <h4 class="fw-bold mb-0">Risques Business</h4>
        <span class="risk-pill text-warning bg-warning-subtle">ÉLEVÉ</span>
      </div>
      <div class="d-grid gap-2 mb-3">
        <div class="risk-item" style="background:#fff1f2;border-left-color:#ef4444;">
          <div class="d-flex justify-content-between align-items-center"><div class="fw-semibold text-danger">Risque de churn</div><span class="risk-pill text-danger bg-danger-subtle">{{ paidCompanies > 0 ? ((paidCompanies * 0.05)|round(0, 'ceil')) : 0 }}</span></div>
          <div class="small text-danger">Comptes inactifs &gt; 30 jours</div>
        </div>
        <div class="risk-item" style="background:#fff7ed;border-left-color:#f97316;">
          <div class="d-flex justify-content-between align-items-center"><div class="fw-semibold text-warning">Objectifs non atteints</div><span class="risk-pill text-warning bg-warning-subtle">{{ projetsActifs > 0 ? ((projetsActifs * 0.18)|round(0, 'ceil')) : 0 }}</span></div>
          <div class="small text-warning">Projets sous-financés</div>
        </div>
        <div class="risk-item" style="background:#fefce8;border-left-color:#eab308;">
          <div class="d-flex justify-content-between align-items-center"><div class="fw-semibold" style="color:#a16207">Adoption faible</div><span class="risk-pill" style="background:#fef3c7;color:#b45309">{{ data.porteurProjets|default(0) > 0 ? (((data.porteurProjets - projetsActifs) / data.porteurProjets) * 100)|round(0, 'ceil') : 0 }}</span></div>
          <div class="small" style="color:#a16207">Fonctionnalités sous-utilisées</div>
        </div>
        <div class="risk-item" style="background:#eff6ff;border-left-color:#60a5fa;">
          <div class="fw-semibold text-primary mb-1">Retards de paiement</div>
          <div class="small text-primary d-flex justify-content-between"><span>Conventions non signées</span><strong>{{ conventionsPending }}</strong></div>
          <div class="small text-primary d-flex justify-content-between"><span>Comptes &gt; 60j</span><strong>{{ criticalRisks }}</strong></div>
        </div>
      </div>
    </div>
  </div>

  <div class="risk-dashboard-card">
    <div class="card-body p-3">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <h4 class="fw-bold mb-0">Risques Opérationnels</h4>
        <span class="risk-pill" style="background:#fef3c7;color:#a16207">MODÉRÉ</span>
      </div>
      <div class="d-grid gap-2 mb-3">
        <div class="risk-item" style="background:#fff7ed;border-left-color:#f97316;">
          <div class="d-flex justify-content-between align-items-center"><div class="fw-semibold text-warning">Qualité des données</div><span class="risk-pill text-warning bg-warning-subtle">{{ data.porteurProjets|default(0) > 0 ? ((data.porteurProjets * 0.63)|round(0, 'ceil')) : 0 }}</span></div>
          <div class="small text-warning">Incohérences détectées</div>
        </div>
        <div class="risk-item" style="background:#fefce8;border-left-color:#eab308;">
          <div class="d-flex justify-content-between align-items-center"><div class="fw-semibold" style="color:#a16207">Surcharge support</div><span class="risk-pill" style="background:#fef3c7;color:#b45309">{{ highRisks + moderateRisks }}</span></div>
          <div class="small" style="color:#a16207">Tickets non traités</div>
        </div>
        <div class="risk-item" style="background:#eff6ff;border-left-color:#3b82f6;">
          <div class="d-flex justify-content-between align-items-center"><div class="fw-semibold text-primary">Sécurité</div><span class="risk-pill text-primary bg-primary-subtle">{{ criticalRisks > 0 ? 3 : 0 }}</span></div>
          <div class="small text-primary">Tentatives d'intrusion</div>
        </div>
      </div>
      <div class="rounded-3 p-3" style="background:#f8fafc;border:1px solid #e2e8f0;">
        <div class="fw-semibold mb-1">Surveillance performance</div>
        <div class="small d-flex justify-content-between"><span>Connexions (24h)</span><strong class="text-warning">{{ data.connections24h|default(0) }}</strong></div>
        <div class="small d-flex justify-content-between"><span>Connexions (7j)</span><strong class="text-success">{{ data.connections7|default(0) }}</strong></div>
        <div class="small d-flex justify-content-between"><span>Utilisateurs actifs (30j)</span><strong class="text-success">{{ data.activeUsers30|default(0) }}</strong></div>
      </div>
    </div>
  </div>
</div>

<div class="risk-bottom-grid mb-4">
  <div class="risk-dashboard-card">
    <div class="card-body p-3">
      <h4 class="fw-bold mb-3">Évolution des Risques</h4>
      <div id="risk-evolution-chart" style="height:300px;"></div>
    </div>
  </div>
  <div class="risk-dashboard-card">
    <div class="card-body p-3">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <h4 class="fw-bold mb-0">Plan d'Action Prioritaire</h4>
        <button class="btn btn-sm btn-success">Exporter plan</button>
      </div>
      <div class="d-grid gap-2">
        <div class="risk-item" style="background:#fff1f2;border-left-color:#ef4444;">
          <div class="d-flex justify-content-between align-items-center"><div class="fw-semibold text-danger">Génération reçus fiscaux urgents</div><button class="btn btn-sm btn-danger py-0 px-2">Traiter</button></div>
          <div class="small text-danger">{{ criticalRisks }} reçus en dépassement délai légal</div>
        </div>
        <div class="risk-item" style="background:#fff7ed;border-left-color:#f97316;">
          <div class="d-flex justify-content-between align-items-center"><div class="fw-semibold text-warning">Plan de rétention clients</div><button class="btn btn-sm btn-warning py-0 px-2 text-white">Planifier</button></div>
          <div class="small text-warning">{{ paidCompanies > 0 ? ((paidCompanies * 0.05)|round(0, 'ceil')) : 0 }} comptes à risque de churn</div>
        </div>
        <div class="risk-item" style="background:#fefce8;border-left-color:#eab308;">
          <div class="d-flex justify-content-between align-items-center"><div class="fw-semibold" style="color:#a16207">Audit qualité données</div><button class="btn btn-sm py-0 px-2" style="background:#eab308;color:#fff;">Programmer</button></div>
          <div class="small" style="color:#a16207">{{ data.porteurProjets|default(0) > 0 ? ((data.porteurProjets * 0.63)|round(0, 'ceil')) : 0 }} incohérences à corriger</div>
        </div>
        <div class="rounded-3 p-3" style="background:#ecfdf3;border:1px solid #86efac;">
          <div class="fw-semibold text-success mb-1">Actions en cours</div>
          <div class="small text-success">Relance signatures conventions</div>
          <div class="small text-success">Optimisation performance API</div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="risk-dashboard-card">
  <div class="card-body p-3">
    <div class="d-flex justify-content-between align-items-center mb-2">
      <h4 class="fw-bold mb-0">Alertes Temps Réel</h4>
      <div class="d-flex gap-2">
        <button class="btn btn-sm btn-light border">Tout marquer comme lu</button>
        <button class="btn btn-sm btn-light border"><i class="ti ti-filter me-1"></i>Filtrer</button>
      </div>
    </div>
    <div class="d-grid gap-2">
      <div class="risk-alert-line" style="background:#fff1f2;border-left-color:#ef4444;">
        <div class="fw-semibold text-danger"><i class="ti ti-alert-triangle me-1"></i>Reçu fiscal en retard critique</div>
        <div class="small text-danger">Conventions en attente de signature: {{ conventionsPending }}</div>
      </div>
      <div class="risk-alert-line" style="background:#fff7ed;border-left-color:#f97316;">
        <div class="fw-semibold text-warning"><i class="ti ti-alert-circle me-1"></i>Compte inactif détecté</div>
        <div class="small text-warning">Connexions 24h: {{ data.connections24h|default(0) }}</div>
      </div>
      <div class="risk-alert-line" style="background:#fefce8;border-left-color:#eab308;">
        <div class="fw-semibold" style="color:#a16207"><i class="ti ti-alert-circle me-1"></i>Objectif projet non atteint</div>
        <div class="small" style="color:#a16207">Projets actifs: {{ projetsActifs }} / {{ data.porteurProjets|default(0) }}</div>
      </div>
    </div>
  </div>
</div>

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

    const critical = {{ riskSeries.critical|default([0,0,0,0])|json_encode|raw }}
    const high = {{ riskSeries.high|default([0,0,0,0])|json_encode|raw }}
    const moderate = {{ riskSeries.moderate|default([0,0,0,0])|json_encode|raw }}

    const chart = new ApexCharts(el, {
      chart: { type: 'line', height: 300, toolbar: { show: false } },
      series: [
        { name: 'Critiques', data: critical },
        { name: 'Élevés', data: high },
        { name: 'Modérés', data: moderate }
      ],
      xaxis: { categories: ['Sem 1', 'Sem 2', 'Sem 3', 'Sem 4'] },
      colors: ['#ef4444', '#f97316', '#eab308'],
      stroke: { curve: 'smooth', width: 3 },
      legend: { position: 'bottom' },
      dataLabels: { enabled: false },
      grid: { borderColor: '#eef2f7' }
    })
    chart.render()
    el.__riskChart = chart
  })()
</script>