{{template "layout.html" .}}

{{define "content"}}
<link rel="stylesheet" href="{{asset "/template/default/assets/css/admin-pages.css"}}">

{{template "admin-hero-styles" .}}

<details class="admin-hero">
    <summary class="admin-hero-bar">
        <span class="admin-hero-icon" aria-hidden="true"><i class='bx bx-file-blank'></i></span>
        <span class="admin-hero-intro">{{T "admin_log_page_hint"}}</span>
        <span class="admin-hero-toggle">
            <span class="admin-hero-toggle-label"><i class='bx bx-info-circle' aria-hidden="true"></i> {{T "admin_usage_title"}}</span>
            {{template "admin-hero-help-meta" .}}
        </span>
    </summary>
    <div class="admin-hero-body">
            <ul class="admin-hero-field-grid">
                <li class="admin-hero-field-item"><strong>{{T "admin_log_usage_files"}}</strong>{{T "admin_log_usage_files_desc"}}</li>
                <li class="admin-hero-field-item"><strong>{{T "admin_log_usage_security"}}</strong>{{T "admin_log_usage_security_desc"}}</li>
            </ul>
    </div>
</details>
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <div class="d-flex gap-2 align-items-center flex-wrap">
            <div style="min-width: 250px;">
                <div class="input-group input-group-sm">
                    <span class="input-group-text"><i class='bx bx-file'></i></span>
                    <select class="form-select form-select-sm" id="logFileSelect">
                        {{if .Data.Files}}
                        {{range .Data.Files}}
                        <option value="{{.Name}}" {{if .Active}}selected{{end}} data-size="{{.Size}}" data-time="{{.ModTimeStr}}">
                            {{.Name}} ({{.ModTimeStr}})
                        </option>
                        {{end}}
                        {{else}}
                        <option value="">No log files</option>
                        {{end}}
                    </select>
                </div>
            </div>
            <div class="flex-grow-1" style="min-width: 200px;">
                <div class="input-group input-group-sm">
                    <span class="input-group-text"><i class='bx bx-search'></i></span>
                    <input type="text" class="form-control form-control-sm" id="searchKeyword" placeholder="Search username, IP, action or path">
                </div>
            </div>
            {{if .Data.CurrentFile}}
            <span class="badge bg-secondary">{{.Data.CurrentFile}}</span>
            {{end}}
        </div>
        <div>
            {{if .Data.SuspiciousCount}}
            <span class="badge bg-danger suspicious-badge" id="suspiciousBadge" title="Click to view suspicious logs">
                <i class='bx bx-error-circle'></i> Suspicious: {{.Data.SuspiciousCount}}
            </span>
            {{end}}
        </div>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive" style="max-height: 600px; overflow-y: auto;">
            <table class="table table-sm table-hover mb-0 align-middle" id="adminLogTable">
                <thead>
                    <tr>
                        <th class="col-time-user text-center">{{T "admin_log_col_time"}}<span class="log-th-sep">/</span>{{T "admin_log_col_user"}}</th>
                        <th class="col-ip-block text-start">{{T "admin_log_col_ip"}}<span class="log-th-sep">/</span>{{T "admin_log_col_action"}}<span class="log-th-sep">/</span>{{T "admin_log_col_method"}}</th>
                        <th class="col-path text-start">{{T "admin_log_col_path"}}<span class="log-th-sep">/</span>{{T "admin_log_col_params"}}</th>
                    </tr>
                </thead>
                <tbody id="logTableBody">
                    {{if .Data.Logs}}
                    {{range .Data.Logs}}
                    <tr {{if .IsSuspicious}}class="suspicious-log"{{end}}>
                        <td>
                            <div class="small text-center">
                                <div class="mb-1"><code>{{.Time}}</code></div>
                                <div>
                                    <span class="badge bg-primary">{{.Username}}</span>
                                    {{if .IsSuspicious}}<i class='bx bx-error-circle text-warning ms-1' title="Suspicious log"></i>{{end}}
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="small">
                                <div class="mb-1"><strong>IP:</strong> <code>{{.IP}}</code></div>
                                <div class="mb-1"><strong>Action:</strong> <span class="badge bg-secondary">{{.Act}}</span></div>
                                <div><strong>Method:</strong> {{.Method}}</div>
                            </div>
                        </td>
                        <td>
                            <div class="small text-muted">
                                <div><strong>Path:</strong> {{.Path}}</div>
                                {{if .Query}}
                                <div><strong>Query:</strong> {{.Query}}</div>
                                {{end}}
                                {{if .UserAgent}}
                                <div style="word-wrap: break-word; word-break: break-all; white-space: normal;"><strong>UA:</strong> {{.UserAgent}}</div>
                                {{end}}
                            </div>
                        </td>
                    </tr>
                    {{end}}
                    {{else}}
                    <tr>
                        <td colspan="3" class="text-center text-muted py-4">
                            {{if .Data.CurrentFile}}
                            No entries in current log file
                            {{else}}
                            No log entries
                            {{end}}
                        </td>
                    </tr>
                    {{end}}
                </tbody>
            </table>
        </div>
    </div>
</div>
{{end}}

{{define "scripts"}}
<script>
// 加载日志文件内容
function loadLogFile(fileName) {
    if (!fileName) {
        $('#logTableBody').html('<tr><td colspan="3" class="text-center text-muted py-4">Please select a log file</td></tr>');
        return;
    }
    
    // 显示加载状态
    $('#logTableBody').html('<tr><td colspan="3" class="text-center py-4"><i class="bx bx-loader-alt bx-spin"></i> Loading...</td></tr>');
    
    // 构建URL
    var url = '/admin/admin-log?format=json&file=' + encodeURIComponent(fileName);
    
    // AJAX请求
    $.getJSON(url, function(res) {
        if (res.success && res.data) {
            renderLogTable(res.data.logs);
            // 更新可疑日志数量（如果后端返回了）
            if (res.data.suspicious_count !== undefined) {
                suspiciousCount = res.data.suspicious_count;
                updateSuspiciousBadge();
            }
            // 更新URL（不刷新页面）
            var newUrl = '/admin/admin-log?file=' + encodeURIComponent(fileName);
            window.history.pushState({}, '', newUrl);
        } else {
            $('#logTableBody').html('<tr><td colspan="3" class="text-center text-danger py-4">Load failed: ' + (res.message || 'Unknown error') + '</td></tr>');
        }
    }).fail(function() {
        $('#logTableBody').html('<tr><td colspan="3" class="text-center text-danger py-4">Request failed. Please try again later.</td></tr>');
    });
}

// 存储所有日志记录（用于搜索过滤）
var allLogs = [];
var suspiciousCount = 0;
var showSuspiciousOnly = false;

// 渲染日志表格
function renderLogTable(logs) {
    // 保存所有日志用于搜索
    allLogs = logs || [];
    // 统计可疑日志数量（使用与过滤相同的判断逻辑）
    suspiciousCount = 0;
    allLogs.forEach(function(log) {
        var isSuspicious = log.is_suspicious === true || 
                          log.is_suspicious === "true" || 
                          log.is_suspicious === 1 ||
                          (typeof log.is_suspicious !== 'undefined' && log.is_suspicious);
        if (isSuspicious) {
            suspiciousCount++;
        }
    });
    // 更新可疑日志数量显示
    updateSuspiciousBadge();
    filterLogs();
}

// 更新可疑日志数量显示
function updateSuspiciousBadge() {
    if (suspiciousCount > 0) {
        if ($('#suspiciousBadge').length === 0) {
            $('.card-header > div:last-child').html(
                '<span class="badge bg-danger suspicious-badge" id="suspiciousBadge" title="Click to view suspicious logs">' +
                '<i class="bx bx-error-circle"></i> Suspicious: ' + suspiciousCount +
                '</span>'
            );
            // 重新绑定点击事件
            $('#suspiciousBadge').off('click').on('click', function() {
                filterSuspicious();
            });
        } else {
            $('#suspiciousBadge').html('<i class="bx bx-error-circle"></i> Suspicious: ' + suspiciousCount);
        }
    } else {
        $('#suspiciousBadge').remove();
    }
}

// 过滤日志（响应式搜索）
function filterLogs() {
    var keyword = $('#searchKeyword').val().toLowerCase().trim();
    var filteredLogs = allLogs;
    
    // 先应用可疑日志过滤
    if (showSuspiciousOnly) {
        var beforeCount = filteredLogs.length;
        filteredLogs = filteredLogs.filter(function(log) {
            // 使用宽松判断，支持布尔值、字符串"true"等
            var isSuspicious = log.is_suspicious === true || 
                              log.is_suspicious === "true" || 
                              log.is_suspicious === 1 ||
                              (typeof log.is_suspicious !== 'undefined' && log.is_suspicious);
            return isSuspicious;
        });
        console.log('可疑日志过滤：过滤前', beforeCount, '条，过滤后', filteredLogs.length, '条');
    }
    
    // 再应用关键词搜索
    if (keyword) {
        filteredLogs = filteredLogs.filter(function(log) {
            return (log.username && log.username.toLowerCase().indexOf(keyword) !== -1) ||
                   (log.ip && log.ip.toLowerCase().indexOf(keyword) !== -1) ||
                   (log.act && log.act.toLowerCase().indexOf(keyword) !== -1) ||
                   (log.path && log.path.toLowerCase().indexOf(keyword) !== -1) ||
                   (log.query && log.query.toLowerCase().indexOf(keyword) !== -1) ||
                   (log.method && log.method.toLowerCase().indexOf(keyword) !== -1) ||
                   (log.user_agent && log.user_agent.toLowerCase().indexOf(keyword) !== -1);
        });
    }
    
    var html = '';
    if (filteredLogs && filteredLogs.length > 0) {
        filteredLogs.forEach(function(log) {
            var queryHtml = log.query ? '<div><strong>Query:</strong> ' + log.query + '</div>' : '';
            var uaHtml = log.user_agent ? '<div style="word-wrap: break-word; word-break: break-all; white-space: normal;"><strong>UA:</strong> ' + log.user_agent + '</div>' : '';
            var isSuspicious = log.is_suspicious === true || 
                              log.is_suspicious === "true" || 
                              log.is_suspicious === 1 ||
                              (typeof log.is_suspicious !== 'undefined' && log.is_suspicious);
            var suspiciousClass = isSuspicious ? ' class="suspicious-log"' : '';
            var suspiciousIcon = isSuspicious ? '<i class="bx bx-error-circle text-warning ms-1" title="Suspicious log"></i>' : '';
            
            html += '<tr' + suspiciousClass + '>' +
                '<td><div class="small text-center">' +
                    '<div class="mb-1"><code>' + log.time + '</code></div>' +
                    '<div><span class="badge bg-primary">' + log.username + '</span>' + suspiciousIcon + '</div>' +
                '</div></td>' +
                '<td><div class="small">' +
                    '<div class="mb-1"><strong>IP:</strong> <code>' + log.ip + '</code></div>' +
                    '<div class="mb-1"><strong>Action:</strong> <span class="badge bg-secondary">' + log.act + '</span></div>' +
                    '<div><strong>Method:</strong> ' + log.method + '</div>' +
                '</div></td>' +
                '<td><div class="small text-muted">' +
                    '<div><strong>Path:</strong> ' + log.path + '</div>' +
                    queryHtml +
                    uaHtml +
                '</div></td>' +
            '</tr>';
        });
    } else {
        html = '<tr><td colspan="3" class="text-center text-muted py-4">' + 
               (showSuspiciousOnly ? 'No suspicious log entries found' : (keyword ? 'No matching log entries' : 'No entries in current log file')) + 
               '</td></tr>';
    }
    $('#logTableBody').html(html);
}

// 切换可疑日志过滤
function filterSuspicious() {
    showSuspiciousOnly = !showSuspiciousOnly;
    console.log('切换可疑日志过滤，showSuspiciousOnly:', showSuspiciousOnly, '可疑日志总数:', suspiciousCount);
    if (showSuspiciousOnly) {
        $('#suspiciousBadge').addClass('active').css('opacity', '0.8');
        $('#suspiciousBadge').attr('title', 'Click to show all logs');
    } else {
        $('#suspiciousBadge').removeClass('active').css('opacity', '1');
        $('#suspiciousBadge').attr('title', 'Click to view suspicious logs');
    }
    filterLogs();
}

// 响应式搜索（防抖处理）
var searchTimer = null;
function searchLogs() {
    if (searchTimer) {
        clearTimeout(searchTimer);
    }
    searchTimer = setTimeout(function() {
        filterLogs();
    }, 300); // 300ms 防抖延迟
}

// 下拉框变化事件
$('#logFileSelect').on('change', function() {
    var fileName = $(this).val();
    loadLogFile(fileName);
});

// 搜索框实时搜索
$('#searchKeyword').on('input', function() {
    searchLogs();
});

// 页面加载时，从URL参数中恢复选中的文件
$(document).ready(function() {
    var urlParams = new URLSearchParams(window.location.search);
    var file = urlParams.get('file');
    
    // 使用事件委托绑定可疑日志徽章点击事件（支持动态创建的元素）
    $(document).on('click', '#suspiciousBadge', function(e) {
        e.preventDefault();
        e.stopPropagation();
        filterSuspicious();
        return false;
    });
    
    // 如果页面初始加载时有日志数据，需要重新加载JSON数据以初始化 allLogs
    // 这样过滤功能才能正常工作
    var currentFile = $('#logFileSelect').val();
    if (!currentFile && file) {
        $('#logFileSelect').val(file);
        currentFile = file;
    }
    
    // 如果有选中的文件，加载JSON数据
    if (currentFile) {
        // 延迟一点加载，确保DOM已完全渲染
        setTimeout(function() {
            loadLogFile(currentFile);
        }, 100);
    }
});
</script>
{{end}}