import React, { useState, useEffect } from 'react';
import {
  ResponsiveContainer, LineChart, Line,
  XAxis, YAxis, Tooltip, CartesianGrid, Legend
} from 'recharts';
import { fetchSysCost } from '../api/posts_trm';

function PerformanceLogs({ userId }) {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchSysCost(userId)
      .then(list => setData(list))
      .catch(err => console.error('fetchSysCost error:', err));
  }, [userId]);

  return (
    <section className="dashboard-performance">
      <ResponsiveContainer width="100%" height={400}>
        <LineChart
          data={data}
          margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="record_time" />
          <YAxis
            domain={[0, 'auto']}
            label={{ value: '时间 (s)', angle: -90, position: 'insideLeft' }}
            tickFormatter={val => (val / 1000).toFixed(2)}
          />
          <Tooltip formatter={val => (typeof val === 'number' ? (val/1000).toFixed(2) + 's' : val)} />
          <Legend />
          <Line type="monotone" dataKey="elapsed_time" stroke="#8884d8" name="响应时间" />
          <Line type="monotone" dataKey="cpu_user" stroke="#82ca9d" name="CPU 用户时间" />
          <Line type="monotone" dataKey="cpu_system" stroke="#ffc658" name="CPU 系统时间" />
          <Line type="monotone" dataKey="memory_rss" stroke="#ff7300" name="内存 RSS" />
          {/* 如需更多指标，可再添其他 <Line /> */}
        </LineChart>
      </ResponsiveContainer>
    </section>
  );
}

export default PerformanceLogs;