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

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

  <div 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>

<!-- Edit modal (reuse agent modal markup with inline) -->
<div class="modal-overlay hidden" id="agent-modal">
  <div class="modal" style="max-width:560px;width:100%">
    <h3 id="agent-modal-title">Edit Agent</h3>
    <input type="hidden" id="a-id">

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
      <div class="form-group">
        <label>Name</label>
        <input type="text" id="a-name" class="form-input" required>
      </div>
      <div class="form-group">
        <label>Model</label>
        <select id="a-model" class="form-input"></select>
      </div>
    </div>

    <div class="form-group">
      <label>Description</label>
      <input type="text" id="a-desc" class="form-input">
    </div>

    <div class="form-group">
      <label>Prompt</label>
      <textarea id="a-prompt" class="form-input" rows="5" style="resize:vertical"></textarea>
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
      <div class="form-group">
        <label>Schedule</label>
        <input type="text" id="a-schedule" class="form-input"
               placeholder="0 8 * * *" oninput="updateAgentCronPreview(this.value)">
        <div id="a-cron-preview" style="font-size:11px;color:var(--text-dim);margin-top:4px"></div>
      </div>
      <div class="form-group" style="display:flex;flex-direction:column;justify-content:center;gap:8px;padding-top:18px">
        <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
          <input type="checkbox" id="a-subagents">
          <span>Can create sub-agents</span>
        </label>
        <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
          <input type="checkbox" id="a-enabled" checked>
          <span>Enabled</span>
        </label>
      </div>
    </div>

    <div class="modal-buttons">
      <button class="btn btn-ghost" onclick="closeAgentModal()">Cancel</button>
      <button class="btn btn-primary" onclick="saveAgentAndReload()">Save</button>
    </div>
  </div>
</div>
{% endblock %}

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