<!-- Install status page — polls for updates -->
<!-- Task #101 — Modpack Installer -->

<style>
  .step-ok   { color:#a7f3d0; }
  .step-run  { color:#a5f3fc; }
  .step-fail { color:#fecaca; }
  .log-entry { font-family:monospace; font-size:12px; padding:2px 0; border-bottom:1px solid #1f2937; }
</style>

<div class="max-w-2xl mx-auto">
  <a href="/admin/modpack-installer" class="text-sm text-gray-400 hover:text-gray-200">← Back to installer</a>

  <div class="bg-white dark:bg-darkcard rounded-lg border border-gray-200 dark:border-gray-700 p-5 mt-4">
    <div class="flex items-center justify-between mb-4">
      <h1 class="text-xl font-bold">Install Status</h1>
      <span id="status-badge" class="text-sm font-semibold px-3 py-1 rounded-full
        <% if (job.status === 'success') { %>bg-green-900 text-green-300
        <% } else if (job.status === 'failed') { %>bg-red-900 text-red-300
        <% } else if (job.status === 'running') { %>bg-cyan-900 text-cyan-300
        <% } else { %>bg-gray-700 text-gray-300<% } %>">
        <%= job.status.toUpperCase() %>
      </span>
    </div>

    <div class="text-sm text-gray-400 mb-4">
      <div>Job ID: <span class="font-mono text-xs"><%= job.id %></span></div>
      <div>Triggered by: <strong><%= job.triggered_by %></strong></div>
      <div>Started: <%= new Date(job.started_at).toLocaleString() %></div>
      <% if (job.completed_at) { %>
        <div>Completed: <%= new Date(job.completed_at).toLocaleString() %> (<%= job.duration_seconds %>s)</div>
      <% } %>
      <% if (job.error_message) { %>
        <div class="text-red-400 mt-2">❌ <%= job.error_message %></div>
      <% } %>
    </div>

    <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Log</h2>
    <div id="log-container" class="bg-gray-900 rounded p-3 max-h-96 overflow-y-auto">
      <%
        var logData = typeof job.log_output === 'string' ? JSON.parse(job.log_output || '{}') : (job.log_output || {});
        var steps = logData.steps || [];
      %>
      <% if (steps.length === 0) { %>
        <div class="text-gray-600 text-xs">Waiting for job to start...</div>
      <% } else { %>
        <% steps.forEach(function(s) { %>
          <div class="log-entry">
            <span class="text-gray-600"><%= s.at ? new Date(s.at).toLocaleTimeString() : '' %></span>
            <span class="text-cyan-400">[<%= s.step %>]</span>
            <span class="<%= s.step === 'error' ? 'step-fail' : 'step-ok' %>"><%= s.msg %></span>
          </div>
        <% }) %>
      <% } %>
    </div>
  </div>
</div>

<% if (job.status === 'queued' || job.status === 'running') { %>
<script>
  // Poll every 3 seconds until job completes
  var pollInterval = setInterval(function() {
    fetch('/admin/modpack-installer/status/<%= job.id %>/json')
      .then(function(r) { return r.json(); })
      .then(function(data) {
        if (data.status === 'success' || data.status === 'failed') {
          clearInterval(pollInterval);
          location.reload();
        }
        // Update log live
        var logData = typeof data.log_output === 'string' ? JSON.parse(data.log_output || '{}') : (data.log_output || {});
        var steps = logData.steps || [];
        var container = document.getElementById('log-container');
        container.innerHTML = steps.map(function(s) {
          return '<div class="log-entry">' +
            '<span class="text-gray-600">' + (s.at ? new Date(s.at).toLocaleTimeString() : '') + '</span> ' +
            '<span class="text-cyan-400">[' + s.step + ']</span> ' +
            '<span class="' + (s.step === 'error' ? 'step-fail' : 'step-ok') + '">' + s.msg + '</span>' +
            '</div>';
        }).join('');
        container.scrollTop = container.scrollHeight;
      });
  }, 3000);
</script>
<% } %>
