"use client";

import React, { useState, useEffect } from 'react';

// 创建一个全局变量来存储日志
let globalLogs: string[] = [];

// 添加日志的函数
export const addLog = (log: string) => {
    const timestamp = new Date().toLocaleString();
    const formattedLog = `[${timestamp}] ${log}`;
    globalLogs = [...globalLogs, formattedLog];
    // 如果需要，可以将日志保存到localStorage
    localStorage.setItem('systemLogs', JSON.stringify(globalLogs));
};

const SystemLogPage = () => {
    const [logs, setLogs] = useState<string[]>([]);
    // 组件加载时从全局变量或localStorage获取日志
    useEffect(() => {
        // 尝试从localStorage获取日志
        const storedLogs = localStorage.getItem('systemLogs');
        if (storedLogs) {
            setLogs(JSON.parse(storedLogs));
        } else {
            setLogs(globalLogs);
        }
    }, []);
    return (
        <div className="max-w-4xl mx-auto p-6">
            <h1 className="text-2xl font-bold mb-6">系统日志</h1>
            <div className="bg-white p-6 rounded-lg shadow">
                {logs.length === 0 ? (
                    <p className="text-gray-500">暂无系统日志</p>
                ) : (
                    <ul className="space-y-2">
                        {logs.map((log, index) => (
                            <li key={index} className="p-2 border-b border-gray-200">
                                {log}
                            </li>
                        ))}
                    </ul>
                )}
            </div>
        </div>
    );
};

export default SystemLogPage;