{% extends "base.html" %}
{% block title %}{{ agent.name }} · {{ current_project.name }} — Bento{% endblock %}
{% block content %}
{% set av = agent_avatar(agent.slug) %}
{% set st = agent_status(agent) %}
{% set sr = success_rate(agent) %}

<header class="agent-hero">
  <span class="avatar-xl" style="background: {{ av.color }}">{{ av.abbr }}</span>
  <div class="agent-hero-body">
    <div class="agent-hero-title-row">
      <h1 class="agent-hero-name">{{ agent.name }}</h1>
      <span class="status-pill state-{{ st.state }}"><span class="dot"></span> {{ st.label }}</span>
    </div>
    {% if agent.description %}
    <p class="agent-hero-description">{{ agent.description }}</p>
    {% endif %}
  </div>
  {% if agent.sdk_version %}
  <span class="agent-sdk-pill" title="Bento SDK version">sdk {{ agent.sdk_version }}</span>
  {% endif %}
</header>

<section class="stat-row">
  <div class="stat-card">
    <div class="stat-label">Runs (24h)</div>
    <div class="stat-value">{{ agent.runs_24h }}</div>
    <div class="stat-foot muted">{{ agent.errors_24h }} errored</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Success rate (24h)</div>
    <div class="stat-value">{% if sr is none %}—{% else %}{{ '%.1f%%' % (sr * 100) }}{% endif %}</div>
    <div class="stat-foot muted">{{ agent.runs_24h - agent.errors_24h }} / {{ agent.runs_24h }}</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Inbox</div>
    <div class="stat-value">{{ agent.inbox_pending + agent.inbox_claimed }}</div>
    <div class="stat-foot muted">{{ agent.inbox_pending }} pending · {{ agent.inbox_claimed }} claimed</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Total cost</div>
    <div class="stat-value">{{ fmt_cost(agent.total_cost_usd) }}</div>
    <div class="stat-foot muted">all time</div>
  </div>
</section>

<section class="two-col">
<div class="block">
  <header class="block-header">
    <h2>Triggers <span class="title-count">{{ agent.handlers|length }}</span></h2>
  </header>
  {% if agent.handlers %}
  <ul class="trigger-rows">
    {% for h in agent.handlers %}
    {% set is_active = st.state in ('online', 'working') %}
    <li class="trigger-row">
      <div class="trigger-icon kind-{{ h.kind }}">
        {% if h.kind == 'cron' %}
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
        {% elif h.kind == 'inbox' %}
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.5 5h13a2 2 0 0 1 1.8 1.1l3.7 7.4V19a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-5.5L3.7 6.1A2 2 0 0 1 5.5 5z" transform="translate(1 0)"/></svg>
        {% else %}
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.6 13.5l6.8 4M15.4 6.5l-6.8 4"/></svg>
        {% endif %}
      </div>
      <div class="trigger-body">
        <div class="trigger-title-row">
          <strong class="trigger-kind-label">{{ h.kind|capitalize }}</strong>
        </div>
        <div class="trigger-meta">
          {% if h.kind == 'cron' %}
            <span class="trigger-meta-label">SCHEDULE</span>
            <code class="trigger-meta-value">{{ h.schedule }}</code>
            <span class="trigger-meta-human muted small">{{ humanize_cron(h.schedule) }}</span>
          {% elif h.kind == 'inbox' %}
            <span class="trigger-meta-label">ENDPOINT</span>
            <code class="trigger-meta-value">POST /agents/{{ agent.id }}/inbox/{{ h.source[6:] }}</code>
          {% else %}
            <span class="trigger-meta-label">SOURCE</span>
            <code class="trigger-meta-value">{{ h.source }}</code>
            <span class="trigger-meta-human muted small">via <code>POST /test/trigger</code> with <code>{"source":"{{ h.source }}"}</code></span>
          {% endif %}
        </div>
        {% if h.filter %}
        <div class="trigger-meta">
          <span class="trigger-meta-label">FILTER</span>
          <code class="trigger-meta-value">{{ h.filter | tojson }}</code>
        </div>
        {% endif %}
      </div>
      <label class="toggle trigger-toggle" title="{{ 'Disable trigger' if h.enabled else 'Enable trigger' }}">
        <input type="checkbox" data-trigger-toggle data-agent-id="{{ agent.id }}" data-source="{{ h.source }}" {% if h.enabled %}checked{% endif %}>
        <span class="toggle-track"><span class="toggle-thumb"></span></span>
      </label>
      <button class="btn-test-trigger"
              data-agent-id="{{ agent.id }}"
              data-kind="{{ h.kind }}"
              data-source="{{ h.source }}"
              {% if h.filter %}data-filter='{{ h.filter | tojson | forceescape }}'{% endif %}
              {% if h.example %}data-example='{{ h.example | tojson | forceescape }}'{% endif %}
              {% if h.description %}data-description="{{ h.description }}"{% endif %}
              {% if not is_active %}disabled title="Agent must be online"{% endif %}>
        Test trigger
      </button>
    </li>
    {% endfor %}
  </ul>
  {% else %}
  <p class="empty-state small">No triggers registered. Add <code>@app.webhook</code>, <code>@app.cron</code>, or <code>@app.inbox</code> to your agent.</p>
  {% endif %}
</div>

<div class="block">
    <header class="block-header">
      <h2>Recent Runs <span class="title-count">{{ recent_sessions|length }}</span></h2>
      <a class="btn-view-all" href="/p/{{ current_project.slug }}/sessions">View all <span class="arrow">→</span></a>
    </header>
    {% if recent_sessions %}
    <ul class="mini-list">
      {% for s in recent_sessions %}
      <li>
        <a href="/sessions/{{ s.id }}" class="mini-row mini-row-noicon">
          <div class="mini-body">
            <div class="mini-primary">{{ session_title(s) }}</div>
            <div class="mini-secondary muted small">
              {{ fmt_duration_ms(s.duration_ms) }}{% if s.model %} · <code>{{ s.model }}</code>{% endif %}{% if s.cost_usd is not none %} · {{ fmt_cost(s.cost_usd) }}{% endif %}
            </div>
          </div>
          <div class="mini-aside">
            {% if s.status == 'running' %}<span class="badge working">working</span>
            {% elif s.reason == 'errored' %}<span class="badge error">errored</span>
            {% elif s.reason == 'cancelled' %}<span class="badge cancelled">cancelled</span>
            {% else %}<span class="badge done">done</span>{% endif %}
            <time class="mini-time muted small rel-time" datetime="{{ s.created_at }}" title="{{ fmt_ts(s.created_at) }}">{{ fmt_ago(s.created_at) }}</time>
          </div>
        </a>
      </li>
      {% endfor %}
    </ul>
    {% else %}
    <p class="empty-state small">no runs yet</p>
    {% endif %}
</div>
</section>

<section class="block deploy-block">
  <header class="block-header">
    <h2>Source</h2>
    <span class="deploy-status deploy-status-{{ agent.deploy_status or 'idle' }}">
      {{ (agent.deploy_status or 'idle')|upper }}
    </span>
  </header>

  <div class="deploy-config">
    <label class="deploy-field">
      <span>GitHub repo</span>
      <input class="deploy-input" id="deploy-repo"
             placeholder="owner/name (e.g. stef/melvin)"
             value="{{ agent.github_repo or '' }}"
             data-agent-id="{{ agent.id }}">
    </label>
    <label class="deploy-field">
      <span>Branch / tag</span>
      <input class="deploy-input" id="deploy-ref"
             placeholder="main"
             value="{{ agent.github_ref or 'main' }}">
    </label>
    <button class="btn-secondary" id="btn-deploy-save">Save</button>
  </div>

  <div class="deploy-status-row">
    {% if agent.last_deployed_sha %}
    <span class="muted small">
      Live: <code>{{ agent.github_ref or 'main' }}</code>
      @ <code class="mono">{{ agent.last_deployed_sha[:8] }}</code>
    </span>
    {% else %}
    <span class="muted small">Not deployed yet.</span>
    {% endif %}
    <button class="btn-primary" id="btn-deploy"
            data-agent-id="{{ agent.id }}"
            {% if not agent.github_repo %}disabled{% endif %}>
      Deploy
    </button>
  </div>

  {% if agent.deploy_log %}
  <details class="deploy-log-details">
    <summary class="muted small">Last deploy log</summary>
    <pre class="deploy-log"><code>{{ agent.deploy_log }}</code></pre>
  </details>
  {% endif %}

  <p class="muted small" style="margin-top: 8px;">
    Set <code>BENTO_GITHUB_TOKEN</code> on the hub to deploy private repos.
    The token is read only by the hub's deploy step; agent containers
    never see it.
  </p>
</section>

<script>
(function() {
  const repoInput = document.getElementById("deploy-repo");
  if (!repoInput) return;
  const refInput = document.getElementById("deploy-ref");
  const saveBtn = document.getElementById("btn-deploy-save");
  const deployBtn = document.getElementById("btn-deploy");
  const agentId = repoInput.dataset.agentId;

  saveBtn.addEventListener("click", async () => {
    saveBtn.disabled = true;
    try {
      const r = await fetch(`/api/agents/${encodeURIComponent(agentId)}/repo`, {
        method: "PUT",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({
          repo: repoInput.value.trim() || null,
          ref: refInput.value.trim() || "main",
        }),
      });
      if (!r.ok) { alert((await r.json()).detail || r.statusText); return; }
      location.reload();
    } finally {
      saveBtn.disabled = false;
    }
  });

  deployBtn.addEventListener("click", async () => {
    if (deployBtn.disabled) return;
    deployBtn.disabled = true;
    deployBtn.textContent = "Deploying…";
    try {
      const r = await fetch(`/api/agents/${encodeURIComponent(agentId)}/deploy`, {
        method: "POST",
      });
      if (!r.ok) { alert((await r.json()).detail || r.statusText); return; }
      location.reload();
    } finally {
      deployBtn.disabled = false;
      deployBtn.textContent = "Deploy";
    }
  });
})();
</script>

<section class="block">
  <header class="block-header">
    <h2>Runtime overrides</h2>
    <button class="btn-secondary" id="btn-runtime-reset" data-agent-id="{{ agent.id }}"
            {% if not agent.runtime_overrides %}hidden{% endif %}>Reset</button>
  </header>
  <p class="muted small" style="margin: 0 0 12px;">
    Saves an env var into the container — your code reads it with
    <code>os.getenv("BENTO_MAX_TURNS")</code>. Same idiom as secrets. Container restarts on save.
  </p>
  <div class="runtime-override-row">
    <label class="runtime-override-label" for="override-max-turns"><code>BENTO_MAX_TURNS</code></label>
    <input class="runtime-override-input" id="override-max-turns" type="number" min="1" max="100"
           value="{{ agent.runtime_overrides.max_turns or '' }}" placeholder="(unset)"
           data-agent-id="{{ agent.id }}">
    <button class="btn-primary" id="btn-runtime-save" data-agent-id="{{ agent.id }}">Save</button>
    <span class="runtime-override-status muted small" id="runtime-override-status"></span>
  </div>
</section>

<section class="block">
  <header class="block-header">
    <h2>Secrets <span class="title-count">{{ secrets|length }}</span></h2>
    <button class="btn-primary" id="btn-add-secret" data-agent-id="{{ agent.id }}">+ Add secret</button>
  </header>
  {% if secrets %}
  <ul class="secret-list">
    {% for s in secrets %}
    <li class="secret-item">
      <div class="secret-body">
        <code class="secret-key">{{ s.key }}</code>
        <code class="secret-value muted">{{ s.masked_value }}</code>
        <span class="muted small">updated <time class="rel-time" datetime="{{ s.updated_at }}">{{ fmt_ago(s.updated_at) }}</time></span>
      </div>
      <button class="btn-secondary btn-danger btn-secret-delete"
              data-agent-id="{{ agent.id }}"
              data-key="{{ s.key }}">Delete</button>
    </li>
    {% endfor %}
  </ul>
  {% else %}
  <p class="empty-state small">No secrets yet. Add API keys or other env vars your agent needs (e.g. <code>ANTHROPIC_API_KEY</code>). Values are encrypted at rest and injected as env vars into the runtime.</p>
  {% endif %}
</section>

<script>
(function() {
  const saveBtn = document.getElementById("btn-runtime-save");
  if (!saveBtn) return;
  const resetBtn = document.getElementById("btn-runtime-reset");
  const input = document.getElementById("override-max-turns");
  const status = document.getElementById("runtime-override-status");
  const agentId = saveBtn.dataset.agentId;

  async function send(body) {
    status.textContent = "Saving…";
    try {
      const r = await fetch(`/api/agents/${encodeURIComponent(agentId)}/runtime-overrides`, {
        method: "PUT",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify(body),
      });
      if (!r.ok) {
        const detail = (await r.json().catch(() => ({}))).detail || r.statusText;
        status.textContent = `Failed: ${detail}`;
        return;
      }
      status.textContent = "Saved · container restarted";
      setTimeout(() => location.reload(), 600);
    } catch (e) {
      status.textContent = `Network error: ${e.message}`;
    }
  }

  saveBtn.addEventListener("click", () => {
    const raw = input.value.trim();
    send({max_turns: raw ? Number(raw) : null});
  });
  resetBtn?.addEventListener("click", () => send({}));
})();
</script>

<dialog class="trigger-modal" id="add-secret-modal">
  <header class="trigger-modal-head">
    <h3>Add secret</h3>
    <button class="dialog-close" id="add-secret-close" aria-label="Close">×</button>
  </header>
  <div class="trigger-modal-body">
    <label class="trigger-modal-field-label" for="add-secret-key">Key</label>
    <input class="trigger-modal-input" id="add-secret-key" placeholder="ANTHROPIC_API_KEY" autocomplete="off">
    <label class="trigger-modal-field-label" for="add-secret-value">Value</label>
    <input class="trigger-modal-input" id="add-secret-value" type="password" placeholder="sk-ant-..." autocomplete="off">
    <p class="muted small" style="margin-top: 8px">Stored encrypted. Injected into the runtime as an environment variable; the agent restarts to pick it up.</p>
    <p class="trigger-modal-error error-text" id="add-secret-error" hidden></p>
  </div>
  <footer class="trigger-modal-foot">
    <button class="btn-secondary" id="add-secret-cancel">Cancel</button>
    <button class="trigger-modal-submit" id="add-secret-submit">Save</button>
  </footer>
</dialog>

<script>
(function() {
  const openBtn = document.getElementById("btn-add-secret");
  if (!openBtn) return;
  const agentId = openBtn.dataset.agentId;
  const modal = document.getElementById("add-secret-modal");
  const keyInput = document.getElementById("add-secret-key");
  const valueInput = document.getElementById("add-secret-value");
  const errorEl = document.getElementById("add-secret-error");

  function open() {
    keyInput.value = "";
    valueInput.value = "";
    errorEl.hidden = true;
    modal.showModal();
    keyInput.focus();
  }
  function close() { modal.close(); }

  openBtn.addEventListener("click", open);
  document.getElementById("add-secret-cancel").addEventListener("click", close);
  document.getElementById("add-secret-close").addEventListener("click", close);
  modal.addEventListener("click", (e) => {
    const r = modal.getBoundingClientRect();
    const inside = e.clientX >= r.left && e.clientX <= r.right
                && e.clientY >= r.top && e.clientY <= r.bottom;
    if (!inside) close();
  });

  document.getElementById("add-secret-submit").addEventListener("click", async () => {
    const key = keyInput.value.trim();
    const value = valueInput.value;
    if (!key) { errorEl.hidden = false; errorEl.textContent = "Key is required"; return; }
    if (!value) { errorEl.hidden = false; errorEl.textContent = "Value is required"; return; }
    try {
      const r = await fetch(`/api/agents/${encodeURIComponent(agentId)}/secrets`, {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({key, value}),
      });
      if (!r.ok) {
        errorEl.hidden = false;
        errorEl.textContent = (await r.json()).detail || r.statusText;
        return;
      }
      close();
      location.reload();
    } catch (e) {
      errorEl.hidden = false;
      errorEl.textContent = "Network error: " + e.message;
    }
  });

  document.querySelectorAll(".btn-secret-delete").forEach(btn => {
    btn.addEventListener("click", async () => {
      const {agentId: aid, key} = btn.dataset;
      if (!confirm(`Delete secret '${key}'? The agent will restart.`)) return;
      try {
        const r = await fetch(`/api/agents/${encodeURIComponent(aid)}/secrets/${encodeURIComponent(key)}`, {
          method: "DELETE",
        });
        if (!r.ok) { alert((await r.json()).detail || r.statusText); return; }
        location.reload();
      } catch (e) { alert("Network error: " + e.message); }
    });
  });
})();
</script>

<dialog class="trigger-modal" id="trigger-modal">
  <header class="trigger-modal-head">
    <h3 id="trigger-modal-title">Test trigger</h3>
    <button class="dialog-close" id="trigger-modal-close" aria-label="Close">×</button>
  </header>
  <div class="trigger-modal-body">
    <p class="trigger-modal-description muted small" id="trigger-modal-description" hidden></p>
    <dl class="kv-list trigger-modal-info">
      <dt>Source</dt><dd><code id="trigger-modal-source"></code></dd>
      <dt id="trigger-modal-filter-label" hidden>Filter</dt>
      <dd id="trigger-modal-filter-wrap" hidden><code id="trigger-modal-filter"></code></dd>
    </dl>
    <label class="trigger-modal-field-label" for="trigger-modal-payload">Payload (JSON)</label>
    <textarea id="trigger-modal-payload" class="trigger-modal-textarea" spellcheck="false" rows="10"></textarea>
    <p class="trigger-modal-error error-text" id="trigger-modal-error" hidden></p>
  </div>
  <footer class="trigger-modal-foot">
    <button class="btn-secondary" id="trigger-modal-cancel">Cancel</button>
    <button class="trigger-modal-submit" id="trigger-modal-submit">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
      Fire trigger
    </button>
  </footer>
</dialog>
<script src="/static/triggers.js"></script>

{% endblock %}