{% extends "base.html" %}

{% block title %}TaskWatch - 任务管理{% endblock %}

{% block content %}
<div class="sm:flex sm:items-center sm:justify-between mb-8">
    <div>
        <h1 class="text-2xl font-bold text-gray-900">任务管理</h1>
        <p class="mt-1 text-sm text-gray-500">管理所有定时任务</p>
    </div>
    <div class="mt-4 sm:mt-0">
        <button onclick="openAddModal()" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
            + 新建任务
        </button>
    </div>
</div>

<!-- Search & Filter -->
<div class="mb-6 flex gap-4">
    <input type="text" id="searchInput" placeholder="搜索任务名/标签..." class="flex-1 max-w-xs rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-2" onkeyup="filterTasks()">
    <select id="statusFilter" class="rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-2" onchange="filterTasks()">
        <option value="">全部</option>
        <option value="enabled">启用</option>
        <option value="disabled">禁用</option>
    </select>
</div>

<!-- Tasks Table -->
<div class="bg-white shadow rounded-lg overflow-hidden">
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">ID</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">任务名</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">调度规则</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">上次运行</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">状态</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">操作</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200" id="tasksTable">
            {% for task in tasks %}
            <tr class="task-row" data-name="{{ task.name }}" data-enabled="{{ 'true' if task.enabled else 'false' }}">
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ task.id }}</td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <a href="/tasks/{{ task.id }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-900">{{ task.name }}</a>
                    {% if task.tags %}
                    <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">{{ task.tags }}</span>
                    {% endif %}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    <span class="px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">{{ task.schedule_type }}</span>
                    {{ task.schedule }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ task.last_run_time or '-' }}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm">
                    <button onclick="toggleTask({{ task.id }})" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none {% if task.enabled %}bg-green-500{% else %}bg-gray-200{% endif %}" role="switch" aria-checked="{{ task.enabled }}">
                        <span class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out {% if task.enabled %}translate-x-5{% else %}translate-x-0{% endif %}"></span>
                    </button>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm space-x-2">
                    <button id="runBtn-{{ task.id }}" onclick="runTask({{ task.id }}, '{{ task.name }}')" class="text-green-600 hover:text-green-900" title="运行">&#9654;</button>
                    <button onclick="openEditModal({{ task.id }})" class="text-blue-600 hover:text-blue-900" title="编辑">&#9998;</button>
                    <button onclick="deleteTask({{ task.id }})" class="text-red-600 hover:text-red-900" title="删除">&#128465;</button>
                </td>
            </tr>
            {% endfor %}
            {% if not tasks %}
            <tr>
                <td colspan="6" class="px-6 py-8 text-center text-sm text-gray-500">暂无任务，点击"新建任务"开始</td>
            </tr>
            {% endif %}
        </tbody>
    </table>
</div>

<!-- Add/Edit Task Modal -->
<div id="taskModal" class="fixed inset-0 z-50 hidden">
    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
            <div class="absolute inset-0 bg-gray-500 opacity-75" onclick="closeModal()"></div>
        </div>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <form id="taskForm" onsubmit="submitTask(event)">
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <h3 class="text-lg font-medium text-gray-900 mb-4" id="modalTitle">新建任务</h3>
                    <input type="hidden" id="taskId" value="">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">任务名称 *</label>
                            <input type="text" id="taskName" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-2">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">执行命令 *</label>
                            <textarea id="taskCommand" required rows="2" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-2"></textarea>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700">调度方式 *</label>
                                <select id="taskScheduleType" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-2">
                                    <option value="cron">cron</option>
                                    <option value="interval">interval</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700">调度表达式 *</label>
                                <input type="text" id="taskSchedule" required placeholder="0 9 * * *" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-2">
                            </div>
                        </div>
                        <div class="grid grid-cols-3 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700">超时(秒)</label>
                                <input type="number" id="taskTimeout" value="3600" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-2">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700">重试次数</label>
                                <input type="number" id="taskRetry" value="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-2">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700">重试间隔(秒)</label>
                                <input type="number" id="taskRetryInterval" value="60" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-2">
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">工作目录</label>
                            <input type="text" id="taskWorkingDir" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-2">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">标签</label>
                            <input type="text" id="taskTags" placeholder="逗号分隔" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-2">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">通知策略</label>
                            <select id="taskNotify" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-2">
                                <option value="on_failure">仅失败</option>
                                <option value="always">始终通知</option>
                                <option value="never">不通知</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
                        保存
                    </button>
                    <button type="button" onclick="closeModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:w-auto sm:text-sm">
                        取消
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function openAddModal() {
        document.getElementById('modalTitle').textContent = '新建任务';
        document.getElementById('taskId').value = '';
        document.getElementById('taskForm').reset();
        document.getElementById('taskModal').classList.remove('hidden');
    }

    function openEditModal(taskId) {
        fetch(`/api/tasks/${taskId}`)
            .then(r => r.json())
            .then(task => {
                document.getElementById('modalTitle').textContent = '编辑任务';
                document.getElementById('taskId').value = task.id;
                document.getElementById('taskName').value = task.name;
                document.getElementById('taskCommand').value = task.command;
                document.getElementById('taskScheduleType').value = task.schedule_type;
                document.getElementById('taskSchedule').value = task.schedule;
                document.getElementById('taskTimeout').value = task.timeout || 3600;
                document.getElementById('taskRetry').value = task.retry || 3;
                document.getElementById('taskRetryInterval').value = task.retry_interval || 60;
                document.getElementById('taskWorkingDir').value = task.working_dir || '';
                document.getElementById('taskTags').value = task.tags || '';
                document.getElementById('taskNotify').value = task.notify || 'on_failure';
                document.getElementById('taskModal').classList.remove('hidden');
            });
    }

    function closeModal() {
        document.getElementById('taskModal').classList.add('hidden');
    }

    async function submitTask(e) {
        e.preventDefault();
        const id = document.getElementById('taskId').value;
        const data = {
            name: document.getElementById('taskName').value,
            command: document.getElementById('taskCommand').value,
            schedule: document.getElementById('taskSchedule').value,
            schedule_type: document.getElementById('taskScheduleType').value,
            timeout: parseInt(document.getElementById('taskTimeout').value),
            retry: parseInt(document.getElementById('taskRetry').value),
            retry_interval: parseInt(document.getElementById('taskRetryInterval').value),
            working_dir: document.getElementById('taskWorkingDir').value || null,
            tags: document.getElementById('taskTags').value || null,
            notify: document.getElementById('taskNotify').value,
        };

        const url = id ? `/api/tasks/${id}` : '/api/tasks';
        const method = id ? 'PUT' : 'POST';
        const result = await apiCall(url, method, data);
        if (result) {
            showToast(id ? '任务已更新' : '任务已创建');
            setTimeout(() => location.reload(), 500);
        }
    }

    async function toggleTask(taskId) {
        const result = await apiCall(`/api/tasks/${taskId}/toggle`, 'PATCH');
        if (result) {
            showToast(result.enabled ? '任务已启用' : '任务已禁用');
            setTimeout(() => location.reload(), 500);
        }
    }

    async function runTask(taskId, taskName) {
        const btn = document.getElementById(`runBtn-${taskId}`);
        if (btn.disabled) return;

        // Set button to loading state
        btn.disabled = true;
        btn.innerHTML = '&#8987;';
        btn.classList.remove('text-green-600', 'hover:text-green-900');
        btn.classList.add('text-yellow-500', 'cursor-wait');

        showToast(`正在运行: ${taskName}...`, 'running');

        const result = await apiCall(`/api/tasks/${taskId}/run`, 'POST');
        if (!result) {
            resetRunBtn(btn);
            return;
        }

        // Poll for run completion
        let attempts = 0;
        const maxAttempts = 120; // 2 minutes max
        const pollInterval = setInterval(async () => {
            attempts++;
            if (attempts > maxAttempts) {
                clearInterval(pollInterval);
                showToast(`${taskName} 运行超时，请查看日志`, 'error');
                resetRunBtn(btn);
                return;
            }

            try {
                const resp = await fetch(`/api/runs?task_id=${taskId}&limit=1`);
                if (!resp.ok) return;
                const data = await resp.json();
                if (!data.runs || data.runs.length === 0) return;

                const run = data.runs[0];
                if (run.status === 'running') return; // still running

                clearInterval(pollInterval);
                resetRunBtn(btn);
                hideToast();

                if (run.status === 'success') {
                    showToast(`${taskName} 运行成功`, 'success');
                } else {
                    showToast(`${taskName} 运行${run.status === 'failed' ? '失败' : run.status}`, 'error');
                }
            } catch (e) {
                // ignore poll errors
            }
        }, 1000);
    }

    function resetRunBtn(btn) {
        btn.disabled = false;
        btn.innerHTML = '&#9654;';
        btn.classList.remove('text-yellow-500', 'cursor-wait');
        btn.classList.add('text-green-600', 'hover:text-green-900');
    }

    async function deleteTask(taskId) {
        if (!confirm('确定要删除此任务吗？')) return;
        const result = await apiCall(`/api/tasks/${taskId}`, 'DELETE');
        if (result) {
            showToast('任务已删除');
            setTimeout(() => location.reload(), 500);
        }
    }

    function filterTasks() {
        const search = document.getElementById('searchInput').value.toLowerCase();
        const status = document.getElementById('statusFilter').value;
        document.querySelectorAll('.task-row').forEach(row => {
            const name = row.dataset.name.toLowerCase();
            const enabled = row.dataset.enabled === 'true';
            let show = true;
            if (search && !name.includes(search)) show = false;
            if (status === 'enabled' && !enabled) show = false;
            if (status === 'disabled' && enabled) show = false;
            row.style.display = show ? '' : 'none';
        });
    }
</script>
{% endblock %}