import { Card, Row, Col, Statistic } from 'antd';
import type { MetricsSummary } from '@/types/api';

interface MetricsGridProps {
  metrics: MetricsSummary | null;
  loading: boolean;
}

export function MetricsGrid({ metrics, loading }: MetricsGridProps) {
  if (!metrics) return null;

  const formatUptime = (seconds: number) => {
    const days = Math.floor(seconds / 86400);
    const hours = Math.floor((seconds % 86400) / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    if (days > 0) return `${days}d ${hours}h ${minutes}m`;
    if (hours > 0) return `${hours}h ${minutes}m`;
    return `${minutes}m`;
  };

  return (
    <Card title="Key Metrics" style={{ marginBottom: 16 }}>
      <Row gutter={[16, 16]}>
        <Col xs={24} sm={12} lg={6}>
          <Statistic
            title="API Uptime"
            value={formatUptime(metrics.apiUptime.value)}
            loading={loading}
          />
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Statistic
            title="Email Queue"
            value={metrics.emailQueueSize.value}
            suffix="jobs"
            loading={loading}
          />
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Statistic
            title="Request Rate"
            value={metrics.requestRate.value.toFixed(2)}
            suffix="req/s"
            loading={loading}
          />
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Statistic
            title="Email Error Rate"
            value={metrics.emailErrorRate.value.toFixed(2)}
            suffix="%"
            loading={loading}
          />
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Statistic
            title="Active Sessions"
            value={metrics.activeSessions.value}
            suffix="sessions"
            loading={loading}
          />
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Statistic
            title="Active Canvass"
            value={metrics.activeCanvassSessions.value}
            suffix="sessions"
            loading={loading}
          />
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Statistic
            title="Redis Health"
            value={metrics.redisHealth.value === 1 ? 'Up' : 'Down'}
            loading={loading}
          />
        </Col>
      </Row>
    </Card>
  );
}
