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

{% block content %}
  {% if pending_counts and pending_counts.total %}
    <div class="panel" style="display:flex; align-items:center; gap:1rem;">
      <span class="muted" style="font-size:0.85rem;">Path B queue:</span>
      <a href="/pending" style="text-decoration:none;">
        <span class="pill">{{ pending_counts.unmatched }} unmatched</span>
      </a>
      {% if pending_counts.stale %}
        <a href="/pending/stale" style="text-decoration:none;">
          <span class="pill warn">{{ pending_counts.stale }} stale (missing-clip)</span>
        </a>
      {% endif %}
      <span class="muted" style="font-size:0.85rem; margin-left:auto;">
        of {{ pending_counts.total }} total
      </span>
    </div>
  {% endif %}

  <div class="panel">
    <h2>Per-firmware regression</h2>
    {% if regression %}
      <div id="regression-chart" style="width: 100%; height: 360px;"></div>
      <script>
        document.addEventListener("DOMContentLoaded", () => {
          const data = {{ regression | tojson }};
          const chart = echarts.init(document.getElementById("regression-chart"), "dark");
          chart.setOption({
            backgroundColor: "transparent",
            tooltip: { trigger: "axis" },
            grid: { top: 30, right: 30, bottom: 30, left: 50 },
            xAxis: {
              type: "category",
              data: data.map(r => r.firmware),
              axisLabel: { color: "#9aa0b4", rotate: 30 }
            },
            yAxis: [
              { type: "value", name: "events", axisLabel: { color: "#9aa0b4" } },
              { type: "value", name: "avg conf", min: 0, max: 1, axisLabel: { color: "#9aa0b4" } }
            ],
            series: [
              {
                name: "Events",
                type: "bar",
                data: data.map(r => r.count),
                itemStyle: { color: "#5a8dee" }
              },
              {
                name: "Avg confidence",
                type: "line",
                yAxisIndex: 1,
                data: data.map(r => r.avg_confidence),
                lineStyle: { color: "#d97757" }
              }
            ]
          });
          window.addEventListener("resize", () => chart.resize());
        });
      </script>
    {% else %}
      <p class="muted">No data yet. Run <code>fsd-studio backfill ...</code> first.</p>
    {% endif %}
  </div>

  <div class="panel">
    <h2>Recent events ({{ total_events }} total)</h2>
    {% if recent_events %}
      <table>
        <thead>
          <tr>
            <th>When</th>
            <th>Firmware</th>
            <th>Cause</th>
            <th>Speed</th>
            <th>Confidence</th>
            <th>Summary</th>
          </tr>
        </thead>
        <tbody>
          {% for ev in recent_events %}
            <tr>
              <td>{{ ev.timestamp.strftime("%Y-%m-%d %H:%M") }}</td>
              <td>{{ ev.firmware_version }}</td>
              <td>
                {% if ev.classification_cause %}
                  <a href="/events/{{ ev.id }}">
                    <span class="pill {% if ev.classification_cause == 'phantom_brake' %}warn{% endif %}">{{ ev.classification_cause }}</span>
                  </a>
                {% else %}
                  <span class="muted">unclassified</span>
                {% endif %}
              </td>
              <td>{{ "%.1f mph" | format((ev.speed_at_transition_mps or 0) * 2.23694) }}</td>
              <td>{{ "%.2f" | format(ev.confidence or 0) }}</td>
              <td>{{ ev.classification_summary or "" }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    {% else %}
      <p class="muted">No events yet.</p>
    {% endif %}
  </div>
{% endblock %}