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([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    fetchSysCost(userId)
      .then(list => {
        const msList = list.map(item => ({
          ...item,
          elapsed_time: item.elapsed_time * 1000,
          cpu_user: item.cpu_user * 1000,
          cpu_system: item.cpu_system * 1000,
          memory_rss: item.memory_rss / (1024 * 1024*8), // convert bytes to MB
          record_time_ts: new Date(item.record_time).getTime()    // add numeric timestamp
        }));
        console.log('Converted data:', msList[0]); // debug first item
        setData(msList);
      })
      .catch(err => console.error('fetchSysCost error:', err))
      .finally(() => setLoading(false));
  }, [userId]);

  if (loading) {
    return (
      <section className="dashboard-performance">
        <div style={{ 
          display: 'flex', 
          justifyContent: 'center', 
          alignItems: 'center', 
          height: '400px',
          flexDirection: 'column'
        }}>
          <div style={{
            border: '4px solid #f3f3f3',
            borderTop: '4px solid #3498db',
            borderRadius: '50%',
            width: '50px',
            height: '50px',
            animation: 'spin 1s linear infinite'
          }}></div>
          <p style={{ marginTop: '20px', color: '#666' }}>加载中...</p>
          <style>{`
            @keyframes spin {
              0% { transform: rotate(0deg); }
              100% { transform: rotate(360deg); }
            }
          `}</style>
        </div>
      </section>
    );
  }

  return (
    <section className="dashboard-performance">
      {/* 响应时间图表 */}
      <div style={{ marginBottom: '30px' }}>
        <h3>响应时间</h3>
        <ResponsiveContainer width="100%" height={300}>
          <LineChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis
              dataKey="record_time_ts"
              type="number"
              domain={['dataMin', 'dataMax']}
              tickFormatter={ts => new Date(ts).toLocaleTimeString()}
            />
            <YAxis domain={[0, 'auto']} label={{ value: '时间 (ms)', angle: -90, position: 'insideLeft' }} />
            <Tooltip formatter={(val) => typeof val === 'number' ? `${val.toFixed(2)} ms` : val} />
            <Legend />
            <Line type="monotone" dataKey="elapsed_time" stroke="#8884d8" name="响应时间 (ms)" />
          </LineChart>
        </ResponsiveContainer>
      </div>

      {/* CPU时间图表 */}
      <div style={{ marginBottom: '30px' }}>
        <h3>CPU 使用时间</h3>
        <ResponsiveContainer width="100%" height={300}>
          <LineChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis
              dataKey="record_time_ts"
              type="number"
              domain={['dataMin', 'dataMax']}
              tickFormatter={ts => new Date(ts).toLocaleTimeString()}
            />
            <YAxis domain={[0, 'auto']} label={{ value: '时间 (ms)', angle: -90, position: 'insideLeft' }} />
            <Tooltip formatter={(val) => typeof val === 'number' ? `${val.toFixed(2)} ms` : val} />
            <Legend />
            <Line type="monotone" dataKey="cpu_user" stroke="#82ca9d" name="CPU 用户时间 (ms)" />
            <Line type="monotone" dataKey="cpu_system" stroke="#ffc658" name="CPU 系统时间 (ms)" />
          </LineChart>
        </ResponsiveContainer>
      </div>

      {/* 内存图表 */}
      <div style={{ marginBottom: '30px' }}>
        <h3>内存使用</h3>
        <ResponsiveContainer width="100%" height={300}>
          <LineChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis
              dataKey="record_time_ts"
              type="number"
              domain={['dataMin', 'dataMax']}
              tickFormatter={ts => new Date(ts).toLocaleTimeString()}
            />
            <YAxis domain={[0, 'auto']} label={{ value: '内存 (MB)', angle: -90, position: 'insideLeft' }} />
            <Tooltip formatter={(val) => typeof val === 'number' ? `${val.toFixed(2)} MB` : val} />
            <Legend />
            <Line type="monotone" dataKey="memory_rss" stroke="#ff7300" name="内存 RSS" />
          </LineChart>
        </ResponsiveContainer>
      </div>
    </section>
  );
}

export default PerformanceLogs;