/**
 * 仪表盘组件
 */
app.component('dashboard-page', {
    props: ['stats'],
    template: `
        <div class="dashboard">
            <div class="stat-cards">
                <div class="stat-card">
                    <div class="stat-card-title">活跃连接</div>
                    <div class="stat-card-value">{{ stats.connections || 0 }}</div>
                    <div class="stat-card-sub">WebSocket 连接数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-card-title">Agent 数量</div>
                    <div class="stat-card-value">{{ stats.agents || 0 }}</div>
                    <div class="stat-card-sub">已配置的 Agent</div>
                </div>
                <div class="stat-card">
                    <div class="stat-card-title">定时任务</div>
                    <div class="stat-card-value">{{ stats.tasks || 0 }}</div>
                    <div class="stat-card-sub">活跃的 Cron 任务</div>
                </div>
                <div class="stat-card">
                    <div class="stat-card-title">运行时间</div>
                    <div class="stat-card-value">{{ stats.uptime || '0h' }}</div>
                    <div class="stat-card-sub">服务运行时长</div>
                </div>
            </div>
            
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-card class="config-card">
                        <template #header>
                            <span>快速操作</span>
                        </template>
                        <el-space direction="vertical" :size="12" fill style="width: 100%">
                            <el-button type="primary" style="width: 100%" @click="$emit('navigate', 'llm')">
                                <el-icon><Setting /></el-icon>
                                配置 LLM 接口
                            </el-button>
                            <el-button style="width: 100%" @click="$emit('navigate', 'channels')">
                                <el-icon><ChatDotRound /></el-icon>
                                配置通讯渠道
                            </el-button>
                            <el-button style="width: 100%" @click="$emit('navigate', 'terminal')">
                                <el-icon><Monitor /></el-icon>
                                打开终端
                            </el-button>
                        </el-space>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card class="config-card">
                        <template #header>
                            <span>系统信息</span>
                        </template>
                        <el-descriptions :column="1" border>
                            <el-descriptions-item label="版本">v0.1.0</el-descriptions-item>
                            <el-descriptions-item label="Python">3.11+</el-descriptions-item>
                            <el-descriptions-item label="Gateway 端口">8000</el-descriptions-item>
                            <el-descriptions-item label="WebUI 端口">8080</el-descriptions-item>
                        </el-descriptions>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    `
});