<h2>Tasks</h2>
<div id="tasks-content" class="loading">Loading...</div>

<script>
(async function() {
  var data = await api('/tasks');
  var el = document.getElementById('tasks-content');
  if (!data) { el.textContent = 'Failed to load data'; el.className = ''; return; }

  el.className = '';
  while (el.firstChild) el.removeChild(el.firstChild);

  if (data.length === 0) {
    el.textContent = 'No tasks defined.';
    el.style.color = 'var(--text-dim)';
    el.style.fontStyle = 'italic';
    return;
  }

  var table = document.createElement('table');
  var thead = document.createElement('thead');
  var headRow = document.createElement('tr');
  var cols = ['Name', 'Description', 'Schedule', 'Origin', 'Status', 'Last Run', 'Actions'];
  for (var c = 0; c < cols.length; c++) {
    var th = document.createElement('th');
    th.textContent = cols[c];
    headRow.appendChild(th);
  }
  thead.appendChild(headRow);
  table.appendChild(thead);

  var tbody = document.createElement('tbody');
  for (var i = 0; i < data.length; i++) {
    var task = data[i];
    var row = document.createElement('tr');

    var isBroken = task.task_status === 'yaml_missing' || task.task_status === 'yaml_invalid';
    if (isBroken) row.style.opacity = '0.6';

    // Name
    var tdName = document.createElement('td');
    var link = document.createElement('a');
    link.href = '/admin/tasks/' + encodeURIComponent(task.name);
    link.textContent = task.name;
    if (isBroken) link.style.color = 'var(--text-dim)';
    tdName.appendChild(link);
    if (isBroken) {
      var badge = document.createElement('span');
      badge.className = 'pill warn';
      badge.textContent = task.task_status === 'yaml_missing' ? 'missing' : 'invalid';
      badge.style.marginLeft = '6px';
      tdName.appendChild(badge);
    }
    row.appendChild(tdName);

    // Description
    var tdDesc = document.createElement('td');
    if (isBroken) {
      tdDesc.textContent = task.task_error || task.task_status;
      tdDesc.style.cssText = 'color:var(--text-dim);font-style:italic';
    } else {
      var descText = task.description || (task.prompt || '');
      if (descText.length > 60) descText = descText.substring(0, 60) + '...';
      tdDesc.textContent = descText;
      tdDesc.style.color = 'var(--text-dim)';
    }
    row.appendChild(tdDesc);

    // Schedule
    var tdSched = document.createElement('td');
    if (task.schedule) {
      tdSched.textContent = task.schedule;
    } else if (task.run_at) {
      tdSched.textContent = task.run_at;
      tdSched.style.fontSize = '12px';
    } else {
      tdSched.textContent = isBroken ? '—' : 'manual';
      tdSched.style.color = 'var(--text-dim)';
    }
    row.appendChild(tdSched);

    // Origin
    var tdOrigin = document.createElement('td');
    if (task.origin && task.origin.platform) {
      var originText = task.origin.platform;
      if (task.origin.channel_id) originText += ' (' + task.origin.channel_id + ')';
      tdOrigin.textContent = originText;
    } else if (task.origin && task.origin.source === 'cli') {
      tdOrigin.textContent = 'CLI';
    } else {
      tdOrigin.textContent = '—';
      tdOrigin.style.color = 'var(--text-dim)';
    }
    row.appendChild(tdOrigin);

    // Status pill
    var tdStatus = document.createElement('td');
    if (task.live_status && task.live_status.status) {
      var statusPill = document.createElement('span');
      var statusCls = String(task.live_status.status).toLowerCase().replace(/[^a-z0-9]/g, '');
      statusPill.className = 'pill ' + statusCls;
      statusPill.textContent = task.live_status.status;
      tdStatus.appendChild(statusPill);
    } else {
      tdStatus.textContent = '—';
      tdStatus.style.color = 'var(--text-dim)';
    }
    row.appendChild(tdStatus);

    // Last Run
    var tdLastRun = document.createElement('td');
    if (task.last_run) {
      var lastRunPill = document.createElement('span');
      var lastRunCls = String(task.last_run.status || '').toLowerCase().replace(/[^a-z0-9]/g, '');
      lastRunPill.className = 'pill ' + lastRunCls;
      lastRunPill.textContent = task.last_run.status || '';
      tdLastRun.appendChild(lastRunPill);
      if (task.last_run.started_at) {
        var timeSpan = document.createElement('span');
        timeSpan.style.cssText = 'font-size:11px;color:var(--text-dim);margin-left:6px';
        timeSpan.textContent = task.last_run.started_at;
        tdLastRun.appendChild(timeSpan);
      }
    } else {
      tdLastRun.textContent = '—';
      tdLastRun.style.color = 'var(--text-dim)';
    }
    row.appendChild(tdLastRun);

    // Actions
    var tdActions = document.createElement('td');
    tdActions.style.whiteSpace = 'nowrap';
    if (!isBroken) {
      var runBtn = document.createElement('button');
      runBtn.className = 'btn';
      runBtn.textContent = 'Run';
      runBtn.onclick = (function(taskName, btn) {
        return function() {
          confirmAction('Run Task', 'Run task "' + taskName + '" now?', function() {
            btn.disabled = true;
            btn.textContent = 'Starting...';
            apiPost('/tasks/' + encodeURIComponent(taskName) + '/run').then(function(result) {
              if (result && result.status === 'started') {
                btn.textContent = 'Started';
                btn.style.color = 'var(--accent)';
              } else {
                btn.textContent = 'Error';
                btn.style.color = 'var(--red)';
                alertMessage('Error', 'Failed: ' + (result ? result.message || 'unknown error' : 'no response'));
              }
              setTimeout(function() {
                btn.disabled = false;
                btn.textContent = 'Run';
                btn.style.color = '';
              }, 3000);
            });
          });
        };
      })(task.name, runBtn);
      tdActions.appendChild(runBtn);
    }

    var delBtn = document.createElement('button');
    delBtn.className = 'btn danger';
    delBtn.textContent = 'Delete';
    delBtn.style.marginLeft = '6px';
    var delMsg = isBroken
      ? 'Delete broken task "' + task.name + '" and all its run history?'
      : 'Delete task "' + task.name + '" and all its run history?';
    delBtn.onclick = (function(taskName, msg) {
      return function() {
        confirmAction('Delete Task', msg, function() {
          apiDelete('/tasks/' + encodeURIComponent(taskName)).then(function(result) {
            if (result && result.status === 'deleted') {
              location.reload();
            } else {
              alertMessage('Error', 'Failed: ' + (result ? result.error || 'unknown error' : 'no response'));
            }
          });
        });
      };
    })(task.name, delMsg);
    tdActions.appendChild(delBtn);

    row.appendChild(tdActions);

    tbody.appendChild(row);
  }
  table.appendChild(tbody);
  el.appendChild(table);
})();
</script>
