import { Box, LinearProgress, Stack, Typography } from '@mui/material'

interface Props {
  confidenceLevel: number
  dataQualityScore?: number
}

export function ResultConfidenceSummary({ confidenceLevel, dataQualityScore }: Props) {
  const confColor = confidenceLevel >= 0.8 ? '#1a7a4a' : confidenceLevel >= 0.6 ? '#d97706' : '#c0392b'
  return (
    <Stack direction="row" spacing={2.5} sx={{ alignItems: 'center', flexWrap: 'wrap' }}>
      <Typography variant="caption">
        <span style={{ color: '#64748b' }}>Konfidenz </span>
        <strong style={{ color: confColor }}>{Math.round(confidenceLevel * 100)}%</strong>
      </Typography>
      {dataQualityScore !== undefined && (
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          <Typography variant="caption" color="text.secondary">Datenqualität</Typography>
          <Box sx={{ width: 80 }}>
            <LinearProgress
              variant="determinate"
              value={dataQualityScore * 100}
              sx={{ height: 6, borderRadius: 3 }}
            />
          </Box>
          <Typography variant="caption" color="text.secondary">
            {Math.round(dataQualityScore * 100)}%
          </Typography>
        </Box>
      )}
    </Stack>
  )
}
