{% extends "base.html" %}

{% block title %}命令索引 - 机器人管理后台{% endblock %}

{% block content %}
<div class="page-shell command-catalog-page">
    <div class="page-hero">
        <div class="page-hero-copy">
            <div class="page-eyebrow">Command Catalog</div>
            <h1>命令索引</h1>
            <p>集中查看当前插件命令、群可用状态、自动能力与管理员触发示例，减少靠记忆找功能的成本。</p>
        </div>
        <div class="page-hero-actions">
            <el-select v-model="selectedGroupId" clearable filterable placeholder="选择群查看实际可用状态" @change="loadCatalog" class="hero-select">
                <el-option
                    v-for="group in groupOptions"
                    :key="group.group_id"
                    :label="group.group_name"
                    :value="group.group_id">
                </el-option>
            </el-select>
            <el-button type="primary" @click="loadCatalog">
                <i class="el-icon-refresh"></i> 刷新索引
            </el-button>
        </div>
    </div>

    <el-row :gutter="16" class="overview-grid">
        <el-col :xs="24" :sm="12" :md="6">
            <el-card class="overview-card overview-card--primary" shadow="hover">
                <div class="overview-label">可用手动命令</div>
                <div class="overview-value">{% raw %}{{ summary.available_manual_count || 0 }}{% endraw %}</div>
                <div class="overview-note">当前群可以直接触发的消息命令</div>
            </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
            <el-card class="overview-card" shadow="hover">
                <div class="overview-label">自动能力</div>
                <div class="overview-value">{% raw %}{{ summary.available_auto_count || 0 }}{% endraw %}</div>
                <div class="overview-note">无需手动发送指令的自动/定时能力</div>
            </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
            <el-card class="overview-card overview-card--soft" shadow="hover">
                <div class="overview-label">未启用命令</div>
                <div class="overview-value">{% raw %}{{ summary.unavailable_manual_count || 0 }}{% endraw %}</div>
                <div class="overview-note">管理员视角下可看到但当前群不可用的命令</div>
            </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
            <el-card class="overview-card" shadow="hover">
                <div class="overview-label">管理命令</div>
                <div class="overview-value">{% raw %}{{ summary.admin_command_count || 0 }}{% endraw %}</div>
                <div class="overview-note">群开关、管理员维护等后台辅助命令</div>
            </el-card>
        </el-col>
    </el-row>

    <el-card class="workspace-card workspace-card--filters" shadow="hover">
        <div class="workspace-header workspace-header--compact">
            <div>
                <h3>筛选条件</h3>
                <p>支持按命令、插件名、描述关键词快速定位。</p>
            </div>
            <el-input
                v-model.trim="searchKeyword"
                clearable
                placeholder="搜索命令 / 插件 / 描述"
                class="search-input">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
        </div>
    </el-card>

    <el-card class="workspace-card" shadow="hover">
        <div slot="header" class="workspace-header">
            <div>
                <h3>当前可用命令</h3>
                <p>这里展示的是当前群在管理员视角下“真实可触发”的命令入口。</p>
            </div>
            <div class="workspace-meta">
                {% raw %}{{ activeGroupLabel }}{% endraw %}
            </div>
        </div>

        <el-table :data="filteredAvailableManual" style="width: 100%" v-loading="loading" empty-text="当前没有可直接使用的命令">
            <el-table-column label="插件" min-width="180">
                <template slot-scope="scope">
                    <div class="entity-title">{% raw %}{{ scope.row.name }}{% endraw %}</div>
                    <div class="entity-subtitle">{% raw %}{{ scope.row.description }}{% endraw %}</div>
                </template>
            </el-table-column>
            <el-table-column label="主指令" min-width="180">
                <template slot-scope="scope">
                    <span class="mono-text">{% raw %}{{ scope.row.primary_command || '-' }}{% endraw %}</span>
                </template>
            </el-table-column>
            <el-table-column label="别名" min-width="220">
                <template slot-scope="scope">
                    <div class="tag-row" v-if="scope.row.alias_commands && scope.row.alias_commands.length">
                        <el-tag v-for="alias in scope.row.alias_commands" :key="alias" size="mini" effect="plain">
                            {% raw %}{{ alias }}{% endraw %}
                        </el-tag>
                    </div>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="类别" width="110" align="center">
                <template slot-scope="scope">
                    <el-tag size="small" type="success">{% raw %}{{ scope.row.category_label }}{% endraw %}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="可用原因" min-width="150">
                <template slot-scope="scope">
                    {% raw %}{{ scope.row.availability_reason || '-' }}{% endraw %}
                </template>
            </el-table-column>
            <el-table-column label="Feature Key" min-width="150">
                <template slot-scope="scope">
                    <span class="mono-text">{% raw %}{{ scope.row.feature_key || '-' }}{% endraw %}</span>
                </template>
            </el-table-column>
        </el-table>
    </el-card>

    <el-row :gutter="16" class="insight-grid">
        <el-col :xs="24" :lg="12">
            <el-card class="workspace-card" shadow="hover">
                <div slot="header" class="workspace-header">
                    <div>
                        <h3>未启用命令</h3>
                        <p>这部分只在后台管理员视角展示，便于你知道还有哪些能力没在当前群打开。</p>
                    </div>
                </div>
                <el-table :data="filteredUnavailableManual" style="width: 100%" v-loading="loading" empty-text="当前没有未启用命令">
                    <el-table-column label="插件" min-width="160">
                        <template slot-scope="scope">
                            <div class="entity-title">{% raw %}{{ scope.row.name }}{% endraw %}</div>
                            <div class="entity-subtitle">{% raw %}{{ scope.row.description }}{% endraw %}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="命令" min-width="150">
                        <template slot-scope="scope">
                            <span class="mono-text">{% raw %}{{ scope.row.primary_command || '-' }}{% endraw %}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="原因" min-width="140">
                        <template slot-scope="scope">
                            <el-tag size="mini" type="warning">{% raw %}{{ scope.row.availability_reason || '-' }}{% endraw %}</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
        <el-col :xs="24" :lg="12">
            <el-card class="workspace-card" shadow="hover">
                <div slot="header" class="workspace-header">
                    <div>
                        <h3>自动/定时能力</h3>
                        <p>用于提醒你哪些功能不是靠用户发命令触发，而是自动执行。</p>
                    </div>
                </div>
                <div class="info-list">
                    <div v-if="filteredAutoCommands.length === 0" class="empty-state">当前没有已启用的自动能力</div>
                    <div v-for="item in filteredAutoCommands" :key="item.module_name" class="info-item">
                        <div class="info-item__head">
                            <div class="info-item__title">{% raw %}{{ item.name }}{% endraw %}</div>
                            <el-tag size="mini" type="info">{% raw %}{{ item.category_label }}{% endraw %}</el-tag>
                        </div>
                        <div class="info-item__desc">{% raw %}{{ item.description }}{% endraw %}</div>
                        <div class="info-item__meta">{% raw %}{{ item.availability_reason || '自动执行' }}{% endraw %}</div>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>

    <el-card class="workspace-card" shadow="hover">
        <div slot="header" class="workspace-header">
            <div>
                <h3>管理命令示例</h3>
                <p>给管理员的常用操作命令，适合快速开关功能和维护群管理员。</p>
            </div>
        </div>
        <div class="info-list info-list--grid">
            <div v-if="!adminCommands.length" class="empty-state">当前没有管理命令示例</div>
            <div v-for="item in adminCommands" :key="item.example" class="info-item">
                <div class="info-item__head">
                    <div class="info-item__title">{% raw %}{{ item.title }}{% endraw %}</div>
                </div>
                <div class="info-item__command mono-text">{% raw %}{{ item.example }}{% endraw %}</div>
                <div class="info-item__desc">{% raw %}{{ item.description }}{% endraw %}</div>
            </div>
        </div>
    </el-card>
</div>
{% endblock %}

{% block scripts %}
<script>
    new Vue({
        el: '#app',
        mixins: [baseApp],
        data() {
            return {
                currentView: '18',
                loading: false,
                searchKeyword: '',
                selectedGroupId: '',
                groupOptions: [],
                summary: {
                    available_manual_count: 0,
                    available_auto_count: 0,
                    unavailable_manual_count: 0,
                    admin_command_count: 0
                },
                availableManual: [],
                unavailableManual: [],
                autoCommands: [],
                adminCommands: [],
                generatedAt: ''
            };
        },
        computed: {
            activeGroupLabel() {
                if (!this.selectedGroupId) {
                    return '当前视角：全部运行中插件（未指定群）';
                }
                const matched = (this.groupOptions || []).find(item => item.group_id === this.selectedGroupId);
                return `当前视角：${matched ? matched.group_name : this.selectedGroupId}`;
            },
            filteredAvailableManual() {
                return this.filterCommandItems(this.availableManual);
            },
            filteredUnavailableManual() {
                return this.filterCommandItems(this.unavailableManual);
            },
            filteredAutoCommands() {
                return this.filterCommandItems(this.autoCommands);
            }
        },
        mounted() {
            this.currentView = '18';
            this.loadCatalog();
        },
        methods: {
            filterCommandItems(items) {
                const keyword = String(this.searchKeyword || '').trim().toLowerCase();
                if (!keyword) return items || [];
                return (items || []).filter(item => {
                    const aliasText = ((item.alias_commands || []).join(' ') || '').toLowerCase();
                    const fullText = [
                        item.name,
                        item.description,
                        item.primary_command,
                        aliasText,
                        item.feature_key,
                        item.availability_reason
                    ].join(' ').toLowerCase();
                    return fullText.includes(keyword);
                });
            },
            loadCatalog() {
                this.loading = true;
                axios.get('/api/plugins/command_catalog', {
                    params: {
                        group_id: this.selectedGroupId
                    }
                })
                .then(response => {
                    if (response.data.success) {
                        const payload = response.data.data || {};
                        this.groupOptions = payload.group_options || [];
                        this.summary = payload.summary || this.summary;
                        this.availableManual = payload.available_manual || [];
                        this.unavailableManual = payload.unavailable_manual || [];
                        this.autoCommands = payload.available_auto || [];
                        this.adminCommands = payload.admin_commands || [];
                        this.generatedAt = payload.generated_at || '';
                    } else {
                        this.$message.error(response.data.message || '加载命令索引失败');
                    }
                })
                .catch(error => {
                    console.error('加载命令索引出错:', error);
                    this.$message.error('加载命令索引出错');
                })
                .finally(() => {
                    this.loading = false;
                });
            }
        }
    });
</script>
{% endblock %}

{% block styles %}
<style>
    .page-shell {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .page-hero {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 18px;
        padding: 24px 26px;
        border-radius: 24px;
        background: linear-gradient(135deg, rgba(79,70,229,0.10), rgba(59,130,246,0.08), rgba(255,255,255,0.92));
        border: 1px solid rgba(148, 163, 184, 0.16);
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
    }
    .page-eyebrow {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: #6366f1;
        font-weight: 700;
        margin-bottom: 8px;
    }
    .page-hero-copy h1 {
        font-size: 30px;
        line-height: 1.1;
        margin-bottom: 10px;
        color: #0f172a;
    }
    .page-hero-copy p {
        color: #64748b;
        font-size: 14px;
    }
    .page-hero-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }
    .hero-select {
        width: 280px;
        max-width: 100%;
    }
    .overview-grid .el-col,
    .insight-grid .el-col {
        margin-bottom: 16px;
    }
    .overview-card { min-height: 112px; }
    .overview-card--primary {
        background: linear-gradient(180deg, rgba(79,70,229,0.10), rgba(255,255,255,0.94)) !important;
    }
    .overview-card--soft {
        background: linear-gradient(180deg, rgba(59,130,246,0.08), rgba(255,255,255,0.94)) !important;
    }
    .overview-label { font-size: 13px; color: #64748b; margin-bottom: 14px; }
    .overview-value { font-size: 30px; font-weight: 700; color: #0f172a; margin-bottom: 10px; }
    .overview-note { font-size: 12px; color: #94a3b8; }
    .workspace-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    .workspace-header--compact {
        align-items: flex-end;
    }
    .workspace-header h3 { font-size: 18px; margin-bottom: 4px; }
    .workspace-header p { font-size: 13px; color: #64748b; }
    .workspace-meta {
        font-size: 12px;
        color: #94a3b8;
        white-space: nowrap;
    }
    .search-input {
        width: 280px;
        max-width: 100%;
    }
    .entity-title {
        font-size: 14px;
        font-weight: 600;
        color: #0f172a;
    }
    .entity-subtitle {
        margin-top: 4px;
        font-size: 12px;
        color: #94a3b8;
        line-height: 1.6;
    }
    .mono-text {
        font-family: Consolas, "SFMono-Regular", Menlo, monospace;
        color: #334155;
    }
    .tag-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .info-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .info-list--grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .info-item {
        padding: 14px;
        border-radius: 16px;
        background: rgba(248,250,252,0.82);
        border: 1px solid rgba(148,163,184,0.12);
    }
    .info-item__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 8px;
    }
    .info-item__title {
        font-size: 14px;
        font-weight: 700;
        color: #0f172a;
    }
    .info-item__command {
        margin-bottom: 8px;
        font-size: 13px;
    }
    .info-item__desc {
        font-size: 13px;
        line-height: 1.7;
        color: #475569;
        word-break: break-word;
    }
    .info-item__meta {
        margin-top: 8px;
        font-size: 12px;
        color: #94a3b8;
    }
    .empty-state {
        padding: 16px 12px;
        text-align: center;
        color: #94a3b8;
        font-size: 13px;
        background: rgba(248, 250, 252, 0.9);
        border: 1px dashed rgba(148, 163, 184, 0.35);
        border-radius: 14px;
    }
    @media (max-width: 900px) {
        .page-hero,
        .workspace-header,
        .workspace-header--compact {
            flex-direction: column;
            align-items: flex-start;
        }
        .page-hero-actions,
        .hero-select,
        .search-input {
            width: 100%;
        }
        .info-list--grid {
            grid-template-columns: 1fr;
        }
    }
    @media (max-width: 768px) {
        .page-hero {
            padding: 18px 16px;
            border-radius: 20px;
        }
        .page-hero-copy h1 {
            font-size: 24px;
        }
        .workspace-card .el-card__body {
            padding: 14px;
        }
    }
</style>
{% endblock %}