{% extends "base.html" %}
{% block content %}

<div class="page-head">
  <h1>Results</h1>
  <p>Evaluation metrics and feature importance for your trained models</p>
</div>

{% if not runs %}
<div class="alert alert-info">
  <strong>No results yet.</strong>
  <ol>
    <li>Go to <a href="/">Run</a> and check pipeline status.</li>
    <li>Approve the <strong>review_data</strong> gate and click Run Pipeline.</li>
    <li>Once training completes, results appear here.</li>
  </ol>
</div>

{% else %}

{# ── Run selector ── #}
<div class="d-flex align-center gap-8 mb-16" style="flex-wrap:wrap;">
  <span class="small text-muted">Run:</span>
  {% for r in runs %}
  <a href="/results?run={{ r.name }}"
     class="btn btn-sm {% if r.name == selected_run %}btn-primary{% else %}btn-ghost{% endif %}">
    {{ r.name }}
  </a>
  {% endfor %}
  {% if runs | length > 1 %}
  <span class="small text-muted">
    Compare:
    {% for r in runs %}{% if r.name != selected_run %}
    <a href="/results?run={{ selected_run }}&compare={{ r.name }}" class="text-accent">vs {{ r.name }}</a>
    {% endif %}{% endfor %}
  </span>
  {% endif %}
</div>

{% if eval_report %}

{# ── Metric cards ── #}
<div class="grid-3 mb-16">
  {% for k, v in eval_report.metrics.items() %}
  <div class="metric-card">
    <div class="metric-val {% if k in ('rmse','mae') %}text-accent{% endif %}">
      {{ "%.4f" | format(v) }}
    </div>
    <div class="metric-label">{{ k }}</div>
    {% if compare_report and k in compare_report.metrics %}
    {% set delta = compare_report.metrics[k] - v %}
    <div class="metric-delta {% if delta > 0 %}pos{% elif delta < 0 %}neg{% endif %}">
      {{ "%+.4f" | format(delta) }} vs {{ compare_run }}
    </div>
    {% endif %}
  </div>
  {% endfor %}
</div>

<div class="grid-2">
  <div>

    {# ── Feature importance ── #}
    {% if eval_report.feature_importance %}
    <div class="card">
      <div class="card-head">Feature Importance <span class="small">(SHAP)</span></div>
      <div class="card-body">
        {% set max_fi = eval_report.feature_importance.values() | max %}
        {% for feat, score in eval_report.feature_importance.items() %}
        <div class="feat-row">
          <span class="feat-name">{{ feat }}</span>
          <div class="feat-bar-wrap">
            <div class="feat-bar" style="width:{{ ((score / max_fi) * 100) | int }}%"></div>
          </div>
          <span class="feat-score">{{ "%.3f" | format(score) }}</span>
        </div>
        {% endfor %}
        <p class="small text-muted mt-8">Higher = stronger influence. Low-importance columns can be dropped.</p>
      </div>
    </div>
    {% endif %}

    {# ── Next steps ── #}
    <div class="card">
      <div class="card-head">What to do next</div>
      <div class="card-body" style="font-size:13px;">
        <p class="mb-8"><strong>Happy?</strong> Go to <a href="/">Run</a>, approve <code>review_results</code>, then click Run Pipeline to export.</p>
        <p class="mb-8"><strong>Want to improve?</strong> Run <code>aimodelground tune --trials 50</code> then re-run.</p>
        <p class="mb-0"><strong>Compare runs:</strong> click another run button above, then append <code>?compare=run_001</code>.</p>
      </div>
    </div>

  </div>
  <div>

    {# ── Compare table ── #}
    {% if compare_report %}
    <div class="card mb-16">
      <div class="card-head">{{ selected_run }} vs {{ compare_run }}</div>
      <div class="card-body" style="padding:0;">
        <table style="width:100%;border-collapse:collapse;font-size:13px;">
          <thead>
            <tr style="border-bottom:1px solid var(--border);">
              <th style="padding:8px 12px;text-align:left;color:var(--muted);font-size:11px;">Metric</th>
              <th style="padding:8px 12px;text-align:right;color:var(--muted);font-size:11px;">{{ selected_run }}</th>
              <th style="padding:8px 12px;text-align:right;color:var(--muted);font-size:11px;">{{ compare_run }}</th>
              <th style="padding:8px 12px;text-align:right;color:var(--muted);font-size:11px;">Delta</th>
            </tr>
          </thead>
          <tbody>
          {% for k in all_metrics %}
          {% set va = eval_report.metrics.get(k) %}
          {% set vb = compare_report.metrics.get(k) %}
          <tr style="border-bottom:1px solid var(--border);">
            <td style="padding:8px 12px;">{{ k }}</td>
            <td style="padding:8px 12px;text-align:right;">{% if va is not none %}{{ "%.4f" | format(va) }}{% else %}&mdash;{% endif %}</td>
            <td style="padding:8px 12px;text-align:right;">{% if vb is not none %}{{ "%.4f" | format(vb) }}{% else %}&mdash;{% endif %}</td>
            <td style="padding:8px 12px;text-align:right;">
              {% if va is not none and vb is not none %}
              {% set delta = vb - va %}
              <span class="{% if delta > 0 %}text-success{% elif delta < 0 %}text-danger{% endif %}">
                {{ "%+.4f" | format(delta) }}
              </span>
              {% else %}&mdash;{% endif %}
            </td>
          </tr>
          {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    {% endif %}

    {# ── Plotly chart ── #}
    <div id="metrics-chart" class="card" style="padding:4px;"></div>
    {% if eval_report.metrics %}
    <script>
    Plotly.newPlot('metrics-chart', [{
      type: 'bar',
      x: {{ eval_report.metrics.keys() | list | tojson }},
      y: {{ eval_report.metrics.values() | list | tojson }},
      marker: { color: '#4f8ef7' }
    }], {
      paper_bgcolor: 'transparent',
      plot_bgcolor: 'transparent',
      font: { color: '#e2e8f0', family: 'Inter, sans-serif', size: 12 },
      margin: { t: 20, b: 40, l: 40, r: 10 },
      height: 220,
    });
    </script>
    {% endif %}

  </div>
</div>

{% else %}
<div class="text-muted">No eval report for <strong>{{ selected_run }}</strong> yet.</div>
{% endif %}
{% endif %}
{% endblock %}