{% extends "base.html" %}
{% block title %}{{ detail.job_id }} - lab-executor monitor{% endblock %}
{% block content %}
<p><a href="/">&larr; 一覧へ戻る</a></p>
<h1>ジョブ {{ detail.job_id }}</h1>

<div class="job-meta">
  <span class="status status-{{ detail.status_color }}">{{ detail.status }}</span>
  <span class="phase phase-{{ detail.phase_color }}">phase: {{ detail.phase }}</span>
  {% if detail.outcome %}
    <span class="outcome outcome-{{ detail.outcome }}">outcome: {{ detail.outcome }}</span>
  {% endif %}
  <span class="recipe">recipe: {{ detail.job.recipe }}</span>
  <span class="resource">resource: {{ detail.job.resource_name }}</span>
</div>

{% if detail.pause %}
<section class="control-section pause-section" id="pause-panel">
  <h2>実行の確認待ち (paused)</h2>
  <p class="pause-message">{{ detail.pause.message or "続行してよいですか?" }}</p>
  {% if detail.pause.expose %}
  <table class="pause-expose">
    <thead><tr><th>値</th><th>現在値</th></tr></thead>
    <tbody>
      {% for k, v in detail.pause.expose.items() %}
      <tr><td><code>{{ k }}</code></td><td>{{ v }}</td></tr>
      {% endfor %}
    </tbody>
  </table>
  {% endif %}
  <p class="pause-deadline">応答期限: {{ detail.pause.timeout_at or "-" }}
     (超過時は安全側動作)</p>
  {% if control_available %}
  <div class="control-buttons">
    <button type="button" class="btn pause-continue"
            data-action="continue">続行</button>
    <button type="button" class="btn pause-abort"
            data-action="abort">中止</button>
  </div>
  <p class="control-result" id="pause-result" hidden></p>
  <script>
    (function () {
      var panel = document.getElementById("pause-panel");
      if (!panel) return;
      var result = document.getElementById("pause-result");
      function post(action) {
        if (action === "abort" &&
            !window.confirm("この pause を中止 (abort) しますか? ジョブは failed で終了します。")) {
          return;
        }
        result.hidden = false;
        result.textContent = "応答送信中… (" + action + ")";
        fetch("/api/control/jobs/{{ detail.job_id }}/pause-response", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ action: action }),
        })
          .then(function (r) { return r.json().then(function (b) {
            return { status: r.status, body: b };
          }); })
          .then(function (o) {
            if (o.status >= 200 && o.status < 300) {
              result.textContent = "応答を受け付けました: " + (o.body.action || "?");
            } else {
              result.textContent = "エラー: " +
                (o.body.detail || o.body.error || o.status);
            }
          })
          .catch(function () { result.textContent = "通信エラー"; });
      }
      panel.querySelectorAll(".control-buttons .btn").forEach(function (b) {
        b.addEventListener("click", function () { post(b.dataset.action); });
      });
    })();
  </script>
  {% else %}
  <p class="control-note">
    コントロールプレーンが無効のため、UI からは応答できません。
    CLI <code>lab-executor job respond-pause {{ detail.job_id }} --action continue</code>
    を使用してください。
  </p>
  {% endif %}
</section>
{% endif %}

{% if control_available and not detail.is_terminal %}
<section class="control-section" id="cancel-panel">
  <h2>ジョブ操作</h2>
  <p class="control-note">
    キャンセルは serve プロセス内のコントロールプレーン経由で実行されます
    (MCP ツールと同じ経路)。
  </p>
  <div class="control-buttons">
    <button type="button" class="btn cancel-after"
            data-mode="after_current_step">現在のステップ後に停止</button>
    <button type="button" class="btn cancel-immediate"
            data-mode="immediate">即時停止</button>
    <button type="button" class="btn cancel-safe"
            data-mode="safe_shutdown">安全停止 (OUTP OFF)</button>
  </div>
  <p class="control-result" id="cancel-result" hidden></p>
  <script>
    (function () {
      var panel = document.getElementById("cancel-panel");
      if (!panel) return;
      var result = document.getElementById("cancel-result");
      function post(mode) {
        var confirmNeeded = (mode === "immediate" || mode === "safe_shutdown");
        if (confirmNeeded &&
            !window.confirm("このモード (" + mode + ") で本当にキャンセルしますか?")) {
          return;
        }
        result.hidden = false;
        result.textContent = "キャンセル要求中… (" + mode + ")";
        fetch("/api/control/jobs/{{ detail.job_id }}/cancel", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ cancel_mode: mode }),
        })
          .then(function (r) { return r.json().then(function (b) {
            return { status: r.status, body: b };
          }); })
          .then(function (o) {
            if (o.status >= 200 && o.status < 300) {
              result.textContent = "状態: " + (o.body.status || "?") +
                (o.body.is_terminal ? " (終端)" : "");
            } else {
              result.textContent = "エラー: " +
                (o.body.detail || o.body.error || o.status);
            }
          })
          .catch(function () { result.textContent = "通信エラー"; });
      }
      panel.querySelectorAll(".control-buttons .btn").forEach(function (b) {
        b.addEventListener("click", function () { post(b.dataset.mode); });
      });
    })();
  </script>
</section>
{% endif %}

<section class="steps-section">
  <h2>ステップ実行履歴</h2>
  <table class="steps">
    <thead>
      <tr><th>#</th><th>type</th><th>status</th><th>started</th><th>ended</th></tr>
    </thead>
    <tbody>
      {% for s in detail.steps %}
      <tr>
        <td>{{ s.step_index }}</td>
        <td>{{ s.step_type }}</td>
        <td><span class="status status-{{ s.status_color }}">{{ s.status }}</span></td>
        <td class="ts">{{ s.started_at }}</td>
        <td class="ts">{{ s.ended_at or "" }}</td>
      </tr>
      {% else %}
      <tr><td colspan="5" class="empty">ステップがありません</td></tr>
      {% endfor %}
    </tbody>
  </table>
</section>

<section class="timeline-section">
  <h2>イベントタイムライン</h2>
  {% if detail.is_terminal %}
    <div id="timeline-panel">
      {% include "_timeline.html" %}
    </div>
  {% else %}
    <div id="timeline-panel"
         hx-ext="sse"
         sse-connect="/sse/jobs/{{ detail.job_id }}"
         sse-swap="timeline"
         hx-swap="innerHTML"
         hx-on::sse-message="if (window.__labRefreshSweep) window.__labRefreshSweep()">
      {% include "_timeline.html" %}
    </div>
  {% endif %}
</section>

{% if sweep_json %}
<section class="sweep-section" id="sweep-section">
  <h2>スイープグラフ</h2>
  <div id="sweep-chart"></div>
  <script type="application/json" id="sweep-data">{{ sweep_json | safe }}</script>
  <script>
    (function () {
      var el = document.getElementById("sweep-chart");
      var dataEl = document.getElementById("sweep-data");
      if (!el || !dataEl || typeof uPlot === "undefined") return;

      function buildOpts(view) {
        var series = [{ label: view.x_label }];
        var strokes = ["#2563eb", "#dc2626", "#16a34a", "#d97706",
                       "#7c3aed", "#0891b2"];
        view.series.forEach(function (s, i) {
          series.push({
            label: s.label,
            stroke: strokes[i % strokes.length],
            spanGaps: false,
          });
        });
        return {
          width: Math.max(el.clientWidth || 640, 320),
          height: 320,
          series: series,
          scales: { x: { time: false } },
        };
      }

      function toData(view) {
        return [view.x].concat(view.series.map(function (s) {
          return s.values;
        }));
      }

      var view = JSON.parse(dataEl.textContent);
      var opts = buildOpts(view);
      var chart = new uPlot(opts, toData(view), el);

      // 実行中ジョブ: SSE timeline 受信毎に sweep を再取得して setData。
      window.__labRefreshSweep = function () {
        fetch("/api/jobs/{{ detail.job_id }}/sweep")
          .then(function (r) { return r.json(); })
          .then(function (payload) {
            var v = payload && payload.sweep;
            if (!v) return;
            chart.setData(toData(v));
          })
          .catch(function () {});
      };
    })();
  </script>
</section>
{% endif %}

{% if detail.summary %}
<section class="summary-section" id="run-summary">
  <h2>ラン サマリー</h2>
  {% set sm = detail.summary %}
  <ul class="summary-list">
    <li>job_outcome: <strong>{{ sm.job_outcome }}</strong></li>
    <li>steps: {{ sm.summary.completed_steps }} / {{ sm.summary.total_steps }} 完了
        (failed {{ sm.summary.failed_steps }})</li>
    <li>targets: {{ sm.summary.successful_targets }} / {{ sm.summary.total_targets }} 成功
        (failed {{ sm.summary.failed_targets }})</li>
    {% if sm.summary.duration_s is not none %}
      <li>duration: {{ sm.summary.duration_s }} 秒</li>
    {% endif %}
    <li>verify: passed {{ sm.verify_summary.passed }} / failed {{ sm.verify_summary.failed }}
        (total {{ sm.verify_summary.total }})</li>
  </ul>
  {% if sm.failures %}
  <h3>失敗</h3>
  <ul class="failures">
    {% for f in sm.failures %}
    <li>target={{ f.target_id }} error_class={{ f.error_class }}
        {% if f.recoverable %}(recoverable){% endif %}</li>
    {% endfor %}
  </ul>
  {% endif %}
</section>
{% endif %}
{% endblock %}