import { Card, CardContent, Typography, Box, Grid, Chip } from '@mui/material'
import { CheckCircle, Error, Warning } from '@mui/icons-material'
import StatusIndicator from './StatusIndicator'

interface SystemHealthProps {
  websocketStatus: 'connected' | 'disconnected' | 'error'
  exchangeStatuses?: Array<{ name: string; status: 'connected' | 'disconnected' | 'error' }>
  databaseStatus?: 'connected' | 'disconnected' | 'error'
}

export default function SystemHealth({
  websocketStatus,
  exchangeStatuses = [],
  databaseStatus = 'connected',
}: SystemHealthProps) {
  const getOverallHealth = () => {
    const statuses = [
      websocketStatus,
      databaseStatus,
      ...exchangeStatuses.map((e) => e.status),
    ]

    if (statuses.some((s) => s === 'error')) return 'error'
    if (statuses.some((s) => s === 'disconnected')) return 'warning'
    return 'connected'
  }

  const overallHealth = getOverallHealth()

  return (
    <Card>
      <CardContent>
        <Typography variant="h6" gutterBottom>
          System Health
        </Typography>
        <Grid container spacing={2} sx={{ mt: 1 }}>
          <Grid item xs={12} md={4}>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
              <Typography variant="body2" color="text.secondary">
                Overall Status:
              </Typography>
              <StatusIndicator
                status={overallHealth}
                label={overallHealth === 'connected' ? 'Healthy' : overallHealth === 'error' ? 'Error' : 'Warning'}
              />
            </Box>
          </Grid>
          <Grid item xs={12} md={4}>
            <StatusIndicator
              status={websocketStatus}
              label="WebSocket"
              tooltip="Real-time data connection status"
            />
          </Grid>
          <Grid item xs={12} md={4}>
            <StatusIndicator
              status={databaseStatus}
              label="Database"
              tooltip="Database connection status"
            />
          </Grid>
          {exchangeStatuses.length > 0 && (
            <Grid item xs={12}>
              <Typography variant="body2" color="text.secondary" gutterBottom>
                Exchanges:
              </Typography>
              <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
                {exchangeStatuses.map((exchange) => (
                  <StatusIndicator
                    key={exchange.name}
                    status={exchange.status}
                    label={exchange.name}
                  />
                ))}
              </Box>
            </Grid>
          )}
        </Grid>
      </CardContent>
    </Card>
  )
}

