import { Card } from '@/components/ui/card';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { SystemPerformance } from '@/types/monitor';

interface PerformanceTrendChartProps {
  history: SystemPerformance[];
}

export function PerformanceTrendChart({ history }: PerformanceTrendChartProps) {
  if (history.length <= 1) {
    return null;
  }

  const chartData = history.map((item) => ({
    time: new Date(item.timestamp).toLocaleTimeString('zh-CN', {
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    }),
    CPU: item.cpu.usage.toFixed(1),
    内存: item.memory.usage.toFixed(1),
    磁盘: item.disk.usage.toFixed(1),
  }));

  return (
    <Card className="p-6">
      <h3 className="mb-4">性能趋势</h3>
      <ResponsiveContainer width="100%" height={300}>
        <LineChart data={chartData}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="time" />
          <YAxis />
          <Tooltip />
          <Legend />
          <Line type="monotone" dataKey="CPU" stroke="#3b82f6" strokeWidth={2} />
          <Line type="monotone" dataKey="内存" stroke="#10b981" strokeWidth={2} />
          <Line type="monotone" dataKey="磁盘" stroke="#a855f7" strokeWidth={2} />
        </LineChart>
      </ResponsiveContainer>
    </Card>
  );
}