{% extends "base.html" %}

{% block title %}插件管理 - 机器人管理后台{% endblock %}

{% block content %}
<div class="page-shell plugins-page">
    <div class="page-hero">
        <div class="page-hero-copy">
            <div class="page-eyebrow">Plugins Workspace</div>
            <h1>插件管理</h1>
            <p>统一查看插件状态、版本、说明与配置，减少传统后台式碎片操作。</p>
        </div>
        <div class="page-hero-actions">
            <el-button type="primary" @click="refreshPlugins">
                <i class="el-icon-refresh"></i> 刷新插件
            </el-button>
        </div>
    </div>

    <el-row :gutter="16" class="overview-grid">
        <el-col :span="6">
            <el-card class="overview-card overview-card--primary" shadow="hover">
                <div class="overview-label">插件总数</div>
                <div class="overview-value">{% raw %}{{ plugins.length }}{% endraw %}</div>
                <div class="overview-note">当前已注册插件模块</div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card class="overview-card" shadow="hover">
                <div class="overview-label">运行中</div>
                <div class="overview-value">{% raw %}{{ runningPluginsCount }}{% endraw %}</div>
                <div class="overview-note">可正常提供能力的插件</div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card class="overview-card" shadow="hover">
                <div class="overview-label">已停用</div>
                <div class="overview-value">{% raw %}{{ stoppedPluginsCount }}{% endraw %}</div>
                <div class="overview-note">待启用或排查状态</div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card class="overview-card overview-card--soft" shadow="hover">
                <div class="overview-label">作者数量</div>
                <div class="overview-value">{% raw %}{{ authorsCount }}{% endraw %}</div>
                <div class="overview-note">参与维护的作者规模</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>

        <el-table :data="plugins" style="width: 100%" v-loading="loading">
            <el-table-column label="插件信息" min-width="260">
                <template slot-scope="scope">
                    <div class="entity-cell">
                        <div class="entity-badge">{% raw %}{{ scope.$index + 1 }}{% endraw %}</div>
                        <div class="entity-copy">
                            <div class="entity-title">{% raw %}{{ scope.row.name }}{% endraw %}</div>
                            <div class="entity-subtitle">模块：{% raw %}{{ scope.row.module_name }}{% endraw %}</div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="version" label="版本" width="120"></el-table-column>
            <el-table-column prop="author" label="作者" width="140"></el-table-column>
            <el-table-column prop="description" label="描述" min-width="280" show-overflow-tooltip></el-table-column>
            <el-table-column label="状态" width="120" align="center">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.status === 'RUNNING' ? 'success' : 'info'">
                        {% raw %}{{ scope.row.status === 'RUNNING' ? '已启用' : '已禁用' }}{% endraw %}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" min-width="290">
                <template slot-scope="scope">
                    <div class="action-row">
                        <el-button
                            size="mini"
                            :type="scope.row.status === 'RUNNING' ? 'danger' : 'success'"
                            @click="togglePluginStatus(scope.row)">
                            {% raw %}{{ scope.row.status === 'RUNNING' ? '禁用' : '启用' }}{% endraw %}
                        </el-button>
                        <el-button size="mini" type="primary" plain @click="reloadPlugin(scope.row)">
                            重载
                        </el-button>
                        <el-button size="mini" type="info" plain @click="showPluginInfo(scope.row)">
                            详情
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </el-card>

    <el-dialog title="插件详情" :visible.sync="pluginInfoVisible" width="64%" top="5vh">
        <div v-if="selectedPlugin" class="plugin-detail-container">
            <div class="dialog-intro">查看插件基础信息、命令列表与配置内容，需要时可直接在这里编辑配置。</div>
            <el-descriptions border direction="vertical" :column="2" size="small" class="plugin-descriptions">
                <el-descriptions-item label="插件名称" :span="1">{% raw %}{{ selectedPlugin.name }}{% endraw %}</el-descriptions-item>
                <el-descriptions-item label="模块名称" :span="1">{% raw %}{{ selectedPlugin.module_name }}{% endraw %}</el-descriptions-item>
                <el-descriptions-item label="版本" :span="1">{% raw %}{{ selectedPlugin.version }}{% endraw %}</el-descriptions-item>
                <el-descriptions-item label="作者" :span="1">{% raw %}{{ selectedPlugin.author }}{% endraw %}</el-descriptions-item>
                <el-descriptions-item label="状态" :span="1">
                    <el-tag :type="selectedPlugin.status === 'RUNNING' ? 'success' : 'info'" size="small">
                        {% raw %}{{ selectedPlugin.status === 'RUNNING' ? '已启用' : '已禁用' }}{% endraw %}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="命令前缀" :span="1" v-if="selectedPlugin.command_prefix !== undefined">
                    {% raw %}{{ selectedPlugin.command_prefix || '无' }}{% endraw %}
                </el-descriptions-item>
                <el-descriptions-item label="描述" :span="2">{% raw %}{{ selectedPlugin.description }}{% endraw %}</el-descriptions-item>
                <el-descriptions-item label="命令列表" :span="2" v-if="selectedPlugin.commands && selectedPlugin.commands.length > 0">
                    <div class="command-tags">
                        <el-tag v-for="cmd in selectedPlugin.commands" :key="cmd" size="mini" class="command-tag">
                            {% raw %}{{ cmd }}{% endraw %}
                        </el-tag>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="配置信息" :span="2" v-if="selectedPlugin.config">
                    <div class="config-container">
                        <div class="config-actions">
                            <el-button type="primary" size="mini" @click="editConfig" :disabled="isEditingConfig">编辑配置</el-button>
                            <el-button type="success" size="mini" @click="saveConfig" v-if="isEditingConfig">保存配置</el-button>
                            <el-button type="info" size="mini" @click="cancelEditConfig" v-if="isEditingConfig">取消</el-button>
                        </div>
                        <div v-if="!isEditingConfig">
                            <pre>{% raw %}{{ selectedPlugin.configText }}{% endraw %}</pre>
                        </div>
                        <div v-else>
                            <el-input
                                type="textarea"
                                v-model="editedConfig"
                                :rows="12"
                                placeholder="请输入TOML格式的配置"
                                class="config-editor">
                            </el-input>
                            <div class="config-error" v-if="configError">{% raw %}{{ configError }}{% endraw %}</div>
                        </div>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
        </div>
    </el-dialog>
</div>
{% endblock %}

{% block scripts %}
<script>
    new Vue({
        el: '#app',
        mixins: [baseApp],
        data() {
            return {
                plugins: [],
                selectedPlugin: null,
                pluginInfoVisible: false,
                loading: false,
                isEditingConfig: false,
                editedConfig: '',
                configError: '',
                configFormat: 'toml'
            }
        },
        computed: {
            runningPluginsCount() {
                return this.plugins.filter(plugin => plugin.status === 'RUNNING').length;
            },
            stoppedPluginsCount() {
                return this.plugins.filter(plugin => plugin.status !== 'RUNNING').length;
            },
            authorsCount() {
                return new Set((this.plugins || []).map(plugin => plugin.author).filter(Boolean)).size;
            }
        },
        mounted() {
            this.currentView = '11';
            this.loadPlugins();
        },
        methods: {
            loadPlugins() {
                this.loading = true;
                axios.get('/api/plugins')
                    .then(response => {
                        if (response.data.success) {
                            this.plugins = response.data.data || [];
                        } else {
                            this.$message.error(response.data.message || '加载插件列表失败');
                        }
                    })
                    .catch(error => {
                        console.error('加载插件列表出错:', error);
                        this.$message.error('加载插件列表出错');
                    })
                    .finally(() => {
                        this.loading = false;
                    });
            },
            refreshPlugins() {
                this.loadPlugins();
                this.$message.success('插件列表已刷新');
            },
            togglePluginStatus(plugin) {
                const action = plugin.status === 'RUNNING' ? 'disable' : 'enable';
                const actionText = plugin.status === 'RUNNING' ? '禁用' : '启用';

                this.$confirm(`确定要${actionText}插件 "${plugin.name}" 吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post(`/api/plugins/${action}`, {
                        plugin_name: plugin.module_name
                    })
                    .then(response => {
                        if (response.data.success) {
                            this.$message.success(`${actionText}插件成功`);
                            this.loadPlugins();
                        } else {
                            this.$message.error(response.data.message || `${actionText}插件失败`);
                        }
                    })
                    .catch(error => {
                        console.error(`${actionText}插件出错:`, error);
                        this.$message.error(`${actionText}插件出错`);
                    });
                }).catch(() => {
                    this.$message.info('已取消操作');
                });
            },
            reloadPlugin(plugin) {
                this.$confirm(`确定要重载插件 "${plugin.name}" 吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post('/api/plugins/reload', {
                        plugin_name: plugin.module_name
                    })
                    .then(response => {
                        if (response.data.success) {
                            this.$message.success('重载插件成功');
                            this.loadPlugins();
                        } else {
                            this.$message.error(response.data.message || '重载插件失败');
                        }
                    })
                    .catch(error => {
                        console.error('重载插件出错:', error);
                        this.$message.error('重载插件出错');
                    });
                }).catch(() => {
                    this.$message.info('已取消操作');
                });
            },
            editConfig() {
                this.isEditingConfig = true;
                this.editedConfig = this.selectedPlugin.configText || '';
                this.configError = '';
            },
            cancelEditConfig() {
                this.isEditingConfig = false;
                this.editedConfig = '';
                this.configError = '';
            },
            saveConfig() {
                try {
                    let configObj;
                    axios.post('/api/plugins/config/update', {
                        plugin_name: this.selectedPlugin.module_name,
                        config_text: this.editedConfig,
                        format: 'toml'
                    })
                    .then(response => {
                        if (response.data.success) {
                            this.$message.success('配置保存成功');
                            this.isEditingConfig = false;
                            this.selectedPlugin.configText = this.editedConfig;
                            this.selectedPlugin.config = configObj;
                            this.$confirm('配置已保存，是否要重载插件以应用新配置?', '提示', {
                                confirmButtonText: '重载插件',
                                cancelButtonText: '稍后手动重载',
                                type: 'info'
                            }).then(() => {
                                this.reloadPlugin(this.selectedPlugin);
                            }).catch(() => {
                                this.$message.info('您可以稍后手动重载插件以应用新配置');
                            });
                        } else {
                            this.configError = response.data.message || '保存配置失败';
                        }
                    })
                    .catch(error => {
                        console.error('保存配置出错:', error);
                        this.configError = '保存配置出错: ' + (error.response?.data?.message || error.message);
                    });
                } catch (e) {
                    this.configError = '处理配置时出错: ' + e.message;
                }
            },
            showPluginInfo(plugin) {
                axios.get(`/api/plugins/info?plugin_name=${plugin.module_name}`)
                    .then(response => {
                        if (response.data.success) {
                            this.selectedPlugin = response.data.data;
                            if (this.selectedPlugin.configText) {
                                this.pluginInfoVisible = true;
                                this.isEditingConfig = false;
                                this.editedConfig = '';
                                this.configError = '';
                                return;
                            }

                            axios.get(`/api/plugins/config/raw?plugin_name=${plugin.module_name}`)
                                .then(configResponse => {
                                    if (configResponse.data.success) {
                                        this.selectedPlugin.configText = configResponse.data.data;
                                        this.configFormat = configResponse.data.format || 'toml';
                                    } else {
                                        this.selectedPlugin.configText = '# 无法获取原始配置文件';
                                        console.error('获取配置文件失败:', configResponse.data.message);
                                    }
                                    this.pluginInfoVisible = true;
                                    this.isEditingConfig = false;
                                    this.editedConfig = '';
                                    this.configError = '';
                                })
                                .catch(error => {
                                    console.error('获取配置文件出错:', error);
                                    this.selectedPlugin.configText = '# 获取配置文件时出错';
                                    this.pluginInfoVisible = true;
                                });
                        } else {
                            this.$message.error(response.data.message || '获取插件详情失败');
                        }
                    })
                    .catch(error => {
                        console.error('获取插件详情出错:', error);
                        this.$message.error('获取插件详情出错');
                    });
            }
        }
    });
</script>
<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.9));
        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;
    }
    .overview-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 h3 { font-size: 18px; margin-bottom: 4px; }
    .workspace-header p { font-size: 13px; color: #64748b; }
    .entity-cell { display: flex; align-items: center; gap: 12px; }
    .entity-badge {
        width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center;
        justify-content: center; background: rgba(79,70,229,0.10); color: #4f46e5; font-size: 12px;
        font-weight: 700; flex-shrink: 0;
    }
    .entity-title { font-size: 14px; font-weight: 600; color: #0f172a; }
    .entity-subtitle { margin-top: 4px; font-size: 12px; color: #94a3b8; }
    .action-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .plugin-detail-container { max-height: 70vh; overflow-y: auto; }
    .plugin-descriptions { width: 100%; }
    .dialog-intro { margin-bottom: 14px; color: #64748b; font-size: 13px; }
    .config-container {
        max-height: 320px; overflow-y: auto; background: rgba(248,250,252,0.82); border: 1px solid rgba(148,163,184,0.12);
        border-radius: 14px; padding: 12px; font-size: 12px; color: #334155;
    }
    .config-container pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
    .command-tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .command-tag { margin: 0 !important; }
    .config-actions { margin-bottom: 10px; display: flex; gap: 10px; }
    .config-editor { font-family: monospace; font-size: 12px; }
    .config-error { color: #ef4444; font-size: 12px; margin-top: 5px; }
</style>
{% endblock %}