window.AppLayout = {
    props: {
        authUser: {
            type: String,
            default: '',
        },
    },
    emits: ['logout', 'auth-updated'],
    setup() {
        const { inject } = Vue;
        const currentPage = inject('currentPage');

        const menuItems = [
            { index: 'log', icon: 'Document', label: '日志' },
            { index: 'config', icon: 'Setting', label: '配置' },
            { index: 'plugin', icon: 'Box', label: '插件' },
            { index: 'security', icon: 'Lock', label: '安全' },
        ];

        return { currentPage, menuItems };
    },
    template: `
    <el-container class="app-shell">
        <el-aside width="220px" class="app-aside">
            <div class="brand-panel">
                <div class="brand-title">WechatHookBot</div>
                <div class="brand-sub">Control Surface</div>
            </div>
            <el-menu :default-active="currentPage"
                     class="app-menu"
                     @select="(idx) => currentPage = idx"
                     background-color="transparent">
                <el-menu-item v-for="item in menuItems" :key="item.index" :index="item.index">
                    <el-icon><component :is="item.icon" /></el-icon>
                    <span>{{ item.label }}</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-main class="app-main">
            <div class="app-topbar">
                <div class="topbar-title">Real-time Operations Panel</div>
                <div class="topbar-right">
                    <span class="auth-pill">
                        当前账号: {{ authUser || '-' }}
                    </span>
                    <el-button size="small" @click="$emit('logout')">退出登录</el-button>
                </div>
            </div>
            <div class="content-stage">
                <LogViewer v-show="currentPage === 'log'" />
                <ConfigEditor v-show="currentPage === 'config'" />
                <PluginList v-show="currentPage === 'plugin'" />
                <SecuritySettings
                    v-show="currentPage === 'security'"
                    @updated="$emit('auth-updated', $event)" />
            </div>
        </el-main>
    </el-container>
    `
};