{% extends "base.html" %}

{% block title %}Agent Scorecards - Timmy Time{% endblock %}

{% block extra_styles %}{% endblock %}

{% block content %}
<div class="container-fluid py-4">
  <!-- Header -->
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h1 class="h3 mb-0">AGENT SCORECARDS</h1>
      <p class="text-muted small mb-0">Track agent performance across issues, PRs, tests, and tokens</p>
    </div>
    <div class="d-flex gap-2">
      <select id="period-select" class="form-select form-select-sm" style="width: auto;">
        <option value="daily" selected>Daily</option>
        <option value="weekly">Weekly</option>
      </select>
      <button class="btn btn-sm btn-primary" onclick="refreshScorecards()">
        <span>Refresh</span>
      </button>
    </div>
  </div>

  <!-- Scorecards Grid -->
  <div id="scorecards-container"
       hx-get="/scorecards/all/panels?period=daily"
       hx-trigger="load"
       hx-swap="innerHTML">
    <div class="text-center py-5">
      <div class="spinner-border text-secondary" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
      <p class="text-muted mt-2">Loading scorecards...</p>
    </div>
  </div>

  <!-- API Reference -->
  <div class="mt-5 pt-4 border-top">
    <h5 class="text-muted">API Reference</h5>
    <div class="row g-3">
      <div class="col-md-6">
        <div class="card mc-panel">
          <div class="card-body">
            <h6 class="card-title">List Tracked Agents</h6>
            <code>GET /scorecards/api/agents</code>
            <p class="small text-muted mt-2">Returns all tracked agent IDs</p>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card mc-panel">
          <div class="card-body">
            <h6 class="card-title">Get All Scorecards</h6>
            <code>GET /scorecards/api?period=daily|weekly</code>
            <p class="small text-muted mt-2">Returns scorecards for all agents</p>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card mc-panel">
          <div class="card-body">
            <h6 class="card-title">Get Agent Scorecard</h6>
            <code>GET /scorecards/api/{agent_id}?period=daily|weekly</code>
            <p class="small text-muted mt-2">Returns scorecard for a specific agent</p>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card mc-panel">
          <div class="card-body">
            <h6 class="card-title">HTML Panel (HTMX)</h6>
            <code>GET /scorecards/panel/{agent_id}?period=daily|weekly</code>
            <p class="small text-muted mt-2">Returns HTML panel for embedding</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
// Period selector change handler
document.getElementById('period-select').addEventListener('change', function() {
  refreshScorecards();
});

function refreshScorecards() {
  var period = document.getElementById('period-select').value;
  var container = document.getElementById('scorecards-container');
  
  // Show loading state
  container.innerHTML = `
    <div class="text-center py-5">
      <div class="spinner-border text-secondary" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
      <p class="text-muted mt-2">Loading scorecards...</p>
    </div>
  `;
  
  // Trigger HTMX request
  htmx.ajax('GET', '/scorecards/all/panels?period=' + period, {
    target: '#scorecards-container',
    swap: 'innerHTML'
  });
}

// Auto-refresh every 5 minutes
setInterval(refreshScorecards, 300000);
</script>
{% endblock %}
