{{define "task"}}
<div class="card">
  <div class="actions">
    <a class="btn ghost" href="/ui/tasks">{{icon "devices"}}<span>返回任务列表</span></a>
  </div>
</div>

<div class="card">
  <h2>任务概览</h2>
  <div class="summary-strip control-summary" style="margin-top:10px">
    <div class="summary-chip">
      <div class="summary-chip-label">任务标识</div>
      <div class="summary-chip-value mono">{{.Task.ID}}</div>
    </div>
    <div class="summary-chip">
      <div class="summary-chip-label">任务类型</div>
      <div class="summary-chip-value">
        <span class="{{taskGroupClass .Task.Type}}">{{taskGroupLabel .Task.Type}}</span>
        <div class="muted small" style="margin-top:4px">{{taskActionLabel .Task.Type}}</div>
      </div>
    </div>
    <div class="summary-chip">
      <div class="summary-chip-label">目标设备数</div>
      <div class="summary-chip-value">{{len .Task.DeviceIDs}} 台</div>
    </div>
    <div class="summary-chip">
      <div class="summary-chip-label">当前状态</div>
      <div class="summary-chip-value" id="task-status-value" data-task-status="{{.Task.Status}}">
        <span class="{{taskStatusClass .Task.Status}}">{{taskStatusLabel .Task.Status}}</span>
      </div>
    </div>
  </div>
</div>

<div class="card">
  <h2>设备结果</h2>
  <div class="table-wrap" style="margin-top:10px">
    <table>
      <thead>
        <tr><th>设备</th><th>状态</th><th>进度</th><th>失败原因</th></tr>
      </thead>
      <tbody id="devices-body">
        {{range .TaskDeviceRows}}
        <tr data-device-id="{{.Device.DeviceID}}" data-status="{{.Status}}">
          <td>
            <div class="device-cell">
              <div class="device-avatar">{{icon "device"}}</div>
              <div>
                <div class="device-name">{{if .Device.DeviceName}}{{.Device.DeviceName}}{{else}}{{.Device.DeviceID}}{{end}}</div>
                <div class="device-meta-line">
                  <span class="mono">{{.Device.DeviceID}}</span>
                  {{if .Device.IP}}<span class="mono">{{.Device.IP}}</span>{{end}}
                </div>
              </div>
            </div>
          </td>
          <td class="st">
            <span class="{{taskStatusClass .Status}}">{{taskStatusLabel .Status}}</span>
          </td>
          <td class="pg mono">{{.Progress}}</td>
          <td class="er">{{.Error}}</td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>
</div>

<div class="card">
  <h2>执行进度</h2>
  <div class="muted small">任务执行过程中会持续推送每台设备的状态变化。</div>
  <div class="actions compact" style="margin-top:8px">
    <button type="button" onclick="startSSE()">连接</button>
    <button type="button" onclick="stopSSE()">断开</button>
    <span class="muted small" id="sse-status">未连接</span>
  </div>
  <pre id="sse-log" style="margin-top:10px;max-height:320px"></pre>
</div>

<script>
let es;
function statusSummary(status){
  if(status === 'success') return '<span class="pill ok">成功</span>';
  if(status === 'failed') return '<span class="pill bad">失败</span>';
  if(status === 'running') return '<span class="pill run">执行中</span>';
  return '<span class="pill">待执行</span>';
}
function syncTaskStatus(){
  const rows = Array.from(document.querySelectorAll('#devices-body tr[data-device-id]'));
  if(!rows.length) return;
  const statuses = rows.map((row) => row.getAttribute('data-status') || 'pending');
  const initial = document.getElementById('task-status-value')?.getAttribute('data-task-status') || 'pending';
  let next = 'pending';
  if (statuses.some((s) => s === 'failed')) {
    next = 'failed';
  } else if (statuses.every((s) => s === 'success')) {
    next = 'success';
  } else if (statuses.some((s) => s === 'running')) {
    next = 'running';
  } else if (statuses.some((s) => s === 'success')) {
    next = initial === 'running' ? 'running' : 'pending';
  } else {
    next = initial;
  }
  const target = document.getElementById('task-status-value');
  if (target) {
    target.setAttribute('data-task-status', next);
    target.innerHTML = statusSummary(next);
  }
}
function pill(status){
  return statusSummary(status);
}
function startSSE(){
  stopSSE();
  const url = `/api/tasks/{{.TaskID}}/events`;
  es = new EventSource(url);
  document.getElementById('sse-status').textContent = '连接中...';
  es.onopen = () => { document.getElementById('sse-status').textContent = '已连接'; };
  es.onerror = () => { document.getElementById('sse-status').textContent = '连接异常（自动重试）'; };
  es.addEventListener('device_update', (ev) => {
    const line = ev.data;
    const log = document.getElementById('sse-log');
    log.textContent += line + "\n";
    log.scrollTop = log.scrollHeight;
    try {
      const u = JSON.parse(line);
      const tr = document.querySelector(`tr[data-device-id="${cssEscape(u.device_id)}"]`);
      if(tr){
        tr.setAttribute('data-status', u.status || 'pending');
        tr.querySelector('.st').innerHTML = pill(u.status);
        tr.querySelector('.pg').textContent = u.progress;
        tr.querySelector('.er').textContent = u.error || '';
        syncTaskStatus();
      }
    } catch(e){}
  });
}
function stopSSE(){
  if(es){ es.close(); es = null; }
  document.getElementById('sse-status').textContent = '未连接';
}
function cssEscape(s){
  return String(s).replace(/[^a-zA-Z0-9_-]/g, (c) => "\\"+c);
}
syncTaskStatus();
</script>
{{end}}