{% extends "base.html" %}
{% set active = "strategos" %}
{% block title %}HITL Queue — Strategos{% endblock %}

{% block content %}
<div class="page-header page-header--compact">
    <h1>HITL Queue <span style="font-size:0.65em;color:var(--text-secondary);font-weight:400;">Human-in-the-Loop decisions</span></h1>
    <a href="/strategos" style="font-size:.85rem;color:var(--text-secondary)">&larr; Back to Strategos</a>
</div>

<div style="display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem">
    {% for s in ['pending','resolved'] %}
    <a href="/strategos/hitl?status={{ s }}"
       style="padding:.35rem .9rem;border-radius:4px;font-size:.875rem;text-decoration:none;
              background:{% if s == selected_status %}var(--accent-blue){% else %}var(--bg-secondary){% endif %};
              color:{% if s == selected_status %}#fff{% else %}var(--text-secondary){% endif %};
              border:1px solid var(--border-color)">
        {{ s|title }}
    </a>
    {% endfor %}

    {% if selected_status == 'pending' and items %}
    <div style="margin-left:auto;display:flex;gap:.5rem">
        <button onclick="bulkResolve('approve')"
                style="padding:.3rem .75rem;border-radius:4px;font-size:.8rem;cursor:pointer;
                       border:1px solid var(--border-color);background:rgba(16,185,129,.15);color:#10b981">
            Approve All
        </button>
        <button onclick="bulkResolve('reject')"
                style="padding:.3rem .75rem;border-radius:4px;font-size:.8rem;cursor:pointer;
                       border:1px solid var(--border-color);background:rgba(233,69,96,.15);color:#e94560">
            Reject All
        </button>
        <button onclick="bulkResolve('escalate')"
                style="padding:.3rem .75rem;border-radius:4px;font-size:.8rem;cursor:pointer;
                       border:1px solid var(--border-color);background:rgba(245,158,11,.15);color:#f59e0b">
            Escalate All
        </button>
        <button onclick="bulkDelete()"
                style="padding:.3rem .75rem;border-radius:4px;font-size:.8rem;cursor:pointer;
                       border:1px solid var(--border-color);background:rgba(156,163,175,.15);color:var(--text-secondary)">
            Delete All
        </button>
    </div>
    {% endif %}
</div>

<div style="display:flex;flex-direction:column;gap:.75rem">
    {% for item in items %}
    <div class="card" style="display:flex;justify-content:space-between;align-items:flex-start;gap:1rem">
        <div style="flex:1;min-width:0">
            <div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem">
                <span style="font-weight:600;font-size:.9rem">{{ item.item_type|replace('_',' ')|title }}</span>
                <span style="font-size:.75rem;color:var(--text-muted)">{{ item.id[:8] }}…</span>
            </div>
            {% if item.payload %}
            <pre style="font-size:.78rem;color:var(--text-secondary);margin:0;white-space:pre-wrap;word-break:break-all;max-height:80px;overflow:auto">{{ item.payload }}</pre>
            {% endif %}
            <div style="font-size:.78rem;color:var(--text-muted);margin-top:.5rem">Created {{ (item.created_at or '')[:16] }}</div>
            {% if item.decision %}
            <div style="font-size:.78rem;margin-top:.25rem">
                Decision: <strong style="color:#10b981">{{ item.decision }}</strong> by {{ item.resolved_by or '—' }}
                at {{ (item.resolved_at or '')[:16] }}
            </div>
            {% endif %}
        </div>
        {% if item.status == 'pending' %}
        <div style="display:flex;gap:.5rem;flex-shrink:0">
            {% for d in decision_types %}
            <button onclick="resolveHITL('{{ item.id }}','{{ d }}')"
                    style="padding:.3rem .75rem;border-radius:4px;font-size:.8rem;cursor:pointer;border:1px solid var(--border-color);
                           background:{% if d=='approve' %}rgba(16,185,129,.15){% elif d=='reject' %}rgba(233,69,96,.15){% elif d=='escalate' %}rgba(245,158,11,.15){% else %}var(--bg-secondary){% endif %};
                           color:{% if d=='approve' %}#10b981{% elif d=='reject' %}#e94560{% elif d=='escalate' %}#f59e0b{% else %}var(--text-secondary){% endif %}">
                {{ d|title }}
            </button>
            {% endfor %}
        </div>
        {% else %}
        <span style="padding:.2rem .6rem;border-radius:4px;font-size:.78rem;background:var(--bg-secondary);color:var(--text-muted)">Resolved</span>
        {% endif %}
    </div>
    {% else %}
    <div class="card" style="text-align:center;padding:2rem;color:var(--text-muted)">
        No {{ selected_status }} items in the HITL queue.
    </div>
    {% endfor %}
</div>
{% endblock %}

{% block scripts %}
<script>
function resolveHITL(id, decision) {
    if(!confirm('Apply decision "' + decision + '" to item ' + id.slice(0,8) + '?')) return;
    fetch('/api/strategos/hitl/' + id + '/resolve', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({decision: decision})
    }).then(r=>r.json()).then(d => {
        if(d.status === 'ok') { location.reload(); }
        else { alert('Error: ' + (d.error || 'unknown')); }
    }).catch(e => alert('Request failed: ' + e));
}

function bulkResolve(decision) {
    if(!confirm('Apply "' + decision + '" to ALL pending items?')) return;
    fetch('/api/strategos/hitl/bulk', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({decision: decision})
    }).then(r=>r.json()).then(d => {
        if(d.status === 'ok') { location.reload(); }
        else { alert('Error: ' + (d.error || 'unknown')); }
    }).catch(e => alert('Request failed: ' + e));
}

function bulkDelete() {
    if(!confirm('Permanently delete ALL pending items? This cannot be undone.')) return;
    fetch('/api/strategos/hitl/delete', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'}
    }).then(r=>r.json()).then(d => {
        if(d.status === 'ok') { location.reload(); }
        else { alert('Error: ' + (d.error || 'unknown')); }
    }).catch(e => alert('Request failed: ' + e));
}
</script>
{% endblock %}