import { Box, LinearProgress, Typography } from '@mui/material'
import { matchScoreColor } from '../../lib/utils'

const COLOR_MAP: Record<string, string> = {
  success: '#1a7a4a',
  warning: '#d97706',
  error:   '#c0392b',
}

interface ScoreBarProps {
  label: string
  value: number
  weight?: number
  color?: string
  maxWidth?: number
}

export function ScoreBar({ label, value, weight, color, maxWidth = 200 }: ScoreBarProps) {
  const resolved = color ?? COLOR_MAP[matchScoreColor(value)] ?? '#152642'

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}>
      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', maxWidth }}>
        <Typography sx={{ fontSize: '0.75rem', color: 'text.secondary', lineHeight: 1.4 }}>
          {label}
        </Typography>
        <Typography sx={{ fontSize: '0.75rem', fontWeight: 700, color: resolved, fontVariantNumeric: 'tabular-nums', ml: 1 }}>
          {value}
        </Typography>
      </Box>
      <LinearProgress
        variant="determinate"
        value={Math.min(value, 100)}
        sx={{
          height: 5,
          borderRadius: 2,
          maxWidth,
          bgcolor: 'rgba(0,0,0,0.06)',
          '& .MuiLinearProgress-bar': { bgcolor: resolved, borderRadius: 2 },
        }}
      />
      {weight !== undefined && (
        <Typography sx={{ fontSize: '0.68rem', color: 'text.disabled', lineHeight: 1 }}>
          Gewicht: {Math.round(weight * 100)}%
        </Typography>
      )}
    </Box>
  )
}