{% extends "base.html" %}
{% load static %}

{% block title %}能力路由接入 - AgomTradePro{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/admin-shell.css' %}">
<style>
    .gateway-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
        margin-bottom: 18px;
    }

    .gateway-card,
    .gateway-step,
    .gateway-code {
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: #fff;
    }

    .gateway-card {
        padding: 16px;
    }

    .gateway-label {
        font-size: 12px;
        color: #64748b;
    }

    .gateway-value {
        margin-top: 6px;
        font-size: 26px;
        font-weight: 700;
        color: #0f172a;
    }

    .gateway-hint {
        margin-top: 8px;
        color: #64748b;
        font-size: 13px;
    }

    .gateway-two-col {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);
        gap: 18px;
    }

    .gateway-steps {
        display: grid;
        gap: 12px;
    }

    .gateway-step {
        padding: 16px;
    }

    .gateway-step h2,
    .gateway-code h2 {
        margin: 0 0 8px;
        font-size: 18px;
    }

    .gateway-step p,
    .gateway-code p {
        margin: 0 0 12px;
        color: #475569;
        line-height: 1.65;
    }

    .gateway-code {
        padding: 16px;
        margin-bottom: 14px;
    }

    .gateway-code pre,
    .gateway-inline-code {
        background: #0f172a;
        color: #e2e8f0;
        border-radius: 8px;
    }

    .gateway-code pre {
        margin: 0;
        padding: 14px;
        overflow-x: auto;
        font-size: 13px;
        line-height: 1.55;
    }

    .gateway-inline-code {
        display: inline-block;
        padding: 8px 10px;
        word-break: break-all;
        font-size: 13px;
    }

    .gateway-token-form {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 12px;
    }

    .gateway-token-form input,
    .gateway-token-form select {
        min-height: 40px;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        padding: 8px 10px;
    }

    .gateway-token-form input {
        flex: 1 1 220px;
    }

    .gateway-status {
        display: inline-flex;
        align-items: center;
        padding: 4px 9px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
    }

    .gateway-status--ready {
        color: #166534;
        background: #dcfce7;
    }

    .gateway-status--empty {
        color: #92400e;
        background: #fef3c7;
    }

    .semantic-governance {
        margin: 18px 0;
        padding: 18px;
        border: 1px solid #cbd5e1;
        border-radius: 10px;
        background: #f8fafc;
    }

    .semantic-governance__issues,
    .semantic-governance__form {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 12px;
    }

    .semantic-governance__issue,
    .semantic-correction-row {
        padding: 12px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: #fff;
    }

    .semantic-correction-row {
        display: grid;
        grid-template-columns: minmax(180px, 1fr) 120px minmax(180px, 1fr) auto;
        gap: 8px;
        margin-top: 8px;
    }

    .semantic-correction-row input,
    .semantic-correction-row select,
    .semantic-governance__form input {
        min-height: 38px;
        padding: 7px 9px;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
    }

    .semantic-governance__result {
        min-height: 90px;
        max-height: 320px;
        overflow: auto;
        margin-top: 12px;
        padding: 12px;
        border-radius: 8px;
        background: #0f172a;
        color: #e2e8f0;
        white-space: pre-wrap;
    }

    @media (max-width: 980px) {
        .gateway-two-col {
            grid-template-columns: 1fr;
        }
    }
</style>
{% endblock %}

{% block content %}
{% if request.user.is_staff or request.user.is_superuser %}
    {% include "components/classic_tui_migration_banner.html" with screen_key="capability-router.mcp-center" action_key="ops.semantic-governance-overview" %}
{% else %}
    {% include "components/classic_tui_migration_banner.html" with screen_key="capability-router.self-service" action_key="capability-router.mcp-self-status" %}
{% endif %}
<div class="admin-shell admin-shell--wide">
    <div class="admin-shell__hero">
        <div class="admin-shell__lead">
            <h1 class="admin-shell__title">{{ page_title }}</h1>
            <p class="admin-shell__subtitle">{{ page_subtitle }}</p>
        </div>
        <div class="admin-shell__actions">
            <a href="{% url 'account:mcp_guide' %}" class="btn btn-secondary admin-shell__action-link">MCP 接入说明</a>
            <a href="{% url 'tui-workbench' %}" class="btn btn-secondary admin-shell__action-link" target="_blank" rel="noopener noreferrer">打开 TUI</a>
            {% if request.user.is_staff %}
            <a href="{% url 'settings-mcp-tools' %}" class="btn btn-primary admin-shell__action-link">MCP 工具治理</a>
            {% endif %}
        </div>
    </div>

    <div class="admin-shell__banner">
        <strong>统一入口：</strong>
        外部 Agent 优先调用 <code>/api/ai-capability/route/</code>。
        Capability Router 会根据目录、权限、风险等级和用户上下文选择 MCP 工具、Terminal 指令、内置能力或内部 API。
    </div>

    <div class="admin-shell__banner">
        <strong>MCP 最佳实践：</strong>
        可执行工具以 SDK 代码注册为真源，数据库目录只保存同步快照、路由开关、风险等级和复核状态。
        这样可以避免数据库动态注入任意可执行能力，同时保留统一治理、审计和接入发现能力。
    </div>

    {% if new_token_payload %}
    <div class="admin-shell__banner">
        <strong>新 Token 已生成：</strong> {{ new_token_payload.token_name }} / {{ new_token_payload.access_level_label }}
        <div style="margin-top: 10px;">
            <code id="newGatewayToken" class="gateway-inline-code">{{ new_token_payload.token }}</code>
            <button type="button" class="btn btn-secondary" data-copy-target="newGatewayToken">复制 Token</button>
        </div>
    </div>
    {% endif %}

    <section class="gateway-grid">
        <article class="gateway-card">
            <div class="gateway-label">能力总数</div>
            <div class="gateway-value">{{ catalog_stats.total }}</div>
            <div class="gateway-hint">
                启用 {{ catalog_stats.enabled }} / 风险停用 {{ catalog_stats.disabled }}
                / 待人工复核 {{ catalog_stats.manual_governance }}
            </div>
        </article>
        {% for card in source_cards %}
        <article class="gateway-card">
            <div class="gateway-label">{{ card.label }}</div>
            <div class="gateway-value">{{ card.routing_enabled }}/{{ card.total }}</div>
            <div class="gateway-hint">
                <span class="gateway-status gateway-status--{{ card.status }}">{{ card.status }}</span>
                需确认 {{ card.requires_confirmation }}
            </div>
        </article>
        {% endfor %}
    </section>

    {% if request.user.is_staff and semantic_governance %}
    <section
        id="semanticGovernancePanel"
        class="semantic-governance"
        data-preview-url="{{ semantic_governance.preview_url }}"
        data-apply-url="{{ semantic_governance.apply_url }}"
    >
        <h2>语义键治理</h2>
        <p>检查缺失、冲突和孤儿覆盖；先预览入口 winner，再应用有理由、可审计的批量修正。</p>

        <div class="semantic-governance__issues">
            <article class="semantic-governance__issue">
                <h3>缺失</h3>
                <ul>
                    {% for capability_key in semantic_governance.missing_capability_keys %}
                    <li>{{ capability_key }}</li>
                    {% empty %}
                    <li>无</li>
                    {% endfor %}
                </ul>
            </article>
            <article class="semantic-governance__issue">
                <h3>冲突</h3>
                <ul>
                    {% for semantic_key, capability_keys in semantic_governance.conflicts.items %}
                    <li>{{ semantic_key }}：{{ capability_keys|join:", " }}</li>
                    {% empty %}
                    <li>无</li>
                    {% endfor %}
                </ul>
            </article>
            <article class="semantic-governance__issue">
                <h3>孤儿覆盖</h3>
                <ul>
                    {% for capability_key in semantic_governance.orphaned_override_keys %}
                    <li>{{ capability_key }}</li>
                    {% empty %}
                    <li>无</li>
                    {% endfor %}
                </ul>
            </article>
        </div>

        <div class="semantic-governance__form">
            <label>
                幂等键
                <input id="semanticIdempotencyKey" maxlength="255" autocomplete="off">
            </label>
            <label>
                修正理由
                <input id="semanticReason" maxlength="2000" autocomplete="off">
            </label>
        </div>
        <div id="semanticCorrectionRows">
            <div class="semantic-correction-row">
                <input data-field="capability_key" placeholder="Capability key">
                <select data-field="action">
                    <option value="set">设置</option>
                    <option value="remove">移除</option>
                </select>
                <input data-field="semantic_key" placeholder="新的语义键">
                <button type="button" class="btn btn-secondary" data-remove-correction>移除行</button>
            </div>
        </div>
        <div class="admin-shell__actions" style="margin-top: 12px;">
            <button type="button" class="btn btn-secondary" id="addSemanticCorrection">新增修正</button>
            <button type="button" class="btn btn-secondary" id="previewSemanticCorrections">预览修正</button>
            <button type="button" class="btn btn-primary" id="applySemanticCorrections">应用修正</button>
        </div>
        <pre id="semanticGovernanceResult" class="semantic-governance__result">尚未预览</pre>

        <h3>最近审计</h3>
        <div class="gateway-steps">
            {% for entry in semantic_governance.audit.results %}
            <article class="gateway-step">
                <strong>{{ entry.capability_key }} / {{ entry.action }}</strong>
                <p>{{ entry.reason }}</p>
                <code>{{ entry.old_effective_value }} → {{ entry.new_effective_value }}</code>
            </article>
            {% empty %}
            <p>暂无审计记录。</p>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    <section class="gateway-two-col">
        <div class="gateway-steps">
            {% for step in onboarding_steps %}
            <article class="gateway-step">
                <h2>{{ step.title }}</h2>
                <p>{{ step.body }}</p>
                <a href="{{ step.href }}" class="btn btn-secondary">{{ step.link_label }}</a>
            </article>
            {% endfor %}
        </div>

        <aside>
            <article class="gateway-code">
                <h2>当前账户</h2>
                <p>
                    MCP/SDK 权限：
                    <span class="gateway-status {% if profile.mcp_enabled %}gateway-status--ready{% else %}gateway-status--empty{% endif %}">
                        {% if profile.mcp_enabled %}已开启{% else %}已关闭{% endif %}
                    </span>
                </p>
                <p>活跃 Token：{{ access_tokens|length }}</p>
                {% if preferred_token %}
                <p>
                    当前推荐 Token：
                    <code class="gateway-inline-code">{{ preferred_token.name }}</code>
                    / {{ preferred_token.access_level_label }}
                </p>
                {% endif %}
                {% if profile.mcp_enabled %}
                <form method="post" action="{% url 'account:create_self_token' %}" class="gateway-token-form">
                    {% csrf_token %}
                    <input type="hidden" name="next" value="{% url 'settings-capability-gateway' %}">
                    <input type="text" name="token_name" value="capability-router" maxlength="100" placeholder="Token 名称">
                    <select name="access_level">
                        {% for value, label in token_access_level_choices %}
                            <option value="{{ value }}" {% if value == default_token_access_level %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                    </select>
                    <button type="submit" class="btn btn-primary">生成 Token</button>
                </form>
                <p style="margin-top: 10px; margin-bottom: 0;">
                    这里可以直接为自己生成 MCP/SDK Token，并通过下拉框控制只读 / 读写。推荐默认给 Agent 使用只读 Token，需要写接口时再单独生成读写 Token。
                </p>
                {% endif %}
            </article>

            <article class="gateway-code">
                <h2>发给 Agent 的启动 Prompt</h2>
                <p>
                    复制后可直接发给 Codex、Claude Desktop 或其他支持 API/MCP 接入的 Agent。
                    {% if agent_bootstrap_token_ready %}
                    当前 prompt 已包含可用 Token。
                    {% else %}
                    当前系统未提供可见 Token，prompt 会保留占位符；先在上方生成新 Token 再复制更稳妥。
                    {% endif %}
                </p>
                <p>
                    Token 级别：<strong>{{ agent_bootstrap_access_level_label }}</strong>
                    {% if agent_bootstrap_token_name %}
                    / 名称：<code>{{ agent_bootstrap_token_name }}</code>
                    {% endif %}
                </p>
                <button type="button" class="btn btn-secondary" data-copy-target="agentBootstrapPrompt">复制 Prompt</button>
                <pre id="agentBootstrapPrompt">{{ agent_bootstrap_prompt }}</pre>
            </article>

            <article class="gateway-code">
                <h2>Route API</h2>
                <p><code class="gateway-inline-code">{{ route_endpoint }}</code></p>
                <pre id="routePayload">{{ route_payload_json }}</pre>
            </article>

            <article class="gateway-code">
                <h2>curl 测试</h2>
                <button type="button" class="btn btn-secondary" data-copy-target="curlRouteExample">复制</button>
                <pre id="curlRouteExample">{{ curl_route_example }}</pre>
            </article>

            <article class="gateway-code">
                <h2>常用接口</h2>
                <p>Web Chat: <code class="gateway-inline-code">{{ web_endpoint }}</code></p>
                <p>Capabilities: <code class="gateway-inline-code">{{ capability_endpoint }}</code></p>
            </article>
        </aside>
    </section>
</div>

<script>
(() => {
    async function copyFromElement(targetId) {
        const element = document.getElementById(targetId);
        if (!element) return;
        try {
            await navigator.clipboard.writeText(element.textContent || '');
            if (window.showToast) window.showToast('已复制到剪贴板', 'success');
        } catch (error) {
            if (window.showToast) window.showToast('复制失败，请手动复制', 'warning');
        }
    }

    document.querySelectorAll('[data-copy-target]').forEach((button) => {
        button.addEventListener('click', () => copyFromElement(button.dataset.copyTarget));
    });
})();
</script>
<script src="{% static 'js/capability_gateway.js' %}"></script>
{% endblock %}