// 执行历史页面JavaScript

class HistoryManager {
    constructor() {
        this.currentTaskPage = 1;
        this.currentLogsPage = 1;
        this.pageSize = 20;
        this.charts = {};
        this.searchParams = {
            taskType: '',
            taskStatus: '',
            startDate: '',
            endDate: ''
        };
        this.logSearchParams = {
            level: '',
            category: '',
            keyword: ''
        };

        this.init();
    }

    async init() {
        console.log('初始化执行历史页面...');

        // 绑定事件
        this.bindEvents();

        // 初始化图表
        this.initCharts();

        // 加载初始数据
        await this.loadTaskHistory();
        await this.loadSystemLogs();
        await this.loadStatistics();

        console.log('执行历史页面初始化完成');
    }

    bindEvents() {
        // 任务历史筛选
        document.getElementById('taskFilterForm').addEventListener('submit', (e) => {
            e.preventDefault();
            this.searchParams.taskType = document.getElementById('taskTypeFilter').value;
            this.searchParams.taskStatus = document.getElementById('taskStatusFilter').value;
            this.searchParams.startDate = document.getElementById('startDate').value;
            this.searchParams.endDate = document.getElementById('endDate').value;
            this.currentTaskPage = 1;
            this.loadTaskHistory();
        });

        // 系统日志筛选
        document.getElementById('logFilterForm').addEventListener('submit', (e) => {
            e.preventDefault();
            this.logSearchParams.level = document.getElementById('logLevelFilter').value;
            this.logSearchParams.category = document.getElementById('logCategoryFilter').value;
            this.logSearchParams.keyword = document.getElementById('logSearchKeyword').value;
            this.currentLogsPage = 1;
            this.loadSystemLogs();
        });

        // 选项卡切换事件
        document.getElementById('stats-tab').addEventListener('shown.bs.tab', () => {
            this.loadStatistics();
            this.updateCharts();
        });
    }

    initCharts() {
        // 任务趋势图
        const taskTrendCtx = document.getElementById('taskTrendChart');
        if (taskTrendCtx) {
            this.charts.taskTrend = new Chart(taskTrendCtx, {
                type: 'line',
                data: {
                    labels: [],
                    datasets: [{
                        label: '成功任务',
                        data: [],
                        borderColor: '#28a745',
                        backgroundColor: 'rgba(40, 167, 69, 0.1)',
                        tension: 0.4
                    }, {
                        label: '失败任务',
                        data: [],
                        borderColor: '#dc3545',
                        backgroundColor: 'rgba(220, 53, 69, 0.1)',
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                precision: 0
                            }
                        }
                    }
                }
            });
        }

        // 日志级别分布图
        const logLevelCtx = document.getElementById('logLevelChart');
        if (logLevelCtx) {
            this.charts.logLevel = new Chart(logLevelCtx, {
                type: 'doughnut',
                data: {
                    labels: ['错误', '警告', '信息', '调试'],
                    datasets: [{
                        data: [0, 0, 0, 0],
                        backgroundColor: ['#dc3545', '#ffc107', '#17a2b8', '#6c757d']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                        }
                    }
                }
            });
        }
    }

    async loadTaskHistory() {
        try {
            this.showTaskLoading(true);

            // 构建查询参数
            const params = new URLSearchParams({
                limit: this.pageSize,
                offset: (this.currentTaskPage - 1) * this.pageSize
            });

            if (this.searchParams.taskType) params.append('taskType', this.searchParams.taskType);
            if (this.searchParams.taskStatus) params.append('status', this.searchParams.taskStatus);

            const response = await fetch(`/api/history?${params}`);
            const result = await response.json();

            if (result.success) {
                this.renderTaskHistoryTable(result.data);
                this.renderTaskPagination(result.pagination);
            } else {
                this.showAlert('加载任务历史失败: ' + result.error, 'danger');
            }
        } catch (error) {
            console.error('加载任务历史失败:', error);
            this.showAlert('加载任务历史失败: ' + error.message, 'danger');
        } finally {
            this.showTaskLoading(false);
        }
    }

    async loadSystemLogs() {
        try {
            this.showLogsLoading(true);

            // 构建查询参数
            const params = new URLSearchParams({
                limit: this.pageSize,
                offset: (this.currentLogsPage - 1) * this.pageSize
            });

            if (this.logSearchParams.level) params.append('level', this.logSearchParams.level);
            if (this.logSearchParams.category) params.append('category', this.logSearchParams.category);

            let response;
            if (this.logSearchParams.keyword) {
                response = await fetch(`/api/history/logs/search?keyword=${encodeURIComponent(this.logSearchParams.keyword)}&limit=${this.pageSize}`);
            } else {
                response = await fetch(`/api/history/logs/system?${params}`);
            }

            const result = await response.json();

            if (result.success) {
                this.renderSystemLogsTable(result.data);
                this.renderLogsPagination(result.pagination);
            } else {
                this.showAlert('加载系统日志失败: ' + result.error, 'danger');
            }
        } catch (error) {
            console.error('加载系统日志失败:', error);
            this.showAlert('加载系统日志失败: ' + error.message, 'danger');
        } finally {
            this.showLogsLoading(false);
        }
    }

    async loadStatistics() {
        try {
            // 加载任务统计
            const taskStatsResponse = await fetch('/api/history/stats/summary');
            const taskStatsResult = await taskStatsResponse.json();

            if (taskStatsResult.success) {
                this.updateTaskStatistics(taskStatsResult.data.summary);
                this.renderTaskStats(taskStatsResult.data);
            }

            // 加载日志统计
            const logStatsResponse = await fetch('/api/history/logs/stats');
            const logStatsResult = await logStatsResponse.json();

            if (logStatsResult.success) {
                this.updateLogStatistics(logStatsResult.data.summary);
                this.renderLogStats(logStatsResult.data);
            }

        } catch (error) {
            console.error('加载统计数据失败:', error);
            this.showAlert('加载统计数据失败: ' + error.message, 'danger');
        }
    }

    renderTaskHistoryTable(tasks) {
        const tbody = document.getElementById('taskHistoryTableBody');

        if (tasks.length === 0) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="8" class="text-center p-4">
                        <i class="bi bi-inbox fs-1 text-muted"></i>
                        <p class="text-muted mt-2">暂无任务历史</p>
                    </td>
                </tr>
            `;
            return;
        }

        tbody.innerHTML = tasks.map(task => `
            <tr>
                <td>
                    <span class="badge bg-secondary">${this.getTaskTypeLabel(task.task_type)}</span>
                </td>
                <td>${task.task_name}</td>
                <td>
                    <span class="badge ${this.getStatusClass(task.status)}">
                        <i class="bi bi-${this.getStatusIcon(task.status)}"></i>
                        ${this.getStatusText(task.status)}
                    </span>
                </td>
                <td>
                    <small class="text-muted">${this.formatDateTime(task.start_time)}</small>
                </td>
                <td>
                    <small class="text-muted">${task.end_time ? this.formatDateTime(task.end_time) : '-'}</small>
                </td>
                <td>
                    <small class="text-muted">${task.duration ? this.formatDuration(task.duration) : '-'}</small>
                </td>
                <td>
                    <small class="text-muted">${task.result_summary || '-'}</small>
                </td>
                <td>
                    <button class="btn btn-sm btn-outline-primary" onclick="historyManager.showTaskDetail(${task.id})">
                        <i class="bi bi-eye"></i> 详情
                    </button>
                </td>
            </tr>
        `).join('');
    }

    renderSystemLogsTable(logs) {
        const tbody = document.getElementById('systemLogsTableBody');

        if (logs.length === 0) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="5" class="text-center p-4">
                        <i class="bi bi-inbox fs-1 text-muted"></i>
                        <p class="text-muted mt-2">暂无系统日志</p>
                    </td>
                </tr>
            `;
            return;
        }

        tbody.innerHTML = logs.map(log => `
            <tr>
                <td>
                    <small class="text-muted">${this.formatDateTime(log.timestamp)}</small>
                </td>
                <td>
                    <span class="badge ${this.getLogLevelClass(log.level)}">${log.level.toUpperCase()}</span>
                </td>
                <td>
                    <small>${log.category || '-'}</small>
                </td>
                <td>
                    <small>${log.message}</small>
                </td>
                <td>
                    <small class="text-muted">${log.source}</small>
                </td>
            </tr>
        `).join('');
    }

    renderTaskPagination(pagination) {
        const paginationElement = document.getElementById('taskPagination');
        this.renderPagination(paginationElement, pagination, this.currentTaskPage, (page) => {
            this.currentTaskPage = page;
            this.loadTaskHistory();
        });
    }

    renderLogsPagination(pagination) {
        const paginationElement = document.getElementById('logsPagination');
        this.renderPagination(paginationElement, pagination, this.currentLogsPage, (page) => {
            this.currentLogsPage = page;
            this.loadSystemLogs();
        });
    }

    renderPagination(container, pagination, currentPage, onPageChange) {
        const totalPages = Math.ceil(pagination.total / pagination.limit);

        if (totalPages <= 1) {
            container.innerHTML = '';
            return;
        }

        let paginationHTML = '';

        // 上一页
        paginationHTML += `
            <li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                <a class="page-link" href="#" onclick="historyManager.goToTaskPage(${currentPage - 1}); return false;">
                    <i class="bi bi-chevron-left"></i>
                </a>
            </li>
        `;

        // 页码
        const startPage = Math.max(1, currentPage - 2);
        const endPage = Math.min(totalPages, currentPage + 2);

        for (let i = startPage; i <= endPage; i++) {
            paginationHTML += `
                <li class="page-item ${i === currentPage ? 'active' : ''}">
                    <a class="page-link" href="#" onclick="historyManager.goToTaskPage(${i}); return false;">${i}</a>
                </li>
            `;
        }

        // 下一页
        paginationHTML += `
            <li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
                <a class="page-link" href="#" onclick="historyManager.goToTaskPage(${currentPage + 1}); return false;">
                    <i class="bi bi-chevron-right"></i>
                </a>
            </li>
        `;

        container.innerHTML = paginationHTML;
    }

    updateTaskStatistics(stats) {
        document.getElementById('totalTasks').textContent = stats.total;
        document.getElementById('successTasks').textContent = stats.success;
        document.getElementById('failedTasks').textContent = stats.failed;
        document.getElementById('successRate').textContent = stats.success_rate + '%';
    }

    updateLogStatistics(stats) {
        // 更新日志级别图表
        if (this.charts.logLevel) {
            this.charts.logLevel.data.datasets[0].data = [
                stats.error,
                stats.warning,
                stats.info,
                stats.debug
            ];
            this.charts.logLevel.update();
        }
    }

    renderTaskStats(data) {
        const content = document.getElementById('taskStatsContent');

        if (!data.daily || data.daily.length === 0) {
            content.innerHTML = '<p class="text-muted">暂无数据</p>';
            return;
        }

        let html = '<table class="table table-sm">';
        html += '<thead><tr><th>日期</th><th>总任务</th><th>成功</th><th>失败</th><th>成功率</th></tr></thead><tbody>';

        data.daily.slice(0, 7).forEach(day => {
            const successRate = day.total > 0 ? ((day.success / day.total) * 100).toFixed(1) : '0';
            html += `
                <tr>
                    <td>${this.formatDate(day.date)}</td>
                    <td>${day.total}</td>
                    <td class="text-success">${day.success}</td>
                    <td class="text-danger">${day.failed}</td>
                    <td>${successRate}%</td>
                </tr>
            `;
        });

        html += '</tbody></table>';
        content.innerHTML = html;
    }

    renderLogStats(data) {
        const content = document.getElementById('logStatsContent');

        const summary = data.summary;
        let html = '<div class="row">';
        html += '<div class="col-6"><small class="text-muted">总日志数:</small><div><strong>' + summary.total + '</strong></div></div>';
        html += '<div class="col-6"><small class="text-muted">错误:</small><div><strong class="text-danger">' + summary.error + '</strong></div></div>';
        html += '<div class="col-6"><small class="text-muted">警告:</small><div><strong class="text-warning">' + summary.warning + '</strong></div></div>';
        html += '<div class="col-6"><small class="text-muted">信息:</small><div><strong class="text-info">' + summary.info + '</strong></div></div>';
        html += '</div>';

        content.innerHTML = html;
    }

    async updateCharts() {
        try {
            // 加载每日任务统计
            const response = await fetch('/api/dashboard/charts/tasks');
            const result = await response.json();

            if (result.success && this.charts.taskTrend) {
                const labels = result.data.map(item => this.formatDate(item.date));
                const successData = result.data.map(item => item.scrape_success + item.validation_success);
                const failedData = result.data.map(item => item.scrape_failed + item.validation_failed);

                this.charts.taskTrend.data.labels = labels;
                this.charts.taskTrend.data.datasets[0].data = successData;
                this.charts.taskTrend.data.datasets[1].data = failedData;
                this.charts.taskTrend.update();
            }
        } catch (error) {
            console.error('更新图表失败:', error);
        }
    }

    async showTaskDetail(taskId) {
        try {
            const response = await fetch(`/api/history/${taskId}`);
            const result = await response.json();

            if (result.success) {
                const task = result.data;
                const content = document.getElementById('taskDetailContent');

                content.innerHTML = `
                    <div class="row">
                        <div class="col-md-6">
                            <strong>任务类型:</strong><br>
                            <span class="badge bg-secondary">${this.getTaskTypeLabel(task.task_type)}</span>
                        </div>
                        <div class="col-md-6">
                            <strong>任务名称:</strong><br>
                            ${task.task_name}
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-6">
                            <strong>状态:</strong><br>
                            <span class="badge ${this.getStatusClass(task.status)}">
                                ${this.getStatusText(task.status)}
                            </span>
                        </div>
                        <div class="col-md-6">
                            <strong>执行时长:</strong><br>
                            ${task.duration ? this.formatDuration(task.duration) : '-'}
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-6">
                            <strong>开始时间:</strong><br>
                            ${this.formatDateTime(task.start_time)}
                        </div>
                        <div class="col-md-6">
                            <strong>结束时间:</strong><br>
                            ${task.end_time ? this.formatDateTime(task.end_time) : '-'}
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-12">
                            <strong>结果摘要:</strong><br>
                            <p>${task.result_summary || '暂无摘要'}</p>
                        </div>
                    </div>
                    ${task.error_message ? `
                    <div class="row">
                        <div class="col-12">
                            <strong>错误信息:</strong><br>
                            <div class="alert alert-danger">${task.error_message}</div>
                        </div>
                    </div>
                    ` : ''}
                    ${task.details ? `
                    <div class="row">
                        <div class="col-12">
                            <strong>详细信息:</strong><br>
                            <pre class="bg-light p-2 rounded"><code>${JSON.stringify(task.details, null, 2)}</code></pre>
                        </div>
                    </div>
                    ` : ''}
                `;

                // 显示模态框
                const modal = new bootstrap.Modal(document.getElementById('taskDetailModal'));
                modal.show();
            } else {
                this.showAlert('获取任务详情失败: ' + result.error, 'danger');
            }
        } catch (error) {
            console.error('获取任务详情失败:', error);
            this.showAlert('获取任务详情失败: ' + error.message, 'danger');
        }
    }

    async exportTaskHistory() {
        try {
            const params = new URLSearchParams();
            if (this.searchParams.taskType) params.append('taskType', this.searchParams.taskType);
            if (this.searchParams.taskStatus) params.append('status', this.searchParams.taskStatus);

            const response = await fetch(`/api/history/export?${params}&format=csv`);

            if (response.ok) {
                const blob = await response.blob();
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `task_history_${new Date().toISOString().slice(0, 10)}.csv`;
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url);
                document.body.removeChild(a);

                this.showAlert('任务历史导出成功', 'success');
            } else {
                this.showAlert('导出失败', 'danger');
            }
        } catch (error) {
            console.error('导出任务历史失败:', error);
            this.showAlert('导出任务历史失败: ' + error.message, 'danger');
        }
    }

    async cleanupLogs() {
        if (!confirm('确定要清理30天前的历史记录吗？此操作不可恢复。')) {
            return;
        }

        try {
            const response = await fetch('/api/history/cleanup', {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ days: 30, type: 'all' })
            });

            const result = await response.json();

            if (result.success) {
                this.showAlert(result.message, 'success');
                await this.loadSystemLogs();
                await this.loadStatistics();
            } else {
                this.showAlert('清理失败: ' + result.error, 'danger');
            }
        } catch (error) {
            console.error('清理历史记录失败:', error);
            this.showAlert('清理历史记录失败: ' + error.message, 'danger');
        }
    }

    // 工具函数
    getTaskTypeLabel(type) {
        const labels = {
            'scrape': '抓取任务',
            'validation': '验证任务',
            'health_check': '健康检查'
        };
        return labels[type] || type;
    }

    getStatusClass(status) {
        const classes = {
            'success': 'bg-success',
            'failed': 'bg-danger',
            'running': 'bg-warning',
            'pending': 'bg-secondary'
        };
        return classes[status] || 'bg-secondary';
    }

    getStatusIcon(status) {
        const icons = {
            'success': 'check-circle',
            'failed': 'x-circle',
            'running': 'clock',
            'pending': 'pause-circle'
        };
        return icons[status] || 'question-circle';
    }

    getStatusText(status) {
        const texts = {
            'success': '成功',
            'failed': '失败',
            'running': '运行中',
            'pending': '等待中'
        };
        return texts[status] || status;
    }

    getLogLevelClass(level) {
        const classes = {
            'error': 'bg-danger',
            'warning': 'bg-warning',
            'info': 'bg-info',
            'debug': 'bg-secondary'
        };
        return classes[level] || 'bg-secondary';
    }

    formatDateTime(dateString) {
        const date = new Date(dateString);
        return date.toLocaleString('zh-CN');
    }

    formatDate(dateString) {
        const date = new Date(dateString);
        return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' });
    }

    formatDuration(ms) {
        if (!ms) return '-';

        if (ms < 1000) {
            return ms + 'ms';
        } else if (ms < 60000) {
            return (ms / 1000).toFixed(1) + 's';
        } else {
            return (ms / 60000).toFixed(1) + 'min';
        }
    }

    showTaskLoading(show) {
        const tbody = document.getElementById('taskHistoryTableBody');
        const spinner = tbody.querySelector('.spinner-border');
        if (spinner) {
            spinner.parentElement.style.display = show ? 'block' : 'none';
        }
    }

    showLogsLoading(show) {
        const tbody = document.getElementById('systemLogsTableBody');
        const spinner = tbody.querySelector('.spinner-border');
        if (spinner) {
            spinner.parentElement.style.display = show ? 'block' : 'none';
        }
    }

    showAlert(message, type = 'info') {
        const alertContainer = document.getElementById('alertContainer');
        if (!alertContainer) return;

        const alertId = 'alert-' + Date.now();
        const alertHtml = `
            <div class="alert alert-${type} alert-dismissible fade show" role="alert" id="${alertId}">
                <i class="bi bi-${this.getAlertIcon(type)}"></i>
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;

        alertContainer.insertAdjacentHTML('beforeend', alertHtml);

        // 自动移除提示
        setTimeout(() => {
            const alertElement = document.getElementById(alertId);
            if (alertElement) {
                alertElement.remove();
            }
        }, 5000);
    }

    getAlertIcon(type) {
        const icons = {
            'success': 'check-circle-fill',
            'danger': 'exclamation-triangle-fill',
            'warning': 'exclamation-triangle-fill',
            'info': 'info-circle-fill'
        };
        return icons[type] || 'info-circle-fill';
    }

    goToTaskPage(page) {
        this.currentTaskPage = page;
        this.loadTaskHistory();
    }
}

// 全局函数（供HTML调用）
let historyManager;

async function refreshHistory() {
    if (historyManager) {
        await Promise.all([
            historyManager.loadTaskHistory(),
            historyManager.loadSystemLogs(),
            historyManager.loadStatistics()
        ]);
        historyManager.showAlert('历史数据已刷新', 'info');
    }
}

async function exportTaskHistory() {
    if (historyManager) {
        await historyManager.exportTaskHistory();
    }
}

async function cleanupLogs() {
    if (historyManager) {
        await historyManager.cleanupLogs();
    }
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
    historyManager = new HistoryManager();
});