{% extends "base.html" %}
{% block title %}{{ current_project.name }} · Overview — Bento{% endblock %}
{% block content %}
{% set health = health_status(overview) %}

<header class="page-header">
  <h1 class="page-title">Overview</h1>
</header>

<section class="stat-row">
  <div class="stat-card">
    <div class="stat-label">Inbox unprocessed</div>
    <div class="stat-value">{{ overview.inbox_unprocessed }}</div>
    <div class="stat-foot muted">pending + claimed</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Runs (24h)</div>
    <div class="stat-value">{{ overview.runs_24h }}</div>
    <div class="stat-foot muted">{{ overview.errors_24h }} errored</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Error rate (24h)</div>
    <div class="stat-value">{{ '%.1f%%' % (overview.error_rate * 100) }}</div>
    <div class="stat-foot muted">{{ overview.errors_24h }} / {{ overview.runs_24h }}</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Total cost</div>
    <div class="stat-value">{{ fmt_cost(overview.total_cost_usd) }}</div>
    <div class="stat-foot muted">all time</div>
  </div>
</section>

<section class="layout-agents-health">
  <div>
    <header class="block-header agents-grid-head">
      <h2>Agents <span class="title-count">{{ agents|length }}</span></h2>
    </header>
    {% if agents %}
    <div class="agents-grid">
      {% for a in agents %}
        {% set av = agent_avatar(a.slug) %}
        {% set st = agent_status(a) %}
        <a class="agent-card" href="/p/{{ current_project.slug }}/agents/{{ a.slug }}">
          <header class="agent-card-head">
            <span class="avatar-lg" style="background: {{ av.color }}">{{ av.abbr }}</span>
            <div>
              <div class="agent-card-name">{{ a.name }}</div>
              <div class="status-pill state-{{ st.state }}">
                <span class="dot"></span> {{ st.label }}
              </div>
            </div>
          </header>
          <div class="agent-card-detail muted small">{{ st.detail or '&nbsp;'|safe }}</div>
          <div class="agent-card-stats">
            <div>
              <div class="muted small">INBOX</div>
              <div class="mono">{{ a.inbox_pending + a.inbox_claimed }}{% if a.inbox_pending %} <span class="muted">({{ a.inbox_pending }} pending)</span>{% endif %}</div>
            </div>
            <div>
              <div class="muted small">RUNS 24h</div>
              <div class="mono">{{ a.runs_24h }}{% if a.errors_24h %} <span class="error-text">· {{ a.errors_24h }} err</span>{% endif %}</div>
            </div>
          </div>
        </a>
      {% endfor %}
    </div>
    {% else %}
    <p class="empty-state">No agents in <strong>{{ current_project.name }}</strong> yet. Run <code>bento dev</code> in your agent directory with <code>project="{{ current_project.slug }}"</code> to register one.</p>
    {% endif %}
  </div>

  <aside class="health-card">
    <header class="health-head">
      <h2>System Health</h2>
      <span class="health-status-pill state-{{ health.state }}">
        <svg class="heart-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 21s-7-4.5-9.5-9C.5 8 3 4 6.5 4c2 0 3.5 1 5.5 3 2-2 3.5-3 5.5-3C21 4 23.5 8 21.5 12 19 16.5 12 21 12 21z"/></svg>
        {{ health.label }}
      </span>
    </header>

    {% set sr_pct = (1 - overview.error_rate) * 100 if overview.runs_24h else 0 %}

    <div class="health-row with-bar">
      <div class="label">Success Rate</div>
      <div class="bar"><div class="bar-fill" style="width: {{ sr_pct }}%"></div></div>
      <div class="value">{% if overview.runs_24h %}{{ '%.1f%%' % sr_pct }}{% else %}—{% endif %}</div>
    </div>

    <div class="health-row">
      <div class="label">Avg Response Time</div>
      <div class="value">{{ fmt_duration_ms(overview.avg_duration_ms) }}</div>
    </div>

    <div class="health-row">
      <div class="label">Agents Online</div>
      <div class="value {% if overview.agents_online == overview.agents_total and overview.agents_total > 0 %}value-good{% endif %}">
        {{ overview.agents_online }} / {{ overview.agents_total }}
      </div>
    </div>

    <div class="health-row">
      <div class="label">Events Processed</div>
      <div class="value">{{ overview.runs_24h }}</div>
    </div>

    <div class="health-row">
      <div class="label">Errors (24h)</div>
      <div class="value {% if overview.errors_24h > 0 %}value-warn{% endif %}">{{ overview.errors_24h }}</div>
    </div>
  </aside>
</section>

<section class="two-col">
  <div class="block">
    <header class="block-header">
      <h2>Inbox</h2>
      <a class="btn-view-all" href="/p/{{ current_project.slug }}/inbox">View all <span class="arrow">→</span></a>
    </header>
    {% if recent_inbox %}
    <ul class="mini-list">
      {% for i in recent_inbox %}
      {% set kind = 'cron' if i.source.startswith('cron') else ('inbox' if i.source.startswith('inbox') else 'webhook') %}
      <li>
        <a {% if i.session_id %}href="/sessions/{{ i.session_id }}"{% endif %} class="mini-row">
          <div class="mini-icon kind-{{ kind }}">
            {% if 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 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="mini-body">
            <div class="mini-primary">{{ i.source }}</div>
            <div class="mini-secondary muted small">#{{ i.id }} · {{ i.agent_name }}</div>
          </div>
          <div class="mini-aside">
            {% if i.status == 'pending' %}<span class="badge cancelled">pending</span>
            {% elif i.status == 'claimed' %}<span class="badge processing">claimed</span>
            {% elif i.status == 'failed' %}<span class="badge error">failed</span>
            {% else %}<span class="badge done">done</span>{% endif %}
            <time class="mini-time muted small rel-time" datetime="{{ i.created_at }}">{{ fmt_ago(i.created_at) }}</time>
          </div>
        </a>
      </li>
      {% endfor %}
    </ul>
    {% else %}
    <p class="empty-state small">no inbox items yet</p>
    {% endif %}
  </div>

  <div class="block">
    <header class="block-header">
      <h2>Sessions</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 %}
      {% set sav = agent_avatar(s.agent_slug or '?') %}
      <li>
        <a href="/sessions/{{ s.id }}" class="mini-row">
          <span class="avatar mini-icon-avatar" style="background: {{ sav.color }}">{{ sav.abbr }}</span>
          <div class="mini-body">
            <div class="mini-primary">{{ session_title(s, 60) }}</div>
            <div class="mini-secondary muted small">{{ s.agent_name or 'unknown' }} · {{ fmt_duration_ms(s.duration_ms) }}</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>
            {% else %}<span class="badge done">done</span>{% endif %}
            <time class="mini-time muted small rel-time" datetime="{{ s.created_at }}">{{ fmt_ago(s.created_at) }}</time>
          </div>
        </a>
      </li>
      {% endfor %}
    </ul>
    {% else %}
    <p class="empty-state small">no sessions yet</p>
    {% endif %}
  </div>
</section>

{% endblock %}