import { Box, LinearProgress, Typography } from '@mui/material'
import type { ScoreFactor } from '../../domain/match'
import { factorLabel, importanceLabel } from './scoreBreakdownConstants'
import { criterionScoreColor, criterionScoreTextColor } from '../../lib/utils'

export function CriterionRow({ factor, maxWeight }: { factor: ScoreFactor; maxWeight: number }) {
  const label = factorLabel(factor.criterion)
  const pct = Math.round(factor.weight * 100)
  const color = criterionScoreColor(factor.score)
  const imp = importanceLabel(factor.weight, maxWeight)

  return (
    <Box sx={{ mb: 1.5 }}>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', mb: 0.4 }}>
        <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.75, flexWrap: 'wrap' }}>
          <Typography variant="caption" sx={{ fontWeight: 600, color: '#1e293b', minWidth: 90 }}>{label}</Typography>
          <Typography variant="caption" sx={{ color: imp.color, fontSize: '0.68rem', fontWeight: 500 }}>
            {imp.label}
          </Typography>
          {factor.estimated && (
            <Typography variant="caption" sx={{ fontSize: '0.62rem', color: '#7c3aed', bgcolor: '#f5f3ff', px: 0.5, borderRadius: 0.5, border: '1px solid #e9d5ff', lineHeight: 1.6 }}>
              Schätzung
            </Typography>
          )}
          <Typography variant="caption" sx={{ color: '#cbd5e1', fontSize: '0.65rem' }}>
            {pct}%
          </Typography>
        </Box>
        <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 1 }}>
          <Typography variant="caption" sx={{ fontWeight: 700, color: criterionScoreTextColor(factor.score) }}>
            {factor.score}/100
          </Typography>
          <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.68rem', minWidth: 44, textAlign: 'right' }}>
            {factor.contribution.toFixed(1)} Pkt
          </Typography>
        </Box>
      </Box>
      <LinearProgress
        variant="determinate"
        value={factor.score}
        color={color}
        sx={{ height: 5, borderRadius: 3, mb: 0.4 }}
      />
      <Typography variant="caption" color="text.secondary" sx={{ display: 'block', lineHeight: 1.3 }}>
        {factor.explanation}
      </Typography>
    </Box>
  )
}
