{% extends "base.html" %}
{% block title %}Validation — {{ group_name }}{% endblock %}

{% block sidebar %}
{% for gn, items in groups.items() %}
  <div class="group-title">{{ gn | 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 %}
<style>
  .seg-btn { display:inline-block;padding:4px 12px;border:1px solid #cbd5e1;font-size:0.8rem;font-weight:600;cursor:pointer;background:#fff;color:#475569;transition:all 0.15s; }
  .seg-btn:first-child { border-radius:6px 0 0 6px; }
  .seg-btn:last-child { border-radius:0 6px 6px 0; }
  .seg-btn:not(:first-child) { border-left:none; }
  .seg-btn.active-correct { background:#dcfce7;color:#16a34a;border-color:#16a34a; }
  .seg-btn.active-modifie { background:#fef9c3;color:#ca8a04;border-color:#ca8a04; }
  .seg-btn.active-supprime { background:#fee2e2;color:#dc2626;border-color:#dc2626; }
  .code-input { padding:4px 8px;border:1px solid #cbd5e1;border-radius:6px;font-size:0.85rem;font-family:monospace;width:120px; }
  .comment-input { padding:4px 8px;border:1px solid #e2e8f0;border-radius:6px;font-size:0.8rem;width:100%;max-width:300px; }
  .autocomplete-wrapper { position:relative;display:inline-block; }
  .autocomplete-dropdown { position:absolute;top:100%;left:0;z-index:100;background:#fff;border:1px solid #cbd5e1;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.1);max-height:250px;overflow-y:auto;width:400px;display:none; }
  .autocomplete-dropdown .ac-item { padding:6px 10px;cursor:pointer;font-size:0.8rem;border-bottom:1px solid #f1f5f9; }
  .autocomplete-dropdown .ac-item:hover { background:#f1f5f9; }
  .autocomplete-dropdown .ac-code { font-family:monospace;font-weight:700;color:#1e293b;margin-right:8px; }
  .autocomplete-dropdown .ac-label { color:#64748b; }
  .save-bar { position:sticky;bottom:0;background:#fff;border-top:2px solid #e2e8f0;padding:1rem;display:flex;align-items:center;gap:1rem;z-index:50; }
  .btn-save { padding:8px 20px;border-radius:8px;border:none;font-size:0.85rem;font-weight:600;cursor:pointer;transition:all 0.15s; }
  .btn-brouillon { background:#f1f5f9;color:#475569; }
  .btn-brouillon:hover { background:#e2e8f0; }
  .btn-valider { background:#16a34a;color:#fff; }
  .btn-valider:hover { background:#15803d; }
  .nav-link { font-size:0.85rem;color:#3b82f6;text-decoration:none;font-weight:600; }
  .nav-link:hover { text-decoration:underline; }
  .das-row-added { background:#f0fdf4; }
</style>

<!-- Navigation -->
<div style="display:flex;align-items:center;gap:1rem;margin-bottom:1rem;">
  <a href="/validation" class="back">Retour à la liste</a>
  <span style="color:#cbd5e1;">|</span>
  {% if prev_id %}
  <a href="/validation/{{ prev_id }}" class="nav-link">Précédent</a>
  {% endif %}
  {% if next_id %}
  <a href="/validation/{{ next_id }}" class="nav-link">Suivant</a>
  {% endif %}
  <span style="flex:1;"></span>
  <a href="/dossier/{{ group_name }}/{{ group_name }}_fusionne_cim10.json" class="nav-link" target="_blank">Voir le dossier complet</a>
</div>

<h2>Validation : {{ group_name }}</h2>

{% if dossier %}
<!-- Infos séjour (lecture seule) -->
<div class="card" style="margin-bottom:1rem;">
  <h3>Séjour</h3>
  <div class="info-grid">
    {% if dossier.sejour.sexe %}<div class="info-item"><label>Sexe</label><span>{{ dossier.sejour.sexe }}</span></div>{% endif %}
    {% if dossier.sejour.age is not none %}<div class="info-item"><label>Âge</label><span>{{ dossier.sejour.age }} ans</span></div>{% endif %}
    {% if dossier.sejour.date_entree %}<div class="info-item"><label>Entrée</label><span>{{ dossier.sejour.date_entree }}</span></div>{% endif %}
    {% if dossier.sejour.date_sortie %}<div class="info-item"><label>Sortie</label><span>{{ dossier.sejour.date_sortie }}</span></div>{% endif %}
    {% if dossier.sejour.duree_sejour is not none %}<div class="info-item"><label>Durée</label><span>{{ dossier.sejour.duree_sejour }}j</span></div>{% endif %}
  </div>
</div>

<!-- DP -->
<div class="card" style="margin-bottom:1rem;">
  <h3>Diagnostic Principal</h3>
  {% set dp = annotation.dp %}
  <div style="margin-bottom:0.75rem;">
    <span style="font-size:0.9rem;">{{ dp.texte_original }}</span>
  </div>
  <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap;">
    <span style="font-family:monospace;font-size:1rem;font-weight:700;background:#dbeafe;color:#1d4ed8;padding:2px 10px;border-radius:6px;">{{ dp.code_pipeline }}</span>
    {{ dp.confidence | confidence_badge }}

    <!-- Boutons segmentés -->
    <div class="seg-group" data-target="dp">
      <span class="seg-btn active-correct" data-value="correct" onclick="setStatut(this)">Correct</span>
      <span class="seg-btn" data-value="modifie" onclick="setStatut(this)">Modifier</span>
      <span class="seg-btn" data-value="supprime" onclick="setStatut(this)">Supprimer</span>
    </div>

    <!-- Champ code alternatif -->
    <div class="autocomplete-wrapper dp-code-field" style="display:none;">
      <input type="text" class="code-input" placeholder="Code CIM-10" data-ac="dp"
             value="{{ dp.code_corrige or '' }}" autocomplete="off">
      <div class="autocomplete-dropdown"></div>
    </div>

    <input type="text" class="comment-input dp-comment" placeholder="Commentaire (optionnel)" value="{{ dp.commentaire or '' }}">
  </div>
</div>

<!-- DAS -->
<div class="card" style="margin-bottom:1rem;">
  <h3>Diagnostics Associés ({{ annotation.das|length }})</h3>
  <table id="das-table">
    <thead>
      <tr>
        <th style="width:30px;">#</th>
        <th>Texte</th>
        <th>Code pipeline</th>
        <th>Conf.</th>
        <th>Source</th>
        <th>Validation</th>
        <th>Code corrigé</th>
        <th>Commentaire</th>
      </tr>
    </thead>
    <tbody>
      {% for das in annotation.das %}
      <tr class="das-row" data-index="{{ das.index }}">
        <td style="color:#94a3b8;font-size:0.8rem;">{{ loop.index }}</td>
        <td style="font-size:0.85rem;max-width:250px;">{{ das.texte_original }}</td>
        <td><span style="font-family:monospace;font-weight:600;">{{ das.code_pipeline }}</span></td>
        <td>{{ das.confidence | confidence_badge }}</td>
        <td>
          {% if das.source %}
          <span style="font-size:0.7rem;padding:2px 6px;border-radius:4px;background:#f1f5f9;color:#475569;">{{ das.source }}</span>
          {% endif %}
        </td>
        <td>
          <div class="seg-group" data-target="das-{{ das.index }}">
            <span class="seg-btn {% if das.statut == 'correct' %}active-correct{% endif %}" data-value="correct" onclick="setStatut(this)">OK</span>
            <span class="seg-btn {% if das.statut == 'modifie' %}active-modifie{% endif %}" data-value="modifie" onclick="setStatut(this)">Mod</span>
            <span class="seg-btn {% if das.statut == 'supprime' %}active-supprime{% endif %}" data-value="supprime" onclick="setStatut(this)">Sup</span>
          </div>
        </td>
        <td>
          <div class="autocomplete-wrapper das-code-field-{{ das.index }}" style="{% if das.statut != 'modifie' %}display:none;{% endif %}">
            <input type="text" class="code-input" placeholder="CIM-10" data-ac="das-{{ das.index }}"
                   value="{{ das.code_corrige or '' }}" autocomplete="off">
            <div class="autocomplete-dropdown"></div>
          </div>
        </td>
        <td>
          <input type="text" class="comment-input das-comment" data-index="{{ das.index }}" placeholder="" value="{{ das.commentaire or '' }}">
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  <!-- DAS ajoutés -->
  <div id="das-ajoutes" style="margin-top:1rem;">
    <h3 style="font-size:0.85rem;color:#16a34a;">DAS manquants (ajoutés par le DIM)</h3>
    <div id="das-ajoutes-list">
      {% for aj in annotation.das_ajoutes %}
      <div class="das-added-row das-row-added" style="display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0;border-bottom:1px solid #e2e8f0;" data-aj-index="{{ loop.index0 }}">
        <input type="text" class="comment-input aj-texte" placeholder="Texte du diagnostic" value="{{ aj.texte or '' }}" style="flex:1;max-width:300px;">
        <div class="autocomplete-wrapper">
          <input type="text" class="code-input aj-code" placeholder="CIM-10" value="{{ aj.code or '' }}" autocomplete="off" data-ac="aj-{{ loop.index0 }}">
          <div class="autocomplete-dropdown"></div>
        </div>
        <input type="text" class="comment-input aj-comment" placeholder="Commentaire" value="{{ aj.commentaire or '' }}" style="max-width:200px;">
        <button onclick="removeAjoute(this)" style="background:none;border:none;color:#dc2626;cursor:pointer;font-size:1.1rem;padding:4px 8px;">&times;</button>
      </div>
      {% endfor %}
    </div>
    <button id="btn-add-das" onclick="addDasManquant()" style="margin-top:0.5rem;padding:6px 14px;border-radius:6px;border:1px dashed #16a34a;background:#f0fdf4;color:#16a34a;font-size:0.8rem;font-weight:600;cursor:pointer;">
      + Ajouter un DAS manquant
    </button>
  </div>
</div>

<!-- Commentaire général -->
<div class="card" style="margin-bottom:5rem;">
  <h3>Commentaire général</h3>
  <textarea id="commentaire-general" rows="3"
            style="width:100%;padding:8px;border:1px solid #cbd5e1;border-radius:6px;font-size:0.85rem;resize:vertical;">{{ annotation.commentaire_general or '' }}</textarea>
</div>
{% endif %}

<!-- Barre de sauvegarde sticky -->
<div class="save-bar">
  <button class="btn-save btn-brouillon" onclick="saveAnnotation('en_cours')">Enregistrer (brouillon)</button>
  <button class="btn-save btn-valider" onclick="saveAnnotation('valide')">Marquer comme validé</button>
  <span id="save-status" style="font-size:0.8rem;color:#64748b;"></span>
  <span style="flex:1;"></span>
  <span style="font-size:0.8rem;color:#94a3b8;">Dossier : {{ dossier_id }}</span>
</div>

{% endblock %}

{% block scripts %}
<script>
const DOSSIER_ID = {{ dossier_id | tojson }};
let ajouteCounter = {{ annotation.das_ajoutes|length }};

// --- Boutons segmentés ---
function setStatut(btn) {
  const group = btn.parentElement;
  const target = group.dataset.target;
  const value = btn.dataset.value;

  // Reset tous les boutons du groupe
  group.querySelectorAll('.seg-btn').forEach(function(b) {
    b.className = 'seg-btn';
  });
  btn.classList.add('active-' + value);

  // Afficher/cacher le champ code
  let codeField;
  if (target === 'dp') {
    codeField = document.querySelector('.dp-code-field');
  } else {
    const idx = target.replace('das-', '');
    codeField = document.querySelector('.das-code-field-' + idx);
  }
  if (codeField) {
    codeField.style.display = (value === 'modifie') ? '' : 'none';
  }
}

// --- Autocomplete CIM-10 ---
let acDebounceTimer = null;

document.addEventListener('input', function(e) {
  if (!e.target.matches('[data-ac]') && !e.target.matches('.aj-code')) return;

  const input = e.target;
  const dropdown = input.parentElement.querySelector('.autocomplete-dropdown');
  const q = input.value.trim();

  if (q.length < 2) {
    dropdown.style.display = 'none';
    return;
  }

  clearTimeout(acDebounceTimer);
  acDebounceTimer = setTimeout(function() {
    fetch('/api/cim10/search?q=' + encodeURIComponent(q))
      .then(function(r) { return r.json(); })
      .then(function(data) {
        if (!data.results || !data.results.length) {
          dropdown.style.display = 'none';
          return;
        }
        dropdown.innerHTML = '';
        data.results.forEach(function(item) {
          const div = document.createElement('div');
          div.className = 'ac-item';
          div.innerHTML = '<span class="ac-code">' + item.code + '</span><span class="ac-label">' + item.label.substring(0, 80) + '</span>';
          div.addEventListener('click', function() {
            input.value = item.code;
            dropdown.style.display = 'none';
          });
          dropdown.appendChild(div);
        });
        dropdown.style.display = 'block';
      })
      .catch(function() { dropdown.style.display = 'none'; });
  }, 300);
});

// Fermer les dropdowns quand on clique ailleurs
document.addEventListener('click', function(e) {
  if (!e.target.matches('[data-ac]') && !e.target.matches('.aj-code') && !e.target.closest('.autocomplete-dropdown')) {
    document.querySelectorAll('.autocomplete-dropdown').forEach(function(d) { d.style.display = 'none'; });
  }
});

// --- Ajouter DAS manquant ---
function addDasManquant() {
  const list = document.getElementById('das-ajoutes-list');
  const idx = ajouteCounter++;
  const row = document.createElement('div');
  row.className = 'das-added-row das-row-added';
  row.style.cssText = 'display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0;border-bottom:1px solid #e2e8f0;';
  row.dataset.ajIndex = idx;
  row.innerHTML = '<input type="text" class="comment-input aj-texte" placeholder="Texte du diagnostic" style="flex:1;max-width:300px;">' +
    '<div class="autocomplete-wrapper">' +
    '<input type="text" class="code-input aj-code" placeholder="CIM-10" autocomplete="off" data-ac="aj-' + idx + '">' +
    '<div class="autocomplete-dropdown"></div>' +
    '</div>' +
    '<input type="text" class="comment-input aj-comment" placeholder="Commentaire" style="max-width:200px;">' +
    '<button onclick="removeAjoute(this)" style="background:none;border:none;color:#dc2626;cursor:pointer;font-size:1.1rem;padding:4px 8px;">&times;</button>';
  list.appendChild(row);
}

function removeAjoute(btn) {
  btn.closest('.das-added-row').remove();
}

// --- Collecte et sauvegarde ---
function collectAnnotation(statut) {
  const validateur = document.getElementById('validateur-name');
  const valName = validateur ? validateur.value : (localStorage.getItem('t2a_validateur') || '');

  // DP
  const dpGroup = document.querySelector('.seg-group[data-target="dp"]');
  const dpActive = dpGroup ? dpGroup.querySelector('.seg-btn[class*="active-"]') : null;
  let dpStatut = 'correct';
  if (dpActive) {
    if (dpActive.classList.contains('active-modifie')) dpStatut = 'modifie';
    else if (dpActive.classList.contains('active-supprime')) dpStatut = 'supprime';
  }
  const dpCodeField = document.querySelector('.dp-code-field input');
  const dpComment = document.querySelector('.dp-comment');

  const dp = {
    texte_original: {{ (annotation.dp.texte_original or '') | tojson }},
    code_pipeline: {{ (annotation.dp.code_pipeline or '') | tojson }},
    confidence: {{ (annotation.dp.confidence or '') | tojson }},
    statut: dpStatut,
    code_corrige: (dpStatut === 'modifie' && dpCodeField) ? dpCodeField.value : null,
    commentaire: dpComment ? dpComment.value : ''
  };

  // DAS
  const dasRows = document.querySelectorAll('.das-row');
  const das = [];
  dasRows.forEach(function(row) {
    const idx = parseInt(row.dataset.index);
    const group = row.querySelector('.seg-group');
    const active = group ? group.querySelector('.seg-btn[class*="active-"]') : null;
    let dasStatut = 'correct';
    if (active) {
      if (active.classList.contains('active-modifie')) dasStatut = 'modifie';
      else if (active.classList.contains('active-supprime')) dasStatut = 'supprime';
    }
    const codeInput = row.querySelector('.code-input');
    const commentInput = row.querySelector('.das-comment');

    das.push({
      index: idx,
      texte_original: row.querySelector('td:nth-child(2)').textContent.trim(),
      code_pipeline: row.querySelector('td:nth-child(3)').textContent.trim(),
      confidence: {{ annotation.das | tojson }}.find(function(d) { return d.index === idx; })?.confidence || '',
      source: {{ annotation.das | tojson }}.find(function(d) { return d.index === idx; })?.source || '',
      statut: dasStatut,
      code_corrige: (dasStatut === 'modifie' && codeInput) ? codeInput.value : null,
      commentaire: commentInput ? commentInput.value : ''
    });
  });

  // DAS ajoutés
  const ajRows = document.querySelectorAll('.das-added-row');
  const das_ajoutes = [];
  ajRows.forEach(function(row) {
    const texte = row.querySelector('.aj-texte').value.trim();
    const code = row.querySelector('.aj-code').value.trim();
    const comment = row.querySelector('.aj-comment').value.trim();
    if (texte || code) {
      das_ajoutes.push({ texte: texte, code: code, commentaire: comment });
    }
  });

  return {
    dossier_id: DOSSIER_ID,
    validateur: valName,
    statut: statut,
    dp: dp,
    das: das,
    das_ajoutes: das_ajoutes,
    commentaire_general: document.getElementById('commentaire-general').value
  };
}

function saveAnnotation(statut) {
  const data = collectAnnotation(statut);
  const statusEl = document.getElementById('save-status');
  statusEl.textContent = 'Sauvegarde...';
  statusEl.style.color = '#64748b';

  fetch('/api/validation/save', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  })
  .then(function(r) { return r.json(); })
  .then(function(d) {
    if (d.ok) {
      statusEl.textContent = statut === 'valide' ? 'Validé !' : 'Brouillon enregistré';
      statusEl.style.color = '#16a34a';
    } else {
      statusEl.textContent = d.error || 'Erreur';
      statusEl.style.color = '#dc2626';
    }
  })
  .catch(function() {
    statusEl.textContent = 'Erreur réseau';
    statusEl.style.color = '#dc2626';
  });
}

// Raccourci clavier : Ctrl+S pour sauvegarder en brouillon
document.addEventListener('keydown', function(e) {
  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault();
    saveAnnotation('en_cours');
  }
});
</script>
{% endblock %}