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 { useOfflineAwareSystemData } from '../hooks/useOfflineAwareServiceStatus';

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

  // 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"
        style={{ 
          background: 'var(--card-bg)',
          border: '1px solid var(--border-color)'
        }}
        headStyle={{ color: 'var(--text-primary)' }}
        bodyStyle={{ color: 'var(--text-primary)' }}
      >
        <div style={{ textAlign: 'center', padding: '50px', color: 'var(--text-primary)' }}>
          Loading metrics...
        </div>
      </Card>
    );
  }

  // Ensure systemStats is an object with fallback values
  const safeSystemStats = systemStats || {
    cpu: 0,
    memory: 0,
    disk: 0,
    network: 0
  };

  return (
    <div style={{ 
      background: 'var(--bg-primary)', 
      color: 'var(--text-primary)',
      padding: '24px'
    }}>
      {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,
          background: 'var(--card-bg)',
          border: '1px solid var(--border-color)'
        }}
        headStyle={{ color: 'var(--text-primary)' }}
        bodyStyle={{ color: 'var(--text-primary)' }}
      >
        <Row gutter={16}>
          <Col span={8}>
            <Card 
              size="small"
              style={{ 
                background: 'var(--card-bg)',
                border: '1px solid var(--border-color)'
              }}
              headStyle={{ color: 'var(--text-primary)' }}
              bodyStyle={{ color: 'var(--text-primary)' }}
            >
              <Statistic title="CPU Usage (24h)" value={safeSystemStats.cpu || 0} suffix="%" />
              <Progress percent={safeSystemStats.cpu || 0} showInfo={false} />
            </Card>
          </Col>
          <Col span={8}>
            <Card 
              size="small"
              style={{ 
                background: 'var(--card-bg)',
                border: '1px solid var(--border-color)'
              }}
              headStyle={{ color: 'var(--text-primary)' }}
              bodyStyle={{ color: 'var(--text-primary)' }}
            >
              <Statistic title="Memory Usage (24h)" value={safeSystemStats.memory || 0} suffix="%" />
              <Progress percent={safeSystemStats.memory || 0} showInfo={false} />
            </Card>
          </Col>
          <Col span={8}>
            <Card 
              size="small"
              style={{ 
                background: 'var(--card-bg)',
                border: '1px solid var(--border-color)'
              }}
              headStyle={{ color: 'var(--text-primary)' }}
              bodyStyle={{ color: 'var(--text-primary)' }}
            >
              <Statistic title="Disk Usage" value={safeSystemStats.disk || 0} suffix="%" />
              <Progress percent={safeSystemStats.disk || 0} showInfo={false} />
            </Card>
          </Col>
        </Row>
      </Card>

      <Row gutter={16}>
        <Col span={12}>
          <Card 
            title="CPU Usage Over Time"
            style={{ 
              background: 'var(--card-bg)',
              border: '1px solid var(--border-color)'
            }}
            headStyle={{ color: 'var(--text-primary)' }}
            bodyStyle={{ color: 'var(--text-primary)' }}
          >
            <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"
            style={{ 
              background: 'var(--card-bg)',
              border: '1px solid var(--border-color)'
            }}
            headStyle={{ color: 'var(--text-primary)' }}
            bodyStyle={{ color: 'var(--text-primary)' }}
          >
            <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"
            style={{ 
              background: 'var(--card-bg)',
              border: '1px solid var(--border-color)'
            }}
            headStyle={{ color: 'var(--text-primary)' }}
            bodyStyle={{ color: 'var(--text-primary)' }}
          >
            <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;