{% extends "base.html" %}
{% block title %}Pending — FSD Disengagement Studio{% endblock %}

{% block content %}
  {% if autosave_stats %}
    <div class="panel" style="display:flex; align-items:center; gap:1rem;">
      <span class="muted" style="font-size:0.85rem;">Fleet API auto-save:</span>
      <span class="pill">Auto-saves issued: {{ autosave_stats.succeeded or 0 }}</span>
      {% if autosave_stats.attempted and autosave_stats.attempted != autosave_stats.succeeded %}
        <span class="muted" style="font-size:0.85rem;">
          ({{ autosave_stats.attempted }} attempted)
        </span>
      {% endif %}
      {% if autosave_stats.suppressed_by_cooldown %}
        <span class="pill warn">{{ autosave_stats.suppressed_by_cooldown }} cooldown-suppressed</span>
      {% endif %}
      {% if autosave_stats.last_updated %}
        <span class="muted" style="font-size:0.85rem; margin-left:auto;">
          updated {{ autosave_stats.last_updated }}
        </span>
      {% endif %}
    </div>
  {% endif %}

  <div class="panel">
    <h2>Path B queue</h2>

    <form class="filters" method="get" action="/pending">
      <label>
        View:
        <select name="unmatched_only" onchange="this.form.submit()">
          <option value="true" {% if unmatched_only %}selected{% endif %}>Unmatched only</option>
          <option value="false" {% if not unmatched_only %}selected{% endif %}>All records</option>
        </select>
      </label>
      <label>
        Limit:
        <select name="limit" onchange="this.form.submit()">
          {% for n in [50, 100, 250, 500] %}
            <option value="{{ n }}" {% if n == limit %}selected{% endif %}>{{ n }}</option>
          {% endfor %}
        </select>
      </label>
      <span class="muted">{{ total_in_view }} record(s) in view</span>
      <span class="muted" style="margin-left:auto;">
        <a href="/pending/stale">View stale (missing-clip warnings) &rarr;</a>
      </span>
    </form>

    <p class="muted" style="margin-top:0; font-size:0.85rem;">
      Records queued by <code>fsd-studio listen</code>. Each is a Path B
      disengagement detected from the <code>tesla_fleet_telemetry</code> event bus.
      They get linked to a saved clip when <code>fsd-studio backfill --pending-log</code>
      next runs and finds a matching SEI transition within the
      <code>--match-window-seconds</code> window (default 5 min).
    </p>

    {% if rows %}
      <table>
        <thead>
          <tr>
            <th>Detected at</th>
            <th>Speed</th>
            <th>Pre &rarr; post state</th>
            <th>GPS</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {% for r in rows %}
            <tr>
              <td><code>{{ r.timestamp }}</code></td>
              <td>{{ "%.1f m/s" | format(r.speed_mps or 0) }}</td>
              <td>
                {% if r.pre_state and r.post_state %}
                  <code>{{ r.pre_state }} &rarr; {{ r.post_state }}</code>
                {% else %}
                  <span class="muted">&mdash;</span>
                {% endif %}
              </td>
              <td>
                {% set lat = r.get('latitude') %}
                {% set lon = r.get('longitude') %}
                {% if lat is not none and lon is not none %}
                  {{ "%.4f" | format(lat) }}, {{ "%.4f" | format(lon) }}
                {% else %}
                  <span class="muted">&mdash;</span>
                {% endif %}
              </td>
              <td>
                {% if r.get('matched_event_id') %}
                  <a href="/events/{{ r.get('matched_event_id') }}">
                    <span class="pill">linked</span>
                  </a>
                {% else %}
                  <span class="pill warn">queued</span>
                {% endif %}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    {% else %}
      <p class="muted">
        No pending records yet. Run <code>fsd-studio listen --ha-url ... --ha-token ...</code>
        to populate the queue.
      </p>
    {% endif %}
  </div>
{% endblock %}