{% extends parent %}
{% block title %}MCPs - Introspect{% endblock %}

{% macro mcp_qs(server='', command='', failed=filter_failed, page=1) -%}
{% if server %}server={{ server }}&{% endif %}{% if command %}command={{ command }}&{% endif %}{% if failed %}failed=true&{% endif %}page={{ page }}
{%- endmacro %}

{% block content %}
<h1>MCP Servers</h1>

{# --- Server buttons --- #}
<div class="card">
    <h2 style="margin-bottom:0.5rem;">Servers</h2>
    <div class="filter-bar" style="flex-wrap:wrap;">
        <a href="/mcps?{{ mcp_qs() }}"
           hx-get="/mcps?{{ mcp_qs() }}"
           hx-target="#content" hx-push-url="true"
           class="tool-btn{% if not filter_server %} tool-btn-active{% endif %}">
            All servers
        </a>
        {% for srv in mcp_servers %}
        <a href="/mcps?{{ mcp_qs(server=srv[0]) }}"
           hx-get="/mcps?{{ mcp_qs(server=srv[0]) }}"
           hx-target="#content" hx-push-url="true"
           class="tool-btn{% if filter_server == srv[0] %} tool-btn-active{% endif %}">
            {{ srv[0] }} <span class="tool-btn-count">{{ srv[1] }}</span>
            {% if srv[3] > 0 %}<span class="tool-btn-count" style="background:#ffe0e0;color:#c00;">{{ srv[3] }}</span>{% endif %}
        </a>
        {% endfor %}
    </div>
</div>

{# --- Command buttons (for selected server or all) --- #}
{% if mcp_commands %}
<div class="card">
    <h2 style="margin-bottom:0.5rem;">Commands{% if filter_server %} &mdash; {{ filter_server }}{% endif %}</h2>
    <div class="filter-bar" style="flex-wrap:wrap;">
        {% if filter_server %}
        <a href="/mcps?{{ mcp_qs(server=filter_server) }}"
           hx-get="/mcps?{{ mcp_qs(server=filter_server) }}"
           hx-target="#content" hx-push-url="true"
           class="tool-btn{% if not filter_command %} tool-btn-active{% endif %}">
            All commands
        </a>
        {% endif %}
        {% for cmd in mcp_commands %}
        <a href="/mcps?{{ mcp_qs(server=cmd[0], command=cmd[1]) }}"
           hx-get="/mcps?{{ mcp_qs(server=cmd[0], command=cmd[1]) }}"
           hx-target="#content" hx-push-url="true"
           class="tool-btn{% if filter_command == cmd[1] and filter_server == cmd[0] %} tool-btn-active{% endif %}">
            {% if not filter_server %}<span style="color:#888;">{{ cmd[0] }}/</span>{% endif %}{{ cmd[1] }}
            <span class="tool-btn-count">{{ cmd[2] }}</span>
            {% if cmd[3] > 0 %}<span class="tool-btn-count" style="background:#ffe0e0;color:#c00;">{{ cmd[3] }}</span>{% endif %}
        </a>
        {% endfor %}
    </div>
    <div class="filter-bar" style="margin-top:0.5rem;">
        <a href="/mcps?{{ mcp_qs(server=filter_server, command=filter_command, failed=not filter_failed) }}"
           hx-get="/mcps?{{ mcp_qs(server=filter_server, command=filter_command, failed=not filter_failed) }}"
           hx-target="#content" hx-push-url="true"
           class="tool-btn tool-btn-sm{% if filter_failed %} tool-btn-active{% endif %}">
            {% if filter_failed %}Show all{% else %}Failed only{% endif %}
        </a>
    </div>
</div>
{% endif %}

{% if stats %}
<div class="stat-grid">
    <div class="stat-card">
        <div class="value">{{ stats[0] }}</div>
        <div class="label">Matching Calls</div>
    </div>
    <div class="stat-card">
        <div class="value">{{ stats[1] }}</div>
        <div class="label">Failed</div>
    </div>
</div>
{% endif %}

<div class="card">
    <table>
        <thead>
            <tr>
                <th>Session</th>
                <th>Called At</th>
                <th>Server</th>
                <th>Command</th>
                <th>Status</th>
                <th>Input Preview</th>
                <th>Exec Time</th>
            </tr>
        </thead>
        <tbody>
            {% for tc in tool_calls %}
            <tr>
                <td><a href="/sessions/{{ tc[0] }}" hx-get="/sessions/{{ tc[0] }}" hx-target="#content" hx-push-url="true"><span class="truncate" style="max-width:250px;" title="{{ clean_title(tc[7] or '')|e }}">{{ (clean_title(tc[7] or '') or (tc[0]|string)[:12] + '...')|truncate(50) }}</span></a></td>
                <td style="white-space:nowrap;">{{ (tc[1]|string)[:19] }}</td>
                <td>{{ tc[2] or '' }}</td>
                <td>{{ tc[3] or '' }}</td>
                <td>
                    {% if tc[4] == 'true' %}
                    <span class="badge badge-error">FAILED</span>
                    {% else %}
                    <span class="badge badge-ok">OK</span>
                    {% endif %}
                </td>
                <td style="max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ tc[5] or '' }}</td>
                <td>{{ tc[6] or '' }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<div class="pagination">
    {% if page > 1 %}
    <a href="/mcps?{{ mcp_qs(server=filter_server, command=filter_command, page=page - 1) }}" hx-get="/mcps?{{ mcp_qs(server=filter_server, command=filter_command, page=page - 1) }}" hx-target="#content" hx-push-url="true">Prev</a>
    {% endif %}
    <span class="current">Page {{ page }} of {{ total_pages }}</span>
    {% if page < total_pages %}
    <a href="/mcps?{{ mcp_qs(server=filter_server, command=filter_command, page=page + 1) }}" hx-get="/mcps?{{ mcp_qs(server=filter_server, command=filter_command, page=page + 1) }}" hx-target="#content" hx-push-url="true">Next</a>
    {% endif %}
</div>
{% endblock %}