import { Alert, Box, LinearProgress, Typography } from '@mui/material'
import type { MissingDataItem } from '../../domain/match'

interface Props {
  dataQualityScore: number
  missingData: MissingDataItem[]
  compact?: boolean
}

export function MatchDataQualitySummary({ dataQualityScore, missingData, compact }: Props) {
  const pct = Math.round(dataQualityScore * 100)
  const hasCritical = missingData.some(m => m.importance === 'CRITICAL')
  const criticalItem = missingData.find(m => m.importance === 'CRITICAL')
  const progressColor: 'success' | 'warning' | 'error' = pct >= 80 ? 'success' : pct >= 60 ? 'warning' : 'error'

  if (compact) {
    if (!hasCritical) return null
    return (
      <Alert severity="warning" sx={{ py: 0.25, px: 1, mb: 0.5, '& .MuiAlert-message': { fontSize: 11 } }}>
        Kritische Daten fehlen: {criticalItem?.field}
      </Alert>
    )
  }

  return (
    <Box>
      <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block', mb: 0.75 }}>
        Datenqualität
      </Typography>
      {hasCritical && (
        <Alert severity="warning" sx={{ py: 0.25, px: 1, mb: 0.75, '& .MuiAlert-message': { fontSize: 11 } }}>
          Kritische Daten fehlen: {criticalItem?.field}
        </Alert>
      )}
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
        <Box sx={{ flex: 1 }}>
          <LinearProgress variant="determinate" value={pct} sx={{ height: 6, borderRadius: 3 }} color={progressColor} />
        </Box>
        <Typography variant="caption" color="text.secondary" sx={{ minWidth: 32 }}>
          {pct}%
        </Typography>
      </Box>
      {missingData.length > 0 && (
        <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.5 }}>
          {missingData.length} fehlende{missingData.length > 1 ? '' : 's'} Feld{missingData.length > 1 ? 'er' : ''}
          {criticalItem ? ` · kritisch: ${criticalItem.field}` : ''}
        </Typography>
      )}
    </Box>
  )
}