import React, { useEffect, useState } from 'react';
import { NavLink, Outlet } from 'react-router-dom';
import '../style/Admin.css';

function LogsDashboard() {
  const [logs, setLogs] = useState([]);
  const [stats, setStats] = useState({});

  useEffect(() => {
    fetch('/api/logs')
      .then(res => res.json())
      .then(setLogs)
      .catch(console.error);
    fetch('/api/stats')
      .then(res => res.json())
      .then(setStats)
      .catch(console.error);
  }, []);

  return (
    <div className="admin-container">
      <h2>运行日志 & 性能 Dashboard</h2>
      <nav className="dashboard-nav">
        <NavLink to="transactions" className={({ isActive }) => isActive ? 'active' : ''}>
          事务日志
        </NavLink>
        <NavLink to="performance" className={({ isActive }) => isActive ? 'active' : ''}>
          性能日志
        </NavLink>
      </nav>

      {/* nested routes will render here */}
      <Outlet />
    </div>
  );
}

export default LogsDashboard;