/**
 * 定时任务管理组件
 */
app.component('scheduler-page', {
    props: ['jobs'],
    emits: ['refresh'],
    setup(props, { emit }) {
        const { ref, reactive } = Vue;
        
        // 对话框状态
        const dialogVisible = ref(false);
        const dialogTitle = ref('新建定时任务');
        const editingId = ref(null);
        
        // 表单数据
        const form = reactive({
            name: '',
            agent_id: 'main',
            schedule: '',
            task: '',
            enabled: true
        });
        
        // 预定义的调度表达式
        const presets = [
            { value: '@hourly', label: '每小时' },
            { value: '@daily', label: '每天（0点）' },
            { value: '@weekly', label: '每周一（0点）' },
            { value: '@monthly', label: '每月1日（0点）' },
            { value: '0 9 * * *', label: '每天上午9点' },
            { value: '0 18 * * *', label: '每天下午6点' },
            { value: '0 9 * * 1-5', label: '工作日上午9点' },
            { value: '*/30 * * * *', label: '每30分钟' },
            { value: '0 */2 * * *', label: '每2小时' }
        ];
        
        // 打开新建对话框
        function handleAdd() {
            editingId.value = null;
            dialogTitle.value = '新建定时任务';
            Object.assign(form, {
                name: '',
                agent_id: 'main',
                schedule: '@daily',
                task: '',
                enabled: true
            });
            dialogVisible.value = true;
        }
        
        // 打开编辑对话框
        function handleEdit(job) {
            editingId.value = job.id;
            dialogTitle.value = '编辑定时任务';
            Object.assign(form, {
                name: job.name,
                agent_id: job.agent_id || 'main',
                schedule: job.schedule,
                task: job.task,
                enabled: job.enabled !== false
            });
            dialogVisible.value = true;
        }
        
        // 删除任务
        async function handleDelete(job) {
            try {
                await ElementPlus.ElMessageBox.confirm(
                    `确定要删除任务 "${job.name}" 吗？`,
                    '删除确认',
                    { type: 'warning' }
                );
                await fetch(`/api/cron-jobs/${job.id}`, { method: 'DELETE' });
                ElementPlus.ElMessage.success('删除成功');
                emit('refresh');
            } catch (e) {
                if (e !== 'cancel') {
                    ElementPlus.ElMessage.error('删除失败: ' + e.message);
                }
            }
        }
        
        // 切换启用状态
        async function handleToggle(job) {
            try {
                await fetch(`/api/cron-jobs/${job.id}/toggle`, { method: 'POST' });
                emit('refresh');
            } catch (e) {
                ElementPlus.ElMessage.error('操作失败: ' + e.message);
            }
        }
        
        // 立即执行
        async function handleRun(job) {
            try {
                await fetch(`/api/cron-jobs/${job.id}/run`, { method: 'POST' });
                ElementPlus.ElMessage.success('任务已触发执行');
            } catch (e) {
                ElementPlus.ElMessage.error('执行失败: ' + e.message);
            }
        }
        
        // 保存任务
        async function handleSave() {
            try {
                const data = { ...form };
                
                if (editingId.value) {
                    await fetch(`/api/cron-jobs/${editingId.value}`, {
                        method: 'PUT',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(data)
                    });
                } else {
                    await fetch('/api/cron-jobs', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(data)
                    });
                }
                
                dialogVisible.value = false;
                ElementPlus.ElMessage.success('保存成功');
                emit('refresh');
            } catch (e) {
                ElementPlus.ElMessage.error('保存失败: ' + e.message);
            }
        }
        
        // 格式化时间
        function formatTime(timestamp) {
            if (!timestamp) return '-';
            return new Date(timestamp * 1000).toLocaleString('zh-CN');
        }
        
        return {
            dialogVisible,
            dialogTitle,
            form,
            presets,
            handleAdd,
            handleEdit,
            handleDelete,
            handleToggle,
            handleRun,
            handleSave,
            formatTime
        };
    },
    template: `
        <div class="scheduler-page">
            <el-card class="config-card">
                <template #header>
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <span>定时任务列表</span>
                        <el-button type="primary" @click="handleAdd">
                            <el-icon><Plus /></el-icon>
                            新建任务
                        </el-button>
                    </div>
                </template>
                
                <el-alert
                    type="info"
                    :closable="false"
                    show-icon
                    style="margin-bottom: 16px"
                >
                    定时任务使用 Cron 表达式进行调度，支持预定义表达式如 @daily、@hourly 等。
                </el-alert>
                
                <el-table :data="jobs" border stripe>
                    <el-table-column prop="name" label="任务名称" width="150" />
                    <el-table-column prop="schedule" label="调度表达式" width="140">
                        <template #default="{ row }">
                            <el-tag type="info" size="small">{{ row.schedule }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="task" label="任务内容" show-overflow-tooltip />
                    <el-table-column label="上次执行" width="160">
                        <template #default="{ row }">
                            {{ formatTime(row.last_run) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="下次执行" width="160">
                        <template #default="{ row }">
                            {{ formatTime(row.next_run) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" width="80">
                        <template #default="{ row }">
                            <el-switch
                                :model-value="row.enabled !== false"
                                @change="handleToggle(row)"
                                size="small"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200" fixed="right">
                        <template #default="{ row }">
                            <el-button text type="success" @click="handleRun(row)">执行</el-button>
                            <el-button text type="primary" @click="handleEdit(row)">编辑</el-button>
                            <el-button text type="danger" @click="handleDelete(row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                
                <el-empty v-if="!jobs || jobs.length === 0" description="暂无定时任务" />
            </el-card>
            
            <!-- 编辑对话框 -->
            <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px">
                <el-form :model="form" label-width="120px">
                    <el-form-item label="任务名称" required>
                        <el-input v-model="form.name" placeholder="例如：每日数据备份" />
                    </el-form-item>
                    <el-form-item label="执行 Agent">
                        <el-input v-model="form.agent_id" placeholder="main" />
                    </el-form-item>
                    <el-form-item label="调度表达式" required>
                        <el-select v-model="form.schedule" allow-create filterable style="width: 100%">
                            <el-option v-for="p in presets" :key="p.value" :value="p.value" :label="p.value + ' - ' + p.label" />
                        </el-select>
                        <div style="margin-top: 4px; font-size: 12px; color: #909399;">
                            格式: 分 时 日 月 周，或使用 @daily, @hourly 等预定义表达式
                        </div>
                    </el-form-item>
                    <el-form-item label="任务内容" required>
                        <el-input
                            v-model="form.task"
                            type="textarea"
                            :rows="4"
                            placeholder="要执行的任务描述，Agent 将根据此描述执行任务"
                        />
                    </el-form-item>
                    <el-form-item label="启用">
                        <el-switch v-model="form.enabled" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleSave">保存</el-button>
                </template>
            </el-dialog>
        </div>
    `
});