{% extends "dashboard/base.html" %}
{% from "partials/_macros.html" import status_pill, relative_time, pill, empty_state, info_toggle, stat_card %}

{% block page %}
<div class="page-header">
  <div>
    <div class="page-header__eyebrow">Automation</div>
    <h1 class="page-header__title">Autopilots</h1>
    <p class="page-header__subtitle">Scheduled and triggered work that mints tasks on its own — cron schedules, inbound webhooks, and the run history they produce.</p>
  </div>
</div>

{% call info_toggle(key='autopilots', title="What is an autopilot?") %}
  <p>An <strong>autopilot</strong> turns a recurring-task definition into self-driving work. It can fire on a <strong>cron schedule</strong> or from an authenticated <strong>webhook</strong>, and every fire is recorded as a <strong>run</strong> so you have an audit trail.</p>
  <p>A definition can route its output to a <code>@squad</code> — the fired task lands squad-tagged and the leader delegates. Toggle a schedule off to pause without losing it.</p>
{% endcall %}

<div class="stat-strip">
  {{ stat_card('Schedules', tasks|length, icon_name='refresh-cw') }}
  {{ stat_card('Webhooks', webhooks|length, icon_name='plug-zap') }}
  {{ stat_card('Recent runs', runs|length, icon_name='activity') }}
</div>

{# Schedules #}
<section class="ap-section">
  <h2 class="ap-section__title">{{ icon('refresh-cw') }} Schedules</h2>
  {% if tasks %}
  <div class="ap-grid">
    {% for t in tasks %}
    <div class="panel ap-card">
      <div class="ap-card__head">
        <code class="mono ap-card__name">{{ t.name }}</code>
        {% if t.enabled %}{{ status_pill('active') }}{% else %}{{ status_pill('archived') }}{% endif %}
      </div>
      <div class="ap-card__title">{{ t.title_template }}</div>
      <div class="ap-card__meta">
        <span class="ap-chip">{{ icon('refresh-cw') }} <code class="mono">{{ t.cron_expr or 'manual' }}</code></span>
        {% if t.squad %}<span class="ap-chip ap-chip--accent">{{ icon('users') }} @{{ t.squad }}</span>{% endif %}
        {% if t.spawn_tool %}<span class="ap-chip">{{ icon('zap') }} {{ t.spawn_tool }}</span>{% endif %}
        {% set rc = run_counts.get(t.name) %}
        {% if rc %}<span class="ap-chip">{{ icon('activity') }} {{ rc }} run{{ 's' if rc != 1 else '' }}</span>{% endif %}
      </div>
      <div class="ap-card__foot muted">Last fired {{ relative_time(t.last_fired_at) }}</div>
    </div>
    {% endfor %}
  </div>
  {% else %}
    {{ empty_state('No schedules yet', body='Register a cron task with the create_recurring_task MCP tool (or `brains-ai schedule_task`).', icon_name='refresh-cw') }}
  {% endif %}
</section>

{# Webhooks #}
<section class="ap-section">
  <h2 class="ap-section__title">{{ icon('plug-zap') }} Webhook triggers</h2>
  {% if webhooks %}
  <div class="panel">
    <table class="data">
      <thead><tr><th>Endpoint</th><th>Fires</th><th>Event filter</th><th>State</th></tr></thead>
      <tbody>
        {% for w in webhooks %}
        <tr>
          <td><span class="row" style="gap: var(--space-2);">{{ icon('plug-zap') }} <code class="mono">/hooks/{{ w.slug }}</code></span></td>
          <td><code class="mono">{{ w.definition_name }}</code></td>
          <td>{% if w.event_filter %}<code class="mono">{{ w.event_filter }}</code>{% else %}<span class="dim">all events</span>{% endif %}</td>
          <td>{% if w.enabled %}{{ status_pill('active') }}{% else %}{{ status_pill('archived') }}{% endif %}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
    {{ empty_state('No webhook triggers', body='Create one with the create_webhook_trigger MCP tool. External systems then POST to /hooks/<slug> with the returned bearer token to fire a task.', icon_name='plug-zap') }}
  {% endif %}
</section>

{# Run activity #}
<section class="ap-section">
  <h2 class="ap-section__title">{{ icon('activity') }} Recent runs</h2>
  {% if runs %}
  <div class="panel">
    <table class="data">
      <thead><tr><th>When</th><th>Definition</th><th>Source</th><th>Status</th><th>Task</th></tr></thead>
      <tbody>
        {% for r in runs %}
        <tr>
          <td>{{ relative_time(r.created_at) }}</td>
          <td><code class="mono">{{ r.definition_name }}</code></td>
          <td>
            {% if r.source == 'webhook' %}{{ pill('webhook', tone='info', icon_name='plug-zap') }}
            {% elif r.source == 'schedule' %}{{ pill('schedule', tone='accent', icon_name='refresh-cw') }}
            {% else %}{{ pill('manual', tone='neutral') }}{% endif %}
          </td>
          <td>
            {% if r.status == 'created' %}{{ pill('created', tone='success', dot=True) }}
            {% elif r.status == 'failed' %}{{ pill('failed', tone='danger', dot=True) }}
            {% else %}{{ pill(r.status, tone='neutral', dot=True) }}{% endif %}
          </td>
          <td>{% if r.task_code %}<code class="mono">{{ r.task_code }}</code>{% else %}<span class="dim">—</span>{% endif %}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
    {{ empty_state('No runs recorded yet', body='Runs appear here the first time a schedule or webhook fires.', icon_name='activity') }}
  {% endif %}
</section>

<style>
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
.ap-section { margin-bottom: var(--space-7); }
.ap-section__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-lg); margin: 0 0 var(--space-3); }
.ap-section__title svg { color: var(--color-text-muted); }
.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); }
.ap-card { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.ap-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ap-card__name { font-size: var(--fs-sm); }
.ap-card__title { font-size: var(--fs-md); color: var(--color-text); }
.ap-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.ap-chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--color-text-muted); background: var(--color-neutral-soft); padding: 2px var(--space-2); border-radius: var(--radius-pill); }
.ap-chip svg { width: 12px; height: 12px; }
.ap-chip--accent { color: var(--color-accent-strong); background: var(--color-accent-soft); }
.ap-card__foot { font-size: var(--fs-xs); }
</style>
{% endblock %}