{% extends "base.html" %}

{% block content %}
  <style>
    .ai-stat-box {
      height: 100%;
      min-height: 92px;
      margin: 0;
    }
  </style>
  <section class="section">
    <div class="container">
      <h1 class="title is-4">AI Execution Log</h1>
      <p class="subtitle is-6">Tracked model calls and usage metrics for this account.</p>

      <article class="box">
        <div class="columns is-multiline">
          <div class="column is-6-mobile is-4-tablet is-3-desktop"><div class="box ai-stat-box"><p class="heading">Total Runs</p><p class="title is-6">{{ stats.total_runs }}</p></div></div>
          <div class="column is-6-mobile is-4-tablet is-3-desktop"><div class="box ai-stat-box"><p class="heading">OK</p><p class="title is-6 has-text-success">{{ stats.total_ok }}</p></div></div>
          <div class="column is-6-mobile is-4-tablet is-3-desktop"><div class="box ai-stat-box"><p class="heading">Failed</p><p class="title is-6 has-text-danger">{{ stats.total_failed }}</p></div></div>
          <div class="column is-6-mobile is-4-tablet is-3-desktop"><div class="box ai-stat-box"><p class="heading">Success Rate</p><p class="title is-6 has-text-info">{{ stats.success_rate }}%</p></div></div>
          <div class="column is-6-mobile is-4-tablet is-3-desktop"><div class="box ai-stat-box"><p class="heading">24h Runs</p><p class="title is-6">{{ stats.last_24h_runs }}</p></div></div>
          <div class="column is-6-mobile is-4-tablet is-3-desktop"><div class="box ai-stat-box"><p class="heading">24h Failed</p><p class="title is-6 has-text-warning">{{ stats.last_24h_failed }}</p></div></div>
          <div class="column is-6-mobile is-4-tablet is-3-desktop"><div class="box ai-stat-box"><p class="heading">7d Runs</p><p class="title is-6">{{ stats.last_7d_runs }}</p></div></div>
          <div class="column is-6-mobile is-4-tablet is-3-desktop"><div class="box ai-stat-box"><p class="heading">Avg Duration</p><p class="title is-6">{{ stats.avg_duration_ms }}ms</p></div></div>
          <div class="column is-6-mobile is-4-tablet is-3-desktop"><div class="box ai-stat-box"><p class="heading">Prompt Chars</p><p class="title is-6">{{ stats.total_prompt_chars }}</p></div></div>
          <div class="column is-6-mobile is-4-tablet is-3-desktop"><div class="box ai-stat-box"><p class="heading">Response Chars</p><p class="title is-6">{{ stats.total_response_chars }}</p></div></div>
          <div class="column is-6-mobile is-4-tablet is-3-desktop"><div class="box ai-stat-box"><p class="heading">Avg Prompt</p><p class="title is-6">{{ stats.avg_prompt_chars }}</p></div></div>
          <div class="column is-6-mobile is-4-tablet is-3-desktop"><div class="box ai-stat-box"><p class="heading">Avg Response</p><p class="title is-6">{{ stats.avg_response_chars }}</p></div></div>
        </div>
      </article>

      <div class="columns">
        <div class="column is-6">
          <article class="box">
            <h2 class="title is-6">By Operation</h2>
            <table class="table is-fullwidth is-size-7 is-striped">
              <thead>
                <tr><th>Operation</th><th>Total</th><th>OK</th><th>Failed</th></tr>
              </thead>
              <tbody>
                {% for row in operation_breakdown %}
                  <tr>
                    <td>{{ row.operation|default:"(none)" }}</td>
                    <td>{{ row.total }}</td>
                    <td>{{ row.ok }}</td>
                    <td>{{ row.failed }}</td>
                  </tr>
                {% empty %}
                  <tr><td colspan="4">No runs yet.</td></tr>
                {% endfor %}
              </tbody>
            </table>
          </article>
        </div>
        <div class="column is-6">
          <article class="box">
            <h2 class="title is-6">By Model</h2>
            <table class="table is-fullwidth is-size-7 is-striped">
              <thead>
                <tr><th>Model</th><th>Total</th><th>OK</th><th>Failed</th></tr>
              </thead>
              <tbody>
                {% for row in model_breakdown %}
                  <tr>
                    <td>{{ row.model|default:"(none)" }}</td>
                    <td>{{ row.total }}</td>
                    <td>{{ row.ok }}</td>
                    <td>{{ row.failed }}</td>
                  </tr>
                {% empty %}
                  <tr><td colspan="4">No runs yet.</td></tr>
                {% endfor %}
              </tbody>
            </table>
          </article>
        </div>
      </div>

      <article class="box">
        <h2 class="title is-6">Recent Runs</h2>
        <div class="table-container">
          <table class="table is-fullwidth is-size-7 is-striped">
            <thead>
              <tr>
                <th>Started</th>
                <th>Status</th>
                <th>Operation</th>
                <th>Model</th>
                <th>Messages</th>
                <th>Prompt</th>
                <th>Response</th>
                <th>Duration</th>
                <th>Error</th>
              </tr>
            </thead>
            <tbody>
              {% for run in runs %}
                <tr>
                  <td>{{ run.started_at }}</td>
                  <td>{{ run.status }}</td>
                  <td>{{ run.operation|default:"-" }}</td>
                  <td>{{ run.model|default:"-" }}</td>
                  <td>{{ run.message_count }}</td>
                  <td>{{ run.prompt_chars }}</td>
                  <td>{{ run.response_chars }}</td>
                  <td>{% if run.duration_ms %}{{ run.duration_ms }}ms{% else %}-{% endif %}</td>
                  <td style="max-width: 26rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="{{ run.error }}">{{ run.error|default:"-" }}</td>
                </tr>
              {% empty %}
                <tr><td colspan="9">No runs yet.</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </article>
    </div>
  </section>
{% endblock %}