{% extends 'base.html.twig' %}
{% block title %}Vos idées pour la ville{% endblock %}

{% block stylesheets %}
<style>
  .idee-wrap { max-width: 460px; margin: 0 auto; text-align: center; }
  .idee-compteur { color: #8595a6; font-size: .9rem; margin-bottom: .8rem; }
  .idee-card {
    position: relative; background: #fff; border: 1px solid #e3e9ee; border-radius: 16px;
    box-shadow: 0 10px 30px rgba(20,40,60,.10); padding: 2rem 1.6rem; min-height: 220px;
    display: flex; flex-direction: column; justify-content: center; gap: 1rem;
    touch-action: pan-y; user-select: none; transition: transform .25s ease, opacity .25s ease;
  }
  .idee-card h2 { margin: 0; font-size: 1.4rem; line-height: 1.3; }
  .idee-card p { margin: 0; color: #55636f; }
  .idee-verdict { position: absolute; top: 14px; padding: .25rem .6rem; border-radius: 8px;
    font-weight: 700; font-size: .95rem; opacity: 0; text-transform: uppercase; }
  .idee-verdict.pour { right: 14px; color: #1a8a4b; border: 2px solid #1a8a4b; transform: rotate(12deg); }
  .idee-verdict.contre { left: 14px; color: #c0392b; border: 2px solid #c0392b; transform: rotate(-12deg); }
  .idee-actions { display: flex; justify-content: center; gap: 1rem; margin-top: 1.4rem; }
  .idee-actions button { border: none; border-radius: 999px; width: 64px; height: 64px; font-size: 1.6rem;
    cursor: pointer; box-shadow: 0 4px 12px rgba(20,40,60,.15); }
  .b-contre { background: #fdECEA; color: #c0392b; }
  .b-passer { background: #eef1f4; color: #66727d; width: 52px; height: 52px; align-self: center; font-size: 1.2rem; }
  .b-pour { background: #e7f6ec; color: #1a8a4b; }
  .idee-actions form { display: inline; }
  .idee-liens { margin-top: 1.6rem; font-size: .9rem; }
  .idee-fin { background:#fff; border:1px solid #e3e9ee; border-radius:16px; padding:2rem; }
</style>
{% endblock %}

{% block body %}
<div class="idee-wrap">
  <h1>Vos idées pour la ville</h1>
  {% for label, messages in app.flashes %}{% for m in messages %}<p class="flash flash-{{ label }}">{{ m }}</p>{% endfor %}{% endfor %}

  {% if idee %}
    <p class="idee-compteur">Glissez la carte ou utilisez les boutons — {{ reste }} idée{{ reste > 1 ? 's' : '' }} à découvrir</p>

    <div class="idee-card" id="carte">
      <span class="idee-verdict pour" id="v-pour">Pour</span>
      <span class="idee-verdict contre" id="v-contre">Contre</span>
      <h2>{{ idee.titre }}</h2>
      {% if idee.description %}<p>{{ idee.description|nl2br }}</p>{% endif %}
      {% if idee.auteurNom %}<p style="font-size:.85rem;color:#8595a6">proposée par {{ idee.auteurNom }}</p>{% endif %}
    </div>

    <div class="idee-actions">
      <form method="post" action="{{ path('idee_voter', {id: idee.id}) }}">
        <input type="hidden" name="_token" value="{{ csrf_token('voter' ~ idee.id) }}">
        <input type="hidden" name="valeur" value="contre">
        <button type="submit" class="b-contre" id="btn-contre" title="Contre" aria-label="Contre">✕</button>
      </form>
      <form method="post" action="{{ path('idee_passer', {id: idee.id}) }}">
        <input type="hidden" name="_token" value="{{ csrf_token('passer' ~ idee.id) }}">
        <button type="submit" class="b-passer" title="Passer" aria-label="Passer">→</button>
      </form>
      <form method="post" action="{{ path('idee_voter', {id: idee.id}) }}">
        <input type="hidden" name="_token" value="{{ csrf_token('voter' ~ idee.id) }}">
        <input type="hidden" name="valeur" value="pour">
        <button type="submit" class="b-pour" id="btn-pour" title="Pour" aria-label="Pour">♥</button>
      </form>
    </div>

    <p class="idee-liens">
      <a href="{{ path('idee_proposer') }}">Proposer ma propre idée</a> ·
      <a href="{{ path('idees_resultats') }}">Voir les résultats</a>
    </p>
  {% else %}
    <div class="idee-fin">
      <p style="font-size:2.4rem;margin:0">🎉</p>
      <h2>Vous avez tout parcouru&nbsp;!</h2>
      <p>Merci pour vos votes. Revenez bientôt : de nouvelles idées arrivent régulièrement.</p>
      <p class="idee-liens">
        <a class="btn" href="{{ path('idee_proposer') }}">Proposer une idée</a>
      </p>
      <p class="idee-liens"><a href="{{ path('idees_resultats') }}">Voir les résultats</a></p>
    </div>
  {% endif %}
</div>
{% endblock %}

{% block javascripts %}
{% if idee %}
<script>
(function () {
  var carte = document.getElementById('carte');
  var vPour = document.getElementById('v-pour');
  var vContre = document.getElementById('v-contre');
  if (!carte) return;
  var startX = 0, dx = 0, dragging = false, seuil = 110;

  function submit(sel) { var b = document.getElementById(sel); if (b) b.closest('form').submit(); }

  function down(x) { dragging = true; startX = x; carte.style.transition = 'none'; }
  function move(x) {
    if (!dragging) return;
    dx = x - startX;
    carte.style.transform = 'translateX(' + dx + 'px) rotate(' + (dx / 22) + 'deg)';
    vPour.style.opacity = dx > 20 ? Math.min(1, dx / seuil) : 0;
    vContre.style.opacity = dx < -20 ? Math.min(1, -dx / seuil) : 0;
  }
  function up() {
    if (!dragging) return;
    dragging = false;
    carte.style.transition = 'transform .25s ease, opacity .25s ease';
    if (dx > seuil) { carte.style.transform = 'translateX(600px) rotate(30deg)'; carte.style.opacity = 0; submit('btn-pour'); }
    else if (dx < -seuil) { carte.style.transform = 'translateX(-600px) rotate(-30deg)'; carte.style.opacity = 0; submit('btn-contre'); }
    else { carte.style.transform = ''; vPour.style.opacity = 0; vContre.style.opacity = 0; }
    dx = 0;
  }

  carte.addEventListener('pointerdown', function (e) { down(e.clientX); carte.setPointerCapture(e.pointerId); });
  carte.addEventListener('pointermove', function (e) { move(e.clientX); });
  carte.addEventListener('pointerup', up);
  carte.addEventListener('pointercancel', up);
})();
</script>
{% endif %}
{% endblock %}