{% extends "base.html" %}
{% block title %}Inbox · {{ current_project.name }} — Bento{% endblock %}
{% block content %}
{% set status_map = {
    'pending':   {'label': 'Unprocessed', 'badge': 'unprocessed'},
    'claimed':   {'label': 'Processing',  'badge': 'processing'},
    'completed': {'label': 'Processed',   'badge': 'processed'},
    'failed':    {'label': 'Failed',      'badge': 'failed'},
} %}

<header class="page-header">
  <h1 class="page-title">Inbox <span class="title-count">{{ counts.all }}</span></h1>
</header>

<div class="filter-tabs">
  {% set filters = [
      ('all',          'All',          counts.all),
      ('unprocessed',  'Unprocessed',  counts.pending),
      ('processing',   'Processing',   counts.claimed),
      ('processed',    'Processed',    counts.completed),
      ('failed',       'Failed',       counts.failed),
  ] %}
  {% for key, label, n in filters %}
    <a class="filter-tab {% if active_filter == key %}active{% endif %}"
       href="/p/{{ current_project.slug }}/inbox?filter={{ key }}">
      {{ label }} <span class="filter-count">{{ n }}</span>
    </a>
  {% endfor %}
</div>

<div class="inbox-layout">
  <div class="inbox-list">
    {% if items %}
    <ul class="mini-list">
      {% for i in items %}
        {% set kind = 'cron' if i.source.startswith('cron') else ('inbox' if i.source.startswith('inbox') else 'webhook') %}
        {% set st = status_map.get(i.status, {'label': i.status, 'badge': 'done'}) %}
        <li>
          <a class="mini-row {% if selected and selected.id == i.id %}selected{% endif %}"
             href="/p/{{ current_project.slug }}/inbox?filter={{ active_filter }}&id={{ i.id }}">
            <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">
              <span class="badge {{ st.badge }}">{{ st.label }}</span>
              <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 items match this filter.</p>
    {% endif %}

    {% if total_pages > 1 %}
    <nav class="pagination">
      <span class="pagination-info muted small">
        Showing {{ ((page - 1) * page_size) + 1 }}–{{ ((page - 1) * page_size) + items|length }} of {{ total }}
      </span>
      <div class="pagination-controls">
        {% if page > 1 %}
          <a class="pagination-btn" href="?filter={{ active_filter }}&page={{ page - 1 }}" aria-label="Previous page">←</a>
        {% else %}
          <span class="pagination-btn disabled">←</span>
        {% endif %}
        <span class="pagination-page">Page {{ page }} of {{ total_pages }}</span>
        {% if page < total_pages %}
          <a class="pagination-btn" href="?filter={{ active_filter }}&page={{ page + 1 }}" aria-label="Next page">→</a>
        {% else %}
          <span class="pagination-btn disabled">→</span>
        {% endif %}
      </div>
    </nav>
    {% endif %}
  </div>

  <aside class="inbox-detail">
    {% if selected %}
    {% set kind = 'cron' if selected.source.startswith('cron') else ('inbox' if selected.source.startswith('inbox') else 'webhook') %}
    {% set st = status_map.get(selected.status, {'label': selected.status, 'badge': 'done'}) %}
    <div class="detail-card">
      <header class="detail-card-head">
        <div>
          <div class="detail-title">{{ selected.source }}</div>
          <div class="detail-subtitle muted small">Received <time class="rel-time" datetime="{{ selected.created_at }}">{{ fmt_ago(selected.created_at) }}</time></div>
        </div>
        <span class="badge {{ st.badge }}">{{ st.label }}</span>
      </header>

      <div class="tabs" data-tabs="inbox-detail">
        <button class="tab active" data-tab="details">Details</button>
        <button class="tab" data-tab="payload">Payload</button>
      </div>

      <div class="tab-pane active" data-pane="details">
        <dl class="kv-list">
          <dt>Agent</dt>
          <dd>
            {% set av = agent_avatar(selected.agent_slug) %}
            <a href="/p/{{ current_project.slug }}/agents/{{ selected.agent_slug }}" class="agent-pill">
              <span class="avatar-mini" style="background: {{ av.color }}">{{ av.abbr }}</span>
              {{ selected.agent_name }}
            </a>
          </dd>
          <dt>Source</dt>
          <dd>{{ kind|capitalize }}</dd>
          {% if selected.handler_name %}
          <dt>Handler</dt>
          <dd><code>{{ selected.handler_name }}</code></dd>
          {% endif %}
          <dt>Event ID</dt>
          <dd><code>#{{ selected.id }}</code></dd>
          <dt>Created</dt>
          <dd>{{ fmt_ts(selected.created_at) }}</dd>
          {% if selected.claimed_at %}
          <dt>Claimed</dt>
          <dd>{{ fmt_ts(selected.claimed_at) }}</dd>
          {% endif %}
          {% if selected.completed_at %}
          <dt>Completed</dt>
          <dd>{{ fmt_ts(selected.completed_at) }}</dd>
          {% endif %}
          {% if selected.session_id %}
          <dt>Session</dt>
          <dd><a class="link mono" href="/sessions/{{ selected.session_id }}">{{ selected.session_id[:12] }}…</a></dd>
          {% endif %}
          {% if selected.error %}
          <dt>Error</dt>
          <dd class="error-text">{{ selected.error }}</dd>
          {% endif %}
        </dl>
      </div>

      <div class="tab-pane" data-pane="payload">
        <pre class="payload">{{ selected.payload | tojson(indent=2) }}</pre>
      </div>
    </div>
    {% else %}
    <div class="detail-card empty-detail">
      <p class="muted">Select an item to inspect.</p>
    </div>
    {% endif %}
  </aside>
</div>

<script>
(function() {
  const list = document.querySelector('.inbox-list');
  const detailWrap = document.querySelector('.inbox-detail');
  if (!list || !detailWrap) return;

  function initDetailTabs(root) {
    root.querySelectorAll('[data-tabs]').forEach(strip => {
      strip.querySelectorAll('.tab').forEach(btn => {
        btn.addEventListener('click', () => {
          const target = btn.dataset.tab;
          strip.querySelectorAll('.tab').forEach(b => b.classList.toggle('active', b === btn));
          const card = strip.closest('.detail-card');
          card.querySelectorAll('.tab-pane').forEach(p => p.classList.toggle('active', p.dataset.pane === target));
        });
      });
    });
  }
  initDetailTabs(detailWrap);

  async function loadDetail(href, row) {
    history.pushState(null, '', href);
    document.querySelectorAll('.inbox-list .mini-row.selected').forEach(r => r.classList.remove('selected'));
    if (row) row.classList.add('selected');
    try {
      const res = await fetch(href, { headers: { 'X-Bento-Refresh': '1' } });
      if (!res.ok) return;
      const html = await res.text();
      const doc = new DOMParser().parseFromString(html, 'text/html');
      const newDetail = doc.querySelector('.inbox-detail');
      if (newDetail) {
        detailWrap.innerHTML = newDetail.innerHTML;
        initDetailTabs(detailWrap);
      }
    } catch (e) { console.error('inbox detail load failed', e); }
  }

  list.addEventListener('click', (e) => {
    const row = e.target.closest('.mini-row[href]');
    if (!row) return;
    e.preventDefault();
    loadDetail(row.getAttribute('href'), row);
  });

  window.addEventListener('popstate', () => {
    // Back/forward — re-sync the detail-card with the current URL.
    const url = new URL(location.href);
    const id = url.searchParams.get('id');
    const row = id
      ? document.querySelector(`.inbox-list .mini-row[href*="id=${id}"]`)
      : null;
    loadDetail(location.href, row);
  });
})();
</script>
{% endblock %}