{% extends "base.html" %}
{% block title %}Dashboard — sentrytriage{% endblock %}

{% block content %}
  <div class="panel">
    <h2>At a glance</h2>
    <div class="stat-grid">
      <div class="stat"><div class="label">Total events</div><div class="value">{{ total_events }}</div></div>
      <div class="stat warn"><div class="label">Interesting</div><div class="value">{{ counts.interesting }}</div></div>
      <div class="stat muted"><div class="label">Boring (suppressed)</div><div class="value">{{ counts.boring }}</div></div>
      <div class="stat muted"><div class="label">Unclassified</div><div class="value">{{ counts.unclassified }}</div></div>
    </div>
  </div>

  <div class="panel">
    <h2>Events per day (last 14)</h2>
    {% if events_per_day %}
      <svg viewBox="0 0 290 80" preserveAspectRatio="none"
           style="width:100%; height:90px; display:block;"
           role="img" aria-label="Events per day for the last 14 days">
        {% set bar_w = 18 %}
        {% set gap = 2 %}
        {% for day, n in events_per_day %}
          {% set x = loop.index0 * (bar_w + gap) %}
          {% set h = (n / max_per_day) * 60 if max_per_day else 0 %}
          <rect x="{{ x }}" y="{{ 70 - h }}" width="{{ bar_w }}" height="{{ h }}"
                rx="2" fill="{% if n > 0 %}var(--accent){% else %}var(--border){% endif %}">
            <title>{{ day.isoformat() }} - {{ n }} event{{ "" if n == 1 else "s" }}</title>
          </rect>
          {% if loop.index0 == 0 or loop.last %}
            <text x="{{ x }}" y="78" font-size="7" fill="var(--muted)" font-family="sans-serif">
              {{ day.strftime("%m-%d") }}
            </text>
          {% endif %}
        {% endfor %}
      </svg>
    {% else %}
      <p class="muted">No events in the last 14 days.</p>
    {% endif %}
  </div>

  {% if feedback_stats.total > 0 %}
    <div class="panel">
      <h2>Your feedback vs. the VLM</h2>
      <div class="stat-grid">
        <div class="stat ok">
          <div class="label">Agreement</div>
          <div class="value">{{ agreement_pct }}%</div>
        </div>
        <div class="stat"><div class="label">Total ratings</div><div class="value">{{ feedback_stats.total }}</div></div>
        <div class="stat warn">
          <div class="label">Bumped to interesting</div>
          <div class="value">{{ feedback_stats.override_to_interesting }}</div>
        </div>
        <div class="stat muted">
          <div class="label">Bumped to boring</div>
          <div class="value">{{ feedback_stats.override_to_boring }}</div>
        </div>
      </div>
      <p class="muted" style="margin: 0.5rem 0 0; font-size: 12px;">
        Open any event detail and tap &#128077; / &#128078; to add a rating. <a href="/overrides">View all overrides</a> or run <code>triage export-overrides</code> to dump them as JSONL.
      </p>
    </div>

    {% if recent_overrides %}
      <div class="panel">
        <h2>Recent overrides</h2>
        <table>
          <thead>
            <tr><th>When</th><th>VLM said</th><th>You said</th><th>Caption</th></tr>
          </thead>
          <tbody>
            {% for event, feedback in recent_overrides %}
              <tr>
                <td>{{ event.timestamp.strftime("%m-%d %H:%M") }}</td>
                <td>
                  {% if event.interesting is sameas true %}
                    <span class="pill interesting">interesting</span>
                  {% elif event.interesting is sameas false %}
                    <span class="pill boring">boring</span>
                  {% else %}
                    <span class="pill muted">unclassified</span>
                  {% endif %}
                </td>
                <td>
                  {% if feedback.value %}
                    <span class="pill interesting">interesting</span>
                  {% else %}
                    <span class="pill boring">boring</span>
                  {% endif %}
                </td>
                <td><a href="/events/{{ event.id }}">{{ event.one_line_caption or "(no caption)" }}</a></td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
        <p class="muted" style="margin: 0.5rem 0 0; font-size: 12px;">
          Showing {{ recent_overrides|length }}. <a href="/overrides">See all overrides &rarr;</a>
        </p>
      </div>
    {% endif %}
  {% else %}
    <div class="panel">
      <h2>Your feedback vs. the VLM</h2>
      <p class="muted" style="margin: 0;">
        No feedback yet. Open an event detail and tap &#128077; / &#128078; to start teaching the model where it's wrong.
      </p>
    </div>
  {% endif %}

  {% if category_counts %}
    <div class="panel">
      <h2>Categories</h2>
      <div class="cat-grid">
        {% for cat, n in category_counts %}
          <div class="cat-item">
            <a href="/events?category={{ cat }}"><code>{{ cat }}</code></a>
            <span class="muted">{{ n }}</span>
          </div>
        {% endfor %}
      </div>
    </div>
  {% endif %}

  {% if interesting_recent %}
    <div class="panel">
      <h2>Recent interesting events</h2>
      <table>
        <thead>
          <tr><th>When</th><th>Category</th><th>Confidence</th><th>Caption</th></tr>
        </thead>
        <tbody>
          {% for ev in interesting_recent %}
            <tr>
              <td>{{ ev.timestamp.strftime("%Y-%m-%d %H:%M") }}</td>
              <td><a href="/events/{{ ev.id }}"><span class="pill interesting">{{ ev.category }}</span></a></td>
              <td>{{ "%.2f" | format(ev.confidence or 0) }}</td>
              <td><a href="/events/{{ ev.id }}">{{ ev.one_line_caption }}</a></td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% endif %}

  <div class="panel">
    <h2>Recent events ({{ recent_events|length }} of {{ total_events }})</h2>
    {% if recent_events %}
      <table>
        <thead>
          <tr><th>When</th><th>Status</th><th>Category</th><th>Caption</th></tr>
        </thead>
        <tbody>
          {% for ev in recent_events %}
            <tr>
              <td>{{ ev.timestamp.strftime("%m-%d %H:%M") }}</td>
              <td>
                {% if ev.interesting %}
                  <span class="pill interesting">interesting</span>
                {% elif ev.interesting is sameas false %}
                  <span class="pill boring">boring</span>
                {% else %}
                  <span class="pill muted">unclassified</span>
                {% endif %}
              </td>
              <td><code>{{ ev.category or "—" }}</code></td>
              <td><a href="/events/{{ ev.id }}">{{ ev.one_line_caption or "(no caption)" }}</a></td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    {% else %}
      <p class="muted">No events yet. Run <code>triage demo-seed</code> to populate with synthetic data, or <code>triage watch</code> against your real <code>SentryClips/</code>.</p>
    {% endif %}
  </div>
{% endblock %}