{% extends "base.html" %}
{% block titre %}{{ p.nom }}{% endblock %}
{% block contenu %}
<h1>{{ p.nom }}</h1>
<p class="sous">{{ p.id }}</p>

<p class="chiffres">
  <span>État : <span class="puce {{ 'actif' if p.actif is defined and p.actif else
      ('termine' if p.etat=='termine' else ('echec' if p.etat=='echec' else '')) }}"
      id="etat">{{ p.etiquette }}</span></span>
  <span>Tours : <b id="tours">{{ p.tours }}</b></span>
  <span>Coût : <b id="cout">{{ '%.2f'|format(p.cout) }}</b> $</span>
</p>

{% if p.erreur %}
<div class="encart alerte"><strong>Erreur :</strong> {{ p.erreur }}</div>
{% endif %}

{% if p.resume %}
<h2>Résumé de livraison</h2>
<div class="encart">{{ p.resume }}</div>
{% endif %}

{% if anomalies %}
<div class="encart alerte">
  <strong>{{ anomalies|length }} point(s) à regarder</strong>
  <ul class="anomalies">{% for a in anomalies %}<li>{{ a }}</li>{% endfor %}</ul>
  <p style="margin:10px 0 0">Vous pouvez demander la correction ci-dessous.</p>
</div>
{% endif %}

<p class="actions">
  {% if accueil_site %}
    <a class="bouton second" href="{{ url_for('apercu', projet_id=p.id, chemin=accueil_site) }}"
       target="_blank" rel="noopener">Aperçu du site</a>
  {% endif %}
  {% if archive or p.etat == 'termine' %}
    <a class="bouton" href="{{ url_for('telecharger', projet_id=p.id) }}">Télécharger le ZIP</a>
  {% endif %}
  {% if actif %}
    <form method="post" action="{{ url_for('interrompre', projet_id=p.id) }}"
          style="display:inline" onsubmit="return confirm('Interrompre la génération ?')">
      <button class="bouton danger" type="submit">Interrompre</button>
    </form>
  {% endif %}
</p>

<h2>Suite du travail</h2>
<p class="sous" style="margin-bottom:10px">La conversation est conservée : le modèle a
déjà le brief, la charte et les pages écrites en mémoire. Une consigne suffit.</p>
<form method="post" action="{{ url_for('consigne', projet_id=p.id) }}">
  <textarea name="consigne" rows="3" placeholder="Refais la section chiffres, plus aérée."></textarea>
  <p style="margin:8px 0 0;font-size:.88rem;color:var(--gris)">Exemples :
    <a href="#" class="exemple">Crée la page Exposants dans le même style.</a> ·
    <a href="#" class="exemple">Ajoute le formulaire et son traitement PHP. Destinataires : …</a> ·
    <a href="#" class="exemple">Convertis chaque page, l'en-tête et le pied de page en gabarits JSON importables dans Elementor, en widgets natifs modifiables. Produis-les avec un script, pas à la main. Livre un guide d'import.</a>
  </p>
  <p class="actions"><button class="bouton" type="submit">Envoyer la consigne</button></p>
</form>

<h2>Journal</h2>
<div class="journal" id="journal">
{%- for j in journal %}
<div class="{{ j.evenement }}"><b>{{ j.evenement }}</b>{{ j.detail or '' }}</div>
{%- endfor %}
</div>

<script>
// Remplit la zone de consigne depuis les exemples.
document.querySelectorAll('.exemple').forEach(function (a) {
  a.addEventListener('click', function (e) {
    e.preventDefault();
    document.querySelector('textarea[name=consigne]').value = a.textContent.trim();
  });
});

// Sondage du journal tant que la génération tourne. On ne demande que les
// lignes nouvelles, repérées par leur identifiant.
(function () {
  var journal = document.getElementById('journal');
  var actif = {{ 'true' if actif else 'false' }};
  var dernier = {{ journal[-1].id if journal else 0 }};
  if (!actif) return;

  function suivre() {
    fetch('{{ url_for("journal_json", projet_id=p.id) }}?depuis=' + dernier)
      .then(function (r) { return r.json(); })
      .then(function (d) {
        d.lignes.forEach(function (l) {
          var div = document.createElement('div');
          div.className = l.evenement;
          div.innerHTML = '<b></b>';
          div.firstChild.textContent = l.evenement;
          div.appendChild(document.createTextNode(l.detail));
          journal.appendChild(div);
          dernier = l.id;
        });
        if (d.lignes.length) journal.scrollTop = journal.scrollHeight;
        document.getElementById('etat').textContent = d.etiquette;
        document.getElementById('tours').textContent = d.tours;
        document.getElementById('cout').textContent = d.cout.toFixed(2);
        if (!d.actif) { location.reload(); return; }
        setTimeout(suivre, 4000);
      })
      .catch(function () { setTimeout(suivre, 10000); });
  }
  setTimeout(suivre, 2500);
})();
</script>
{% endblock %}