{% extends "base.html" %}
{% block title %}{{ agent_name }} — Agent Detail{% endblock %}

{% block content %}
<div class="page" id="agent-detail-container">

  <div class="agent-detail-header" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:24px">
    <div>
      <a href="/agents" onclick="event.preventDefault();navigateTo('/agents')"
         style="color:var(--text-dim);font-size:13px;text-decoration:none">← Agents</a>
      <h1 id="d-name" style="margin-top:8px;margin-bottom:4px">Loading…</h1>
      <div id="d-description" style="color:var(--text-dim);font-size:13px"></div>
    </div>
    <div style="display:flex;gap:8px">
      <button class="btn btn-ghost" onclick="editCurrentAgent()">Edit</button>
      <button class="btn btn-primary" onclick="runCurrentAgent()">▶ Run now</button>
    </div>
  </div>

  <!-- Metadata grid -->
  <section style="
    display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:16px;margin-bottom:28px
  ">
    <div class="meta-card">
      <div class="meta-label">Model</div>
      <div id="d-model" class="meta-value"></div>
    </div>
    <div class="meta-card">
      <div class="meta-label">Schedule</div>
      <div id="d-schedule" class="meta-value"></div>
    </div>
    <div class="meta-card">
      <div class="meta-label">Sub-agents</div>
      <div id="d-subagents" class="meta-value"></div>
    </div>
    <div class="meta-card">
      <div class="meta-label">Created by</div>
      <div id="d-created-by" class="meta-value"></div>
    </div>
    <div class="meta-card">
      <div class="meta-label">Created at</div>
      <div id="d-created-at" class="meta-value"></div>
    </div>
  </section>

  <!-- Prompt -->
  <section style="margin-bottom:28px">
    <h2 style="font-size:14px;color:var(--text-dim);font-weight:500;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px">
      Prompt
    </h2>
    <pre id="d-prompt" style="
      background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
      padding:12px;font-family:inherit;font-size:13px;white-space:pre-wrap;margin:0
    "></pre>
  </section>

  <!-- Token summary -->
  <section style="margin-bottom:28px">
    <h2 style="font-size:14px;color:var(--text-dim);font-weight:500;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px">
      Token Usage
    </h2>
    <div id="d-total-tokens" style="font-size:13px;color:var(--text-dim)">Loading…</div>
  </section>

  <!-- Run history -->
  <section>
    <h2 style="font-size:14px;color:var(--text-dim);font-weight:500;margin-bottom:12px;text-transform:uppercase;letter-spacing:0.5px">
      Run History
    </h2>
    <div class="table-wrap">
      <table id="detail-runs-table">
        <thead>
          <tr>
            <th>Run ID</th>
            <th>Started</th>
            <th>Duration</th>
            <th>Status</th>
            <th>Input tokens</th>
            <th>Output tokens</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr><td colspan="7" style="text-align:center;color:var(--text-dim)">Loading…</td></tr>
        </tbody>
      </table>
    </div>
  </section>

</div>

<!-- Run detail modal -->
<div class="modal-overlay" id="run-detail-modal" style="display:none" onclick="if(event.target===this)closeRunDetail()">
  <div class="modal" style="max-width:680px;width:100%;position:relative">
    <button onclick="closeRunDetail()" style="position:absolute;top:14px;right:14px;background:none;border:none;color:var(--text-dim);font-size:18px;cursor:pointer;line-height:1;padding:2px 6px" title="Close">✕</button>
    <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-right:32px">
      <h3 style="margin:0">Run Detail</h3>
      <span id="rd-status-badge" class="badge"></span>
      <span id="rd-meta" style="font-size:12px;color:var(--text-dim)"></span>
    </div>
    <div class="modal-body" style="padding:0 0 16px">
      <div id="rd-error" style="display:none;margin-bottom:16px;padding:10px 14px;background:rgba(220,60,60,0.1);border:1px solid rgba(220,60,60,0.3);border-radius:var(--radius);color:var(--danger);font-size:13px;white-space:pre-wrap"></div>
      <div id="rd-result-wrap">
        <div style="font-size:12px;color:var(--text-dim);margin-bottom:6px;font-weight:500;text-transform:uppercase;letter-spacing:0.5px">Result</div>
        <pre id="rd-result" style="background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:12px;font-family:inherit;font-size:13px;white-space:pre-wrap;margin:0;max-height:400px;overflow-y:auto"></pre>
      </div>
    </div>
    <div style="display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--border)">
      <button id="rd-audit-btn" class="btn btn-ghost" onclick="closeRunDetail();navigateTo(document.getElementById('rd-audit-link').href)">View in Audit Log</button>
      <button class="btn btn-ghost" onclick="closeRunDetail()">Close</button>
    </div>
    <a id="rd-audit-link" href="/audit" style="display:none"></a>
  </div>
</div>

<!-- Fullscreen prompt editor -->
<div id="prompt-editor-overlay" style="
  display:none;position:fixed;inset:0;z-index:1001;
  background:var(--bg);flex-direction:column;
">
  <!-- Header bar -->
  <div style="
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 20px;border-bottom:1px solid var(--border);
    background:var(--bg2);flex-shrink:0;gap:12px
  ">
    <div style="display:flex;align-items:center;gap:12px;min-width:0">
      <span style="font-size:13px;color:var(--text-dim);white-space:nowrap">Editing prompt —</span>
      <span id="pe-agent-name" style="font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"></span>
    </div>
    <div style="display:flex;align-items:center;gap:8px;flex-shrink:0">
      <span class="pe-kbd-hint" style="font-size:11px;color:var(--text-dim)">Ctrl+S to save · Esc to cancel</span>
      <button class="btn btn-ghost" onclick="closePromptEditor()">Cancel</button>
      <button class="btn btn-primary" id="pe-save-btn" onclick="savePromptEditor()">Save</button>
    </div>
  </div>
  <!-- Editor -->
  <textarea id="pe-textarea" spellcheck="false" style="
    flex:1;width:100%;box-sizing:border-box;resize:none;border:none;outline:none;
    background:var(--bg);color:var(--text);font-family:var(--mono);font-size:13px;
    line-height:1.7;padding:24px 32px;
  "></textarea>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
  window.AGENT_ID = "{{ agent_id }}";
</script>
{% endblock %}
