{% extends 'admin/master.html' %}

{% block head %}
  {{ super() }}
  <meta http-equiv="refresh" content="{{ refresh_seconds }}">
{% endblock %}

{% block head_css %}
  {{ super() }}
  <style>
    .recon-wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 1.5rem;
      color: #222;
    }
    .recon-summary {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      margin-bottom: 1rem;
    }
    .recon-card {
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 6px;
      padding: 0.75rem 1rem;
      min-width: 180px;
    }
    .alert-banner {
      margin: 1rem 0;
      padding: 0.75rem 1rem;
      border-radius: 6px;
      border: 1px solid #e0b4b4;
      background: #fff6f6;
      color: #8a1f1f;
      font-weight: 600;
    }
    table.recon-table {
      width: 100%;
      border-collapse: collapse;
      background: #fff;
    }
    .recon-table th,
    .recon-table td {
      border: 1px solid #ddd;
      padding: 0.45rem 0.5rem;
      font-size: 0.9rem;
      vertical-align: top;
    }
    .recon-table th {
      background: #f7f7f7;
      position: sticky;
      top: 0;
      z-index: 1;
    }
    .status-mismatch {
      color: #b30000;
      font-weight: 700;
    }
    .status-missing {
      color: #7a5a00;
      font-weight: 700;
    }
    .status-ok {
      color: #0f6b0f;
      font-weight: 700;
    }
    .task-id {
      font-family: monospace;
      word-break: break-all;
    }
    .small-link a {
      margin-right: 0.5rem;
    }
  </style>
{% endblock %}

{% block body %}
<div class="recon-wrap">
  <h2>Reconciliation and Drift Detection</h2>
  <p>Compares billed usage cost from task billing events against tracked inference cost from <code>run_activity_overview_json</code> (fallback: <code>activity_overview.json</code> in <code>run_zip_snapshot</code>).</p>

  <div class="recon-summary">
    <div class="recon-card">Tasks checked: <strong>{{ summary.total_tasks_checked }}</strong></div>
    <div class="recon-card">OK: <strong>{{ summary.ok_count }}</strong></div>
    <div class="recon-card">Mismatches: <strong>{{ summary.mismatch_count }}</strong></div>
    <div class="recon-card">Missing data: <strong>{{ summary.missing_count }}</strong></div>
    <div class="recon-card">Tolerance (USD): <strong>{{ '%.4f'|format(summary.tolerance_usd) }}</strong></div>
  </div>

  {% if has_alert %}
  <div class="alert-banner">
    ALERT: {{ summary.mismatch_count }} task(s) exceeded reconciliation tolerance.
  </div>
  {% endif %}

  <p>Auto-refresh every {{ refresh_seconds }}s.</p>

  <table class="recon-table">
    <thead>
      <tr>
        <th>Task</th>
        <th>Created</th>
        <th>State</th>
        <th>Billed usage (USD)</th>
        <th>Tracked usage (USD)</th>
        <th>Delta (USD)</th>
        <th>Status</th>
        <th>Artifacts</th>
      </tr>
    </thead>
    <tbody>
      {% for row in rows %}
      <tr>
        <td class="task-id">{{ row.task_id }}</td>
        <td>{{ row.timestamp_created }}</td>
        <td>{{ row.state }}</td>
        <td>{% if row.billed_usage_cost_usd is not none %}{{ '%.6f'|format(row.billed_usage_cost_usd) }}{% else %}—{% endif %}</td>
        <td>{% if row.tracked_usage_cost_usd is not none %}{{ '%.6f'|format(row.tracked_usage_cost_usd) }}{% else %}—{% endif %}</td>
        <td>{% if row.delta_usd is not none %}{{ '%.6f'|format(row.delta_usd) }}{% else %}—{% endif %}</td>
        <td>
          {% if row.status == 'mismatch' %}
            <span class="status-mismatch">mismatch</span>
          {% elif row.status == 'missing_data' %}
            <span class="status-missing">missing_data</span>
          {% else %}
            <span class="status-ok">ok</span>
          {% endif %}
        </td>
        <td class="small-link">
          {% if row.has_report %}<a href="/admin/task/{{ row.task_id }}/report">report</a>{% endif %}
          {% if row.has_run_zip %}<a href="/admin/task/{{ row.task_id }}/run_zip">zip</a>{% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}