import React from 'react';
import { Card, Row, Col, Statistic, Progress, Alert } from 'antd';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from 'recharts';
import { useSystemData } from '../hooks/useServiceStatus';

const SystemMetrics = () => {
  const { systemStats, loading, error } = useSystemData();

  // Mock data for charts (fallback when services are unavailable)
  const cpuData = [
    { time: '00:00', cpu: 25 },
    { time: '04:00', cpu: 30 },
    { time: '08:00', cpu: 45 },
    { time: '12:00', cpu: 60 },
    { time: '16:00', cpu: 55 },
    { time: '20:00', cpu: 40 },
    { time: '24:00', cpu: 35 }
  ];

  const memoryData = [
    { time: '00:00', memory: 2.1 },
    { time: '04:00', memory: 2.3 },
    { time: '08:00', memory: 2.8 },
    { time: '12:00', memory: 3.2 },
    { time: '16:00', memory: 3.0 },
    { time: '20:00', memory: 2.7 },
    { time: '24:00', memory: 2.4 }
  ];

  const networkData = [
    { time: '00:00', in: 5, out: 3 },
    { time: '04:00', in: 8, out: 4 },
    { time: '08:00', in: 15, out: 8 },
    { time: '12:00', in: 20, out: 12 },
    { time: '16:00', in: 18, out: 10 },
    { time: '20:00', in: 12, out: 7 },
    { time: '24:00', in: 6, out: 4 }
  ];

  if (loading) {
    return (
      <Card title="System Performance Metrics">
        <div style={{ textAlign: 'center', padding: '50px' }}>
          Loading metrics...
        </div>
      </Card>
    );
  }

  return (
    <div>
      {error && (
        <Alert
          message="Metrics Unavailable"
          description="Real-time metrics are not available. Showing sample data."
          type="warning"
          style={{ marginBottom: 16 }}
        />
      )}
      
      <Card title="System Performance Metrics" style={{ marginBottom: 16 }}>
        <Row gutter={16}>
          <Col span={8}>
            <Card size="small">
              <Statistic title="CPU Usage (24h)" value={systemStats.cpu || 0} suffix="%" />
              <Progress percent={systemStats.cpu || 0} showInfo={false} />
            </Card>
          </Col>
          <Col span={8}>
            <Card size="small">
              <Statistic title="Memory Usage (24h)" value={systemStats.memory || 0} suffix="%" />
              <Progress percent={systemStats.memory || 0} showInfo={false} />
            </Card>
          </Col>
          <Col span={8}>
            <Card size="small">
              <Statistic title="Disk Usage" value={systemStats.disk || 0} suffix="%" />
              <Progress percent={systemStats.disk || 0} showInfo={false} />
            </Card>
          </Col>
        </Row>
      </Card>

      <Row gutter={16}>
        <Col span={12}>
          <Card title="CPU Usage Over Time">
            <ResponsiveContainer width="100%" height={300}>
              <AreaChart data={cpuData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="time" />
                <YAxis />
                <Tooltip />
                <Area type="monotone" dataKey="cpu" stroke="#1890ff" fill="#1890ff" fillOpacity={0.3} />
              </AreaChart>
            </ResponsiveContainer>
          </Card>
        </Col>
        <Col span={12}>
          <Card title="Memory Usage Over Time">
            <ResponsiveContainer width="100%" height={300}>
              <LineChart data={memoryData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="time" />
                <YAxis />
                <Tooltip />
                <Line type="monotone" dataKey="memory" stroke="#52c41a" strokeWidth={2} />
              </LineChart>
            </ResponsiveContainer>
          </Card>
        </Col>
      </Row>

      <Row gutter={16} style={{ marginTop: 16 }}>
        <Col span={24}>
          <Card title="Network Traffic">
            <ResponsiveContainer width="100%" height={300}>
              <AreaChart data={networkData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="time" />
                <YAxis />
                <Tooltip />
                <Area type="monotone" dataKey="in" stackId="1" stroke="#1890ff" fill="#1890ff" fillOpacity={0.6} />
                <Area type="monotone" dataKey="out" stackId="1" stroke="#52c41a" fill="#52c41a" fillOpacity={0.6} />
              </AreaChart>
            </ResponsiveContainer>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default SystemMetrics;