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

{% block content %}
  <p class="muted"><a href="/drivers">&larr; back to all drivers</a></p>

  <div class="panel">
    <h2>
      <span class="pill" style="background: {{ driver.color_hex }}22; color: {{ driver.color_hex }};">{{ driver.display_name }}</span>
      <span class="muted" style="font-size: 0.85rem; font-weight: 400; margin-left: 0.5rem;">
        <code>{{ driver.id }}</code>
      </span>
    </h2>
    <p class="muted" style="margin-top:0; font-size:0.85rem;">
      Per-firmware regression chart filtered to this driver's disengagements only.
      Compare against the global <a href="/">dashboard</a> to see whose drives
      skew the household totals.
    </p>
  </div>

  <div class="panel">
    <h2>Per-firmware regression &mdash; {{ driver.display_name }}</h2>
    {% if regression %}
      <div id="regression-chart" style="width: 100%; height: 360px;"></div>
      <script>
        document.addEventListener("DOMContentLoaded", () => {
          const data = {{ regression | tojson }};
          const driverColor = {{ driver.color_hex | 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: driverColor }
              },
              {
                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 events for this driver yet.</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 for this driver.</p>
    {% endif %}
  </div>
{% endblock %}