{% extends 'generic/object.html' %}
{% load helpers %}

{% block content %}
{% if object.status == "running" or object.status == "pending" %}
  <script>
    // Auto-refresh every 10 seconds while running
    window.setTimeout(function () { window.location.reload(); }, 10000);

    // Live elapsed-time counter
    (function () {
      var startMs = {{ object.start_time.timestamp|floatformat:0 }} * 1000;
      function fmt(s) {
        var m = Math.floor(s / 60), sec = s % 60;
        return (m > 0 ? m + 'm ' : '') + sec + 's';
      }
      function tick() {
        var el = document.getElementById('elapsed-live');
        if (el) el.textContent = fmt(Math.floor((Date.now() - startMs) / 1000));
      }
      tick();
      setInterval(tick, 1000);
    })();
  </script>

  <div class="alert alert-primary" role="alert">
    <div class="d-flex align-items-center gap-3">
      <div class="spinner-border spinner-border-sm text-primary flex-shrink-0" role="status"></div>
      <div class="flex-grow-1">
        <strong>同步進行中</strong> —
        已執行 <span id="elapsed-live">...</span>
        {% if object.details.heartbeat %}
          &nbsp;·&nbsp; <span class="text-success">Worker 活躍中</span>
          <small class="text-muted">(最後心跳: {{ object.details.heartbeat|slice:":19" }})</small>
        {% else %}
          &nbsp;·&nbsp; <span class="text-warning">等待 Worker 回應...</span>
        {% endif %}
      </div>
      <small class="text-muted flex-shrink-0">每 10 秒自動更新</small>
    </div>

    {% if object.status == "running" %}
    <div class="mt-2">
      <div class="progress" style="height: 6px;">
        <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
             role="progressbar" style="width: 100%"></div>
      </div>
    </div>

    <div class="mt-2 small text-muted">
      {% if object.details.heartbeat %}
        同步引擎正在處理 VM，完成後頁面將自動顯示統計結果。
        預計總耗時 8–15 分鐘（取決於 VM 數量）。
      {% else %}
        任務已排隊，等待 Worker 開始處理...
      {% endif %}
    </div>
    {% endif %}
  </div>
{% endif %}

{% if object.error_message %}
  <div class="alert alert-danger" role="alert">
    <strong>同步失敗：</strong> {{ object.error_message }}
  </div>
{% endif %}

{% if object.status == "success" %}
  <div class="alert alert-success" role="alert">
    <i class="mdi mdi-check-circle"></i>
    {% if object.is_pbs_job %}
      PBS 同步成功完成！備份記錄更新 <strong>{{ object.details.backup_updated|default:0 }}</strong> 筆，耗時 {{ object.duration|floatformat:0 }} 秒。
    {% else %}
      同步成功完成！共處理 <strong>{{ object.total_vms }}</strong> 台 VM，
      成功 <strong>{{ object.success_vms }}</strong> 台，耗時 {{ object.duration|floatformat:0 }} 秒。
    {% endif %}
  </div>
{% endif %}

<div class="row">
  <div class="col col-md-6">
    <div class="card">
      <h5 class="card-header">Sync Job Details</h5>
      <table class="table table-hover attr-table">
        <tr>
          <th scope="row">Cluster</th>
          <td>{{ object.cluster_name }}</td>
        </tr>
        <tr>
          <th scope="row">Status</th>
          <td><span class="badge text-bg-{{ object.status_badge }}">{{ object.get_status_display }}</span></td>
        </tr>
        <tr>
          <th scope="row">Trigger</th>
          <td>{{ object.get_trigger_display }}</td>
        </tr>
        <tr>
          <th scope="row">Triggered By</th>
          <td>{{ object.triggered_by|default:"—" }}</td>
        </tr>
        <tr>
          <th scope="row">Started</th>
          <td>{{ object.start_time|date:"Y-m-d H:i" }}</td>
        </tr>
        <tr>
          <th scope="row">Finished</th>
          <td>{% if object.end_time %}{{ object.end_time|date:"Y-m-d H:i" }}{% else %}—{% endif %}</td>
        </tr>
        <tr>
          <th scope="row">Duration</th>
          <td>
            {% if object.duration %}
              {{ object.duration|floatformat:0 }}s
            {% elif object.status == "running" %}
              <span id="elapsed-live-2">計算中...</span>
              <script>
                (function(){
                  var s={{ object.start_time.timestamp|floatformat:0 }}*1000;
                  function f(sec){var m=Math.floor(sec/60);return (m>0?m+'m ':'')+sec%60+'s';}
                  function t(){var el=document.getElementById('elapsed-live-2');if(el)el.textContent=f(Math.floor((Date.now()-s)/1000));}
                  t();setInterval(t,1000);
                })();
              </script>
            {% else %}—{% endif %}
          </td>
        </tr>
        <tr>
          <th scope="row">RQ Job ID</th>
          <td><small>{{ object.details.rq_job_id|default:"-" }}</small></td>
        </tr>
      </table>
    </div>
  </div>
  <div class="col col-md-6">
    <div class="card">
      <h5 class="card-header">Statistics</h5>
      <table class="table table-hover attr-table">
        {% if object.is_pbs_job %}
          <tr>
            <th scope="row">Device Synced</th>
            <td>
              {% if object.status == "running" %}
                <span class="text-muted">同步完成後顯示</span>
              {% elif object.status == "success" %}
                <span class="text-success">1</span>
              {% else %}—{% endif %}
            </td>
          </tr>
          <tr>
            <th scope="row">Backup Records Updated</th>
            <td>
              {% if object.details.backup_updated is not None %}
                <span class="text-success">{{ object.details.backup_updated }}</span>
              {% elif object.status == "running" %}
                <span class="text-muted">同步完成後顯示</span>
              {% else %}—{% endif %}
            </td>
          </tr>
          <tr>
            <th scope="row">No VM Match (Skipped)</th>
            <td>
              {% if object.details.backup_skipped is not None %}
                {{ object.details.backup_skipped }}
              {% else %}—{% endif %}
            </td>
          </tr>
        {% else %}
          <tr>
            <th scope="row">Total VMs</th>
            <td>
              {% if object.total_vms > 0 %}
                {{ object.total_vms }}
              {% elif object.status == "running" %}
                <span class="text-muted">同步完成後顯示</span>
              {% else %}0{% endif %}
            </td>
          </tr>
          <tr>
            <th scope="row">Success</th>
            <td><span class="text-success">{{ object.success_vms }}</span></td>
          </tr>
          <tr>
            <th scope="row">Failed</th>
            <td><span class="text-danger">{{ object.failed_vms }}</span></td>
          </tr>
          <tr>
            <th scope="row">Success Rate</th>
            <td>
              {% if object.total_vms > 0 %}{{ object.success_rate|floatformat:1 }}%{% else %}—{% endif %}
            </td>
          </tr>
          <tr>
            <th scope="row">Nodes Offline</th>
            <td>{{ object.nodes_offline }}</td>
          </tr>
          <tr>
            <th scope="row">Config Drifts</th>
            <td>{{ object.config_drifts }}</td>
          </tr>
          <tr>
            <th scope="row">Tag Changes</th>
            <td>{{ object.tag_changes }}</td>
          </tr>
          <tr>
            <th scope="row">Resource Alerts</th>
            <td>{{ object.resource_alerts }}</td>
          </tr>
        {% endif %}
      </table>
    </div>
  </div>
</div>

{% if object.details %}
<div class="row mt-3">
  <div class="col">
    <div class="card">
      <h5 class="card-header">Job Details (JSON)</h5>
      <div class="card-body">
        <pre class="mb-0"><code>{{ object.details|pprint }}</code></pre>
      </div>
    </div>
  </div>
</div>
{% endif %}
{% endblock %}