{% extends "base.html" %}

{% block title %}TaskWatch - {{ task.name }}{% endblock %}

{% block content %}
<div class="mb-8">
    <nav class="flex mb-4">
        <a href="/tasks" class="text-sm text-indigo-600 hover:text-indigo-900">任务管理</a>
        <span class="mx-2 text-gray-400">/</span>
        <span class="text-sm text-gray-500">{{ task.name }}</span>
    </nav>
    <div class="sm:flex sm:items-center sm:justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">{{ task.name }}</h1>
            <p class="mt-1 text-sm text-gray-500">ID: {{ task.id }} | {{ task.schedule_type }}: {{ task.schedule }}</p>
        </div>
        <div class="mt-4 sm:mt-0 flex gap-3">
            <button onclick="runTask({{ task.id }})" class="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700">
                &#9654; 运行
            </button>
            <button onclick="toggleTask({{ task.id }})" class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50">
                {% if task.enabled %}禁用{% else %}启用{% endif %}
            </button>
            <button onclick="deleteTask({{ task.id }})" class="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700">
                删除
            </button>
        </div>
    </div>
</div>

<!-- Task Info Card -->
<div class="bg-white shadow rounded-lg p-6 mb-8">
    <h3 class="text-lg font-medium text-gray-900 mb-4">任务信息</h3>
    <div class="grid grid-cols-2 gap-4 text-sm">
        <div><span class="text-gray-500">命令：</span><span class="font-mono">{{ task.command }}</span></div>
        <div><span class="text-gray-500">超时：</span>{{ task.timeout }}s</div>
        <div><span class="text-gray-500">重试：</span>{{ task.retry }} 次</div>
        <div><span class="text-gray-500">重试间隔：</span>{{ task.retry_interval }}s</div>
        <div><span class="text-gray-500">工作目录：</span>{{ task.working_dir or '当前目录' }}</div>
        <div><span class="text-gray-500">通知策略：</span>{{ task.notify }}</div>
        <div><span class="text-gray-500">标签：</span>{{ task.tags or '-' }}</div>
        <div><span class="text-gray-500">状态：</span>
            {% if task.enabled %}
            <span class="text-green-600 font-medium">启用</span>
            {% else %}
            <span class="text-red-600 font-medium">禁用</span>
            {% endif %}
        </div>
    </div>
</div>

<!-- Stats Card -->
<div class="grid grid-cols-3 gap-4 mb-8">
    <div class="bg-white shadow rounded-lg p-4 text-center">
        <div class="text-2xl font-bold text-gray-900">{{ stats.total_runs }}</div>
        <div class="text-sm text-gray-500">总运行次数</div>
    </div>
    <div class="bg-white shadow rounded-lg p-4 text-center">
        <div class="text-2xl font-bold {% if stats.success_rate >= 90 %}text-green-600{% else %}text-red-600{% endif %}">{{ stats.success_rate }}%</div>
        <div class="text-sm text-gray-500">成功率</div>
    </div>
    <div class="bg-white shadow rounded-lg p-4 text-center">
        <div class="text-2xl font-bold text-gray-900">{{ stats.avg_duration_ms }}ms</div>
        <div class="text-sm text-gray-500">平均耗时</div>
    </div>
</div>

<!-- Recent Runs -->
<div class="bg-white shadow rounded-lg">
    <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
        <h3 class="text-lg font-medium text-gray-900">最近运行记录</h3>
        <a href="/logs?task_id={{ task.id }}" class="text-sm text-indigo-600 hover:text-indigo-900">查看全部日志</a>
    </div>
    <div class="overflow-x-auto">
        <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">Run 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>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for run in recent_runs %}
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ run.id }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ run.start_time[:19] if run.start_time else '-' }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        {% if run.status == 'success' %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">成功</span>
                        {% elif run.status == 'failed' %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">失败</span>
                        {% elif run.status == 'timeout' %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">超时</span>
                        {% elif run.status == 'running' %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">运行中</span>
                        {% else %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{{ run.status }}</span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ run.duration_display }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ run.trigger }}</td>
                </tr>
                {% endfor %}
                {% if not recent_runs %}
                <tr>
                    <td colspan="5" class="px-6 py-4 text-center text-sm text-gray-500">暂无运行记录</td>
                </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    async function runTask(taskId) {
        const result = await apiCall(`/api/tasks/${taskId}/run`, 'POST');
        if (result) showToast('任务已触发');
    }

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

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