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

function scoreColor(v: number) {
  if (v >= 0.72) return '#1a7a4a'
  if (v >= 0.48) return '#d97706'
  return '#c0392b'
}

function scoreLabel(v: number) {
  if (v >= 0.82) return 'Sehr gut'
  if (v >= 0.65) return 'Gut'
  if (v >= 0.45) return 'Mittel'
  return 'Schwach'
}

export function SoftFactorBar({
  label,
  value,
  icon,
  tooltip,
}: {
  label: string
  value: number | undefined | null
  icon: React.ReactNode
  tooltip?: string
}) {
  if (value === undefined || value === null) return null
  const color = scoreColor(value)
  const row = (
    <Box sx={{ mb: 1.5 }}>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 0.4 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
          <Box sx={{ color: '#64748b', display: 'flex' }}>{icon}</Box>
          <Typography variant="body2">{label}</Typography>
        </Box>
        <Chip
          label={scoreLabel(value)}
          size="small"
          sx={{ bgcolor: color, color: 'white', fontSize: 10, height: 18, fontWeight: 600 }}
        />
      </Box>
      <LinearProgress
        variant="determinate"
        value={value * 100}
        sx={{ height: 5, borderRadius: 3, bgcolor: '#f1f5f9', '& .MuiLinearProgress-bar': { bgcolor: color } }}
      />
    </Box>
  )
  return tooltip ? <Tooltip title={tooltip} placement="left">{row}</Tooltip> : row
}
