{% extends "base.html" %}
{% block title %}Elaborazione...{% endblock %}
{% block content %}
<div style="text-align:center;padding:3rem 1rem;">

<div id="loading" style="display:block;">
  <h1 style="margin-bottom:1.5rem;">Elaborazione in corso</h1>
  <div style="width:200px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 1rem;overflow:hidden;">
    <div id="progressBar" style="width:0%;height:100%;background:var(--accent);border-radius:2px;transition:width 0.5s ease;"></div>
  </div>
  <p id="statusMsg" style="font-family:system-ui,sans-serif;color:var(--muted);font-size:0.9rem;">Avvio pipeline...</p>
  <p style="font-family:system-ui,sans-serif;color:var(--muted);font-size:0.78rem;margin-top:0.5rem;">I tuoi documenti verranno analizzati, indicizzati e resi interrogabili.</p>
</div>

<div id="done" style="display:none;">
  <h1 style="color:var(--green);margin-bottom:1rem;">&#10003; Completato</h1>
  <p id="doneMsg" style="font-family:system-ui,sans-serif;color:var(--muted);font-size:0.95rem;margin-bottom:1.5rem;"></p>
  <a href="/dashboard" class="btn">Vai alla Dashboard</a>
  <a href="/" class="btn btn-ghost" style="margin-left:0.5rem;">Esplora KB</a>
</div>

<div id="error" style="display:none;">
  <h1 style="color:var(--red);margin-bottom:1rem;">Errore</h1>
  <p id="errorMsg" style="font-family:system-ui,sans-serif;color:var(--muted);font-size:0.95rem;margin-bottom:1.5rem;"></p>
  <a href="/upload" class="btn">Riprova</a>
</div>

</div>

<script>
var progress = 0;
var timer = setInterval(function() {
  progress = Math.min(progress + 3 + Math.random() * 5, 90);
  document.getElementById('progressBar').style.width = progress + '%';
}, 800);

function checkStatus() {
  fetch('/build-status')
    .then(function(r) { return r.json(); })
    .then(function(data) {
      if (data.state === 'running') {
        document.getElementById('statusMsg').textContent = data.message;
        document.getElementById('progressBar').style.width = Math.min(progress, 90) + '%';
      } else if (data.state === 'complete') {
        clearInterval(timer);
        document.getElementById('progressBar').style.width = '100%';
        setTimeout(function() {
          document.getElementById('loading').style.display = 'none';
          document.getElementById('done').style.display = 'block';
          document.getElementById('doneMsg').textContent = data.message;
        }, 300);
        clearInterval(pollTimer);
      } else if (data.state === 'error') {
        clearInterval(timer);
        document.getElementById('loading').style.display = 'none';
        document.getElementById('error').style.display = 'block';
        document.getElementById('errorMsg').textContent = data.message;
        clearInterval(pollTimer);
      }
    })
    .catch(function() {
      document.getElementById('statusMsg').textContent = 'In attesa del server...';
    });
}

checkStatus();
var pollTimer = setInterval(checkStatus, 1500);
</script>
{% endblock %}