{% extends "base.html" %}
{% block title %}AI activity — BackupWatch{% endblock %}
{% block content %}
<style>
  .aia-head { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
  .aia-head h1 { margin:0; font-size:29px; font-weight:700; letter-spacing:-.02em; color:#182a4a; }
  .aia-note { font-size:14px; line-height:1.7; color:#4a5c78; max-width:74ch; margin:0 0 18px; }
  .aia-tools { display:flex; gap:14px; align-items:center; margin-bottom:16px; }
  .aia-row td { vertical-align:top; font-size:13.5px; padding:8px 12px 8px 0; }
  .aia-row .mono { font-family:var(--mono); font-size:12px; }
  .aia-when { white-space:nowrap; color:#6b7a90; }
  .aia-st { font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.08em;
    padding:3px 7px; border-radius:5px; }
  .aia-st.ok { color:#0d7a3d; background:#e3f4ea; }
  .aia-st.error, .aia-st.refused { color:#b3261e; background:#fbeceb; }
  .aia-st.sending { color:#9a6f00; background:#fff3d6; }
  .aia-pre { font-family:var(--mono); font-size:11.5px; line-height:1.5; background:#f7f9fd;
    border:1px solid #eaeff6; border-radius:8px; padding:10px 12px; margin:6px 0 0;
    max-height:320px; overflow:auto; white-space:pre-wrap; word-break:break-word; }
  .aia-empty { padding:26px; font-size:14.5px; color:#6b7a90; }
</style>

<div class="aia-head"><h1>AI activity</h1></div>
<p class="aia-note">Every request BackupWatch has made to Anthropic, newest first — including
  exactly what was sent and what came back. Costs are estimated locally from published rates;
  your Anthropic console is authoritative. Snapshots you previewed but never sent are not
  listed. <a href="/settings#sec-ai">AI settings</a></p>
{% if msg %}<div class="banner ok">{{ msg }}</div>{% endif %}

<div class="aia-tools">
  <a href="/settings/ai-activity.csv">⬇ Download CSV</a>
  <form method="post" action="/settings/ai-activity/clear" style="margin:0"
        onsubmit="return confirm('Delete every AI activity record? This cannot be undone.')">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <button class="btn-secondary">Clear log</button></form>
</div>

<div class="table-wrap"><table>
  <thead><tr><th>When</th><th>User</th><th>Client</th><th>Purpose</th><th>Model</th>
    <th>Status</th><th>Tokens</th><th>~Cost</th><th>Payload</th></tr></thead>
  <tbody>
  {% for r in rows %}
  <tr class="aia-row">
    <td class="aia-when">{{ r.ts|dt }}</td>
    <td>{{ r.user_email }}</td>
    <td>{{ client_names.get(r.client_id, "—") }}</td>
    <td>{{ r.purpose }}</td>
    <td class="mono">{{ r.model }}</td>
    <td><span class="aia-st {{ r.status }}">{{ r.status|upper }}</span>
      {% if r.error_detail %}<br><small>{{ r.error_detail }}</small>{% endif %}</td>
    <td class="mono">{{ "{:,}".format(r.input_tokens) }} in<br>{{ "{:,}".format(r.output_tokens) }} out</td>
    <td class="mono">~${{ "%.4f"|format(r.estimated_cost_usd) }}</td>
    <td>
      {# both are Jinja-escaped: this is model- and mailbox-derived text #}
      <details><summary>Request</summary><pre class="aia-pre">{{ r.request_json }}</pre></details>
      <details><summary>Response</summary><pre class="aia-pre">{{ r.response_json or "—" }}</pre></details>
    </td>
  </tr>
  {% else %}
  <tr><td colspan="9" class="aia-empty">No AI requests yet. The feature is optional and off
    until you enable it in <a href="/settings#sec-ai">Settings</a>.</td></tr>
  {% endfor %}
  </tbody>
</table></div>
{% endblock %}