{% extends "base.html" %}

{% block title %}History Dashboard | Traffic Sign Classifier{% endblock %}

{% block content %}
<section class="dashboard-head">
  <div>
    <p class="eyebrow">Historique</p>
    <h1>Prediction dashboard</h1>
    <p class="panel-copy">Review predictions, mark them true or false, and track feedback quality.</p>
  </div>
  <a class="button primary" href="{{ url_for('predict') }}">New prediction</a>
</section>

<section class="stats-grid">
  <article><span>Total</span><strong>{{ stats.total }}</strong></article>
  <article><span>Reviewed</span><strong>{{ stats.reviewed }}</strong></article>
  <article><span>True</span><strong>{{ stats.correct }}</strong></article>
  <article><span>False</span><strong>{{ stats.incorrect }}</strong></article>
  <article><span>Feedback accuracy</span><strong>{{ stats.accuracy }}%</strong></article>
</section>

<section class="charts-grid">
  <article class="chart-panel">
    <div class="chart-heading">
      <h2>Predictions by class</h2>
      <span>Top {{ charts.class_chart|length }}</span>
    </div>
    <div class="bar-list">
      {% for item in charts.class_chart %}
        <div class="bar-row">
          <div class="bar-meta">
            <span>{{ item.label }}</span>
            <strong>{{ item.count }}</strong>
          </div>
          <div class="bar-track">
            <span class="bar-fill class-fill" style="width: {{ item.percent }}%"></span>
          </div>
        </div>
      {% else %}
        <p class="empty">No class data yet.</p>
      {% endfor %}
    </div>
  </article>

  <article class="chart-panel">
    <div class="chart-heading">
      <h2>Feedback summary</h2>
      <span>{{ stats.reviewed }} reviewed</span>
    </div>
    <div class="bar-list">
      {% for item in charts.feedback_chart %}
        <div class="bar-row">
          <div class="bar-meta">
            <span>{{ item.label }}</span>
            <strong>{{ item.count }}</strong>
          </div>
          <div class="bar-track">
            <span class="bar-fill feedback-fill fill-{{ loop.index }}" style="width: {{ item.percent }}%"></span>
          </div>
        </div>
      {% endfor %}
    </div>
  </article>
</section>

<section class="table-panel">
  <table>
    <thead>
      <tr>
        <th>Image</th>
        <th>Prediction</th>
        <th>Confidence</th>
        <th>Feedback</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      {% for row in history %}
        <tr>
          <td><img class="thumb" src="{{ url_for('static', filename=row.image_path) }}" alt="Traffic sign"></td>
          <td>{{ row.predicted_class }}</td>
          <td>{{ format_confidence(row.confidence) }}</td>
          <td>
            {% if row.is_correct == 1 %}
              <span class="status true">True</span>
            {% elif row.is_correct == 0 %}
              <span class="status false">False</span>
            {% else %}
              <span class="status pending">Pending</span>
            {% endif %}
          </td>
          <td>
            <form class="feedback-row compact" method="post" action="{{ url_for('feedback', prediction_id=row.id) }}">
              <input type="hidden" name="next" value="{{ url_for('dashboard') }}">
              <button name="is_correct" value="1" class="feedback true" type="submit">True</button>
              <button name="is_correct" value="0" class="feedback false" type="submit">False</button>
            </form>
          </td>
        </tr>
      {% else %}
        <tr>
          <td colspan="5" class="empty">No prediction history yet.</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</section>
{% endblock %}