{% 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 shadow-xl transform transition-all sm:my-4 sm:align-middle sm:max-w-5xl sm:w-full">
            <div class="bg-white px-6 pt-5 pb-4 sm:p-6 sm:pb-4 flex flex-col max-h-[85vh]">
                <div class="flex justify-between items-center mb-4 shrink-0">
                    <h3 class="text-lg font-medium text-gray-900">运行详情</h3>
                    <button onclick="closeLogModal()" class="text-gray-400 hover:text-gray-600 p-1">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>
                </div>
                <div id="logInfo" class="grid grid-cols-3 gap-x-4 gap-y-1 text-sm mb-4 shrink-0"></div>
                <div class="flex-1 min-h-0 flex flex-col gap-3 overflow-hidden">
                    <div class="flex-1 min-h-0 flex flex-col">
                        <div class="flex justify-between items-center mb-1 shrink-0">
                            <h4 class="text-sm font-medium text-gray-700">STDOUT</h4>
                            <button onclick="copyToClipboard('logStdout')" class="text-xs text-indigo-600 hover:text-indigo-800 px-2 py-0.5 rounded hover:bg-indigo-50">复制</button>
                        </div>
                        <pre id="logStdout" class="bg-gray-900 text-green-400 p-3 rounded text-xs overflow-auto flex-1 min-h-[120px] max-h-[50vh] font-mono whitespace-pre-wrap break-all"></pre>
                    </div>
                    <div class="shrink-0 flex flex-col">
                        <div class="flex justify-between items-center mb-1">
                            <h4 class="text-sm font-medium text-gray-700">STDERR</h4>
                            <button onclick="copyToClipboard('logStderr')" class="text-xs text-indigo-600 hover:text-indigo-800 px-2 py-0.5 rounded hover:bg-indigo-50">复制</button>
                        </div>
                        <pre id="logStderr" class="bg-red-950 text-red-300 p-3 rounded text-xs overflow-auto min-h-[60px] max-h-[30vh] font-mono whitespace-pre-wrap break-all"></pre>
                    </div>
                </div>
                <div id="logFilePath" class="text-xs text-gray-500 mt-2 shrink-0"></div>
            </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);
        }
    }

    function renderLogInfo(run) {
        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.status}</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.duration ? (run.duration / 1000).toFixed(1) + 's' : '-'}</div>
            <div><span class="text-gray-500">退出码：</span>${run.exit_code !== null ? run.exit_code : '-'}</div>
        `;
    }

    function scrollLogToBottom() {
        const stdout = document.getElementById('logStdout');
        const stderr = document.getElementById('logStderr');
        stdout.scrollTop = stdout.scrollHeight;
        stderr.scrollTop = stderr.scrollHeight;
    }

    function copyToClipboard(elementId) {
        const text = document.getElementById(elementId).textContent;
        if (!text || text === '(无输出)' || text === '(无错误)') {
            showToast('无内容可复制', 'error');
            return;
        }
        navigator.clipboard.writeText(text).then(() => {
            showToast('已复制到剪贴板');
        }).catch(() => {
            const textarea = document.createElement('textarea');
            textarea.value = text;
            textarea.style.position = 'fixed';
            textarea.style.opacity = '0';
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            showToast('已复制到剪贴板');
        });
    }

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

        renderLogInfo(run);
        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');
        scrollLogToBottom();
        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 || '(无错误)';
            scrollLogToBottom();
            if (run.status !== 'running') {
                stopLogRefresh();
                renderLogInfo(run);
                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 %}