{% extends 'base.html.twig' %}

{% block title %}Mes builds — CSI World{% endblock %}

{% block stylesheets %}
  {{ parent() }}
  <style>
    .builds-page { max-width: 900px; margin: 24px auto; padding: 0 20px; }
    .builds-page h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: 20px; color: var(--accent); }
    .builds-game-section { margin-bottom: 32px; }
    .builds-game-title {
      font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
      color: var(--text); margin-bottom: 10px; padding-bottom: 6px;
      border-bottom: 1px solid var(--border);
    }
    .build-item {
      display: flex; justify-content: space-between; align-items: center; gap: 14px;
      background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
      padding: 12px 16px; margin-bottom: 8px;
    }
    .build-item-info { min-width: 0; flex: 1; }
    .build-item-name { font-weight: 600; font-size: .96rem; color: #fff; }
    .build-item-date { font-size: .78rem; color: var(--muted); margin-top: 2px; }
    .build-item-actions { display: flex; gap: 8px; flex-shrink: 0; }
    .build-btn {
      display: inline-block; padding: 8px 14px;
      background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
      color: var(--text); font-size: .85rem; font-weight: 600; text-decoration: none;
      cursor: pointer; transition: all .15s;
    }
    .build-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
    .build-btn.danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
    .builds-empty {
      background: var(--surface); border: 1px dashed var(--border); border-radius: 8px;
      padding: 40px 20px; text-align: center; color: var(--muted); font-size: .9rem;
    }
    .builds-empty a { color: var(--accent2); text-decoration: none; }
    .builds-empty a:hover { text-decoration: underline; }
  </style>
{% endblock %}

{% block body %}
<div class="builds-page">
  <h1>Mes builds</h1>

  {% if grouped is empty %}
    <div class="builds-empty">
      Tu n'as encore aucun build sauvegardé.<br>
      Utilise le bouton <strong>Enregistrer le build</strong> dans le
      <a href="{{ path('calculator_index') }}">simulateur CSI Forever</a> ou
      <a href="{{ path('simulator_narval_souls_combat') }}">Narval Souls</a>.
    </div>
  {% else %}
    {% for gameSlug, builds in grouped %}
      {% set meta = gameMeta[gameSlug] ?? {label: gameSlug, route: null, route_params: {}} %}
      <div class="builds-game-section">
        <div class="builds-game-title">{{ meta.label }} — {{ builds|length }} build{{ builds|length > 1 ? 's' }}</div>
        {% for b in builds %}
          <div class="build-item" data-build-id="{{ b.id }}">
            <div class="build-item-info">
              <div class="build-item-name">{{ b.name }}</div>
              <div class="build-item-date">Modifié le {{ b.updatedAt|date('d/m/Y à H:i') }}</div>
            </div>
            <div class="build-item-actions">
              {% if meta.route %}
                <a href="{{ path(meta.route, meta.route_params) }}?b={{ b.encodedState }}" class="build-btn">Charger</a>
                <a href="{{ path(meta.route, meta.route_params) }}?b={{ b.encodedState }}&amp;card=1&amp;name={{ b.name|url_encode }}" class="build-btn">🖼 Carte</a>
              {% endif %}
              <button type="button" class="build-btn danger" data-delete-id="{{ b.id }}">🗑 Supprimer</button>
            </div>
          </div>
        {% endfor %}
      </div>
    {% endfor %}
  {% endif %}
</div>

<script>
  document.querySelectorAll('[data-delete-id]').forEach(function (btn) {
    btn.addEventListener('click', async function () {
      var id = btn.dataset.deleteId;
      if (!confirm('Supprimer ce build ? Cette action est irréversible.')) return;
      var res = await fetch('{{ path('build_list') }}/' + id, { method: 'DELETE', credentials: 'same-origin' });
      if (res.ok) {
        var row = btn.closest('.build-item');
        if (row) row.remove();
      } else {
        alert('Erreur lors de la suppression.');
      }
    });
  });
</script>
{% endblock %}