{% extends "base.html" %}

{% block title %}运行日志 - ProxyAuto Pro{% endblock %}

{% block content %}
<div class="page-header">
    <h1>运行日志</h1>
</div>

<section class="section">
    <div class="logs-toolbar">
        <div class="form-group inline">
            <label for="lines-count">显示最近</label>
            <select id="lines-count" onchange="loadLogs()">
                <option value="50">50 行</option>
                <option value="100" selected>100 行</option>
                <option value="200">200 行</option>
                <option value="300">300 行</option>
                <option value="500">500 行</option>
            </select>
        </div>
        <button class="btn btn-secondary" onclick="loadLogs()">
            <svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="23 4 23 10 17 10"/>
                <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
            </svg>
            刷新日志
        </button>
    </div>

    <div class="divider"></div>

    <div id="logs-container">
        <div class="loading-state" id="logs-loading">
            <svg class="spinner large" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" fill="none" stroke-dasharray="32" stroke-linecap="round"/>
            </svg>
            <p>加载日志中...</p>
        </div>
        <div class="empty-state" id="logs-empty" style="display: none;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                <polyline points="14 2 14 8 20 8"/>
            </svg>
            <h3>暂无日志</h3>
            <p>系统首次运行后将生成日志</p>
        </div>
        <pre id="logs-content" class="logs-content" style="display: none;"></pre>
    </div>
</section>
{% endblock %}

{% block scripts %}
<script>
async function loadLogs() {
    const linesCount = document.getElementById('lines-count').value;
    const loading = document.getElementById('logs-loading');
    const empty = document.getElementById('logs-empty');
    const content = document.getElementById('logs-content');

    loading.style.display = 'flex';
    empty.style.display = 'none';
    content.style.display = 'none';

    try {
        const response = await fetch(`/api/logs?lines=${linesCount}`);
        const result = await response.json();

        loading.style.display = 'none';

        if (result.ok) {
            if (result.empty || !result.content) {
                empty.style.display = 'flex';
            } else {
                content.textContent = result.content;
                content.style.display = 'block';
                // 滚动到底部
                content.scrollTop = content.scrollHeight;
            }
        } else {
            showToast('error', result.message);
        }
    } catch (error) {
        loading.style.display = 'none';
        showToast('error', `加载失败: ${error.message}`);
    }
}

// 页面加载时自动加载日志
document.addEventListener('DOMContentLoaded', loadLogs);
</script>
{% endblock %}