{% extends "base.html" %}

{% block title %}TaskWatch - 运行日志{% endblock %}

{% block content %}
<div class="mb-8">
    <h1 class="text-2xl font-bold text-gray-900">运行日志</h1>
    <p class="mt-1 text-sm text-gray-500">查看所有任务的运行记录</p>
</div>

<!-- Filters -->
<div class="mb-6 bg-white shadow rounded-lg p-4">
    <div class="flex flex-wrap gap-4 items-end">
        <div>
            <label class="block text-xs font-medium text-gray-500 mb-1">搜索</label>
            <input type="text" id="filterSearch" placeholder="任务名/输出内容..." class="rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm border px-3 py-2 w-48" onkeyup="debounceSearch()">
        </div>
        <div>
            <label class="block text-xs font-medium text-gray-500 mb-1">任务</label>
            <select id="filterTask" 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="loadRuns()">
                <option value="">全部</option>
                {% for task in tasks %}
                <option value="{{ task.id }}">{{ task.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label class="block text-xs font-medium text-gray-500 mb-1">状态</label>
            <select id="filterStatus" 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="loadRuns()">
                <option value="">全部</option>
                <option value="success">成功</option>
                <option value="failed">失败</option>
                <option value="timeout">超时</option>
                <option value="running">运行中</option>
            </select>
        </div>
        <div>
            <label class="block text-xs font-medium text-gray-500 mb-1">触发方式</label>
            <select id="filterTrigger" 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="loadRuns()">
                <option value="">全部</option>
                <option value="schedule">定时调度</option>
                <option value="manual">手动触发</option>
            </select>
        </div>
        <div>
            <label class="block text-xs font-medium text-gray-500 mb-1">起始时间</label>
            <input type="datetime-local" id="filterStartDate" 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="onDateChange()">
        </div>
        <div>
            <label class="block text-xs font-medium text-gray-500 mb-1">终止时间</label>
            <input type="datetime-local" id="filterEndDate" 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="onDateChange()">
        </div>
        <div>
            <label class="block text-xs font-medium text-gray-500 mb-1">快捷范围</label>
            <div class="flex gap-2">
                <button onclick="setTimeRange('today')" class="px-3 py-2 text-xs border rounded-md hover:bg-gray-50">今天</button>
                <button onclick="setTimeRange('7d')" class="px-3 py-2 text-xs border rounded-md hover:bg-gray-50">最近7天</button>
                <button onclick="setTimeRange('30d')" class="px-3 py-2 text-xs border rounded-md hover:bg-gray-50">最近30天</button>
                <button onclick="clearTimeRange()" class="px-3 py-2 text-xs border rounded-md hover:bg-gray-50 text-gray-400">清除</button>
            </div>
        </div>
        <button onclick="loadRuns()" class="px-4 py-2 bg-indigo-600 text-white text-sm rounded-md hover:bg-indigo-700">查询</button>
    </div>
</div>

<!-- Runs 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">时间</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>
                <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="runsTable">
            <tr>
                <td colspan="7" class="px-6 py-8 text-center text-sm text-gray-500">加载中...</td>
            </tr>
        </tbody>
    </table>
</div>

<!-- Pagination -->
<div class="mt-4 flex items-center justify-between" id="paginationArea">
    <div class="text-sm text-gray-500" id="paginationInfo"></div>
    <div class="flex gap-1" id="paginationButtons"></div>
</div>

<!-- Log Detail Modal -->
<div id="logModal" 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="closeLogModal()"></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-3xl sm:w-full">
            <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">运行详情</h3>
                <div id="logDetail" class="space-y-4">
                    <div id="logInfo" class="grid grid-cols-2 gap-2 text-sm"></div>
                    <div>
                        <h4 class="text-sm font-medium text-gray-700 mb-1">STDOUT</h4>
                        <pre id="logStdout" class="bg-gray-50 p-3 rounded text-xs overflow-auto max-h-40 font-mono"></pre>
                    </div>
                    <div>
                        <h4 class="text-sm font-medium text-gray-700 mb-1">STDERR</h4>
                        <pre id="logStderr" class="bg-red-50 p-3 rounded text-xs overflow-auto max-h-40 font-mono text-red-700"></pre>
                    </div>
                    <div id="logFilePath" class="text-xs text-gray-500"></div>
                </div>
            </div>
            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button onclick="closeLogModal()" class="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 sm:mt-0 sm:w-auto sm:text-sm">
                    关闭
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    let currentPage = 1;
    const pageSize = 50;
    let searchTimer = null;
    let logRefreshTimer = null;

    function debounceSearch() {
        clearTimeout(searchTimer);
        searchTimer = setTimeout(() => {
            currentPage = 1;
            loadRuns();
        }, 300);
    }

    function onDateChange() {
        currentPage = 1;
        loadRuns();
    }

    function setTimeRange(range) {
        const now = new Date();
        let start, end;
        if (range === 'today') {
            start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0);
            end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59);
        } else if (range === '7d') {
            start = new Date(now);
            start.setDate(start.getDate() - 7);
            start.setHours(0, 0, 0, 0);
            end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59);
        } else if (range === '30d') {
            start = new Date(now);
            start.setDate(start.getDate() - 30);
            start.setHours(0, 0, 0, 0);
            end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59);
        }
        document.getElementById('filterStartDate').value = formatDatetimeLocal(start);
        document.getElementById('filterEndDate').value = formatDatetimeLocal(end);
        currentPage = 1;
        loadRuns();
    }

    function clearTimeRange() {
        document.getElementById('filterStartDate').value = '';
        document.getElementById('filterEndDate').value = '';
        currentPage = 1;
        loadRuns();
    }

    function formatDatetimeLocal(date) {
        const y = date.getFullYear();
        const m = String(date.getMonth() + 1).padStart(2, '0');
        const d = String(date.getDate()).padStart(2, '0');
        const h = String(date.getHours()).padStart(2, '0');
        const min = String(date.getMinutes()).padStart(2, '0');
        return `${y}-${m}-${d}T${h}:${min}`;
    }

    function getStartDateParam() {
        const val = document.getElementById('filterStartDate').value;
        if (!val) return '';
        return val.replace('T', ' ') + ':00';
    }

    function getEndDateParam() {
        const val = document.getElementById('filterEndDate').value;
        if (!val) return '';
        return val.replace('T', ' ') + ':59';
    }

    function goToPage(page) {
        currentPage = page;
        loadRuns();
    }

    function renderPagination(total) {
        const totalPages = Math.max(1, Math.ceil(total / pageSize));
        const info = document.getElementById('paginationInfo');
        const buttons = document.getElementById('paginationButtons');

        const start = (currentPage - 1) * pageSize + 1;
        const end = Math.min(currentPage * pageSize, total);
        info.textContent = total > 0 ? `第 ${start}-${end} 条，共 ${total} 条` : '暂无记录';

        let html = '';
        // Previous
        html += `<button onclick="goToPage(${currentPage - 1})" ${currentPage <= 1 ? 'disabled' : ''} class="px-3 py-1 text-sm border rounded-md ${currentPage <= 1 ? 'text-gray-300 cursor-not-allowed' : 'hover:bg-gray-50'}">上一页</button>`;

        // Page numbers
        const maxVisible = 7;
        let startPage = Math.max(1, currentPage - 3);
        let endPage = Math.min(totalPages, startPage + maxVisible - 1);
        if (endPage - startPage < maxVisible - 1) {
            startPage = Math.max(1, endPage - maxVisible + 1);
        }

        if (startPage > 1) {
            html += `<button onclick="goToPage(1)" class="px-3 py-1 text-sm border rounded-md hover:bg-gray-50">1</button>`;
            if (startPage > 2) html += `<span class="px-2 py-1 text-sm text-gray-400">...</span>`;
        }

        for (let i = startPage; i <= endPage; i++) {
            if (i === currentPage) {
                html += `<button class="px-3 py-1 text-sm border rounded-md bg-indigo-600 text-white">${i}</button>`;
            } else {
                html += `<button onclick="goToPage(${i})" class="px-3 py-1 text-sm border rounded-md hover:bg-gray-50">${i}</button>`;
            }
        }

        if (endPage < totalPages) {
            if (endPage < totalPages - 1) html += `<span class="px-2 py-1 text-sm text-gray-400">...</span>`;
            html += `<button onclick="goToPage(${totalPages})" class="px-3 py-1 text-sm border rounded-md hover:bg-gray-50">${totalPages}</button>`;
        }

        // Next
        html += `<button onclick="goToPage(${currentPage + 1})" ${currentPage >= totalPages ? 'disabled' : ''} class="px-3 py-1 text-sm border rounded-md ${currentPage >= totalPages ? 'text-gray-300 cursor-not-allowed' : 'hover:bg-gray-50'}">下一页</button>`;

        buttons.innerHTML = html;
    }

    async function loadRuns() {
        const taskId = document.getElementById('filterTask').value;
        const status = document.getElementById('filterStatus').value;
        const trigger = document.getElementById('filterTrigger').value;
        const search = document.getElementById('filterSearch').value.trim();
        const startDate = getStartDateParam();
        const endDate = getEndDateParam();
        const offset = (currentPage - 1) * pageSize;
        let url = `/api/runs?limit=${pageSize}&offset=${offset}`;
        if (taskId) url += `&task_id=${taskId}`;
        if (status) url += `&status=${status}`;
        if (trigger) url += `&trigger=${trigger}`;
        if (startDate) url += `&start_date=${encodeURIComponent(startDate)}`;
        if (endDate) url += `&end_date=${encodeURIComponent(endDate)}`;
        if (search) url += `&search=${encodeURIComponent(search)}`;

        const data = await apiCall(url);
        if (data) {
            const tbody = document.getElementById('runsTable');
            tbody.innerHTML = data.runs.map(run => {
                const statusBadge = {
                    success: '<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">成功</span>',
                    failed: '<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">失败</span>',
                    timeout: '<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">超时</span>',
                    running: '<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">运行中</span>',
                }[run.status] || `<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">${run.status}</span>`;
                const duration = run.duration ? (run.duration / 1000).toFixed(1) + 's' : '-';
                const startTime = run.start_time ? run.start_time.substring(0, 19) : '-';
                const triggerLabel = { schedule: '定时调度', manual: '手动触发' }[run.trigger] || run.trigger || '-';
                return `<tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${startTime}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${run.task_name || '-'}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${triggerLabel}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">${statusBadge}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${duration}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${run.retry_count || 0}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm"><button onclick="viewLog(${run.id})" class="text-indigo-600 hover:text-indigo-900">查看日志</button>${run.status === 'running' ? `<button onclick="confirmKill(${run.id})" class="ml-2 text-red-600 hover:text-red-900">终止</button>` : `<button onclick="confirmDelete(${run.id})" class="ml-2 text-red-600 hover:text-red-900">删除</button>`}</td>
                </tr>`;
            }).join('') || '<tr><td colspan="7" class="px-6 py-8 text-center text-sm text-gray-500">暂无运行记录</td></tr>';

            renderPagination(data.total);
        }
    }

    async function viewLog(runId) {
        const run = await apiCall(`/api/runs/${runId}`);
        if (!run) return;

        const triggerLabel = { schedule: '定时调度', manual: '手动触发' }[run.trigger] || run.trigger || '-';
        document.getElementById('logInfo').innerHTML = `
            <div><span class="text-gray-500">任务名：</span>${run.task_name || '-'}</div>
            <div><span class="text-gray-500">触发方式：</span>${triggerLabel}</div>
            <div><span class="text-gray-500">开始时间：</span>${run.start_time ? run.start_time.substring(0, 19) : '-'}</div>
            <div><span class="text-gray-500">结束时间：</span>${run.end_time ? run.end_time.substring(0, 19) : '-'}</div>
            <div><span class="text-gray-500">状态：</span>${run.status}</div>
            <div><span class="text-gray-500">退出码：</span>${run.exit_code !== null ? run.exit_code : '-'}</div>
            <div><span class="text-gray-500">耗时：</span>${run.duration ? (run.duration / 1000).toFixed(1) + 's' : '-'}</div>
        `;
        document.getElementById('logStdout').textContent = run.stdout_summary || '(无输出)';
        document.getElementById('logStderr').textContent = run.stderr_summary || '(无错误)';
        document.getElementById('logFilePath').textContent = run.log_file ? `日志文件: ${run.log_file}` : '';
        document.getElementById('logModal').classList.remove('hidden');
        if (run.status === 'running') {
            startLogRefresh(runId);
        }
    }

    function startLogRefresh(runId) {
        stopLogRefresh();
        logRefreshTimer = setInterval(async () => {
            const run = await apiCall(`/api/runs/${runId}`);
            if (!run) return;
            document.getElementById('logStdout').textContent = run.stdout_summary || '(无输出)';
            document.getElementById('logStderr').textContent = run.stderr_summary || '(无错误)';
            if (run.status !== 'running') {
                stopLogRefresh();
                const triggerLabel = { schedule: '定时调度', manual: '手动触发' }[run.trigger] || run.trigger || '-';
                document.getElementById('logInfo').innerHTML = `
                    <div><span class="text-gray-500">任务名：</span>${run.task_name || '-'}</div>
                    <div><span class="text-gray-500">触发方式：</span>${triggerLabel}</div>
                    <div><span class="text-gray-500">开始时间：</span>${run.start_time ? run.start_time.substring(0, 19) : '-'}</div>
                    <div><span class="text-gray-500">结束时间：</span>${run.end_time ? run.end_time.substring(0, 19) : '-'}</div>
                    <div><span class="text-gray-500">状态：</span>${run.status}</div>
                    <div><span class="text-gray-500">退出码：</span>${run.exit_code !== null ? run.exit_code : '-'}</div>
                    <div><span class="text-gray-500">耗时：</span>${run.duration ? (run.duration / 1000).toFixed(1) + 's' : '-'}</div>
                `;
                loadRuns();
            }
        }, 3000);
    }

    function stopLogRefresh() {
        if (logRefreshTimer) { clearInterval(logRefreshTimer); logRefreshTimer = null; }
    }

    function closeLogModal() {
        stopLogRefresh();
        document.getElementById('logModal').classList.add('hidden');
    }

    function confirmKill(runId) {
        if (confirm('确定要终止此运行中的任务吗？')) {
            killRun(runId);
        }
    }

    async function killRun(runId) {
        const resp = await fetch(`/api/runs/${runId}/kill`, { method: 'POST' });
        if (resp.ok) {
            showToast('任务已终止');
            loadRuns();
        } else {
            const data = await resp.json();
            showToast(data.detail || '终止失败', 'error');
        }
    }

    function confirmDelete(runId) {
        if (confirm('确定要删除这条运行记录吗？')) {
            deleteRun(runId);
        }
    }

    async function deleteRun(runId) {
        const resp = await fetch(`/api/runs/${runId}`, { method: 'DELETE' });
        if (resp.ok) {
            loadRuns();
        } else {
            const data = await resp.json();
            alert(data.detail || '删除失败');
        }
    }

    // Initial load
    loadRuns();
</script>
{% endblock %}