import { Box, Button, Card, CardContent, Chip, LinearProgress, Typography } from '@mui/material'
import type { DataQualitySummary } from '../../domain/dashboard'

interface DataQualityWidgetProps {
  summary: DataQualitySummary
  onNavigate: () => void
}

function qualityColor(score: number): 'success' | 'warning' | 'error' {
  if (score >= 80) return 'success'
  if (score >= 60) return 'warning'
  return 'error'
}

export function DataQualityWidget({ summary, onNavigate }: DataQualityWidgetProps) {
  const color = qualityColor(summary.avgScore)

  return (
    <Card>
      <CardContent sx={{ p: 2.5 }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
          <Typography variant="h6" sx={{ fontWeight: 600 }}>
            Datenqualität
          </Typography>
          <Button size="small" onClick={onNavigate}>
            Details
          </Button>
        </Box>

        <Box sx={{ mb: 2 }}>
          <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
              Ø Score
            </Typography>
            <Typography variant="body2" sx={{ fontWeight: 600 }}>
              {summary.avgScore}%
            </Typography>
          </Box>
          <LinearProgress
            variant="determinate"
            value={summary.avgScore}
            color={color}
            sx={{ borderRadius: 1, height: 8 }}
          />
        </Box>

        <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
          <Box>
            <Typography variant="h5" sx={{ fontWeight: 700, color: summary.critical > 0 ? 'error.main' : 'text.primary' }}>
              {summary.critical}
            </Typography>
            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
              Kritische Objekte
            </Typography>
          </Box>
          <Box>
            <Typography variant="h5" sx={{ fontWeight: 700 }}>
              {summary.propertiesWithMissingCritical}
            </Typography>
            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
              Fehlende Pflichtfelder
            </Typography>
          </Box>
        </Box>

        {summary.topMissingFields.length > 0 && (
          <Box>
            <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block', mb: 0.5 }}>
              Häufig fehlende Felder:
            </Typography>
            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
              {summary.topMissingFields.map(field => (
                <Chip key={field} label={field} size="small" color="warning" variant="outlined" />
              ))}
            </Box>
          </Box>
        )}
      </CardContent>
    </Card>
  )
}