{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}

{% block sidebar %}
{% for group_name, items in groups.items() %}
  <div class="group-title">{{ group_name | format_dossier_name }}</div>
  {% for item in items %}
    {% if 'fusionne' in item.name %}
      <a href="/dossier/{{ item.path_rel }}" class="sidebar-fusionne">&#9733; Fusionné</a>
    {% else %}
      <a href="/dossier/{{ item.path_rel }}">{{ item.name | format_doc_name }}</a>
    {% endif %}
  {% endfor %}
{% endfor %}
{% endblock %}

{% block content %}
<a class="back" href="/">&larr; Retour à la liste</a>
<h2 style="margin-top:1rem;">Dashboard</h2>

{# ---- Cartes métriques ---- #}
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem;margin-bottom:1.5rem;">
  {% set cards = [
    ("Dossiers", stats.total_dossiers, "#3b82f6", "#dbeafe"),
    ("Fichiers", stats.total_fichiers, "#6366f1", "#e0e7ff"),
    ("DAS total", stats.total_das, "#1d4ed8", "#dbeafe"),
    ("Actes total", stats.total_actes, "#3730a3", "#e0e7ff"),
    ("Alertes", stats.total_alertes, "#c2410c", "#ffedd5"),
    ("CMA", stats.total_cma, "#dc2626", "#fee2e2"),
    ("Contrôles CPAM", stats.total_cpam, "#b45309", "#fef3c7"),
    ("Temps total", stats.processing_time_total | format_duration, "#065f46", "#d1fae5"),
  ] %}
  {% for label, value, fg, bg in cards %}
  <div class="card" style="text-align:center;padding:1rem;">
    <div style="font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:#64748b;font-weight:600;">{{ label }}</div>
    <div style="font-size:1.5rem;font-weight:700;color:{{ fg }};margin-top:0.25rem;">{{ value }}</div>
  </div>
  {% endfor %}
</div>

{# ---- Temps moyen ---- #}
{% if stats.processing_time_avg %}
<div class="card" style="margin-bottom:1rem;">
  <div style="font-size:0.8rem;color:#64748b;">Temps moyen par fichier : <strong style="color:#0f172a;">{{ stats.processing_time_avg | format_duration }}</strong></div>
</div>
{% endif %}

{# ---- Distribution confiance DP ---- #}
{% set conf = stats.dp_confidence %}
{% set conf_total = (conf.get('high', 0) + conf.get('medium', 0) + conf.get('low', 0) + conf.get('none', 0)) or 1 %}
<div class="card section">
  <h3>Confiance DP</h3>
  <div style="display:flex;height:28px;border-radius:6px;overflow:hidden;margin-bottom:0.5rem;">
    {% if conf.get('high', 0) %}
    <div style="width:{{ (conf.get('high', 0) / conf_total * 100)|round(1) }}%;background:#16a34a;" title="Haute : {{ conf.get('high', 0) }}"></div>
    {% endif %}
    {% if conf.get('medium', 0) %}
    <div style="width:{{ (conf.get('medium', 0) / conf_total * 100)|round(1) }}%;background:#ca8a04;" title="Moyenne : {{ conf.get('medium', 0) }}"></div>
    {% endif %}
    {% if conf.get('low', 0) %}
    <div style="width:{{ (conf.get('low', 0) / conf_total * 100)|round(1) }}%;background:#dc2626;" title="Basse : {{ conf.get('low', 0) }}"></div>
    {% endif %}
    {% if conf.get('none', 0) %}
    <div style="width:{{ (conf.get('none', 0) / conf_total * 100)|round(1) }}%;background:#94a3b8;" title="Aucune : {{ conf.get('none', 0) }}"></div>
    {% endif %}
  </div>
  <div style="display:flex;gap:1.5rem;font-size:0.8rem;">
    <span><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#16a34a;margin-right:4px;"></span>Haute : {{ conf.get('high', 0) }}</span>
    <span><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#ca8a04;margin-right:4px;"></span>Moyenne : {{ conf.get('medium', 0) }}</span>
    <span><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#dc2626;margin-right:4px;"></span>Basse : {{ conf.get('low', 0) }}</span>
    <span><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#94a3b8;margin-right:4px;"></span>Aucune : {{ conf.get('none', 0) }}</span>
  </div>
</div>

{# ---- Top 15 codes CIM-10 ---- #}
{% if stats.top_codes %}
<div class="card section">
  <h3>Top 15 codes CIM-10</h3>
  {% for code, count in stats.top_codes %}
  <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.4rem;">
    <code style="min-width:60px;font-size:0.8rem;font-weight:600;">{{ code }}</code>
    <div style="flex:1;height:20px;background:#f1f5f9;border-radius:4px;overflow:hidden;">
      <div style="width:{{ (count / stats.top_max * 100)|round(1) }}%;height:100%;background:#3b82f6;border-radius:4px;"></div>
    </div>
    <span style="min-width:30px;text-align:right;font-size:0.8rem;color:#64748b;">{{ count }}</span>
  </div>
  {% endfor %}
</div>
{% endif %}

{# ---- Distribution GHM types ---- #}
{% set ghm = stats.ghm_types %}
{% set ghm_total = (ghm.get('C', 0) + ghm.get('M', 0) + ghm.get('K', 0)) or 1 %}
{% if ghm.get('C', 0) or ghm.get('M', 0) or ghm.get('K', 0) %}
<div class="card section">
  <h3>Types GHM</h3>
  <div style="display:flex;height:28px;border-radius:6px;overflow:hidden;margin-bottom:0.5rem;">
    {% if ghm.get('C', 0) %}
    <div style="width:{{ (ghm.get('C', 0) / ghm_total * 100)|round(1) }}%;background:#dc2626;" title="Chirurgical : {{ ghm.get('C', 0) }}"></div>
    {% endif %}
    {% if ghm.get('M', 0) %}
    <div style="width:{{ (ghm.get('M', 0) / ghm_total * 100)|round(1) }}%;background:#3b82f6;" title="Médical : {{ ghm.get('M', 0) }}"></div>
    {% endif %}
    {% if ghm.get('K', 0) %}
    <div style="width:{{ (ghm.get('K', 0) / ghm_total * 100)|round(1) }}%;background:#f59e0b;" title="Interventionnel : {{ ghm.get('K', 0) }}"></div>
    {% endif %}
  </div>
  <div style="display:flex;gap:1.5rem;font-size:0.8rem;">
    <span><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#dc2626;margin-right:4px;"></span>C — Chirurgical : {{ ghm.get('C', 0) }}</span>
    <span><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#3b82f6;margin-right:4px;"></span>M — Médical : {{ ghm.get('M', 0) }}</span>
    <span><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#f59e0b;margin-right:4px;"></span>K — Interventionnel : {{ ghm.get('K', 0) }}</span>
  </div>
</div>
{% endif %}

{# ---- Distribution sévérité ---- #}
{% set sev = stats.severity_dist %}
{% set sev_total = (sev.get(1, 0) + sev.get(2, 0) + sev.get(3, 0) + sev.get(4, 0)) or 1 %}
{% if sev.get(1, 0) or sev.get(2, 0) or sev.get(3, 0) or sev.get(4, 0) %}
<div class="card section">
  <h3>Sévérité GHM</h3>
  <div style="display:flex;height:28px;border-radius:6px;overflow:hidden;margin-bottom:0.5rem;">
    {% if sev.get(1, 0) %}
    <div style="width:{{ (sev.get(1, 0) / sev_total * 100)|round(1) }}%;background:#16a34a;" title="Niveau 1 : {{ sev.get(1, 0) }}"></div>
    {% endif %}
    {% if sev.get(2, 0) %}
    <div style="width:{{ (sev.get(2, 0) / sev_total * 100)|round(1) }}%;background:#ca8a04;" title="Niveau 2 : {{ sev.get(2, 0) }}"></div>
    {% endif %}
    {% if sev.get(3, 0) %}
    <div style="width:{{ (sev.get(3, 0) / sev_total * 100)|round(1) }}%;background:#f97316;" title="Niveau 3 : {{ sev.get(3, 0) }}"></div>
    {% endif %}
    {% if sev.get(4, 0) %}
    <div style="width:{{ (sev.get(4, 0) / sev_total * 100)|round(1) }}%;background:#dc2626;" title="Niveau 4 : {{ sev.get(4, 0) }}"></div>
    {% endif %}
  </div>
  <div style="display:flex;gap:1.5rem;font-size:0.8rem;">
    <span><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#16a34a;margin-right:4px;"></span>Niveau 1 : {{ sev.get(1, 0) }}</span>
    <span><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#ca8a04;margin-right:4px;"></span>Niveau 2 : {{ sev.get(2, 0) }}</span>
    <span><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#f97316;margin-right:4px;"></span>Niveau 3 : {{ sev.get(3, 0) }}</span>
    <span><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#dc2626;margin-right:4px;"></span>Niveau 4 : {{ sev.get(4, 0) }}</span>
  </div>
</div>
{% endif %}

{% endblock %}