// Filename: frontend/js/pages/logs/logList.js

class LogList {
    constructor(container) {
        this.container = container; 
        if (!this.container) {
            console.error("LogList: container element (tbody) not found.");
        }
    }

    renderLoading() {
        if (!this.container) return;
        this.container.innerHTML = `<tr><td colspan="9" class="p-8 text-center text-muted-foreground"><i class="fas fa-spinner fa-spin mr-2"></i> 加载日志中...</td></tr>`;
    }

    render(logs) {
        if (!this.container) return;

        if (!logs || logs.length === 0) {
            this.container.innerHTML = `<tr><td colspan="9" class="p-8 text-center text-muted-foreground">没有找到相关的日志记录。</td></tr>`;
            return;
        }

        const logsHtml = logs.map(log => this.createLogRowHtml(log)).join('');
        this.container.innerHTML = logsHtml;
    }

    createLogRowHtml(log) {
        // [后端协作点] 假设后端未来会提供 GroupDisplayName 和 APIKeyName
        const groupName = log.GroupDisplayName || (log.GroupID ? `Group #${log.GroupID}` : 'N/A');
        const apiKeyName = log.APIKeyName || (log.KeyID ? `Key #${log.KeyID}` : 'N/A');

        const errorTag = log.IsSuccess 
            ? `<span class="inline-flex items-center rounded-md bg-green-500/10 px-2 py-1 text-xs font-medium text-green-600">成功</span>`
            : `<span class="inline-flex items-center rounded-md bg-destructive/10 px-2 py-1 text-xs font-medium text-destructive">${log.ErrorCode || '失败'}</span>`;

        // 使用 toLocaleString 格式化时间，更符合用户本地习惯
        const requestTime = new Date(log.RequestTime).toLocaleString();

        return `
            <tr class="border-b border-b-border transition-colors hover:bg-muted/80" data-log-id="${log.ID}">
                <td class="p-4 align-middle"><input type="checkbox" class="h-4 w-4 rounded border-zinc-300 text-blue-600 focus:ring-blue-500"></td>
                <td class="p-4 align-middle font-mono text-muted-foreground">#${log.ID}</td>
                <td class="p-4 align-middle font-medium font-mono">${apiKeyName}</td>
                <td class="p-4 align-middle">${groupName}</td>
                <td class="p-4 align-middle text-foreground">${log.ErrorMessage || (log.IsSuccess ? '' : '未知错误')}</td>
                <td class="p-4 align-middle">${errorTag}</td>
                <td class="p-4 align-middle font-mono">${log.ModelName}</td>
                <td class="p-4 align-middle text-muted-foreground text-xs">${requestTime}</td>
                <td class="p-4 align-middle">
                    <button class="btn btn-ghost btn-icon btn-sm" aria-label="查看详情">
                        <i class="fas fa-ellipsis-h h-4 w-4"></i>
                    </button>
                </td>
            </tr>
        `;
    }
}

export default LogList;