{% extends '@SyliusAdmin/layout.html.twig' %}

{% block content %}
  <div class="ui segment">
    <h2 class="ui header">Prévisualisation de l'import</h2>

    <div class="ui tiny four statistics">
      <div class="green statistic">
        <div class="value">{{ counts.new_product }}</div>
        <div class="label">Nouveaux produits</div>
      </div>
      <div class="blue statistic">
        <div class="value">{{ counts.new_variant }}</div>
        <div class="label">Nouvelles variantes</div>
      </div>
      <div class="yellow statistic">
        <div class="value">{{ counts.modify_variant }}</div>
        <div class="label">Variantes modifiées</div>
      </div>
      <div class="red statistic">
        <div class="value">{{ counts.invalid }}</div>
        <div class="label">Lignes invalides</div>
      </div>
    </div>

    <div class="ui message" {% if counts.invalid > 0 %}class="ui red message"{% endif %}>
      <div class="header">Résumé</div>
      <p>Total: {{ total }} — Invalides: {{ counts.invalid }}</p>
      {% if counts.invalid > 0 %}
        <p>Des lignes invalides seront ignorées lors de l'import.</p>
      {% endif %}
    </div>

    <div class="ui small buttons" style="margin-bottom: 8px;">
      <button class="ui button" data-filter="all">Tous</button>
      <button class="ui green button" data-filter="new_product">Nouveaux produits</button>
      <button class="ui blue button" data-filter="new_variant">Nouvelles variantes</button>
      <button class="ui yellow button" data-filter="modify_variant">Variantes modifiées</button>
      <button class="ui grey button" data-filter="unchanged">Aucune modification</button>
      <button class="ui red button" data-filter="invalid">Lignes invalides</button>
    </div>

    <table class="ui celled compact table" id="preview-table">
      <thead>
        <tr>
          <th>#</th>
          <th>Statut</th>
          <th>Code Produit</th>
          <th>Code Variante</th>
          <th>Nom FR</th>
          <th>Nom Latin</th>
          <th>Prix HT</th>
          <th>Pot</th>
          <th>Dim.</th>
          <th>Messages</th>
        </tr>
      </thead>
      <tbody>
      {% for row in rows %}
        {% set cls =
          row.status == 'new_product' ? 'positive' :
          row.status == 'new_variant' ? 'blue' :
          row.status == 'modify_variant' ? 'warning' :
          row.status == 'invalid' ? 'negative' : ''
        %}
        <tr class="{{ cls }}" data-status="{{ row.status }}">
          <td>{{ row.line }}</td>
          <td>
            {% if row.status == 'new_product' %}<span class="ui green label">Nouveau produit</span>
            {% elseif row.status == 'new_variant' %}<span class="ui blue label">Nouvelle variante</span>
            {% elseif row.status == 'modify_variant' %}<span class="ui yellow label">Modif variante</span>
            {% elseif row.status == 'invalid' %}<span class="ui red label">Invalide</span>
            {% else %}<span class="ui grey label">Sans changement</span>
            {% endif %}
          </td>
          <td><code>{{ row.product_code }}</code></td>
          <td><code>{{ row.variant_code }}</code></td>
          <td>{{ row.data ? row.data.french_name : '' }}</td>
          <td>{{ row.data ? row.data.latin_name : '' }}</td>
          <td>{{ row.data ? row.data.price_excluding_tax : '' }}</td>
          <td>{{ row.data ? row.data.pot_type : '' }}</td>
          <td>{{ row.data ? row.data.pot_dimensions : '' }}</td>
          <td>
            {% if row.messages and row.messages|length > 0 %}
              <ul style="margin:0; padding-left: 18px;">
              {% for m in row.messages %}
                <li>{{ m }}</li>
              {% endfor %}
              </ul>
            {% endif %}
          </td>
        </tr>
      {% endfor %}
      </tbody>
    </table>

    <script>
      (function(){
        const table = document.getElementById('preview-table');
        const buttons = document.querySelectorAll('[data-filter]');
        buttons.forEach(btn => btn.addEventListener('click', function(e){
          e.preventDefault();
          const f = this.getAttribute('data-filter');
          const rows = table.querySelectorAll('tbody tr');
          rows.forEach(r => {
            const st = r.getAttribute('data-status');
            r.style.display = (f === 'all' || st === f) ? '' : 'none';
          });
        }));
      })();
    </script>

    <form class="ui form" action="{{ path('admin_product_import_confirm') }}" method="post">
      <input type="hidden" name="previewId" value="{{ previewId }}" />
      <button class="ui primary button" type="submit">Confirmer l'import</button>
      <a href="{{ path('admin_product_import_form') }}" class="ui button">Annuler</a>
    </form>
  </div>
{% endblock %}