{% extends "base.html" %}
{% block title %}Validation DIM{% 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 %}
<div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;">
  <h2 style="margin:0;">Validation DIM</h2>
  <a href="/validation/metrics" style="font-size:0.85rem;color:#3b82f6;text-decoration:none;font-weight:600;">Voir les métriques</a>
</div>

<!-- Barre de progression -->
<div class="card" style="margin-bottom:1.5rem;">
  <div style="display:flex;align-items:center;gap:1rem;margin-bottom:0.75rem;">
    <span style="font-weight:600;font-size:0.9rem;">Progression</span>
    <span style="font-size:0.85rem;color:#64748b;">{{ valides }} / {{ total }} validés</span>
    {% if en_cours > 0 %}
    <span style="font-size:0.85rem;color:#ca8a04;">{{ en_cours }} en cours</span>
    {% endif %}
  </div>
  <div style="background:#e2e8f0;border-radius:9999px;height:12px;overflow:hidden;">
    {% set pct_valide = (valides / total * 100) if total > 0 else 0 %}
    {% set pct_encours = (en_cours / total * 100) if total > 0 else 0 %}
    <div style="display:flex;height:100%;">
      <div style="width:{{ pct_valide }}%;background:#16a34a;transition:width 0.3s;"></div>
      <div style="width:{{ pct_encours }}%;background:#eab308;transition:width 0.3s;"></div>
    </div>
  </div>
</div>

<!-- Nom du validateur -->
<div class="card" style="margin-bottom:1rem;padding:0.75rem 1.25rem;">
  <div style="display:flex;align-items:center;gap:0.75rem;">
    <label for="validateur-name" style="font-size:0.8rem;font-weight:600;color:#475569;white-space:nowrap;">Nom du validateur :</label>
    <input type="text" id="validateur-name" placeholder="Dr. X"
           style="flex:1;padding:0.35rem 0.6rem;border:1px solid #cbd5e1;border-radius:6px;font-size:0.85rem;max-width:300px;">
  </div>
</div>

<!-- Filtres -->
<div style="display:flex;gap:0.5rem;margin-bottom:1rem;">
  <button class="filter-btn active" data-filter="all"
          style="padding:0.35rem 0.75rem;border-radius:6px;border:1px solid #cbd5e1;background:#fff;font-size:0.8rem;font-weight:600;cursor:pointer;">
    Tous ({{ total }})
  </button>
  <button class="filter-btn" data-filter="non_commence"
          style="padding:0.35rem 0.75rem;border-radius:6px;border:1px solid #cbd5e1;background:#fff;font-size:0.8rem;font-weight:600;cursor:pointer;">
    Non commencés ({{ total - valides - en_cours }})
  </button>
  <button class="filter-btn" data-filter="en_cours"
          style="padding:0.35rem 0.75rem;border-radius:6px;border:1px solid #cbd5e1;background:#fff;font-size:0.8rem;font-weight:600;cursor:pointer;">
    En cours ({{ en_cours }})
  </button>
  <button class="filter-btn" data-filter="valide"
          style="padding:0.35rem 0.75rem;border-radius:6px;border:1px solid #cbd5e1;background:#fff;font-size:0.8rem;font-weight:600;cursor:pointer;">
    Validés ({{ valides }})
  </button>
</div>

<!-- Tableau -->
<div class="card" style="padding:0;">
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Dossier</th>
      <th>DP</th>
      <th>Conf. DP</th>
      <th>DAS</th>
      <th>CPAM</th>
      <th>Statut</th>
      <th>Validateur</th>
    </tr>
  </thead>
  <tbody>
    {% for item in items %}
    <tr class="validation-row" data-statut="{{ item.statut }}">
      <td style="color:#94a3b8;font-size:0.8rem;">{{ loop.index }}</td>
      <td>
        <a href="/validation/{{ item.dossier_id }}" style="color:#1e293b;text-decoration:none;font-weight:600;font-size:0.85rem;">
          {{ item.group_name }}
        </a>
      </td>
      <td>
        <span style="font-family:monospace;font-size:0.85rem;font-weight:600;">{{ item.dp_code or '—' }}</span>
        {% if item.dp_texte %}
        <br><span style="font-size:0.75rem;color:#64748b;">{{ item.dp_texte[:50] }}{% if item.dp_texte|length > 50 %}…{% endif %}</span>
        {% endif %}
      </td>
      <td>{{ item.dp_confidence | confidence_badge }}</td>
      <td style="text-align:center;font-weight:600;">{{ item.nb_das }}</td>
      <td style="text-align:center;">
        {% if item.has_cpam %}
        <span style="display:inline-block;padding:2px 8px;border-radius:9999px;font-size:0.7rem;font-weight:600;color:#7c3aed;background:#ede9fe;">CPAM</span>
        {% endif %}
      </td>
      <td>
        {% if item.statut == 'valide' %}
        <span style="display:inline-block;padding:2px 8px;border-radius:9999px;font-size:0.7rem;font-weight:600;color:#16a34a;background:#dcfce7;">Validé</span>
        {% elif item.statut == 'en_cours' %}
        <span style="display:inline-block;padding:2px 8px;border-radius:9999px;font-size:0.7rem;font-weight:600;color:#ca8a04;background:#fef9c3;">En cours</span>
        {% else %}
        <span style="display:inline-block;padding:2px 8px;border-radius:9999px;font-size:0.7rem;font-weight:600;color:#6b7280;background:#f3f4f6;">Non commencé</span>
        {% endif %}
      </td>
      <td style="font-size:0.8rem;color:#64748b;">{{ item.validateur }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
</div>

{% if not items %}
<div class="card" style="text-align:center;padding:2rem;">
  <p style="color:#64748b;font-size:0.9rem;">Aucun dossier sélectionné pour validation.</p>
  <p style="margin-top:0.5rem;font-size:0.85rem;color:#94a3b8;">
    Lancez <code>python scripts/select_validation_dossiers.py</code> pour sélectionner les dossiers.
  </p>
</div>
{% endif %}

{% endblock %}

{% block scripts %}
<script>
(function() {
  // Persistance nom validateur dans localStorage
  const input = document.getElementById('validateur-name');
  if (input) {
    const saved = localStorage.getItem('t2a_validateur');
    if (saved) input.value = saved;
    input.addEventListener('input', function() {
      localStorage.setItem('t2a_validateur', this.value);
    });
  }

  // Filtres
  document.querySelectorAll('.filter-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
      document.querySelectorAll('.filter-btn').forEach(function(b) {
        b.classList.remove('active');
        b.style.background = '#fff';
        b.style.color = '#1e293b';
      });
      this.classList.add('active');
      this.style.background = '#1e293b';
      this.style.color = '#fff';

      const filter = this.dataset.filter;
      document.querySelectorAll('.validation-row').forEach(function(row) {
        if (filter === 'all' || row.dataset.statut === filter) {
          row.style.display = '';
        } else {
          row.style.display = 'none';
        }
      });
    });
  });

  // Activer le style du premier bouton
  const firstBtn = document.querySelector('.filter-btn.active');
  if (firstBtn) {
    firstBtn.style.background = '#1e293b';
    firstBtn.style.color = '#fff';
  }
})();
</script>
{% endblock %}