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

{% block content %}
  <div class="ui segment" id="import-progress" data-job="{{ jobId }}">
    <h2 class="ui header">Progression de l'import</h2>
    <div class="ui indicating progress" id="bar">
      <div class="bar"></div>
      <div class="label" id="label">Initialisation…</div>
    </div>
    <pre id="details" style="max-height: 240px; overflow: auto"></pre>
    <a href="{{ path('admin_product_import_form') }}" class="ui button">Nouveau import</a>
  </div>

  <script>
  (function(){
    const el = document.getElementById('import-progress');
    const jobId = el.getAttribute('data-job');
    const label = document.getElementById('label');
    const details = document.getElementById('details');
    const bar = document.getElementById('bar');

    function pct(processed, total){
      if(!total || total <= 0) return 0;
      return Math.min(100, Math.floor((processed / total) * 100));
    }

    function tick(){
      fetch("{{ path('admin_product_import_progress_json', {jobId: '__ID__'}) }}".replace('__ID__', jobId))
        .then(r => r.json())
        .then(data => {
          const processed = data.processed || 0;
          const total = data.total || 0;
          const percent = pct(processed, total);
          bar.classList.add('active');
          bar.querySelector('.bar').style.width = percent + '%';
          let st = data.status || 'running';
          if (st === 'queued') {
            label.textContent = 'en attente • ' + processed + '/' + total + ' • ' + (data.message || '');
          } else {
            label.textContent = st + ' • ' + processed + '/' + total + ' • ' + (data.message || '');
          }
          details.textContent = JSON.stringify(data, null, 2);
          if (data.status === 'done' || data.status === 'failed') {
            clearInterval(timer);
            bar.classList.remove('active');
            bar.classList.add(data.status === 'done' ? 'success' : 'error');
          }
        })
        .catch(() => {});
    }
    const timer = setInterval(tick, 1500);
    tick();
  })();
  </script>
{% endblock %}